Почему лог Child 2 может появиться раньше Child 1?

Условие

Рассмотрите успешное монтирование без StrictMode:

function Child1() {
  useEffect(() => { console.log('Child 1'); }, []);
  return null;
}
function Child2() { console.log('Child 2'); return null; }
function App() { return <><Child1 /><Child2 /></>; }

Почему лог второго компонента идёт первым?

Ответ

Child 2 логирует прямо во время рендера, а Child 1 — в эффекте после commit. Порядок JSX не делает побочные эффекты и вычисление тела одной общей последовательностью.

Сначала React вычисляет дерево; регистрация useEffect ещё не исполняет его callback. После успешного commit запускаются эффекты, и только тогда появляется Child 1. Из этого примера нельзя вывести универсальный порядок всех эффектов между произвольными компонентами. Логи в render также могут повторяться при дополнительных попытках рендера, поэтому для бизнес-действий они непригодны.

Источник: react.dev.