Can you explain React’s rendering lifecycle and make sense why “Layout Rendered” is logged before rendering any of the JSX Components?

Layout

Navbar

Home

Console

I was trying to understand the lifecycle of a React functional component and I added some logs in the parent component to check if it renders before the children. Turns out any JS function called inside return is executed and then the JSX components and their content is rendered. Could anyone explain why that is?

Note that the 2 logs from Navbar between Layout rendering and Layout rendered is from the Navbar function call, while other functional JSX components are rendered later.