## 1. Initial render(mount) 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() { // @fold v const [state, setState] = useState(0) useEffect(() => { setState((state) => state + 1) }, []) console.log('App') // @fold ^ return (

) } ``` Keep in mind that components are _blueprints_, child components are not rendered directly, but that 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. ```js

``` React then goes to `
` → ``, so `A` is run and `"A"` is logged. Similarly React goes to `` → ``, in the end `` is processed. So far we get following logs. ```js 'App' 'A' 'B' 'C' 'D' ``` ## 2. Re-render Once initial mount is done, React tries to flush the passive effects(`useEffect`) in component `App`. ```js const [state, setState] = useState(0) useEffect(() => { setState((state) => state + 1) }, []) ``` `App` holds the `state`, when `setState` is called, it does _NOT_ update the state immediately but schedules an update internally which tells React that `App` needs to be re-rendered, and by incrementing the state by 1. One thing to keep in mind is that on any state updates, 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/) So React start re-rendering everything from root, which is `App`. `App` is already marked as "needs update", so App is re-run and `"App"` is logged. Now `App` returns a new set of children. ```js
``` 1. `div` receives new props, because `children` changes. 1. `A` receives new props, becasuse `children`(which is a new ``) changes 1. `D` receives a new empty object `{}` for props. This might doesn't look obvious. It is much easier to understand if we re-write the JSX into object notation and notice that this is a new object being returned every time the function is run. ```js { type: "div", children: [ { type: A, children: [ { type: B, props: {} } ] }, { type: D props: {} } ] } ``` Since `A` receives new props, so `A` is re-run and returns the new ``. Though `B` has empty props but it also receives a new `{}`, so `B` is re-run. Same goes for `C` and `D`. In the end we got following logs. ```js 'App' 'A' 'B' 'C' 'D' 'App' 'A' 'B' 'C' 'D' ```

Discuss (67)