Lesson Weekend

One of React's most powerful features is its virtual DOM. In this lesson, we'll discuss how the virtual DOM works.

Document Object Model Review


Before we can fully understand React's virtual DOM, we must have a thorough grasp of the standard DOM.

We first discussed the Document Object Model (or DOM) in Introduction to Programming. The DOM is the browser's interpretation of the HTML it renders. If we inspect an element in an HTML page we've built (by right-clicking in the browser and selecting Inspect), we're actually seeing the DOM, not the HTML we wrote.

DOM vs HTML

We already know what HTML is — a markup language for hypertext. It's a declarative language that allows us to tell the browser about how a page should be structured.

The DOM, on the other hand, is a language-independent model of objects that represent the actual structure of our page.

We can think of HTML as being the blueprint of a house while the DOM is the actual house that the browser builds for us.

When we add JavaScript or jQuery code to our applications, we can change the DOM so that it no longer matches the HTML.

To continue our blueprint metaphor, think of our house as having switches for turning on lights in each room. Our blueprint represents the house with all the lights turned off, but our DOM can utilize JavaScript code we've written so the lights are turned on (and off again).

Issues with the Standard DOM

Unfortunately, the standard DOM was never optimized for creating dynamic user interfaces.

A modern site like Twitter or Facebook might have thousands of nodes, each with the potential to change the DOM in a different way. This is too much for a library like jQuery to handle. Our code would become slow and inefficient. It would also become "spaghetti code" — code that is hard to read and understand.

Ultimately, manipulating the DOM is inefficient and resource-intensive. For that reason, we should minimize DOM manipulation as much as possible.

The Virtual DOM


React deals with this issue by creating a virtual DOM. The virtual DOM is React's own internal draft of the DOM. Here's how it works:

1. React Creates its own Virtual DOM

React is declarative, which means we only need to declare what our UI should look like. React will handle the rest.

When we create React elements (such as a header or paragraph), we're actually creating new elements in the virtual DOM, not the real DOM.

Creating and updating this virtual DOM is much faster than updating the actual DOM because it doesn't require communication with the browser.

2. React Compares the "Actual" DOM to its Virtual DOM

After crafting its own virtual DOM, React then compares it to the "actual" DOM in the browser, noting any differences between the two.

3. React Calculates Changes

React then automatically calculates the least number of changes necessary to update the actual DOM to match its virtual DOM. This process is known as reconciliation.

4. React Updates Actual DOM

React then updates the real DOM to match the virtual DOM only once. This is much faster than calling the DOM multiple times, making each small change individually.

5. Repeat

This process repeats as the user interacts with the application. React continues to update its own virtual DOM as users complete actions that warrant updates to the user interface.

While it's important to have a basic understanding of how the virtual DOM works, React will take care of the heavy lifting for us and allow us to create very efficient sites with relatively little code.

Lesson 3 of 41
Last updated September 2, 2022