React: The Virtual DOM
How it works and why React uses it.
The Virtual DOM is one of the main features of React. It is a JavaScript object that is basically an abstraction of the real DOM and is one of the main pieces for the high performance of the application.
In this article, we’ll cover the Virtual DOM, exploring its benefits in React Applications.
A brief context about the DOM
To understand the Virtual DOM and learn why React implements it, let’s take a look on how the actual browser DOM works.
When a user requests a web page, the browser receives an HTML document for that page from the server. The browser engine then constructs a tree-like structure from the HTML to show the user the requested page in the client.
This tree-like structure is called the Document Object Model, also known as the DOM. It is a structural representation of the web document as nodes and objects.
The DOM serves as an interface for the web document so that JavaScript can access, manipulate, and programmatically interact with the document’s content. For example, developers can use DOM APIs to add or remove elements, modify their appearance, and perform user actions on web elements.
If you want to know more about DOM, I recommend that you check out the link above.
The impacts of Repaint and Reflow
Changing whatever information which was used to construct the render tree may result in one or both of the conditions above.
- Reflow: when parts of the render tree (or the whole tree) need to be revalidated and the node dimensions recalculated.
- Repaint: when parts of the screen need to be updated, either because of changes in geometric properties of a node or because of stylistic change, such as changing the background color.
Reflow
Reflow means re-calculating the positions and geometries of elements in the document, for the purpose of re-rendering part or all of the document. Because reflow is a user-blocking operation in the browser, it is useful for developers to understand how to improve reflow time and also to understand the effects of various document properties (DOM depth, CSS rule efficiency, different types of style changes) on reflow time. Sometimes reflowing a single element in the document may require reflowing its parent elements and also any elements which follow it.
Repaint
Repaint means the repainting element on the screen as the skin of element change which affects the visibility of an element but do not affects layout.
Things that would trigger a repaint:
- change the visibility of an element;
- change an outline of the element;
- change the background color.
Virtual DOM for the rescue
The strategy of reducing and baching DOM changes taken to another level of abstraction is the idea behind React’s Virtual DOM.
React doesn’t really do anything new. It’s just a strategic move. It stores a replica of real DOM in memory. When you modify the DOM, it first applies these changes to the in-memory DOM and using it’s diffing algorithm, figures out what has really changed.
Finally, it batches the changes and call applies them on real-dom in one go. Thus, minimizing the re-flow and re-paint.
Essentially, the virtual DOM provides a mechanism that allows the actual DOM to compute minimal DOM operations when re-rendering the UI.
It allows you to update a view whenever state changes by creating a full representation of the view and then patching the DOM efficiently to look exactly as you described it.
For example, when an element in the real DOM is changed, the DOM will re-render the element and all of its children. When it comes to building complex web applications with a lot of interactivity and state changes, this approach is slow and inefficient.
Instead, in the rendering process, React employs the concept of the virtual DOM, which conforms with its declarative approach. Therefore, we can specify what state we want the UI to be in, after which React makes it happen.
How React implements the Virtual DOM
When we render an application user interface, React creates a virtual DOM tree representing that UI and stores it in memory. On the next update, when the data that renders the app changes, React will automatically create a new virtual DOM tree for the update.
After React creates the new virtual DOM tree, it compares it to the previous snapshot using a diffing algorithm called reconciliation to figure out what changes are necessary.
After the reconciliation process, React uses a renderer library like ReactDOM, which takes the differ information to update the rendered app. This library ensures that the actual DOM only receives and repaints the updated node or nodes.
In summary, on every render, React compares the virtual DOM tree with the previous version to determine which node gets updated, ensuring that the updated node matches up with the actual DOM.
Conclusion
React uses the virtual DOM as a strategy to compute minimal DOM operations when re-rendering the UI.
The virtual DOM provides a mechanism that abstracts manual DOM manipulations away from the developer, helping us to write more predictable code. It does so by comparing two render trees to determine exactly what has changed, only updating what is necessary on the actual DOM.
