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

React-компонент — это функция, которая вызывается заново при каждом рендере. Любая обычная переменная, объявленная внутри, создаётся с нуля при каждом вызове и не сохраняет предыдущее значение. Хук useState решает эту проблему: React хранит состояние вне функции компонента и возвращает его при каждом рендере.

Как это работает

При первом рендере useState инициализирует значение. React запоминает его в связке с позицией хука в компоненте. При последующих рендерах возвращается уже сохранённое значение, а не начальное.

function Counter() {
  let count = 0; // сбрасывается каждый рендер
  const [state, setState] = useState(0); // сохраняется

  return (
    <button onClick={() => {
      count++;        // не вызовет рендер и потеряется
      setState(state + 1); // обновит UI
    }}>
      {state}
    </button>
  );
}

Ключевые отличия

• Обычная переменная не сохраняется между рендерами, useState — сохраняется.
• Изменение обычной переменной не запускает повторный рендер, сеттер useState — запускает.
• useState привязан к порядку вызова хуков, поэтому его нельзя вызывать условно.
• Значение из useState доступно в замыканиях текущего рендера и обновляется асинхронно.

Итог: useState применяют для любых данных, которые должны сохраняться между рендерами и влиять на отображение, а обычные переменные подходят только для вычислений внутри одного рендера.