O Virtual DOM (VDOM) é uma árvore de objetos JavaScript leve que descreve como a interface do usuário deve parecer. É uma representação simples em memória — não é o DOM real do navegador. React o utiliza porque manipular diretamente o DOM real é lento, e fazer isso manualmente a cada mudança de estado é propenso a erros.
Quando o estado muda, React não toca imediatamente a página. Em vez disso:
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>;
}
Assim você escreve código declarativamente ("a interface do usuário se parece assim para esse estado") e React descobre as operações imperativas do DOM para você.
document.querySelector manual + mutação.