> Что происходит при клике на кнопку, вызывающую изменение состояния в React? (React)

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

При клике на кнопку React вызывает обработчик события, который запускает setState или dispatch. React помечает компонент как "грязный" и планирует ререндер. Вместо немедленного обновления DOM, React собирает все изменения в очередь и выполняет их в рамках одного синхронного batch update. После этого запускается reconciliation: вычисляется новый виртуальный DOM, сравнивается с предыдущим (diffing), и применяются минимальные изменения к реальному DOM. Все это происходит синхронно в одном event loop tick до 18 версии, в React 18+ - автоматический batching в setTimeout, промисах и колбэках.

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

Когда пользователь кликает на кнопку, браузер генерирует событие click. React перехватывает его через синтетическое событие (SyntheticEvent) и вызывает обработчик, переданный в onClick. Внутри обработчика выполняется setState или dispatch (в случае useReducer).

React не обновляет состояние мгновенно - он помещает обновление в очередь (pending state queue). Затем React проверяет, находится ли он в "batch update" контексте (например, внутри обработчика события React). Если да, то все setState группируются. После завершения обработчика React запускает re-render: вызывает функцию компонента (или классовый render), получает новый React-элемент (виртуальный DOM), сравнивает его с предыдущим через Fiber reconciliation algorithm.

Fiber позволяет разбивать работу на единицы и приоритизировать их, но в случае синхронного клика весь процесс выполняется за один проход. React находит различия (diff) и генерирует мутации для реального DOM (commit phase). Только после commit фазы пользователь видит изменения на экране.

В React 18 появился автоматический batching: setState внутри setTimeout, fetch, Promise.resolve, addEventListener тоже батчатся, что раньше приводило к отдельным ререндерам.

На практике

• Избегайте множественных setState в одном обработчике - они и так батчатся, но каждый setState с функцией-апдейтером предпочтительнее для атомарности.
• Если нужно прочитать актуальное состояние сразу после setState, используйте useEffect с зависимостью или передавайте функцию-апдейтер (prev => prev + 1).
• Для асинхронных операций (fetch, setTimeout) в React 17 и ниже - оборачивайте setState в unstable_batchedUpdates, если хотите избежать лишних ререндеров. В React 18 это не нужно.
• Не вызывайте setState в рендере (кроме условного вызова с guard) - это приведет к бесконечному циклу.
• Для сложных форм используйте useReducer или библиотеки вроде React Hook Form - они оптимизируют количество ререндеров.

Пример кода

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

  const handleClick = () => {
    // React 18: все три setState будут в одном batch
    setCount(c => c + 1);
    setCount(c => c + 1);
    setCount(c => c + 1);
    // count увеличится на 3 за один ререндер
  };

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

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

Начните с ключевого: React не обновляет DOM мгновенно, а использует batching и reconciliation. Упомяните Fiber и разницу между render и commit фазами. Для senior-уровня важно показать понимание внутренних механизмов: очередь обновлений, приоритеты, синхронность/асинхронность. Сравните React 17 и 18 в контексте batching. Если спросят про Concurrent Mode - объясните, что при клике React может прервать рендер, если появится более приоритетная задача (например, ввод текста). Не углубляйтесь в детали реализации Fiber, если не спросят - достаточно упомянуть, что это позволяет прерывать работу.

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

• Понимание жизненного цикла React-компонента и механизма обновлений.
• Знание разницы между виртуальным и реальным DOM.
• Осведомленность о batching и его эволюции (React 17 vs 18).
• Умение объяснить, почему setState асинхронен на уровне восприятия, но синхронен в batch.
• Понимание Fiber и reconciliation (для senior - обязательно).
• Способность предвидеть проблемы производительности при неправильном использовании setState.

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

• Утверждение, что setState вызывает ререндер мгновенно и синхронно.
• Забывают про batching и думают, что каждый setState - отдельный ререндер.
• Путают setState с forceUpdate или игнорируют функциональную форму setState.
• Не знают про автоматический batching в React 18.
• Думают, что React обновляет реальный DOM сразу после setState, а не после diffing.
• Считают, что setState в useEffect или setTimeout всегда вызывает отдельный ререндер (в React 18 это не так).