useLayoutEffect
— это хук в React, который позволяет выполнять побочные эффекты синхронно после того, как все изменения DOM были внесены, но до того, как браузер обновит экран. useEffect
Основное различие между
useEffect
и useLayoutEffect
заключается во времени их выполнения:useEffect
выполняется асинхронно после рендеринга и после того, как браузер обновил экран.useLayoutEffect
выполняется синхронно сразу после всех изменений в DOM, но до того, как браузер нарисует экран. useLayoutEffect
Использование
useLayoutEffect
целесообразно в случаях, когда нужно: useLayoutEffect
Рассмотрим пример, где мы хотим измерить ширину элемента
div
сразу после его рендеринга и отобразить эту ширину в элементе:import React, { useLayoutEffect, useRef, useState } from 'react';
function MeasureDiv() {
const divRef = useRef(null);
const [width, setWidth] = useState(0);
useLayoutEffect(() => {
if (divRef.current) {
setWidth(divRef.current.offsetWidth);
}
}, []);
return (
<div>
<div ref={divRef} style={{ width: '50%' }}>
Resize the window to change my width
</div>
<p>Div width: {width}px</p>
</div>
);
}
export default MeasureDiv;
useRef
для получения ссылки на элемент div.
useLayoutEffect
мы измеряем ширину элемента после его рендеринга, но до того, как браузер обновит экран. useState
и отображается в абзаце.Этот подход гарантирует, что ширина элемента будет измерена до того, как пользователь увидит изменения на экране, что может быть критично для некоторых приложений, например, для анимаций или точных расчётов верстки.
useLayoutEffect
блокирует обновление экрана до завершения эффекта, использование его для длительных операций может привести к задержкам и ухудшению производительности. useLayoutEffect
только тогда, когда это действительно необходимо, а для всех остальных побочных эффектов использовать useEffect.
Понравился пост? Добавь🔥 🔥 🔥
CodeBase | Frontend | #react_hook
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5❤1