⚡️ 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