React: this is how the virtual DOM works

React is an open source library developed by a Facebook team for creating single page application user interfaces. This library was born due to a performance problem suffered by the social network app, which had been working with a typical system of links between views and data, but due to the large number of connections between both layers, the performance of the application was affected.

This problem, a very big one for the most widely used social network in the world, motivated a Facebook team to optimize the way views are rendered based on changes in the application data. They managed to solve their problem and brought React into the world.

React Virtual DOM: the secret to its optimal performance

It is interesting why the applications that use React have, in most cases, a good performance. This is largely due to the library's use of a virtual DOM.

DOM stands for Document Object Model. The DOM in simple words represents the user interface of your application. Every time there is a change in the state of your application UI, the DOM is updated to represent that change. Now the problem is that frequent DOM manipulation affects performance, making it slow.

React uses a virtual DOM, thus managing not to lose performance with manual manipulation of its user interface.

The virtual DOM is just a virtual representation of the DOM. Every time the state of our application changes, the virtual DOM is updated instead of the real DOM. In simple words, a virtual DOM is represented as a tree. Each element is a node present in this tree, if the state of any of these changes it causes the creation of a new virtual DOM tree different from the previous one.

When this process is completed, what the virtual DOM does is calculate the most optimal method to make these changes in the real DOM, thus ensuring that there is a minimum of manual operations and this does not cause slowness in the application.