## 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() { console.log('App') 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. ```js function A({ children }) { console.log('A') const [state, setState] = useState(0) useEffect(() => { setState(state => state + 1) }, []) return children } ``` One thing to point out is `A` doesn't generate new children from itself, but it returns the `children` got from parent, which is `` from `App`. React then 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 `A`. ```js const [state, setState] = useState(0) useEffect(() => { setState(state => state + 1) }, []) ``` `A` holds the `state`, when `setState` is called, it does _NOT_ update the state immediately but schedules an update internally which tells React that `A` 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. 1. `App` → `App` doesn't have new props, no scheduled updates nor context changes, so bailout happens. React skips the rendering of `App` so the children of `App` stays the same. This is quite important, it means `` stays the same. 2. But `A` is marked as "needs update", so React doesn't stop at `App`, it goes into its children until `A` is reached and re-render happens. `"A"` is logged again. 3. `A` returns `` from its props, which stays the same. So React stops as `A` because for `B` there are no new props, no scheduled updates or context updates. Same goes for `` which gets bailed out, so the final logs are as below. ```js 'App' 'A' 'B' 'C' 'D' 'A' ```

Discuss (58)