How React Virtual DOM works under the Hood?

#webdev #javascript #react #frontend

Introduction

In this blog we are going to cover how Virtual DOM works and how is it any different from Real DOM . This Virtual DOM concept is used in various frameworks like VueJs and a library like React. Before understanding Virtual DOM, Let’s see how Real DOM works on the web Browser.

Real DOM

The Real DOM or Document Object Model represents the structure of the HTML page rendered on the browser. The DOM represents the HTML in a tree like structure, All of them have a Parent-Child relationship with there parent element and the root elemnt being the HTML(the tag we use to initialize a HTML page), Which is accessed by javascript to manipulate the struture and nodes of the HTML tree. This is an example of DOM tree of a minimal HTML based document.

<HTML>
<main>
<title>This is the title</title>
<link href="http://somecdn.dev/xyz" />
</main>
<body>
<h1>This is the heading tag</h1>
<p>This is the paragraph tag</p>
</body>
</HTML>

So, When we do some changes on the tree the page refreshes and the whole page is rendered again. This is a problem because a slight change in the DOM can make the page re-render completly from the HTML element. To avoid these problem Virtual DOM is used in frameworks or libraries.

Virtual DOM

Virtual DOM is a JSON representation of the actual DOM on the Browser and is faster in rendering the changes in the real DOM than manipulating them directly. Virtual DOM does the minimal changes required in the virtual DOM and once that is done it changes only the element affected in real DOM. Lets take an example on how this DOM looks. We will take a small example for it.

<body>
<h1>This is the heading tag</h1>
<p>This is the paragraph tag</p>
</body>

**{
  "type": "body",
  "props": {},
  "children": [
    {
      "type": "h1",
      "props": {},
      "children": [
        "This is the heading tag"
      ]
    },
    {
      "type": "p",
      "props": {},
      "children": [
        "This is the paragraph tag"
      ]
    }
  ]
}**

This is a mere example, An entire tree like structure like this is generated for all the elements in the virtual DOM. The changes that are done are firts changed in the JSON like structure here and then the diffrence is updated in the real DOM.

How does it do that?

Virtual DOM follows a step by step rule to do these changes following:

Initial Render : When the web-app starts the entire document is represented in the web browser and a virtual copy is created.This copy holds the entire tree like structure for the web page.
States / Props (Change): When you change something on the document or the components or properties. According to the changes React creates a new version of the virtual DOM with the changes in it . But these are not applied to the real DOM yet.
Diffing or Comparision: After a new version of the virtual DOM is created a diffing algorithm is used to find the diffrences between the previous and the current version of the virtual DOM.
Reconciliation process: After finding the minimal differences React finds the most optimized form to make the changes in the real DOM.This helps avoid re-rendering of the entire UI and happens quick and is highly perfomance oreinted.
Update Real DOM: React find the minimal changes and updates on the elements affected rather than rendering the entire UI it only changes the affected components or properties.

The main process that helps in this fast renders are diffing and reconciliation. To visualise the process check the image below.

Conclusion

Virtual DOM is key feature in improving performance and efficient UI updates . Using this React acn minimize the rendering of elements and provide a smooth and fast UI changes. This is make it more useful while serving or devloping the websites.