React is a javascript library. It helps developers to build user interfaces by using the JSX.
React is most famous for building user interfaces compared to others because react is fast. How React is so fast? The answer lies in the diffing algorithm. In this article, we will see how diffing works. So let’s get started with Virtual DOM.
As we know that DOM (Document object model) is a hierarchical representation of a web page means all elements are Nodes represented as tree structures.
Now you are thinking that If there was already DOM then why do we need virtual DOM? Because the DOM manipulation is very slower. Let's take an example.
consider any social site example and in any post, if a user modifies a comment then the whole DOM needs to be re-painted because of that modified comment. In terms of time complexity, this change is costly. To solve this problem the virtual Dom Is introduced.
What is Virtual DOM?
In simpler words, virtual Dom is the copy of the original DOM which is kept in memory and matches with the original DOM. This process is called Reconciliation.
Consider the above social site example when a user modified a comment. The latest copy of DOM was created and compared with the most recent copy by using a reconciliation algorithm.
The only difference is virtual DOM can’t change the content of the screen directly.
How is virtual DOM connected with Diffing?
Consider the above social site example when a user modified a comment of a post. The latest copy of DOM is created and compared with the most recent copy until it finds some new content or elements. With the help of this comparison react figures out which component in the UI needs to be updated. This process is called diffing.
React uses diffing algorithm to compare the old DOM to the new DOM. Then it replaces the original DOM nodes with the updated node DOM.
Let’s understand with an example. We have an initial DOM that contains the below code.
<section>
<div>
<h1>Hello Neo-Grammar</h1>
</div>
<div>
<h1>Hello React </h1>
</div>
</section>
Now we have modified something in the initial DOM. So the updated DOM is below.
Updated DOM:
<section>
<div>
<h1>Hello Neo-Grammar</h1>
</div>
<div>
<h1>Hello React </h1>
<p> Hello June </p>
</div>
</section>
As we can see that we added an <p> element to DOM, react compares the new virtual DOM with the most recent copy and points out that the content of the second <div> has been changed so it only updates the content of the second div, added <p> element in real DOM. This process is fast compared to the whole repainting of the UI.
But what if we added some new elements at the top?
<section>
<div>
<h1>Hello Neo-Grammar</h1>
</div>
<div>
<h2>Writing a blog</h2>
<h1>Hello React </h1>
<p> Hello June </p>
</div>
</section>
React uses the reconciliation process and finds out that the first child of the second div is changed from <h1> to <h2> so it doesn’t add a new element instead it replaced the whole second div.
Imagine that we have hundreds of components instead of two elements inside the second div. It will re-render all those hundreds of the components which didn’t change.
To solve this re-rendering issue react supports a key attribute. React uses the keys to match children in the most recent virtual DOM.
Let’s take an example with key attributes.
<section>
<div>
<h1 key=”1”>Hello Neo-Grammar</h1>
</div>
<div>
<h2 key=”4”>Writing a blog</h2>
<h1 key=”2”>Hello React </h1>
</div>
</section>
Here, react diffing algorithm matches the component with the previous key “2” in the second div and the new element with the key is “4”. So in this scenario react just marks the new element and added it to the real DOM. This solves our problem of unnecessary re-rendering of unchanged components.
Conclusion
Re-painting the UI is costly. React's virtual DOM helps to minimize these painting events by making sure that only manipulated elements are updated to the real DOM.
I hope this blog is useful to you to understand diffing and reconciliation. Thank you for reading. Feel free to share your feedback in the comment section.