> Какая последовательность рендеров и эффектов в React при монтировании и обновлении компонента? (React)

Короткий ответ

При монтировании React сначала выполняет рендер компонента (вызов функции или render), затем React обновляет DOM, после чего синхронно запускаются эффекты из useEffect. При обновлении сначала выполняется рендер, затем React вычисляет разницу и обновляет DOM, после чего запускаются cleanup-функции предыдущих эффектов и новые эффекты.

Подробное объяснение

Последовательность операций строго регламентирована жизненным циклом React и одинакова для class-компонентов и функциональных с хуками.

Монтирование (initial mount):

1. Вызывается функция компонента (или render в class-компоненте) - это фаза рендера.
2. React вычисляет виртуальный DOM, сравнивает с реальным и применяет минимальные изменения к реальному DOM - это фаза commit.
3. После того как DOM обновлён, React синхронно запускает все эффекты, зарегистрированные через useEffect (в порядке их объявления). Эффекты из useLayoutEffect выполняются синхронно сразу после мутаций DOM, до того как браузер успеет отрисовать экран.

Обновление (re-render):

1. Вызывается функция компонента (рендер) с новыми пропсами или состоянием.
2. React вычисляет новый виртуальный DOM, сравнивает с предыдущим и применяет изменения к реальному DOM.
3. Перед запуском новых эффектов React выполняет cleanup-функции от предыдущих эффектов (если зависимости изменились).
4. Затем запускаются новые эффекты (useEffect - асинхронно после отрисовки браузером, useLayoutEffect - синхронно до отрисовки).

Различие useEffect и useLayoutEffect:

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

Порядок для дочерних компонентов: React сначала полностью рендерит и коммитит родительский компонент, затем рекурсивно обрабатывает дочерние. Эффекты запускаются в порядке от листьев к корню (снизу вверх), то есть сначала эффекты дочерних, потом родительских.

На практике

При проектировании сложных компонентов важно понимать, что:

• Сетевые запросы и подписки лучше размещать в useEffect, чтобы не блокировать отрисовку.
• Если нужно измерить DOM-элемент или синхронно изменить стили до отрисовки - используйте useLayoutEffect.
• Cleanup-функции в useEffect выполняются при каждом ререндере с изменившимися зависимостями, а также при размонтировании.
• Не стоит полагаться на порядок выполнения эффектов между разными компонентами - он гарантирован только в пределах одного дерева.

Пример кода

JSX
function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Effect runs after render and DOM update');
    return () => console.log('Cleanup before next effect or unmount');
  }, [count]);

  useLayoutEffect(() => {
    console.log('LayoutEffect runs synchronously after DOM mutations');
  }, []);

  console.log('Render phase');
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

При монтировании вывод будет:

Render phase
LayoutEffect runs synchronously after DOM mutations
Effect runs after render and DOM update

При клике (обновлении):

Render phase
Cleanup before next effect or unmount
LayoutEffect runs synchronously after DOM mutations
Effect runs after render and DOM update

Как отвечать на собеседовании

Начните с чёткого разделения фаз: render (рендер-фаза, чистая функция) и commit (фаза фиксации в DOM). Затем опишите порядок для монтирования и обновления, обязательно упомянув разницу между useEffect и useLayoutEffect. Если спросят про дочерние компоненты, добавьте про порядок от листьев к корню. Хорошо подкрепить ответ примером с логами.

Что проверяет интервьюер

• Понимание фаз жизненного цикла React (render vs commit).
• Знание точного момента выполнения эффектов и cleanup.
• Различие между useEffect и useLayoutEffect.
• Понимание порядка выполнения в иерархии компонентов.
• Умение объяснить, почему эффекты не выполняются во время рендера.

Типичные ошибки

• Утверждение, что useEffect выполняется сразу после рендера (на самом деле после commit и отрисовки браузером).
• Путаница между порядком рендера и порядком эффектов (рендер сверху вниз, эффекты снизу вверх).
• Игнорирование cleanup-функций при обновлении.
• Утверждение, что useLayoutEffect выполняется до рендера (на самом деле после DOM-мутаций, но до отрисовки браузером).