What is Virtual DOM?

Before starting Virtual DOM, let start first with What is DOM itself.

DOM stands for Document Object Model; it is an interface for both HTML and XML documents. In simple words, it is a UI of the application. As if there is any change in the application of UI, the DOM gets automatically updated to represent the change in a UI. It contains a node for each HTML document which is a structural representation of the web-page. As a web developer, it allows modifying the content through JavaScript which makes it easier to work on each node respectively.

Image credit: Simplilearn.com

But it causes a drawback also i.e. DOM represented as a tree structure in which each node represents a part of the document so if there are any changes and updates to the elements it is in fast mode. But its process for laying out the element and painting the structure which is quite large, it becomes slow and expensive. So, to resolve the problem Virtual DOM introduced.

What is Virtual DOM?

Virtual DOM is a lightweight copy and virtual representation of the actual DOM. It is also an abstraction of the HTML DOM. Just like original DOM, it is also a tree structure having a node that list of elements and their attributes and contents. By using React Render function which helps to create a node tree out of the component, every object of actual DOM exists there is an object in virtual DOM also which is the same but it has no proper control to change the layout of the document.

Image credit: Jsforall.com

Every state of application changes, the Virtual DOM gets updated instead of the real DOM. It allows React to do compilation and skip the real DOM operation. As a few blogs say that it is so fast, it can produce 2000 nodes per second.

React Render Function:

It is the point where the elements created in the react. When we use state or pop within the component, the function returns the different tree of React application. On the other hand, we use to set data(), React immediately to detect the change, and re-render the component. This works when React updates its Virtual DOM first and object that has changed in Real DOM.

When we working with Virtual DOM, we have to know what it is and it's different from each other i.e. ReactElemnt and ReactComponent. ReactElement is a light, stateless, and virtual representation of DOM elements. It is a primary type in React and also resides in VDOM. JSX compiles HTML tags into ReactElements. Whereas, ReactComponent is the stateful components in which state changes the component is re-rendered.

Whenever there is a change in the state, there may be a little change in HTML DOM so that ReactComponent converted into ReactElements which can be used to insert in Virtual DOM then compared it and updated fast and easy. 

How Virtual DOM helps React:

In our JSX file, when we change something then it automatically updates all the objects of the Virtual DOM as the cost is not much and it doesn’t take much time. React create and maintain 2 Virtual DOM for every application, one contains the updated version of Virtual DOM and the other is a pre-updated version of updated Virtual DOM. Comparing both the version to figure out the changed this process is called “Diffing”. After finds out the change it updated the objects only on the Real DOM. It helps to improve the performance so for the developer it may easy to work and debug.

Image Credit: dnoze.co

e.g. let's take an example, there is a program of HTML DOM

After the rendering, you VDOM represented as :

Now, we do an update in code now let say state changed to state.subject is now “mom”. Now the new representation is:

We can now diff the two trees and identify that only that h1 changed. We then update that single element there is no need to manipulate the whole thing.