Как работает useLayoutEffect в React и чем он отличается от useEffect?

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

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

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

• Для работы с DOM. Этот хук чаще используется, когда необходимо сделать что-то с DOM напрямую (например, измерить размеры элементов или применить стили до того, как браузер отобразит обновления).

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

import { useState, useLayoutEffect, useRef } from "react";

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

  useLayoutEffect(() => {
    // Синхронно измеряем ширину элемента перед рендером
    if (divRef.current) {
      setWidth(divRef.current.getBoundingClientRect().width);
    }
  }, []); // Эффект сработает только один раз

  return (
    <div>
      <div ref={divRef} style={{ width: "100%" }}>
        <p>Ширина элемента: {width}px</p>
      </div>
    </div>
  );
}

Отличия от useEffect

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