React Virtual DOM – Explained in Simple words

What is DOM?

Let’s first understand what is DOM and then we will discuss how React updates the DOM using virtual DOM. DOM stands for Document Object Model. It is a structural representation of a tree with nodes representing different HTML tags as JavaScript objects which makes it easier for the browser to understand.

We all have worked with DOM before in Vanilla JS like document.getElementById or document.getElementByClass and the list are in red endless with which we can easily modify the content as our heart desire. 

Updating the content

To modify the content or styling, we need JavaScript objects as the browser cannot understand HTML tags. Every time we change the content or styling, a new state corresponding to that change is made, thus there will be a change in the state (from initial to final) updating DOM (UI) with it.

But we still have no clue of what became the most expensive limitation that such an Ideal process has that React came with a solution of its own to deal with it.

Problem with DOM

As already described, there is no such problem with the actual process, but this process can only be used for a DOM tree with a small number of nodes, when we are talking about, let’s say a thousand nodes, everything can go wrong.

According to the process, after every state change, the DOM tree has to be re-rendered, and re-rendering a tree with 1000 nodes is not a good way to deal with it as many things can go wrong like losing speed or accuracy and can even cost us as it may take a lot of space while doing so.

To solve this problem, react developed came up with a new DOM called Virtual DOM for React Apps.

Virtual DOM

According to the documentation of React, “Virtual DOM or VDOM is just a virtual representation of the UI which is kept in the memory and synced with Real DOM”.

In simpler terms, VDOM is no different from the real DOM, except that it is the virtual or lightweight copy of the UI that is stored in the memory and is always in contact with the actual one.

It has the same properties and follows the same process as the Real DOM, but it cannot directly affect the content, and while the Real DOM takes more time to load or render its UI after modification in respect to VDOM. 

But the real question is how it is faster when all the properties and even the process of rendering the UI after modification is the same?

Working of VDOM

We all know that in virtual DOM, a virtual object similar to the actual object is created with similar properties and also that after every state change, the DOM will re-render itself, but React has something different in store for us.

React, maintains two virtual DOMs at the same time. One DOM is the updated version, while the other is the pre-updated version or the original version. The state changes happen between them.

A comparison between the two DOMs takes place, and the component in which the changes have taken place only that component will be rendered again while others remain the same. This process is called diffing.

Once diffing is completed and the React has the component or the object in which changes have taken place, only that part gets updated in the Real DOM. This process is a batch process and not a single-step process where all changes are sent at the same time to be shown to the Real DOM.

Simply said, Real DOM will only be rendered for those parts where changes have taken place, and there will be no re-rendering for the rest of the Tree. This will affect the speed and efficiency of our apps and pages.

Example

Let’s have a look at an example to understand it better.

The following image represents the Tree structure of the DOM with its nodes. The blue circles represent the original state of the DOM while the red ones represent the updated state 

As told, the virtual Dom gets updated before the real one, and it’s because the real DOM will make only those changes detected by the Virtual DOM and will display the rest of the UI as it is.

In the above image, Virtual DOM has detected 2 changes which are in red in the third set of nodes, and the same circles are displayed in the Real DOM in the third set while there was no change before that.

And the circles in red will only be rendered as only those are detected to be modified by the Real DOM making it faster and more efficient.

Recap

1. Virtual DOM is a virtual representation or a lightweight copy of DOM in memory.
2. Virtual DOM and the Real DOM are synced together with the ReactDOM library. This process is called Reconciliation.
3. React compares the updated Virtual DOM and pre-updated Virtual DOM to check the updated object or component that is then updated in the Real DOM. This process is called diffing.
4. React uses keys to avoid unnecessary re-renders.
5. Virtual DOM is faster than the Real DOM
6. Virtual DOM has the same properties as the Real DOM, but it lacks the power to directly change the UI of the screen.
7. Everything is done in batches making it easier and quicker to complete.