## 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

` → ``, so `A` is run and `"A"` is logged. Similarly React goes to `` → ``, in the end `` is processed. > B is wrapped in memo(), which makes difference during re-render. When all components are rendered and the changes for DOM are committed, this marks the whole journey for the initial render(mount). 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 a new `state`(actually `state` doesn't matter) 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, props: { state: state } }, { type: D props: {} } ] } ``` Even `state` doesn't change, once `App` is re-rendered, `A` and `D` always get new object for props.So now React have to go further to to `
` because it has updates in props. React then renders `A` then `B`. Now `memo()` comes into play, according to [react.dev](https://react.dev/reference/react/memo), **When you use memo, your component re-renders whenever any prop is not shallowly equal to what it was previously.** `B` is memoed, and it received a new empty props object `{}`, but it is *shallowly* equal to previous empty props object. So for `B` bailout happens. 1. it doesn't have state updates itself and props update is ignored, so it is *NOT* rendered. 2. its descendants don't have state updates either, so React doesn't go further to its children. > For more on bailout, check out this blog post - [How does React bailout work in reconciliation?](https://jser.dev/react/2022/01/07/how-does-bailout-work/) React completes the re-render of `A` then goes to `D`. And in the end we got following logs. ```js 'App' 'A' 'B' 'C' 'D' 'App' 'A' 'D' ```

Discuss (74)