DEV Community

Douglas Henrique
Douglas Henrique

Posted on

Talking about React Reconciliation

In the Render phase, React will execute all your app components and resolve the JSX tree. If it is the first time rendering, React will return all the JSX tree but if the render is an update like the most of the times, React will compare with the old one and compute a diff. This process is called “Reconciliation”.

JSX tree with different elements

The first virtual DOM is when react render the entire JSX tree. The second one is the modified Virtual DOM and as you can see, react compare the new with the old one. It's like we have two snapshots at the same repository than we compare and compute the diffs.

After computing diffs, React goes to the Commit phase.

Commit phase is the process that React does to update the DOM. Is all about applying the visual updates to your website.

JSX tree updating the real DOM

Hope you enjoy it!

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More