Qual é a diferença entre useEffect e useLayoutEffect? Pode dar um exemplo de uso de useLayoutEffect? O que acontecerá se realizar cálculos pesados dentro do useLayoutEffect?

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 или асинхронно.