Virtual DOM: Beyond The Cool Name
Anyone Who’s Starting with React, has already heard the term Virtual DOM. But beyond the cool and quit frankly mysterious denomination what is this Virtual DOM about and why is it such a key concept in understanding React?
Let’s start by refreshing the concept of DOM to begin with. The DOM or Document Object Model is simply a representation of the UI of the application. It is there to translate every update or change that happens to the state of the application’s UI. The DOM has a tree data structure that can be represented as shown in the figure below:
This structure enables it to have fast changes and updates. But the problem is not in the updating of the DOM in itself but in the re-rendering of the application’s UI that follows. We can now easily see that for a complex application this can get out of hand very quickly (the more components, the more updates to the DOM thus the more re-renderings).
In response to such a problem the virtual DOM is presented in React as the solution; As a quick definition, it is a virtual representation of the DOM: Every time the state of the application changes the virtual DOM gets updated instead of the real DOM.
You might then ask here : How’s this any different from the real DOM mechanism ?
Well, here we need to take a closer look on how the virtual DOM’s working and the intricacies that makes it more efficient than dealing with the real DOM.
When a new element is created in the UI or some elements get updated, a new copy of the Virtual DOM is created ( with the same tree representation as presented earlier ). Each element is a new node in the tree representation and with each change or update a new Virtual DOM is created to be compared with the previous Virtual DOM. This process is called “Diffing”.
A “diff” is then just the difference between an updated version of the virtual DOM and the original one. Below is what could be a representation of a grouping of diffs:
const diffs = [
{
newNode: { /* new version of list item one */ },
oldNode: { /* original version of list item one */ },
index: /* index of element in parent's list of child nodes */
},
{
newNode: { /* list item two */ },
index: { /* */ }
}
]This serves as a guide for how to update the actual DOM. Once all the diffs are compiled, the changes to the DOM happen in a grouped way as a whole batch.
Frameworks such as React use the virtual DOM concept to make more performant updates to the DOM. Because of this, even though we are re-rendering the entire template, only the parts that actually change are updated; Once React knows which objects have been updated, through the use of “diffs”, it then only updates those objects in the Real DOM.
The render function is of outmost importance here, as it is the place where the UI gets updated. The render() function is the point of entry where the tree of React elements are created.
Generally speaking, React detects automatically if any state or prop change happened which allows then the render function to return a different tree of React elements to be compared
to the original one. Through mechanisms like diffing and batched updates, React can optimize the most expensive part of DOM manipulations which is the re-rendering and repainting of the application’s UI.
