What is Virtual DOM and how it works?

React is a very popular JavaScript library for its performance. It smartly does the work when it comes to handling page updates and data binding. But there are many scenarios behind that performance. Virtual DOM is one of them. When there is a change in UI then the DOM updates and the UI must be re-render.

This re-rendering is a slow process because CSS is also re-calculated at that time, then the layout must be re-computed, and at the last browser must paint the elements on the screen. For that reason, the concept of Virtual DOM appeared. Let's understand what is actually Virtual DOM.

Virtual DOM is something that represents a copy of the actual DOM. React creates a copy of DOM and renders the UI depending on that DOM. React observes all the changes made in the actual DOM and modifies the virtual DOM only where the changes happened. Then it renders the UI only where the changes happened in the virtual DOM. And the name of this process is diffing. Since the virtual DOM tree is just a JavaScript object that’s why this process is fast.

Figure-01: Virtual DOM and Diff Algorithm.

For doing this comparison React uses the "Diff" algorithm. With this algorithm React can understand where changes have occurred. Then React changes only that part of the DOM where the change was made. In the next step when the real DOM is updated then the updated virtual DOM becomes pre-updated virtual DOM for the next DOM change.

If we want to do DOM manipulation for simple event like click event at that time we will access the element by using getElementByID(‘id’) method. Here the method will find the element with specific id then it will perform the DOM manipulation. And this is very simple process. But if we have many components in our application and data inside them can be change within couple of seconds then it will be difficult to handle and also it will be time taking task. For overcoming this problem React uses Virtual DOM for DOM manipulation process.

The whole process of rendering are explained below:

At first, React will store in the memory the actual DOM before the re-render happens. Here we can call it Real Virtual DOM.

Then, React will create a new Virtual DOM which will have all the old components and the new changes. React will consider those components as new. Then the new Virtual DOM will be kept separate from the old one and it will change anything of actual DOM.

In the third stage, it will compare both Virtual DOMs and will find the new change that has to be implemented and the position. And it will happen by using the "Diffing Algorithm" .

When the change has been noticed then React will remove the old component from the actual DOM. And will set the new component onto the actual DOM. At first the removed component takes componentWillUnmount() lifecycle method which removes it. After that the new component that will be set takes componentWillMount() and componentDidMount() that will bring the component to the UI.

This is the process how Virtual DOM works. Since it is taking some crucial steps so it can be time taking process but most of the steps happening regarding Virtual DOM which is mainly objects stored in the memory till last step. So, this is the whole scenario of Virtual DOM and how it helps React in rendering components.