Когда срабатывает useLayoutEffect по сравнению с useEffect

useLayoutEffect срабатывает синхронно сразу после того, как React применил изменения DOM, но до того, как браузер успел отрисовать эти изменения. С точки зрения браузера, эффект компоновки и изменения DOM входят в один непрерывный синхронный блок работы.

useEffect срабатывает асинхронно после завершения отрисовки браузером. Пользователь сначала видит обновлённый интерфейс, а затем выполняется эффект. Благодаря этому useEffect меньше мешает производительности рендеринга, но любые видимые изменения, вызванные эффектом, приводят ко второму циклу отрисовки.

Вы можете проверить разницу во времени, записав временные метки в обоих эффектах: добавьте console.log('layout', Date.now()) в useLayoutEffect и console.log('passive', Date.now()) в useEffect. В консоли временная метка эффекта компоновки всегда будет раньше временной метки пассивного эффекта, подтверждая порядок выполнения.

Если useEffect обновляет состояние, влияющее на визуальный результат, пользователь видит две отрисовки: исходную с устаревшим состоянием, а затем исправленную после срабатывания эффекта. Это проявляется как заметная вспышка или перерасчёт компоновки. useLayoutEffect предотвращает это, поскольку его обновления состояния фиксируются до того, как браузер что-либо отрисует.

Если вызвать setState внутри useLayoutEffect, React немедленно запускает ещё один цикл рендеринга и фиксации до отрисовки. Браузер отрисовывает только итоговый результат — пользователь никогда не видит промежуточное состояние. Это основной случай использования useLayoutEffect: измерить DOM, вычислить новое значение, установить состояние и гарантировать одну чистую отрисовку.

Поскольку useLayoutEffect выполняется синхронно до отрисовки и может запускать дополнительные рендеринги, чрезмерное использование способно ухудшить производительность. Если синхронная работа слишком тяжёлая, она блокирует отрисовку браузера и вызывает заметные рывки. Используйте этот эффект только для предотвращения визуальной вспышки, а во всех остальных случаях применяйте useEffect.

В строгом режиме React, только в режиме разработки, и useLayoutEffect, и useEffect вызываются дважды при каждом монтировании. Последовательность такова: монтирование, очистка, повторное монтирование. Это помогает обнаружить эффекты, которые не очищаются должным образом. В сборках для рабочей среды двойной вызов не происходит.

По умолчанию всегда следует выбирать useEffect. Переключайтесь на useLayoutEffect только тогда, когда можете наблюдать и воспроизвести визуальное мерцание или проблему с неправильной компоновкой. Чрезмерное использование useLayoutEffect без необходимости блокирует конвейер отрисовки браузера и может ухудшить воспринимаемую производительность.

useLayoutEffect не может выполняться на сервере, поскольку в серверной среде нет DOM и цикла отрисовки браузера. Если использовать его в компоненте, который отображается на сервере, React выдаст предупреждение. Исправление состоит в том, чтобы условно пропустить эффект: проверьте typeof window !== 'undefined' или замените его на useEffect для кода, совместимого с SSR.

Спросите себя: «Изменяет ли этот эффект что-либо, что пользователь увидит уже при самой первой отрисовке?» Если да, используйте useLayoutEffect, чтобы предотвратить вспышку. Если нет — для получения данных, подписок, аналитики, журналирования и большинства других побочных эффектов — используйте useEffect. Этот принцип выбора охватывает большинство практических случаев.

useLayoutEffect выполняется в том же синхронном блоке, что и изменения DOM. Пока работает useLayoutEffect, React не может обрабатывать другую работу, например реагировать на действия пользователя. Поэтому эффект должен быть быстрым и целенаправленным. Длительный синхронный код в useLayoutEffect напрямую задерживает отображение содержимого браузером на экране.

В какой именно момент useLayoutEffect срабатывает относительно изменений DOM и отрисовки браузером?

useLayoutEffect выполняется синхронно до отрисовки браузером, поэтому подходит для измерения DOM и визуальных исправлений. useEffect срабатывает после отрисовки и является правильным выбором для получения данных, подписок и большинства побочных эффектов. По умолчанию выбирайте useEffect и переключайтесь на useLayoutEffect только при подтверждённом визуальном мерцании. Не используйте его в SSR без защитных проверок.