Чистота фазы render и подшаги фазы commit

Компонент, записывающий что-то в глобальный счётчик при каждом рендере, прекрасно работает в React 17. В React 18 в StrictMode этот счётчик удваивается. Разница — не баг: React сообщает вам, что фаза render может переиграть вашу функцию, и побочные эффекты там выполнятся более одного раза.

Фаза render: прерываема, должна быть чистой. Фаза render обходит дерево workInProgress, вызывает каждую функцию-компонент и выполняет реконсиляцию. Так как React 18 может приостановить эту фазу, возобновить или выбросить и начать заново, ваша функция-компонент может быть вызвана более одного раза для одного видимого обновления — и приостановленный рендер может висеть незавершённым, пока пользователь взаимодействует. Именно поэтому render должен быть чистым: никаких побочных эффектов, мутаций внешних переменных, чтения или записи DOM, сетевых запросов в теле функции. Побочный эффект в render выполняется непредсказуемое число раз. StrictMode React намеренно двойной-вызывает компоненты в режиме разработки именно для раннего обнаружения нечистых рендеров. Правильное место для побочных эффектов — useEffect (после commit) или обработчик события (вне render).

Фаза commit: атомарна, синхронна, три подшага. Как только дерево workInProgress полностью построено, commit выполняется одним непрерываемым блоком. Три подшага:

1. Before-mutation: React читает любое состояние до мутации. Здесь происходит getSnapshotBeforeUpdate и снимок очистки для useLayoutEffect.
2. Mutation: React применяет каждое изменение DOM — вставки, удаления, обновления атрибутов, изменения текста — на основе флагов эффектов, проставленных на fiber-ах во время render.
3. Layout: React запускает коллбэки useLayoutEffect и обновляет рефы синхронно, до того как браузер рисует.

Так как commit синхронен и непрерываем, огромное дерево с тысячами мутаций производит одну длинную задачу — commit — это часть React, которую нельзя нарезать на слайсы, поэтому способ держать его коротким — держать число мутаций небольшим (виртуализация, мемоизация).

useLayoutEffect vs useEffect. Два хука отличаются тем, когда они выполняются относительно отрисовки. useLayoutEffect запускается синхронно на шаге layout фазы commit — после мутации DOM, до отрисовки браузером. useEffect («пассивный эффект») запускается асинхронно после отрисовки, в более поздней задаче. Правило: всё, что должно выполниться до того, как пользователь увидит кадр, — измерение только что обновлённого DOM-узла и корректировка вёрстки для предотвращения видимой вспышки — относится к useLayoutEffect. Всё остальное — запросы данных, подписки, логирование — относится к useEffect, потому что делать это в useLayoutEffect задерживает отрисовку. Злоупотребление useLayoutEffect — реальная регрессия INP: каждый layout-эффект — синхронная работа фазы commit, откладывающая отрисовку.