Name: Sobes.tech
Rating: 4.9 (250 reviews)

useEffect и useLayoutEffect — это хуки React, которые позволяют выполнять побочные эффекты в функциональных компонентах, но они отличаются по времени выполнения.

useEffect запускается после того, как браузер отрисовал изменения на экран. Это асинхронно относительно рендера, поэтому не блокирует отображение UI. Его обычно используют для загрузки данных, подписок, изменения состояния, которое не влияет на визуальное отображение сразу.
useLayoutEffect запускается синхронно сразу после всех изменений DOM, но до того, как браузер отрисует обновления на экран. Это значит, что он блокирует отрисовку до выполнения эффекта. Его применяют, когда нужно измерить или изменить DOM (например, вычислить размеры элементов, синхронизировать скролл, анимации), чтобы избежать мерцаний или неправильного отображения.

Когда использовать useLayoutEffect:

Если нужно выполнить операции, которые влияют на визуальное представление и должны быть завершены до того, как пользователь увидит изменения.
Например, корректировка стилей, вычисление размеров элементов, синхронизация прокрутки.

Пример:

import React, { useLayoutEffect, useRef, useState } from 'react';

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

  useLayoutEffect(() => {
    // Измеряем ширину элемента сразу после изменения DOM
    setWidth(ref.current.offsetWidth);
  });

  return <div ref={ref}>Ширина: {width}px</div>;
}

В чём разница между useEffect и useLayoutEffect? Когда стоит использовать useLayoutEffect?