React Virtual DOM - Teach Me Like a Kid

As a front-end developer, you may have come across the term called DOM many times. Furthermore, while working with JavaScript Library like React, you may have heard of one buzzword and that is Virtual DOM.

This article will explain all you need to know about Virtual DOM. This will help you to uplift knowledge about core React concepts.

Before diving into Virtual DOM, let’s understand some basic terminologies first.

DOM – Document Object Model

The Document Object Model, usually referred to as the DOM is an API for manipulating HTML documents to make websites more interactive.

In context to HTML Document, the above definition says that DOM allows us to manipulate the content, structure, and style of our UI.

In other words, almost anything found in an HTML document can be accessed, changed, deleted, or added using the JavaScript with the help of HTML DOM.

To understand this more clearly, let’s consider the following simple HTML document:

<!doctype html>
<html>
 <head>
      <title>My Page</title>
  </head>
  <body>
      <h1>Mobile OS</h1>
      <ul>
         <li>Android</li>
         <li>iOS</li>
     </ul>
 </body>
</html>

The above HTML document can be represented by the following DOM tree:

When you load the HTML document in the browser, it creates and maintains its document object model of the page by constructing a DOM tree of HTML elements.

As shown in the example image, right-click on the web page and click on Inspect property to access the DOM Tree.

Every time we make some changes in UI, the browser would repeat Reflow and Repaint all changed DOM tree nodes and their children in order to reflect the changes we made in our UI.

This process of changing UI and making frequent updates in DOM may cost the performance of the UI. It may also affect the page rendering and page load time.

If our page is large and has a complex UI structure, it can be a very visible lagging in the loading of the page.

For instance, the above example shows mobile OS in a list values. Now we are adding more elements to this list using JavaScript as shown below.

    const mobileOS = mos => {
      return mos.map(mos => {
        let ul = document.querySelector('ul');
        let li = document.createElement('li');
        ul.appendChild(li);
        li.innerHTML += mos;
      });
    }
    let mos = ['BlackBerry OS', 'webOS', 'Symbian OS', 'Palm OS']
    mobileOS(mos);

As demonstrated, we can update the list element in UI by manipulating the DOM object directly. This snippet shows that when we are adding a new list element, we are appending a new child element to the DOM which results in creating a whole new list element in UI.

Every time when we make changes in the list, DOM creates and updates a new List to DOM. These DOM manipulations are very expensive operations and it also impacts UI performance especially for large-scale or complex UI applications.

That’s where the concept of virtual DOM comes in and performs significantly better than the real DOM. The virtual DOM is only a virtual representation of the real DOM.

Virtual DOM in React

To conquer the above mentioned drawbacks, in every DOM there is a corresponding Virtual DOM (VDOM) in React.

So, Virtual DOM is an object identical to the JavaScript Object. In other words, Virtual DOM is simply a programming concept or a representation of a DOM object in memory as a virtual form.

What does it mean?

It means, React never updates the original DOM directly, for every DOM object, there will be a corresponding in-memory copy created. This copy is called the Virtual DOM(VDOM).

In React, the Virtual DOM is a lightweight (carbon copy) representation of the actual DOM that the browser uses to render web pages.

Virtual DOM has the same power and has properties and methods as the real DOM object. But Virtual DOM is not directly responsible for displaying elements on UI.

When React App gets rendered for the first time on the browser, it basically creates a fresh copy of the DOM object as a render tree along with a Virtual DOM in memory for future updates.

In the Virtual DOM tree, each element is represented by a node. A new Virtual DOM tree will be created whenever the element’s state changes.

React’s diffing algorithm will compare the current Virtual DOM tree with its previous version. Finally, the Virtual DOM uses the algorithm to update the actual DOM with the diff.

The animated image created by Tapas Adhikary below explains how a Virtual DOM is created as a copy of the original DOM and how the diffing and update occur.

The mechanism to diff one tree with another to determine which parts need to be changed and then update the original DOM with it is called Reconciliation.

To update UI, React syncs the actual DOM object with Virtual DOM which is stored in memory using a library such as ReactDOM. This process is called Reconciliation.

Kindly note, React uses a new reconciliation engine called Fiber since version 16.0. You can read more about the React Fiber Architecture here.