Kuo skiriasi useEffect ir useLayoutEffect? Ar gali pateikti pavyzdį, kaip naudoti useLayoutEffect? Kas nutiks, jei useLayoutEffect viduje atliksi sunkius skaičiavimus?

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