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!

Sentry mobile image

Tired of users complaining about slow app loading and janky UI?

Improve performance with key strategies like TTID/TTFD & app start analysis.

Read the blog post

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay