Чем отличаются хуки useEffect и useLayoutEffect?

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

• useEffect запускается после того, как браузер отрисовал изменения на экран. Это асинхронный эффект, который не блокирует отрисовку. Подходит для загрузки данных, подписок, таймеров и других операций, не влияющих на визуальное отображение.

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

Пример:

useLayoutEffect(() => {
  // Измеряем размер элемента и сразу обновляем состояние
  const rect = ref.current.getBoundingClientRect();
  setSize({ width: rect.width, height: rect.height });
}, []);

useEffect(() => {
  // Загружаем данные с сервера
  fetchData().then(setData);
}, []);

Если использовать useEffect для измерений, может возникнуть визуальный сдвиг, так как эффект выполнится после отрисовки.