Before we start with virtual DOM we should know the basic of DOM(the original DOM)

DOM

The Document Object Model (DOM) is a cross-platform and language-independent application programming interface that treats an HTML, XHTML, or XML document as a tree structure wherein each node is an object representing a part of the document.

So HTML is a text, the DOM is a memory representation of this text.

What does the DOM do?

When we write HTML text, the DOM converts those texts into tree-structure objects.
Now that they are the objects we can manipulate those objects as we want.

For example:

<div id="some_id">
  <p class="some_class">Some cool text</p>
  <p>Another cool text</p>
</div>

With the help of the methods like “getElementById” or “getElementsByClassName” we can manipulate ‘div’ and ‘p’ elements as we want. The DOM will traverse through the tree structure, find them and modify them as required.

So what is the problem with this DOM?

DOM’s problem:

As DOM is tree-structured we can manipulate any elements(node) easily but this process is quite expensive. Let us say we have more than 1000 div element and we want to change their text. The DOM will traverse through every div and will change their text but thanks to jQuery(God bless jQuery) we can do that very easily. However, even with the jQuery, it will take more time. Nowadays, web pages are getting bigger and more dynamic. This would make updating DOM more inefficient and will hard to manage.

This problem can be solved by virtual DOM.

VIRTUAL DOM

The virtual DOM is an abstraction of browser DOM and is isolated from it. Since the virtual DOM is isolated, it becomes the abstraction itself.

If we go deeper then think of virtual DOM as a copy of HTML DOM. As a result,  we can do the calculations and modification within this DOM copy. The real DOM modifications untouched which are browser-specific and slower.

There are many javascript libraries which use virtual DOM like ReactJS, VueJS, EmberJS, and others. So why ReactJS’s virtual DOM is better?

1) ReactJS’s “diffing” algorithm has better performance.

2) Modification of sub-tree is done efficiently.

3) Simpler than other frameworks.

How does it work?

ReactJS uses the mix of JavaScript and HTML tag known as JSX to write any component. As our browser does not understand the JSX, it will be converted into the basic JavaScript. See the below example.

<div className = "some_class">   Dr Strange </div>

Above code will be converted into:

React.createElement('div', {
      className: 'some_class },   '
      Dr Strange ' );

Here the first arguments is type equivalent to HTML tags, the second one is an object containing attributes which can be an empty object if there are no  attribute and the third one is the child element

If we have more children:

<div className = "some_class">   Dr Strange   <hr />   Loki </div>

then it will look like this

React.createElement(   'div',   { className: 'some_class },   'Thor',   React.createElement('hr'),   'Loki' );

See the second child it has a function because there is another type. There are other values as children for example array, boolean, null etc. The children can also be put as an array on the third arguments.

If we use React’s custom components, let’s say

< CustomList items = {items}/>

Then similar javascript code would be

React.createElement(CustomList, {
  items: items
});

Now we converted all JSX code into the basic javascript and React’s ReactDom library comes in handy.

ReactDOM.render(React.createElement(CustomList, {
  items: items
}), document.getElementById('#parentDiv'));

This will create an object as below:

{
  type: CustomList,
  props: {
    items: items
  }
}

If there are children then it will be inserted into the props as property with “children” key.

This object builds the Virtual DOM. Then render method will try to convert that object into the real DOM.