What is the Virtual DOM in React?

import { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);
  // You never touch the DOM. Each click produces a NEW virtual tree;
  // React diffs it and updates only the text node that changed.
  return (
    <div style={{ padding: 24, fontFamily: "system-ui" }}>
      <h3>Count: {count}</h3>
      <p>This paragraph is untouched on each update.</p>
      <button onClick={() => setCount((c) => c + 1)}>+1</button>
    </div>
  );
}