⚡️ useLayoutEffect — это хук в React, который позволяет выполнять побочные эффекты синхронно после того, как все изменения DOM были внесены, но до того, как браузер обновит экран.
🔵 Это делает его полезным для операций, которые должны произойти до того, как пользователь увидит изменения.
▶️ Сравнение с useEffect
Основное различие между
useEffect и
useLayoutEffect заключается во времени их выполнения:
🔘 useEffect выполняется асинхронно после рендеринга и после того, как браузер обновил экран.
🔘 useLayoutEffect выполняется синхронно сразу после всех изменений в DOM, но до того, как браузер нарисует экран.
▶️ Когда использовать useLayoutEffect
Использование
useLayoutEffect целесообразно в случаях, когда нужно:
🔘 Измерить размеры или позицию DOM-элементов до того, как браузер отрисует изменения.
🔘 Выполнить какие-либо операции, которые могут повлиять на верстку или стиль, и эти изменения должны быть учтены до отображения на экране.
▶️ Пример использования 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 
