← Back to React Course | Chapter 2: JSX & Rendering Fundamentals | Lesson 8 of 10

The Virtual DOM Explained

The virtual DOM is React's rough sketch of the page it keeps in memory, so it can figure out the fastest way to update the real page.

In this page:

  1. What the Virtual DOM Is
  2. Diffing and Reconciliation
  3. Why the Virtual DOM Is Fast

What the Virtual DOM Is

The virtual DOM is a lightweight JavaScript object representation of the real DOM that React keeps in memory. When state changes, React builds a new virtual DOM tree and compares it to the previous one instead of touching the real DOM immediately.

Note: You never create or manage the virtual DOM directly -- it's an internal detail React handles for you.
Warning: The virtual DOM is not literally faster than the real DOM at everything -- its benefit is minimizing the number of real, expensive DOM operations React performs.

Example: What the Virtual DOM Is

markup 
<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
function VDomNote() {
  return <p>React compares virtual DOM trees before touching the real DOM.</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<VDomNote />);
  </script>
</body>
</html>

Diffing and Reconciliation

Reconciliation is the process where React compares (diffs) the new virtual DOM tree against the previous one and calculates the minimal set of real DOM changes needed to match it.

Note: This diffing process is why changing one piece of state only updates the specific DOM nodes affected, not the whole page.
Warning: Reconciliation isn't magic -- deeply restructuring a list (changing element types, not just values) can force React to tear down and rebuild more DOM than expected if keys aren't used correctly.

Example: Diffing and Reconciliation

markup 
<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
function Ticker() {
  const [count, setCount] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setCount((c) => c + 1), 1000);
    return () => clearInterval(id);
  }, []);
  return <p>Only this number updates in the real DOM: {count}</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<Ticker />);
  </script>
</body>
</html>

Why the Virtual DOM Is Fast

Directly changing the real DOM is slow because the browser has to recalculate layout and repaint the page after every change.

React avoids this by batching many small changes into a single lightweight virtual DOM comparison first, then applying only the minimal set of real DOM updates needed. This is why updating state for a small part of the UI does not force the whole page to redraw.

Note: You rarely need to think about the virtual DOM directly -- it is React's internal optimization, not something you write code against.
Warning: The virtual DOM makes updates efficient, but it does not make React updates instant -- expensive render logic inside a component can still slow things down.

Example: Why the Virtual DOM Is Fast

markup 
<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    function Counter() {
      const [count, setCount] = React.useState(0);
      return (
        <div>
          <p>Count: {count}</p>
          <button onClick={() => setCount(count + 1)}>+1</button>
        </div>
      );
    }
    ReactDOM.createRoot(document.getElementById('root')).render(<Counter />);
  </script>
</body>
</html>
Related Topics

SyntheticEvent Explained · Rendering Lists and the key Prop · React StrictMode · Conditional Rendering

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Thinking the virtual DOM makes every update instant -- it minimizes DOM work, but expensive JavaScript logic can still be slow.
  2. Believing you need to interact with the virtual DOM directly in your code -- you never do.
  3. Confusing 'virtual DOM' with the real browser DOM they're separate representations.
Chapter Summary
  • The virtual DOM is an in-memory representation of the UI that React maintains.
  • React compares (diffs) the new virtual DOM against the previous one to find changes.
  • Only the minimal necessary real DOM updates are applied, called reconciliation.
  • This approach avoids the performance cost of repeatedly touching the real, slower DOM.
Browser Support

No browser-specific restrictions -- an internal React implementation detail available in every React version.

🔒

Chapter Quiz — Complete all 10 topics to unlock

0/10 topics done

Complete these topics first:

← Previous Lesson Rendering Lists and the key Prop Next Lesson → React StrictMode

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.