What is the React Virtual DOM?

If you’re a modern web developer, bootcamp student, or Treasurer for Life of the Dan Abramov Fan Club, you’ve probably encountered the notion of React’s “Virtual DOM.” It’s a big part of what makes React so performant, and is a central part of the framework’s design philosophy. The Virtual DOM can sort of be explained as “a second layer on top of the DOM that makes things go faster,” but it’s such an important part of React that it’s worth diving into the technical nitty gritty just a little. Vamoose:

What about the regular DOM?

If you’re just starting out in web development, you’ve probably heard of “DOM Manipulation.” But what is the DOM, and why do we manipulate it?

DOM stands for Document Object Model. In brief, it’s an abstraction of some structured text—for our purposes, HTML. When HTML gets fed into your browser’s render engine (and each browser handles this a little differently; more on that later) it creates the DOM: a representation of our page’s content that we can manipulate directly by writing Javascript. This is what allows us to create Single Page Applications that update their content without reloading the page. If you’ve come to web development from, say, Rails Views templating and found it frustrating that you had to refresh the page to make changes, all I can say is strap. In.

The DOM includes an API that lets us do stuff to our DOM nodes (which represent HTML elements)—methods like addEventListener and getElementById. Great stuff. But there’s a problem.

Let’s say we have the following elements:

<ul>
<li>Hey</li>
<li>I</li>
<li>Just</li>
<li>Met</li>
<li>You</li>
<li>And</li>
<li>This</li>
<li>Is</li>
<li>Crazy</li>
</ul>

Classic. But this is JavaScript—we’re not satisfied with a static ul. Let’s say we want to change the color whenever one of our li's is clicked:

const items = document.getElementsByTagName('li');
items.forEach(el => el.addEventListener('click', function() {
this.style.backgroundColor = "blue";
});

Looking good. Except that the way the DOM works, modifying any one of these li tags will re-render the entire DOM. On a modern interactive SPA with dozens or more DOM nodes to be manipulated at will, that’s a huge performance bottleneck, and it slows things down hugely.

Enter the Virtual DOM

React didn’t actually invent the virtual DOM, but it does apply it quite efficiently. Here’s how:

React creates a second, “virtual” DOM that is a copy of the regular DOM (which, since the DOM is already an abstraction of the HTML, is an abstraction of an abstraction). But here’s the thing: the virtual DOM is never actually rendered, which means changes can be made to it much more quickly.

When a component in a React project is updated, React will compare the new virtual DOM with a “snapshot” of the virtual DOM taken just before the update. It then isolates the changes (a process known as diffing) and then sends only those nodes which have changed to be updated on the real DOM. This cuts down on performance requirements considerably, and is a smarter approach to DOM manipulation in general.

Another benefit to the virtual DOM is that it standardizes manipulation between different browsers, which makes your life as a developer a little bit easier. The virtual DOM isn’t proprietary—if you want to delve deeper into how it works, you can build your own.

Happy coding.