Virtual DOM (Document Object Model) is a programming concept in which an ideal or “virtual” representation of the user interface is stored in memory and synchronized with the “real” DOM using a library such as ReactDOM. This process is called matching.

Today's article looks at the concept and power of DOM and why virtual DOM is used in React.

Concept overview: what is DOM?

To know the meaning of DOM and understand why React uses it, you need to understand the actual DOM of the browser.

Whenever a web document such as HTML is loaded into the browser, an object-oriented representation of the document elements is created as a tree structure. This object representation is called an object model of the document, also known as the DOM.

Because of its object-oriented nature, JavaScript and other scripting languages understand the DOM and can interact with, and manipulate, document content. For example, developers can use the DOM to add or remove elements, convert dom to images, change their appearance, and perform user actions on web elements.

DOM operations, such as querying and updating the DOM, are easier and therefore very fast. However, in order for the update to be reflected on a web page, it will need to be re-rendered (hereafter rendered).

How re-rendering affects performance

Re-rendering a page to reflect DOM updates is expensive, time-consuming, and labor-intensive and can result in poor performance because the browser has to recalculate CSS (Cascading Style Sheets), re-run the layout for each visible element, and redraw the web page.

Let's simulate the page re-rendering with JavaScript code:

const update = () => {
 const element = `
   <h3>JavaScript:</h3>
   <form>
     <input type="text" />
   </form>
   <span>Time: ${new Date().toLocaleDateString()}</span>
 `;
 document.getElementById("root").innerHTML = element;
};
setInterval(update, 1000);

The DOM tree representing the document looks like this:

Using setInterval() in the code, we display the state of the user interface every second. In the image below, after the specified interval, the browser redisplays the layout and redraws the web page.

The browser DOM has no mechanism for comparing and contrasting what has changed and redrawing only that DOM node (in this case, the rendering time):

This repeated rendering is obvious in text input. As we see, the input field is always cleared after a given interval. This process of re-rendering in the browser after DOM manipulation leads to performance degradation.

Render in React: Why virtual DOM is used

React is a component library. A React component will naturally redraw itself if there is a change to its state or parameter, or if a parent component is being re-rendered.

React cannot afford the expense of redrawing all the DOM nodes after each re-rendering. To overcome this problem, React implemented the concept of a virtual DOM.

Instead of allowing the browser to redraw all page elements after each DOM re-rendering or update, React uses the virtual DOM concept to figure out exactly what has changed without involving the actual DOM, and then ensures that the actual DOM redraws only the necessary elements. This concept helps React optimize performance.

Virtual DOM in React

Virtual and shadow DOM should not be confused. The virtual DOM in React is just a concept, a “virtual” representation of the actual DOM, it's nothing more than an object created to replicate the real DOM. Whereas, the shadow DOM is a browser technology aimed at separating it from the actual DOM, allowing it to isolate CSS rules and prohibit them from being accessed from the main document.

Unlike the actual DOM, creating a virtual DOM is cheap because it does not display data. It is only available as a strategy to prevent unnecessary page elements from being redrawn during re-rendering.

Take a look at the following rendering code, which represents the React version of the previous JavaScript example:

// ...
const update = () => {
 const element = (
   <>
     <h3>React:</h3>
     <form>
       <input type="text" />
     </form>
     <span>Time: {new Date().toLocaleDateString()}</span>
   </>
 );
 root.render(element);
};

We can also write JSX code using React functions that create and add the necessary element, including in the virtual DOM.

const element = React.createElement(
 React.Fragment,
 null,
 React.createElement("h3", null, "React:"),
 React.createElement(
   "form",
   null,
   React.createElement("input", {
     type: "text",
   }),
 ),
 React.createElement("span", null, "Time:", new Date().toLocaleDateString()),
);

We're going to have something like that:

The object above is the virtual DOM.

How React implements the virtual DOM

When we render a user interface, the virtual DOM for that rendering is created and stored in memory. If an update occurs in the renderer, React automatically creates a new virtual DOM tree for the update.

To explain this further, let's visualize the virtual DOM as follows:

Keep in mind, however, that the virtual DOM is just a simple object representing the user interface. Nothing is drawn on the screen, so it's easy to create it.

After React creates a new virtual DOM tree, it compares it to the previous snapshot, using a comparison algorithm to figure out what changes are needed.

The ReactDOM library is then used to make sure that the actual DOM receives and redraws only the updated node or nodes.

When React implements the comparison algorithm, it starts by comparing whether both snapshots have the same root element.

If they have the same element, React goes over and recursively accesses the attributes and then the children of each DOM node. If the root elements are of different types-which is rare in most updates-React will destroy the old DOM nodes and build a new DOM tree.

If we check our React renderer, we get the following behavior:

With each rendering, React has a virtual DOM tree that is compared to the previous version to determine which node's content is being updated and to make sure that the updated node matches the actual DOM.

In the above image, we see that only the rendering time, whose state changes, is redrawn each time it is redrawn.

In another example below, we visualize a simple React component that updates the state of a component after a button is clicked:

import React, { useState } from 'react';
const App = () => {
 const [open, setOpen] = useState(false);
 return (
   <div className="App">
     <button onClick={() => setOpen((prev) => !prev)}>toggle</button>
     <div className={open ? "open" : "close"}>
       I'm {open ? "opened" : "closed"}
     </div>
   </div>
 );
};
export default App;

Updating the component's state redraws the component. However, as you can see below, each time React re-renders, it is aware of the updated class name and changed text and redraws only them, not the entire component.

Virtual DOM synopsis and why it is used in React

Whenever we manipulate virtual DOM elements in React, we bypass the series of operations associated with direct manipulation of the real DOM.

This is possible because nothing is drawn on the screen with the virtual DOM. In addition, with a comparison algorithm, React can determine which update is needed and update only the object in the real DOM.

The concept of virtual DOM in React helps reduce the performance cost of re-rendering a web page, thereby minimizing the time it takes to redraw the screen.

Here's a simple analogy to further understanding how the virtual DOM works: think of managing the virtual DOM as editing a structural design or blueprint, rather than rewriting the entire project from scratch with every change.

Editing the imaginary scheme is much cheaper than rebuilding the actual DOM in the browser. When the latest is revised and finalized, we can already change only specific elements in the document structure.

Conclusion

Virtual DOM is nothing but a strategy that React uses to optimize application performance. It provides a mechanism that compares two rendering trees to see exactly what has changed and updates only what is needed in the actual DOM.

The idea behind the virtual DOM is great, although it's not new, but it can really help us improve the performance of our applications and make them “reactive”, which is really cool.

Ready to Discuss Your Project?

Ready to Discuss
Your Project?