Virtual DOM (VDOM) adalah pohon objek JavaScript yang ringan yang mendeskripsikan bagaimana UI harus terlihat. Ini adalah representasi sederhana dalam memori — bukan DOM browser yang sebenarnya. React menggunakannya karena manipulasi langsung DOM nyata itu lambat, dan melakukannya secara manual pada setiap perubahan state sangat rawan kesalahan.
Ketika state berubah, React tidak langsung menyentuh halaman. Sebagai gantinya:
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>;
}
Jadi Anda menulis kode secara deklaratif ("UI terlihat seperti ini untuk state ini") dan React mengetahui operasi DOM imperatif untuk Anda.
document.querySelector manual + mutasi.