Какие сообщения появятся в консоли при рендере данного React‑компонента

Условие

Укажите порядок вывода в консоль для следующего кода:

 export default function App() {
  return (
    <Parent>
      <Child />
    </Parent>
  );
}

function Parent({ children }) {
  console.log(1);

  useEffect(() => {
    console.log(2);
  }, []);

  return <div>{children}</div>;
}

function Child() {
  console.log(3);

  useEffect(() => {
    console.log(4);
  }, []);

  return <h1>Hi</h1>;
}

Ответ

При обычном первом клиентском монтировании без Strict Mode ожидается 1, 3, 4, 2: сначала render родителя и ребёнка, затем пассивные эффекты ребёнка и родителя.

Создание JSX <Child /> ещё не вызывает функцию Child. Сначала React выполняет Parent и получает его дерево, затем рендерит Child. Их useEffect callbacks не выполняются прямо в render-фазе.

После commit эффекты смонтированного дочернего компонента обрабатываются раньше эффекта родителя. В Strict Mode разработческая проверка добавляет повторные вызовы, а серверный рендер эффекты не запускает. Импорт useEffect подразумевается; без него фрагмент завершится ошибкой. Не используйте точный порядок логов как контракт координации бизнес-операций.