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

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: IT-One, DigitalSail

Стек: React

> Пример ответа

При клике на кнопку в React происходит следующее:

Вызывается обработчик события (onClick), который обычно вызывает функцию setState (или setter из useState).
React помещает обновление состояния в очередь и помечает компонент как "грязный" (dirty) для последующего ререндера.
React не обновляет DOM немедленно - он планирует ререндер асинхронно (в React 18 с автоматическим батчингом, в более старых версиях - синхронно в обработчиках событий).
При ререндере React создает новое виртуальное DOM-дерево, сравнивает его с предыдущим (diffing) и вычисляет минимальные изменения.
Затем React применяет эти изменения к реальному DOM (commit phase), обновляя только те узлы, которые действительно изменились.

Важно: состояние не обновляется синхронно после вызова setState - значение становится доступным только при следующем рендере. Для доступа к актуальному состоянию после обновления используйте useEffect или колбэк в setState (для классовых компонентов).