> На каких стадиях жизненного цикла React-компонента срабатывает useEffect? (React)

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

useEffect срабатывает после того, как React зафиксировал изменения в DOM (commit phase), то есть после рендера и отрисовки. Он не привязан напрямую к классическим стадиям жизненного цикла (mount, update, unmount), а заменяет их комбинации: componentDidMount, componentDidUpdate и componentWillUnmount в зависимости от массива зависимостей. Выполнение происходит асинхронно, после того как браузер отрисовал изменения.

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

В React жизненный цикл классового компонента делится на три фазы: mounting, updating и unmounting. useEffect - это хук, который эмулирует эти стадии в функциональных компонентах, но с другой семантикой. Он запускается после того, как React применил изменения к DOM (commit phase), то есть после того, как компонент был смонтирован или обновлён. Конкретное поведение зависит от массива зависимостей:

• Без зависимостей (useEffect(() => { ... })): срабатывает после каждого рендера (и mount, и update).
• С пустым массивом (useEffect(() => { ... }, [])): срабатывает только один раз после mount (аналог componentDidMount).
• С зависимостями (useEffect(() => { ... }, [dep])): срабатывает после mount и каждый раз, когда dep изменяется (аналог componentDidUpdate для конкретного пропса или стейта).
• Функция очистки (return внутри useEffect): выполняется перед размонтированием (аналог componentWillUnmount) или перед повторным запуском эффекта при изменении зависимостей.

Важно: useEffect не блокирует браузерную отрисовку - он выполняется асинхронно после того, как браузер уже показал пользователю обновлённый интерфейс. Это отличает его от useLayoutEffect, который выполняется синхронно после мутаций DOM, но до того, как браузер отрисует изменения.

На практике

На практике useEffect используется для побочных эффектов, которые не должны блокировать рендер: запросы к API, подписки на события, манипуляции с внешними хранилищами, логирование. Для задач, требующих синхронного выполнения после DOM-обновлений (например, измерение размеров элемента), применяют useLayoutEffect. Важно правильно указывать зависимости, чтобы избежать лишних вызовов или пропусков обновлений. Функция очистки обязательна для подписок и таймеров, чтобы предотвратить утечки памяти.

Пример кода

JSX
import { useState, useEffect } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  // Эффект срабатывает после mount и при изменении userId
  useEffect(() => {
    // Аналог componentDidMount + componentDidUpdate для userId
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => setUser(data));

    // Функция очистки - аналог componentWillUnmount или отмена перед повторным вызовом
    return () => {
      // Отменяем запрос, если userId изменился до завершения
      // (например, через AbortController)
    };
  }, [userId]); // Зависимость: эффект перезапускается при смене userId

  return <div>{user ? user.name : 'Loading...'}</div>;
}

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

Начни с чёткого указания фазы жизненного цикла (после commit phase). Затем объясни, как массив зависимостей определяет, на каких стадиях срабатывает эффект. Упомяни отличие от классовых методов: useEffect объединяет mount, update и unmount в одном месте. Подчеркни асинхронность выполнения и отличие от useLayoutEffect. Если спросят про порядок: сначала выполняются эффекты дочерних компонентов, затем родительских (в отличие от componentDidMount). Приведи пример с очисткой.

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

Интервьюер проверяет понимание фазы выполнения useEffect (после commit, асинхронно), умение различать mount/update/unmount через зависимости, знание разницы между useEffect и useLayoutEffect, а также понимание порядка выполнения эффектов в дереве компонентов. Для senior-уровня важно показать осознание trade-off: почему useEffect не блокирует рендер, когда нужна синхронность, и как избежать race conditions.

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

• Утверждение, что useEffect срабатывает "до рендера" или "во время рендера" - это неверно, он выполняется после фиксации DOM.
• Путаница с useLayoutEffect: кандидат может не знать, что useEffect асинхронен, а useLayoutEffect синхронен.
• Игнорирование функции очистки: забывают, что она выполняется не только при unmount, но и перед повторным запуском эффекта при изменении зависимостей.
• Неправильное понимание пустого массива: думают, что эффект срабатывает только при mount, но не учитывают, что при unmount очистка всё равно выполняется.
• Отсутствие упоминания порядка выполнения: эффекты дочерних компонентов запускаются раньше родительских.