## 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. ```js const A = ({ children }) => { const [state, setState] = useState(0); console.log("A"); useEffect(() => { setState((state) => state + 1); }, []); return {children}; }; ``` `A` is a bit complex. 1. it has state. 2. it updates its state in `useEffect` callback. 3. it wraps its `children` with Context Provider. `"A"` is logged because `A` is run. For Context Provider, it doesn't generate new children, so React then goes to Context Provider's children, which is from `A`. ```js ``` React then goes to `B`, after it is done, it then goes to `D` ```js function B({ children }) { const count = useContext(MyContext); console.log("B"); return children; } ``` `B` uses the context value by `useContext()`, React goes up to the closest Provider and returns its value. Keep in mind that Context consumers subscribe to the change of context values. Then `"B"` is logged and its children `` is going to be rendered before React goes to ``, so `"C"` and `"D"` are logged in order. After initial mount, we have following logs. ```js "App" "A" "B" "C" "D" ``` ## 2. Re-render Once initial mount is done, React tries to flush the passive effects(`useEffect`), the first to be found is 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, which is `App`. `App` doesn't have scheduled updates but its sub-tree has, so bailout happens for `App` and `App` won't get run , then React goes to its children. ```js ``` Since `App` is not re-run, the children hasn't change. Thus for `A`, it has the same `children` as before. But `A` itself has state updates, so `A` is re-run and `"A"` gest logged again. It also returns a new child of Context Provider. As for Context Provider, it receives new value so it propagates the value change to all consumers, marking `B` as `need to update`. But it doesn't generate new children, so its children stays the same. React then goes to `B`. Since `B` is marked as `need to update`,it re-renders and `"B"` is logged. But it doesn't generate new children either, so identical `` is returned . React then goes to `C`, `C` doesn't get new props or changes its state, bailout happens for `C` and same goes for `D`. In the end we got following logs. ```bash "App" "A" "B" "C" "D" "A" "B" ``` [Check it out on React Internals Explorer](https://jser.pro/ddir/rie?code=%2F%2F%20This%20is%20a%20React%20Quiz%20from%20BFE.dev%20%0A%0Aimport%20*%20as%20React%20from%20%27react%27%0Aimport%20%7B%20useState%2C%20createContext%2C%20useEffect%2C%20useContext%7D%20from%20%27react%27%0Aimport%20%7B%20createRoot%20%7D%20from%20%27react-dom%2Fclient%27%0A%0Aconst%20MyContext%20%3D%20createContext(0)%3B%0A%0Afunction%20B(%7Bchildren%7D)%20%7B%0A%20%20const%20count%20%3D%20useContext(MyContext)%0A%20%20console.log(%27B%27)%0A%20%20return%20children%0A%7D%0A%0Aconst%20A%20%3D%20(%7Bchildren%7D)%20%3D%3E%20%7B%0A%20%20const%20%5Bstate%2C%20setState%5D%20%3D%20useState(0)%0A%20%20console.log(%27A%27)%0A%20%20useEffect(()%20%3D%3E%20%7B%0A%20%20%20%20setState(state%20%3D%3E%20state%20%2B%201)%0A%20%20%7D%2C%20%5B%5D)%0A%20%20return%20%3CMyContext.Provider%20value%3D%7Bstate%7D%3E%0A%20%20%20%20%7Bchildren%7D%0A%20%20%3C%2FMyContext.Provider%3E%0A%7D%0A%0Afunction%20C()%20%7B%0A%20%20console.log(%27C%27)%0A%20%20return%20null%0A%7D%0A%0Afunction%20D()%20%7B%0A%20%20console.log(%27D%27)%0A%20%20return%20null%0A%7D%0Afunction%20App()%20%7B%0A%20%20console.log(%27App%27)%0A%20%20return%20%3CA%3E%3CB%3E%3CC%2F%3E%3C%2FB%3E%3CD%2F%3E%3C%2FA%3E%0A%7D%0A%0Aconst%20root%20%3D%20createRoot(document.getElementById(%27root%27))%3B%0Aroot.render(%3CApp%2F%3E)%0A%0A%20%20%20%20)

Discuss (36)