Understanding Reconciliation: React Rendering Phases

Ever wonder how React takes your code and creates what you see on the screen? Or how React knows whether to update your component or not?

Learning how rendering works in React will allow you to optimize your apps and make better decisions on how to structure your React application.

Let's get started...

How React Works

There are two phases to the React rendering cycle.

The render phase and the commit phase.

Here's the quick overview. The Render phase takes your JSX and turns it into a javascript representation of what the HTML structure should look like. This is called the VirtualDOM. While the commit phase is actually taking that representation and applying it to the real DOM. The whole process is called reconciliation.

Rendering Phase

There are also two types of renders. An initial render and a re-render. Initial rendering is when your app first starts up. A re-render is when your state or props have updated.

The initial rendering phase starts from your root component (usually App if using CRA) and works its way down the tree. React will take your JSX components and build out a javascript representation of what the actual DOM will look like with it. This is called the VirtualDOM and this is one part of the rendering phase.

Once the Virtual DOM is created, React will compare what it has built out to what the actual DOM has using a fancy diff algorithm. However, once it has finished comparing it ends up with a list of what needs to be changed. This is still considered part of the rendering phase.

Side Note: It's important to note that React goes through its virtualDOM and creates a list of those changes that need to be made to the actual DOM. Meaning that React will wait to commit all the updates so it does it in one swift process and not in parts. This is what it means when you read that React does batch updates. This is crucial to understand when working with state.

Re-rendering is similar, but with one key difference. It does not go through every component to check for updates. Instead, when your component state or props update React uses a flag to mark that component. Basically saying that this component has been marked for an update.

Commit Phase

Once React has done the comparison between its new and old components using that diff algorithm and has a list of changes. It will go ahead and surgically apply those changes to the actual DOM. Meaning that it will only change the particular elements of the DOM that have changes, not every single element. This is called the commit phase.

The commit phase is where React actually touches the DOM and makes changes.

It's important to point out that React may go through the render phase but never commit. This can happen if the component returns the same result as the last time. Often happening if the parent component's state updates causing a render, but the child component(s) still create the same output anyways.

Comments

[Pritam Shrestha]

Hey, Loved your post. I have been really trying to understand rendering process. I watched this youtube.com/watch?v=mLMfx8BEt8g video which is from 2017, today. Things might have changed since then. Because it mentions that the "whole virtual DOM is created from scratch whenever any of the component state changes. at 2:40 minutes" But you mentioned that "Instead, when your component state or props update React uses a flag to mark that component. Basically saying that this component has been marked for an update". So, which is the correct implementation at the time being?

My question is:
Which is the correct point/implementation at the time being?

Point 1. virtualDOM gets created from scratch whenever any of the component's state changes?

OR

Point 2. Instead, when your component state or props update React uses a flag to mark that component. Basically saying that this component has been marked for an update

Another thing is that:
To visualize all the rendering process, I have been trying to make use of React Profiler. But i am quite confused at what the chart actually represents. Does it represent the rendering phase only?

Is it representing the list of components which just renderened for the first time or re-rendered the next time but which may or may not get actually updated on Real DOM during commit phase?

Or

is it representing the list of components that got commited. By commited I am assuming it means actual update to Real DOM.

[Pritam Shrestha]

I did read this post by the way. Having hard time grasping the concepts. I am basically confused at the interchange of the words rendered and committed at this point. reactjs.org/blog/2018/09/10/introd...