Understanding the Virtual DOM in React

Runnable lesson · press Try it on the examples to edit and run them here.

You will hear “React uses a Virtual DOM” very often. It is a useful idea, but it is also often explained badly. This lesson explains what it means and what it does not mean.

The real DOM

The DOM (Document Object Model) is the live tree of elements the browser builds from your HTML. When JavaScript changes the DOM, the browser may need to recalculate layout and repaint the screen. Doing that more than needed is slow.

What React does instead

When your component runs, it returns JSX. JSX is turned into plain JavaScript objects that describe the elements you want: their type, props and children. This lightweight description is what people call the Virtual DOM. It is just data.

React’s update process looks like this:

1. Render: React calls your components to get a new description (a new tree of objects).
2. Compare: React compares the new tree with the previous one. This is called reconciliation.
3. Commit: React changes only the real DOM nodes that are different.

The key sentence is the last one. If a single word changes in a paragraph, React updates that text node. It does not rebuild the whole page.

Seeing it for yourself

This example has a clock that updates every second next to a text box. If React rebuilt the whole page every time, whatever you type would disappear every second. Type something and watch.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function App() {
  const [seconds, setSeconds] = React.useState(0);

  React.useEffect(() => {
    const id = setInterval(() => setSeconds((s) => s + 1), 1000);
    return () => clearInterval(id);
  }, []);

  return (
    <div>
      <p>Seconds on this page: {seconds}</p>
      <input aria-label="Type here" placeholder="Type here" />
    </div>
  );
}

The number changes every second, but your text stays in the input. React saw that the <input> in the new description is the same as before and left that DOM node alone. It only updated the text node with the number.

Common myths

• “The Virtual DOM is faster than the DOM.” Not exactly. It is extra work on top of the DOM. What it gives you is a simple programming model: write the UI as a function of state, and let React work out the minimal changes. For many apps that is fast enough, and it saves you from writing update code by hand.
• “React re-renders the whole page.” React may call many components again, but it only changes the DOM nodes that really differ.
• “I need to think about the Virtual DOM when I write code.” Almost never. You write components. React handles the rest.

One rule that helps React compare

When React compares two lists, it needs a way to match old items with new ones. That is what the key prop is for. You will learn it in Understanding React Keys. The rule of thumb is simple: give list items a stable, unique key, not their position.

Key points

• The Virtual DOM is a lightweight description of the UI made of plain objects.
• React compares the new description with the old one and updates only the differences in the real DOM.
• You do not manage it directly. You write components that describe the UI for the current state.