От setState до экрана
Вопрос
Расскажи по шагам, что происходит после вызова setState до того, как пользователь увидит изменение.
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
Обновление ставится в очередь, несколько вызовов в одном событии батчатся
Render phase: React вызывает компонент и его детей, получает новое дерево
Сравнение с прошлым деревом по типу, позиции и key
Commit phase: изменения применяются к DOM, обновляются ref
Затем `useLayoutEffect` синхронно, браузер рисует, после этого `useEffect`
Если значение не изменилось по `Object.is`, React пропускает обновление
Что могут спросить следом
- Почему render phase можно прервать, а commit нет?
- Какие дети отрендерятся и как это ограничить?
- Чем отличается момент запуска
useLayoutEffectиuseEffect?
Разбор
Вызов setState не меняет переменную сразу, он ставит обновление в очередь. Все обновления в одном обработчике React 18+ объединяет в один рендер. Затем начинается render phase: React вызывает компонент, у которого изменился state, и по умолчанию всех его потомков. Получив новое дерево элементов, он сравнивает его с предыдущим: тот же тип на той же позиции обновляется, другой тип пересоздаётся, списки сопоставляются по key. Эта фаза чистая и может быть прервана, например более срочным обновлением. Потом commit: React одним проходом вносит изменения в DOM, проставляет ref, синхронно запускает useLayoutEffect, браузер отрисовывает кадр, и после этого выполняются useEffect. Если новое значение state совпадает со старым по Object.is, React обновление пропускает.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.