Apa iku Virtual DOM lan kenapa React nggunakake?

Virtual DOM (VDOM) iku obyek kayu JavaScript sing ringan sing nggambarake kepiye UI kudu katon. Iku perwakilan luwes ing memori — dudu DOM browser sing nyata. React nggunakake iku amarga manipulasi DOM sing nyata langsung iku alon, lan nindakake manual ing saben owah-owahan state iku gampang lepat.

Kepiye cara kerja

Umur state owah, React ora langsung menyentuh kaca. Nanging nindakake:

1. Bangun kayu anyar virtual saka komponenmu.
2. Diff banding kayu virtual sadurungé (reconciliation) kanggo ngetung set owah-owahan sing minimal.
3. Terapake mung owah-owahan mau ing DOM nyata ing siji update batch.

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>;
}

Kayadene sampeyan nulis kode declaratively ("UI katon kaya iki kanggo iki state") lan React nggoleki DOM operasi imperative kanggo sampeyan.

Kenapa iku penting / trade-offs

• Cilik, batch DOM writing → cilik reflows/repaints sing larang.
• Kode declarative luwih gampang dipikir tinimbang manual document.querySelector + mutate.
• Iku ora cepet tinimbang DOM sacara ajaib — diffing deweke butuh CPU. Menango iku React ngindhari kerja DOM nyata sing ora perlu lan ngidini sampeyan mandheg ngandheg-kandheg ngandeske update. Stabil keys ing daftar tulung diff tetep efisien.