Почему эффекты дочерних компонентов выполняются раньше родительских и в каком порядке между собой?

React разделяет работу над компонентом на две фазы: render (вычисление JSX) и commit (применение изменений к DOM и запуск эффектов). В фазе render React идёт сверху вниз — от родителя к детям, потому что родитель должен знать, что рендерить. А вот эффекты запускаются уже в фазе commit, и здесь порядок обратный: сначала дети, потом родители.

Почему так происходит

Причина в гарантиях, которые React даёт разработчику. Когда срабатывает useEffect родителя, он ожидает, что всё поддерево уже смонтировано: DOM-узлы детей на месте, их подписки и таймеры активны. Если бы родительский эффект выполнялся первым, он мог бы обратиться к ref или DOM-узлу ребёнка, которого ещё нет. Поэтому React идёт от листьев к корню — это называется bottom-up порядок.

Порядок между эффектами

• Между разными компонентами: сначала все эффекты детей (в порядке их появления в дереве), затем эффект родителя.
• Внутри одного компонента: эффекты выполняются в том порядке, в котором они объявлены в теле функции.
• Cleanup-функции при размонтировании идут в обратном порядке: сначала родитель, потом дети.

Пример

function Child({ name }) {
  useEffect(() => {
    console.log('effect child', name);
    return () => console.log('cleanup child', name);
  }, []);
  return <div>{name}</div>;
}

function Parent() {
  useEffect(() => {
    console.log('effect parent');
    return () => console.log('cleanup parent');
  }, []);
  return (
    <>
      <Child name="A" />
      <Child name="B" />
    </>
  );
}

// Вывод при монтировании:
// effect child A
// effect child B
// effect parent

// Вывод при размонтировании:
// cleanup parent
// cleanup child B
// cleanup child A

Практические следствия

Такой порядок удобен, когда родитель в своём эффекте собирает данные о детях: например, измеряет их размеры через ref или агрегирует состояние. Но он же может стать ловушкой, если родитель ожидает, что его эффект выполнится раньше — например, для инициализации контекста, от которого зависят дети. В таких случаях логику лучше поднимать выше по дереву или использовать useLayoutEffect, который тоже идёт снизу вверх, но до отрисовки браузером.

Итог: порядок эффектов снизу вверх — это осознанное решение React, обеспечивающее готовность всего поддерева к моменту запуска родительской логики. Учитывайте это при работе с ref, измерениями DOM и агрегацией данных от детей.