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

Основное отличие от useEffect в том, что useEffect запускается асинхронно после отрисовки, а useLayoutEffect — синхронно, блокируя отрисовку до завершения эффекта.

Пример использования:

import React, { useLayoutEffect, useRef, useState } from 'react';

function Component() {
  const ref = useRef(null);
  const [width, setWidth] = useState(0);

  useLayoutEffect(() => {
    if (ref.current) {
      setWidth(ref.current.offsetWidth);
    }
  }, []);

  return <div ref={ref}>Ширина: {width}px</div>;
}

Здесь useLayoutEffect гарантирует, что измерение ширины произойдёт до отрисовки, предотвращая мерцание.

Когда срабатывает useLayoutEffect и зачем он нужен?