> Откуда useLayoutEffect берет информацию о DOM-элементе до рендера в React (React)

Короткий ответ

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

Подробное объяснение

useLayoutEffect - это хук, который выполняется синхронно после всех мутаций DOM, но до того, как браузер произведет отрисовку (paint). Его жизненный цикл в React выглядит так:

1. React вычисляет изменения виртуального DOM (фаза render)
2. React применяет изменения к реальному DOM (фаза commit)
3. Выполняется useLayoutEffect - в этот момент DOM уже обновлен, но браузер еще не отрисовал кадр
4. Браузер производит отрисовку (paint)
5. Выполняется useEffect (асинхронно, после отрисовки)

Ключевое отличие от useEffect: useLayoutEffect блокирует отрисовку браузера до своего завершения. Это дает возможность измерить DOM-элементы (offsetHeight, scrollWidth, getBoundingClientRect) и синхронно применить изменения макета без видимых скачков.

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

На практике

useLayoutEffect используется в сценариях, где критично избежать визуальных артефактов:

• Измерение размеров или позиций элементов для позиционирования (тултипы, попапы, дропдауны)
• Синхронные анимации, которые должны запуститься до первого кадра
• Чтение scroll position и синхронная корректировка скролла
• Работа с ref-ами, где нужно гарантировать, что DOM уже обновлен

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

Пример кода

JSX
function Tooltip({ targetRef, content }) {
  const tooltipRef = useRef(null);
  const [position, setPosition] = useState({ top: 0, left: 0 });

  useLayoutEffect(() => {
    const targetRect = targetRef.current.getBoundingClientRect();
    const tooltipRect = tooltipRef.current.getBoundingClientRect();

    // Синхронно вычисляем позицию, чтобы тултип появился сразу в правильном месте
    setPosition({
      top: targetRect.bottom + 8,
      left: targetRect.left + (targetRect.width - tooltipRect.width) / 2,
    });
  }, [targetRef]);

  return (
    <div
      ref={tooltipRef}
      style={{ position: 'fixed', top: position.top, left: position.left }}
    >
      {content}
    </div>
  );
}

Как отвечать на собеседовании

Начните с четкого разграничения фаз React: render → commit → paint. Подчеркните, что useLayoutEffect выполняется между commit и paint. Объясните, что доступ к DOM возможен потому, что React уже применил изменения к реальному DOM. Упомяните, что информация берется напрямую из браузерного DOM API, а не передается React-ом. Приведите практический пример, где синхронность критична. Отметьте trade-off с производительностью.

Что проверяет интервьюер

• Понимание жизненного цикла React и фаз рендеринга
• Знание разницы между useEffect и useLayoutEffect
• Понимание event loop браузера и места React в нем
• Умение объяснить, когда и зачем использовать useLayoutEffect
• Осознание trade-off между синхронностью и производительностью

Типичные ошибки

• Утверждение, что useLayoutEffect выполняется до обновления DOM - это неверно, DOM уже обновлен
• Путаница с componentDidMount - useLayoutEffect ближе к нему по времени выполнения, но не идентичен
• Использование useLayoutEffect для всех side effects без учета производительности
• Предположение, что React передает какие-то данные о DOM в callback - хук просто имеет доступ к DOM через refs или document API
• Непонимание, что useLayoutEffect блокирует отрисовку браузера, что может вызывать задержки