Hva er Virtual DOM, og hvorfor bruker React det?

Question

Accepted Answer

**Virtual DOM (VDOM)** er et lett JavaScript-objekttre som *beskriver* hvordan brukergrensesnittet skal se ut. Det er en enkel representasjon i minnet — ikke den virkelige browser-DOM. React bruker det fordi **direkte manipulering av den virkelige DOM er tregt**, og å gjøre det manuelt ved hver tilstandsendring er feilpottensiale. ## Hvordan det fungerer Når tilstanden endres, berører React ikke umiddelbart siden. I stedet: 1. Bygger den et **nytt** virtuelt tre fra komponentene dine. 2. **Sammenligner** det med det forrige virtuelle treet (reconciliation) for å beregne det minimale settet med endringer. 3. Bruker **bare de endringene** på den virkelige DOM i en samlet oppdatering. ```jsx function Counter() { const [n, setN] = useState(0); // Each click produces a NEW virtual tree describing . // React compares old vs new and updates ONLY the text node that changed, // not the whole button or the page. return ; } ``` Så du skriver kode **deklarativt** ("brukergrensesnittet ser sånn ut for denne tilstanden") og React finner ut de imperative DOM-operasjonene for deg. ## Hvorfor det betyr noe / avveininger - **Færre, samlede DOM-skrivinger** → færre dyre omflytninger/ommalinger. - **Deklarativ kode** er lettere å resonnere om enn manuell `document.querySelector` + mutasjoner. - Det er *ikke* magisk "raskere enn DOM" — selve sammenligningen koster CPU. Gevinsten er at React unngår unødvendig virkelig-DOM-arbeid og lar deg slutte å håndoptimalisere oppdateringer. Stabile **keys** i lister hjelper sammenligningen å forbli effektiv.