Unlocking the Power of React’s Virtual DOM

What is the React DOM?

To understand the virtual DOM, let’s first revisit what the actual browser DOM is. When a user requests a webpage, the browser receives an HTML document and constructs a tree-like structure from it. This structure is called the Document Object Model (DOM), which serves as an interface for JavaScript and other scripting languages to access and manipulate the document’s content.

The Problem with Re-Rendering

While DOM operations are fast, re-rendering can be expensive when app data changes. To illustrate this, let’s simulate re-rendering a page using JavaScript.

const originalHTML = '<input type="text" value="Original value">';
const updatedHTML = '<input type="text" value="Updated value">';

document.body.innerHTML = originalHTML;
const input = document.querySelector('input');
input.value = 'User input';

document.body.innerHTML = updatedHTML;
console.log(input.value); // prints "Updated value" instead of "User input"

As seen in the example above, the document DOM elements are rebuilt and repainted on each update, causing the text input to lose its state.

Introducing the Virtual DOM

React’s solution to this problem is the virtual DOM, a lightweight replica of the actual DOM stored in memory. The virtual DOM doesn’t directly change what’s shown on the user’s browser but provides a mechanism for computing minimal DOM operations when re-rendering the UI.

How the Virtual DOM Works

When rendering an application user interface, React creates a virtual DOM tree representing that UI and stores it in memory. On the next update, React creates a new virtual DOM tree and compares it to the previous snapshot using a diffing algorithm. This process determines what changes are necessary and updates only those elements on the actual DOM.

// Create a virtual DOM tree
const virtualDOM = React.createElement('div', null, 'Hello World');

// Update the virtual DOM tree
const updatedVirtualDOM = React.createElement('div', null, 'Hello Universe');

// Compare and update the actual DOM
React.diff(virtualDOM, updatedVirtualDOM);

Key Benefits of the Virtual DOM

• Abstracts manual DOM manipulations away from the developer
• Helps write more predictable code
• Ensures the DOM matches the state after updating

Virtual DOM vs. Shadow DOM

While both concepts are related to DOM manipulation, they serve different purposes. The shadow DOM is a tool for implementing web components, providing a way to isolate components and their styles from the actual DOM.

Comparison Chart: Real DOM vs. Virtual DOM vs. Shadow DOM