Let's look at what happens step by step. ```js const root = createRoot(document.getElementById('root')); root.render() ``` This `render()` call kicks off the rendering of whole app. It first see ``, so `App` is run and `"App"` is logged. ```js function App() { console.log('App') return

} ``` Keep in mind that components are _blueprints_, child components are not rendered directly, but React runtime renders the children in a synchronous or asynchronous [DFS-like approach](https://jser.dev/react/2022/01/16/fiber-traversal-in-react/) based on the priorities of tasks it has internally. When `App` is rendered, React sees following children that needs to be rendered further. Remember these are just blueprints, the component functions are only run when React actually tries to render each of them. ```js

`, then ``. [Suspense](https://react.dev/reference/react/Suspense) is a special kind of error boundary that catches thrown thenables, it renders fallback if thenable is thrown but does nothing if not. When React first renders `` here, it hasn't caught any thenable yet, so React goes to its child ``. ```js function A() { console.log('A1') const data = resource.get() console.log('A2') return

{data}

} ``` Obviously `"A1"` will be logged first. `resource` is a data fetcher that has its own state in which a Promise is thrown if the async function is in progress. So when `resource.get()` is first run inside `A`, a promise is thrown. When a Promise is thrown in `A`, React locates its nearest Suspense , update its flag to indicate thrown Promise and continue rendering from Suspense. So React goes to `` again, but this time it knows it should render fallback. so React goes to ``, in which `"fallback"` is logged. Also a then callback is attached to the thrown Promise to re-render the whole App. > Flag is actually removed after this so that future re-render > of Suspense always come with a clean state. > For more deeper dive in React Suspense, check out JSer's blogs - > [blog 1](https://jser.dev/react/2022/04/02/suspense-in-concurrent-mode-1-reconciling) > & [blog 2](https://jser.dev/react/2022/04/17/offscreen-component) After 100ms, the Promise is fulfilled and re-render callback is triggered. Remember that React basically tries to re-render everything from root, while it skips rendering components that doesn't receive updates, or even skips the whole sub-tree if there are no updates there. > Check out [how `useState` works internally.](https://jser.dev/2023-06-19-how-does-usestate-work/) > and [how bailout works in React](https://jser.dev/react/2022/01/07/how-does-bailout-work/) React tries to render `` again, but it doesn't have any changes in state or props, so bailout happens and `"App"` is NOT logged. But its descendant `` has work to do, so React goes to its child `

Discuss (38)