> Как работает хук useState в React и на что он влияет (React)

Короткий ответ

useState - это хук React, который добавляет состояние в функциональный компонент. Он возвращает массив из двух элементов: текущее значение состояния и функцию для его обновления. При вызове функции-сеттера React планирует ререндер компонента, сравнивая новое значение с предыдущим через Object.is. useState влияет на жизненный цикл компонента, вызывая повторное выполнение тела компонента и обновление DOM.

Подробное объяснение

useState - фундаментальный механизм управления состоянием в React. При первом рендере компонента useState инициализирует состояние переданным начальным значением или результатом функции-инициализатора (lazy initializer). React хранит состояние в виртуальном дереве (fiber tree) по порядку вызова хуков - это объясняет правило неизменности порядка хуков.

При вызове сеттера React не обновляет состояние мгновенно. Вместо этого он помечает компонент как требующий обновления и добавляет задачу в очередь. В следующем цикле рендеринга React сравнивает новое состояние с текущим через Object.is. Если значения равны, React пропускает ререндер дочерних компонентов (bailout). Если разные - запускает ререндер.

Важный нюанс: сеттер принимает как новое значение, так и функцию-апдейтер prevState => newState. Функциональная форма гарантирует доступ к актуальному состоянию при множественных вызовах в одном синхронном контексте (например, в цикле или обработчике события).

useState влияет на:

• Производительность: каждый вызов сеттера может вызвать ререндер всего поддерева компонента
• Архитектуру: состояние поднимается до ближайшего общего предка или выносится в глобальный стейт-менеджмент при усложнении
• Тестируемость: компоненты с useState требуют интеграционных тестов, а не чистых unit-тестов

На практике

На уровне senior важно понимать trade-off между useState и useReducer. useState подходит для простых независимых значений. Когда состояние - сложный объект с несколькими полями, которые обновляются вместе, или логика обновления зависит от предыдущего состояния сложным образом, useReducer даёт более предсказуемый код.

Паттерны, которые стоит знать:

• Lazy initialization: передача функции в useState(() => expensiveComputation()) для тяжёлых начальных вычислений
• Functional update: использование setCount(prev => prev + 1) вместо setCount(count + 1) для избежания stale closure
• Batching: в React 18 все обновления состояния внутри одного обработчика события или эффекта батчатся - происходит один ререндер

На практике часто встречается ошибка, когда разработчики пытаются читать состояние сразу после вызова сеттера - это не работает, так как обновление асинхронно.

Пример кода

JSX
import { useState } from 'react';

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

  const handleClick = () => {
    // Правильно: функциональное обновление
    setCount(prev => prev + 1);
    setCount(prev => prev + 1); // count увеличится на 2
  };

  // Неправильно: stale closure
  // setCount(count + 1); // если вызвать дважды, count увеличится только на 1

  return <button onClick={handleClick}>{count}</button>;
}

// Lazy initialization
function ExpensiveComponent() {
  const [data, setData] = useState(() => {
    const initial = computeExpensiveValue();
    return initial;
  });
  // ...
}

Как отвечать на собеседовании

Начни с краткого определения, затем углубляйся в механику: как React хранит состояние, как работает сравнение, как происходит батчинг. Покажи понимание edge cases: stale closure, lazy initialization, функциональное обновление. Сравни с useReducer и объясни, когда что выбирать. Упомяни, что useState - это синтаксический сахар над useReducer. Если спросят про производительность, расскажи про bailout при одинаковых значениях.

Что проверяет интервьюер

• Понимание внутреннего механизма работы хуков (fiber tree, порядок вызова)
• Знание нюансов: stale closure, функциональное обновление, lazy initialization
• Умение выбирать между useState и useReducer
• Понимание батчинга и асинхронности обновлений
• Способность объяснить, как React оптимизирует ререндеры

Типичные ошибки

• Попытка читать состояние сразу после сеттера - console.log(count) после setCount(5) покажет старое значение
• Использование setState с объектом без spread - setState({ ...prev, key: value }) вместо мутации
• Игнорирование функционального обновления при множественных вызовах - setCount(count + 1) дважды не увеличит на 2
• Передача сложного выражения в useState без lazy initializer - useState(computeExpensive()) выполняется при каждом рендере
• Хранение в useState данных, которые можно вычислить из других состояний или пропсов - это приводит к рассинхронизации