Virtual DOM (VDOM) is een lichte JavaScript-objectboom die beschrijft hoe de UI eruit moet zien. Het is een gewone representatie in het geheugen — niet de echte browserdom. React gebruikt het omdat directe manipulatie van de echte DOM langzaam is, en dit handmatig doen bij elke statuswijziging is foutgevoelig.
Wanneer de status verandert, raakt React de pagina niet onmiddellijk aan. In plaats daarvan:
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>;
}
U schrijft dus code declaratief ("de UI ziet er zo uit voor deze status") en React bepaalt de imperatieve DOM-bewerkingen voor u.
document.querySelector + mutate.