A Guide for Understanding Virtual DOM | Tekolio

Let’s first understand what DOM is? 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’s desire.

Updating the content

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

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 his Apps.

Virtual 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

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.


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.


  1. Virtual DOM and the Real DOM are synced together with the ReactDOM library. This process is called Reconciliation.
  2. 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.
  3. React uses keys to avoid unnecessary re-renders.
  4. Virtual DOM is faster than the Real DOM
  5. Virtual DOM has the same properties as the Real DOM, but it lacks the power to directly change the UI of the screen.
  6. Everything is done in batches making it easier and quicker to complete.

Originally published at https://tekolio.com on December 16, 2021.

I am a front-end developer from India with over one year of experience in freelancing with skills like Git, HTML5, CSS3, Bootstrap 4&5, and React.

I am a front-end developer from India with over one year of experience in freelancing with skills like Git, HTML5, CSS3, Bootstrap 4&5, and React.