Как вложенность React-компонентов задаёт порядок рендера?

Условие

Без StrictMode и Suspense впервые монтируется App:

function Leaf() { console.log('leaf'); return <span>Текст</span>; }
function Panel() { console.log('panel'); return <div><Leaf /></div>; }
function App() { console.log('app'); return <main><Panel /></main>; }

Покажите вложенность дерева и порядок этих синхронных сообщений.

Ответ

Дерево: App → main → Panel → div → Leaf → span. При заданном первом рендере сообщения идут app, panel, leaf, а отступы в исходном файле не управляют исполнением.

Вложенность определяется возвращаемыми JSX-элементами, а не табуляцией. Тело App исполняется до обработки возвращённого Panel; аналогично Panel предшествует Leaf. Это не правило порядка useEffect и не обещание одного вызова функции во всех режимах React. Для читаемости оформляют JSX по уровням дерева, не меняя состав возвращаемых элементов.

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