Как работает 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
может блокировать рендеринг, если он выполняет сложные вычисления или операции, которые требуют времени.
Важно про useLayoutEffect:
useLayoutEffect может блокировать рендеринг, поэтому его следует использовать только тогда, когда это действительно необходимо (например, для измерений или синхронных изменений в DOM).