Что такое `useState`?

В чём суть

useState — хук для локального состояния в функциональном компоненте. Возвращает пару: текущее значение и функцию обновления (setter).

const [value, setValue] = useState(initialValue);

// Ленивая инициализация — если initial дорогой
const [data, setData] = useState(() => expensiveCompute());

Поведение, которое проверяют на практике:

• после setValue React планирует рендер с новым значением;
• можно передать готовое значение или updater-функцию setValue(prev => prev + 1) — предпочтительно, если опираетесь на предыдущее;
• объекты и массивы обновляйте иммутабельно;
• в обработчиках событий обновления батчатся; в React 18 батчинг шире (в том числе во многих асинхронных сценариях);
• если передать то же примитивное значение (Object.is), рендер часто будет пропущен.

function Toggle() {
  const [on, setOn] = useState(false);
  return (
    <button onClick={() => setOn(v => !v)}>
      {on ? 'Вкл' : 'Выкл'}
    </button>
  );
}

Советы по дизайну state: не дублируйте то, что выводится из props; дробите state по независимым кускам или наоборот объединяйте, если поля всегда меняются вместе; для сложной логики переходов рассмотрите useReducer.

Итог

useState даёт значение + setter; обновление иммутабельно и приводит к рендеру.