← React Beginner Questions - Set 1 Q6

What is the virtual DOM in React?

React Beginner Questions - Set 1

You cannot see the virtual DOM, but you can prove it exists by watching what React actually touches when state changes.

Example

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

import { useState } from 'react';

export default function Ticker() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Static text — never re-created in the DOM</p>
      <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>
    </div>
  );
}

// In DevTools: inspect the <p>. After many clicks its DOM node
// stays identical, while the button's text node is the one updated.

What to notice

• React builds a lightweight tree of objects, diffs it against the previous tree, then patches only what differs.
• The `<p>` above keeps its identity across renders; only the text node inside the button changes.
• The win is not raw speed but predictability — you never write the update logic yourself.