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

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

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

Где полезен useLayoutEffect:

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

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

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

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

  return <div ref={ref}>Ширина этого блока: {width}px</div>;
}

Расскажи разницу между useEffect и useLayoutEffect, и где useLayoutEffect будет полезен?