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

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

useEffect: Асинхронное выполнение

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

• Запросы данных к API.
• Установка и очистка подписок (например, на события).
• Ручное изменение состояния, которое не требует мгновенного отражения в DOM.

// Пример с useEffect: измерение элемента после отрисовки
useEffect(() => {
  // Этот код выполнится ПОСЛЕ того, как пользователь увидит элемент
  const rect = elementRef.current.getBoundingClientRect();
  console.log('Размеры после отрисовки:', rect);
}, [dependencies]);

useLayoutEffect: Синхронное выполнение до отрисовки

Хук useLayoutEffect выполняется синхронно сразу после того, как React рассчитал все изменения в DOM (фаза "commit"), но до того, как браузер отрисует эти изменения на экране. Это блокирует визуальное обновление до завершения эффекта.

Его основное применение — манипуляции с DOM или стилями, которые должны быть применены до того, как пользователь увидит результат. Без этого может возникнуть видимое мерцание или скачок контента.

// Пример с useLayoutEffect: синхронное измерение и изменение стиля
useLayoutEffect(() => {
  // Этот код выполнится ДО того, как пользователь увидит элемент
  const button = buttonRef.current;
  const rect = button.getBoundingClientRect();
  // Немедленно меняем стиль на основе измерений
  if (rect.width > 200) {
    button.style.fontSize = '10px';
  }
}, [dependencies]);

Когда что использовать?

• Используйте useEffect по умолчанию для большинства задач: запросы данных, логирование, подписки. Это безопасно и не блокирует рендеринг.
• Используйте useLayoutEffect только когда эффект непосредственно изменяет внешний вид DOM (стили, положение, размеры) и вы наблюдаете визуальные артефакты (например, элемент сначала отображается в одном месте, а затем "прыгает" в другое).

Вывод: useLayoutEffect — это специализированный инструмент для синхронных манипуляций с DOM, необходимых для предотвращения визуального мерцания. В 90% случаев достаточно стандартного useEffect, который не блокирует отрисовку и обеспечивает лучшую производительность.