useEffect срабатывает после того, как React отрендерил компонент и обновил DOM. Это значит, что callback внутри useEffect выполняется после фазы «commit» (фиксации изменений в DOM).

Фазы в React:

Render phase (фаза рендера) — React вычисляет, что нужно отрендерить, создаёт виртуальный DOM. Здесь нельзя вызывать побочные эффекты.
Commit phase (фаза фиксации) — React применяет изменения к реальному DOM и запускает эффекты.

useEffect запускается после commit phase, что позволяет безопасно выполнять побочные эффекты, например, запросы к API, подписки, манипуляции с DOM.

Пример использования useEffect:

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

function Example({ userId }) {
  const [userData, setUserData] = useState(null);

  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => setUserData(data));
  }, [userId]); // эффект срабатывает при изменении userId

  return <div>{userData ? userData.name : 'Загрузка...'}</div>;
}

Здесь эффект сработает после рендера и обновит состояние, что вызовет повторный рендер с новыми данными.

Когда срабатывает callback useEffect? Какие фазы есть в React?