Kāda ir atšķirība starp useEffect un useLayoutEffect? Vai vari sniegt piemēru, kā izmantot useLayoutEffect? Kas notiks, ja useLayoutEffect iekšienē veiksi smagas aprēķinus?

useEffect и useLayoutEffect похожи, но отличаются моментом выполнения:

• useEffect вызывается после того, как браузер отрисовал изменения на экран (асинхронно).
• useLayoutEffect вызывается синхронно сразу после всех изменений DOM, но до того, как браузер успеет отрисовать обновления.

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

Пример использования useLayoutEffect:

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

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

  useLayoutEffect(() => {
    // Измеряем ширину элемента до отрисовки
    if (ref.current) {
      setWidth(ref.current.offsetWidth);
    }
  }, []);

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

Если внутри useLayoutEffect выполнять тяжёлые вычисления, это заблокирует отрисовку страницы, что приведёт к задержкам и ухудшению UX (например, к "мерцанию" или подвисаниям интерфейса). Поэтому тяжёлые операции лучше выполнять в useEffect или асинхронно.