Virtual DOM, Reconciliation And Diffing Algorithm Explained Simply

You can also refer to my YouTube video for understanding with animations about the Virtual DOM which is attached at the end of the post.

To learn virtual DOM you should also have some basic idea about the DOM.

What is DOM?

DOM stands for Document Object Model. It is the hierarchical representation of your web page(UI). For Example you have a blog website, so the hierarchical representation of the website would be as follows.

This is how the browser renders your web page. This is called DOM.

If there was already DOM then why was the concept of virtual DOM implemented? Because DOM manipulation is very slower. Consider the blogging website example and in any of the blog post if a user modifies a comment then the whole DOM (UI) needs to be repainted because of that one little change. This change is very expensive in terms of time complexity.

To solve this problem here comes our hero Virtual DOM.

What is Virtual DOM ?

In simple words, virtual DOM is just a copy of the original DOM kept in the memory and synced with the real DOM by libraries such as ReactDOM. This process is called Reconciliation.

Virtual DOM has the same properties that of the Real DOM, but it lacks the power to directly change the content of the screen.

Think of Virtual DOM as the blueprint of a machine, changes made to the blueprint doesn't reflects on the machine itself.

How Virtual DOM works ?

So when there is a update in the virtual DOM, react compares the virtual DOM with a snapshot of the virtual DOM taken right before the update of the virtual DOM.

With the help of this comparison React figures out which components in the UI needs to be updated. This process is called diffing. The algorithm that is used for the diffing process is called as the diffing algorithm.

Once React knows which components has been updated, then it replaces the original DOM nodes with the updated DOM node.

Let's understand this with a Example.

Initial DOM

<section>
         <div>
               <h1>Hello React</h1>
         </div>
         <div>
               <h1>Hello React 2</h1>
         </div>
</section>

Updated DOM

<section>
         <div>
               <h1>Hello React</h1>
         </div>
         <div>
               <h1>Hello React 5</h1>
         </div>
</section>

Now here when there is update in the UI then react compares the new virtual DOM with the pre-updated virtual DOM and points out that in the second <div> the content has been changed so it only updates the content of the second div in the real DOM.

This process is fast as only a single node had to change as opposed the whole repainting of the UI.

But wait what if the DOM elements are added ?

<section>
         <div>
               <h1>Hello React</h1>
         </div>
         <div>
               <h1>Hello React 5</h1>
               <h2>Hello React 17<h2>
         </div>
</section>

In this scenario only a node has been added to the second div so React just adds it to the real DOM.

But wait here the element was added at the end of the div element.

What if we add an element at the top ?

<section>
         <div>
               <h1>Hello React</h1>
         </div>
         <div>
               <h2>Hello React 17<h2>
               <h1>Hello React 5</h1>
         </div>
</section>

here the virtual DOM would repaint the whole second div as when it tries to compares it with the pre-updated virtual DOM then in second div the first child was h1 and now it is h2 so it doesn't just add the new element instead it replaces the whole div element.

Imagine that instead of just the two elements inside the second div tag we have 1000's of hierarchical components. It will re-render those 1000's of components which didn't changed.

To solve this issue React supports a key attribute. When the children of the React components have keys, React uses the keys to match children in the pre-updated virtual DOM.

Let's use these keys in our example above and see how it solves our problem.

<section>
         <div>
               <h1 key="as231">Hello React</h1>
         </div>
         <div>
               <h2 key="12dsa">Hello React 17<h2>
               <h1 key="asddda">Hello React 5</h1>
         </div>
</section>

Here now react diffing algorithm matches the component with previous key asdda in the second div and a new element with key 12dsa. So in this scenario react just marks the new element and it is added to the real DOM. This solves our problem of unnecessary re-rendering of unchanged components.

Make sure the following points when using keys :React keys should be different in sibling components, not globally.You can also pass the array index as the key.You can also pass the id received from the database.

Now you know what makes React so fast ? It's the use of virtual DOM which keeps the re-painting of the DOM as less as possible.

RECAP

Frequent DOM manipulations are expensive.

Virtual DOM is a virtual representation of DOM in memory.

Virtual DOM is synced with real DOM with ReactDOM library. This process is called Reconciliation.

React compares the Virtual DOM and pre-updated Virtual DOM and only marks the sub-tree of components that are updated. This process is called diffing.

The algorithm behind diffing is called Diffing algorithm.React uses keys to avoid unnecessary re-renders.

Watch my Youtube Video for More Detailed Explanation.

Also published at https://dev.to/koolkishan/what-is-virtual-dom-how-virtual-dom-works-what-is-reconciliation-what-is-diffing-algorithm-what-makes-react-so-fast-327a