Member-only story
Understand Keys, Virtual DOM, Reconciliation, and Diffing in React
Essential concepts for React developers
Many developers know how to build complex UIs with React, but few of them know about the internals of React. Learning these concepts is very important in order to use React to its full potential.
Let’s start with the Virtual DOM.
Virtual DOM
It is a virtual representation of the UI (copy of DOM) kept in memory and synced with the real DOM by a library like ReactDOM.
Why do we need a virtual DOM when there is an actual DOM?
Well, DOM operations are expensive, and updating the whole DOM on every prop/state change is very inefficient. Here’s how the virtual DOM deals with this inefficiency:
- A component props/state changes
- React triggers a rerender
- React compares the virtual DOM (virtual DOM before the update) with the updated virtual DOM (virtual DOM after update)
- React determines the best possible way to reflect the changes in the UI with minimal operations on the real DOM.
So its virtual DOM helps React update the UI to match the most recent tree.
Reconciliation
The process of keeping virtual DOM in sync with the real DOM is called reconciliation.
So the whole process we discussed above is known as reconciliation.
Diffing
The comparison between the virtual DOMs (to figure out what needs to be updated in the UI) is referred to as diffing, and the algorithm that does it is called diffing algorithm.
How does the diffing algorithm work?
The diffing algorithm compares the two trees by comparing their root nodes first.
Different root nodes
Consider the following snippet:
<div>
<p>Hello</p>
</div><section>
<p>Hello</p>
</section>
