Mis vahe on useEffect ja useLayoutEffect vahel? Kas sa saad anda näite useLayoutEffect kasutamisest? Mis juhtub, kui useLayoutEffect sees teed raskeid arvutusi?

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