В чём разница между useEffect и useLayoutEffect?

useEffect и useLayoutEffect — это хуки React, которые позволяют выполнять побочные эффекты в функциональных компонентах, но они отличаются по времени выполнения:

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

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

Пример:

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

function Example() {
  const ref = useRef();

  useLayoutEffect(() => {
    // Измеряем размер элемента до отрисовки
    console.log('Размер:', ref.current.getBoundingClientRect());
  });

  useEffect(() => {
    // Можно делать асинхронные операции
    console.log('Компонент отрисован');
  });

  return <div ref={ref}>Пример</div>;
}

Если не нужно срочно взаимодействовать с DOM, лучше использовать useEffect для оптимизации производительности.