El Virtual DOM (VDOM) es un árbol ligero de objetos JavaScript que describe cómo debería verse la UI. Es una representación plana en memoria, no el DOM real del navegador. React lo usa porque manipular directamente el DOM real es lento, y hacerlo manualmente en cada cambio de estado es propenso a errores.
Cuando cambia el estado, React no toca la página de inmediato. En su lugar:
function Counter() {
const [n, setN] = useState(0);
// Each click produces a NEW virtual tree describing <button>{n}</button>.
// React compares old vs new and updates ONLY the text node that changed,
// not the whole button or the page.
return <button onClick={() => setN(n + 1)}>{n}</button>;
}
Así escribes código de forma declarativa ("la UI se ve así para este estado") y React descubre por ti las operaciones imperativas sobre el DOM.
document.querySelector + mutar.