PassFront
  1. PassFront
  2. База знаний
  3. Хуки

Что такое useState?

Хуки

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

Сигнатура

const [count, setCount] = useState(0);
const [user, setUser] = useState(null);

Возвращает массив из двух элементов (деструктурируется): текущее значение и сеттер.

Механики

Обновление через функцию — когда новое значение зависит от предыдущего:

setCount((prev) => prev + 1); // безопасно при нескольких обновлениях подряд

Ленивая инициализация — если начальное значение дорого вычислять:

const [data, setData] = useState(() => parseHugeJson(raw)); // вызовется один раз

Иммутабельность — объекты и массивы не мутируют, а создают заново:

setUser({ ...user, name: 'Аня' });
setItems([...items, newItem]);

Если передать в сеттер то же самое значение (по Object.is), React пропустит перерендер.

Нюансы

  • Обновления асинхронны и батчатся: после вызова setCount(1) переменная count в текущем замыкании не меняется — новое значение придёт со следующим рендером.
  • React хранит state вне компонента и сопоставляет его по порядку вызова хуков — поэтому хуки нельзя вызывать в условиях и циклах.
  • Много связанных полей — повод для useReducer или объединения в объект.

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

useState возвращает пару «значение + сеттер»; вызов сеттера планирует перерендер. Обновления батчатся и применяются асинхронно; для зависимости от предыдущего значения — функциональная форма сеттера; объекты обновляются иммутабельно; начальное значение можно задать лениво функцией.

Другие вопросы раздела