Surely if you have worked with React or have heard something about this library, the term “Virtual DOM” sounds to you, since it is one of its main concepts and the reason that allows it to have such a high performance when updating the DOM . Therefore, I thought it was very interesting to prepare an article explaining what it is and how it works. Let’s go there!

Real DOM

But first of all, if there is a Virtual DOM there will have to be something real, right? Indeed, the DOM (whose acronym is “Document Object Model) is the representation of the graphical interface of our application. Therefore, every time the state of the application changes, the “expected thing” is that this interface also does so adapt to the modifications introduced.

However, updating the DOM is an expensive task in terms of performance, so the more changes in the state it is necessary to reflect on it, the slower our website will go.

And why is it so slow to make those changes?

THE DOM has a tree-shaped structure:

This causes that every time we modify an element within it, all your children have to be render again (whether or not they have changed). And it is precisely this process that causes the performance problems, since rendering elements in a graphical interface is an expensive task. Therefore, the more elements that remain below our modified element in the DOM structure, the more elements will have to be repainted in the graphical interface. And this is where the concept of Virtual DOM comes in with the objective of optimizing this task.

Virtual DOM

The Virtual DOM is a representation in memory of the real DOM that acts as an intermediary between the state of the application and the DOM of the graphical interface that the user is seeing.

Since each element is a node in the DOM tree, each time a change occurs in any of these elements (or a new element is added) a new Virtual DOM is generated with the resulting tree. Since this DOM is virtual, the graphical interface is not yet updated, but the real DOM is compared with this virtual DOM with the objective of calculating the most optimal way to make the changes (that is, to redo the least possible changes) . This reduces the cost in terms of performance of updating the real DOM.

Searching on the Internet I found this graphic on the O’Reilly website where you can see the process:

1. State Change. In this first step, there is a change in the state of the red color node, which causes a Virtual DOM to be generated in memory with the resulting tree after that change.
2. Compute diff. The comparison between the Virtual DOM tree and the browser tree (real DOM) is then carried out in order to detect the changes produced. As you can see, the change affects the entire branch that descends from the node whose state has changed.
3. Re-render. Finally, the change in the real DOM is consolidated and the graphical interface is updated at once.

How does React use the Virtual DOM?

As I commented at the beginning of the article, React uses this technique to transfer state changes to the graphical interface.

In React, each piece of the UI is a component and each component has an internal state. This state is observed by the library in order to detect changes in it so that, when a change occurs, React updates the tree of its Virtual DOM and follows the same process to transfer the resulting changes to the interface presented in the browser . This allows you to perform better than libraries that manipulate the DOM directly, since React only updates those objects in which it has detected changes during the diffing process.

In addition, React transfers the changes to the DOM of the graphical interface in bulk, which also increases performance. This is because instead of sending multiple changes, React puts them all in one to reduce the number of times the graphical interface must be painted.

Finally, another advantage that React provides us with is the abstraction of the entire process of updating the DOM that it provides. That is, it allows us to forget about updating the attributes or the value of the nodes that make up our graphical interface since all this happens internally.

In other words, as developers we only have to worry about telling React what the state of our application is at the present time because React is in charge of manipulating the DOM internally to reflect it in the graphical interface.

React and the render() method

In the case that we are working with a Class Component, the render() method is where we declare the interface of that component.

In addition, it is a method belonging to the life cycle of the component that is executed each time the state of the component or a prop changes. If, for example, we use the setState method to update a value within the internal state of the component, React immediately detects the change and re-renders the component using Virtual DOM.

Final thoughts

Here is a summary of everything discussed in the article:

• Updating the DOM is an operation that has a negative influence on performance because it means updating the graphical interface.
• Virtual DOM is a representation in memory of the DOM associated with the graphical interface that the user sees.
• Each time there is a change in the state of the application, the Virtual DOM is updated to then make a comparison between this new version and the old one of the real DOM.
• Once the changes are detected, they are sent at once to the real DOM to perform a single update of the graphical interface.
• This is how React works and what allows it to have this great performance.

Do you want to read more articles like this?

If you liked this article I encourage you to subscribe to the newsletter that I send every Sunday with similar publications to this and more recommended content: 👇👇👇