В каком порядке будут рендерится компоненты со вложенностью?

Рендер вложенных компонентов идёт сверху вниз (родитель → дети), а эффекты после него выполняются снизу вверх (дети → родитель).

Порядок рендера: сверху вниз, в глубину

const App = () => { console.log('render App'); return <Page />; };
const Page = () => { console.log('render Page'); return (<><Header /><Content /></>); };
const Header = () => { console.log('render Header'); return null; };
const Content = () => { console.log('render Content'); return null; };

// render App → render Page → render Header → render Content

React вызывает компонент, получает его JSX и рекурсивно спускается к детям (depth-first): нельзя узнать, что рендерить у ребёнка, не вызвав родителя. Соседи обходятся по порядку в разметке (Header раньше Content).

Порядок эффектов: снизу вверх

useEffect Header → useEffect Content → useEffect Page → useEffect App

После коммита в DOM эффекты выполняются от глубоких к корню: когда родительский эффект стартует, дети уже смонтированы и «готовы» (их DOM существует, их эффекты отработали). То же для componentDidMount в классах.

Cleanup при размонтировании

Тоже снизу вверх: сначала чистятся эффекты детей, затем родителей.

Практический смысл

• Родительский эффект может безопасно работать с DOM детей (измерения, фокус).
• «Почему лог ребёнка раньше?» — не баг: рендер сверху вниз, эффекты снизу вверх.
• При обновлении части дерева порядок тот же, но только для затронутого поддерева; cleanup старых эффектов выполняется до новых эффектов.

Коротко для собеседования

Функции компонентов вызываются сверху вниз в глубину (родитель раньше детей, соседи по порядку разметки); эффекты (и componentDidMount) — снизу вверх, дети раньше родителей, чтобы к моменту родительского эффекта поддерево было готово. Cleanup при размонтировании — тоже от детей к родителям.