В чём разница между обычной переменной и хуком useState в компоненте?

Обычная переменная не сохраняется между рендерами и её изменение не вызывает перерисовку, а useState хранит значение между рендерами и обновление состояния запускает новый рендер.

function Counter() {
  let plain = 0;
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => { plain += 1; setCount(count + 1); }}>
      plain: {plain}, state: {count}
    </button>
  );
}

plain при каждом рендере снова равна 0, а count растёт.

Почему так

• Функция компонента вызывается заново на каждый рендер, локальные переменные создаются заново.
• React хранит состояние отдельно, привязывая его к компоненту и порядку хуков.
• setCount ставит обновление в очередь и планирует рендер.

Что использовать

• Значение влияет на отображение → useState.
• Значение нужно хранить между рендерами, но перерисовка не нужна (таймеры, предыдущее значение, ссылка на DOM) → useRef.
• Вычисляется из пропсов или состояния → считать прямо в рендере, не хранить.

Нюанс

Изменение объектов и массивов в состоянии «на месте» не вызовет рендер: нужно создавать новое значение (setItems([...items, x])).

Коротко для собеседования

Локальная переменная сбрасывается каждым рендером и не обновляет UI, а useState сохраняет значение и перерисовывает компонент при setState. Данные без перерисовки хранят в useRef.