Wat is het verschil tussen useEffect en useLayoutEffect? Kun je een voorbeeld geven van het gebruik van useLayoutEffect? Wat gebeurt er als je zware berekeningen uitvoert binnen 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 или асинхронно.