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

Что возвращает useState?

Хуки

useState возвращает массив из двух элементов: текущее значение состояния и функцию-сеттер для его обновления.

Форма возврата

const [count, setCount] = useState(0);
//     ↑ значение  ↑ сеттер

// без деструктуризации это выглядит так:
const stateArray = useState(0);
const count = stateArray[0];
const setCount = stateArray[1];

Почему именно массив, а не объект

Деструктуризация массива позволяет назвать элементы как угодно: [count, setCount], [user, setUser] — без переименований, которые понадобились бы с объектом ({ state: user, setState: setUser }). Несколько useState в одном компоненте выглядят чисто.

Свойства возвращаемых значений

Значение — актуальный state на момент этого рендера. Внутри одного рендера это константа-«снимок»: после вызова сеттера переменная не изменится, новое значение придёт со следующим вызовом компонента.

Сеттер — стабильная функция (одна и та же ссылка все рендеры — можно не указывать в зависимостях хуков). Принимает:

  • новое значение: setCount(5);
  • или функцию обновления: setCount((prev) => prev + 1).

Вызов планирует ререндер (если значение изменилось по Object.is); обновления батчатся.

Первый рендер против последующих

При монтировании useState возвращает начальное значение (аргумент или результат ленивого инициализатора useState(() => ...)); при последующих рендерах аргумент игнорируется — возвращается сохранённое состояние.

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

Возвращает пару [значение, сеттер]: значение — снимок состояния текущего рендера, сеттер — стабильная функция, принимающая значение или функцию (prev) => next и планирующая ререндер. Массив выбран ради свободного именования при деструктуризации.

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