Как useLayoutEffect влияет на отображение UI

useLayoutEffect предназначен для ситуаций, когда важно повлиять на DOM до того, как браузер отрисует кадр.

Как работает useLayoutEffect

Жизненный цикл выглядит следующим образом:

• React обновляет DOM

• выполняется useLayoutEffect

• браузер рисует экран

За счёт этого пользователь не видит промежуточных состояний интерфейса.

В каких случаях он нужен

1. Измерение размеров элементов

   • getBoundingClientRect

   • вычисление позиций

2. Синхронные правки layout

   • корректировка скролла

   • устранение скачков интерфейса

Пример:

useLayoutEffect(() => {
  const height = ref.current.offsetHeight
  // использование размера до отрисовки
}, [])

Отличие от useEffect

• useEffect не блокирует рендер

• useLayoutEffect выполняется синхронно

• неправильное использование может ухудшить производительность

Когда не стоит использовать

• для запросов к API

• для логики, не связанной с DOM

• по умолчанию, «на всякий случай»

Вывод

useLayoutEffect нужен для точечного контроля отображения UI. Его используют только тогда, когда useEffect приводит к визуальным артефактам.