Cos'è il Virtual DOM e perché React lo utilizza?

Question

Accepted Answer

Il **Virtual DOM (VDOM)** è un albero di oggetti JavaScript leggero che *descrive* come l'interfaccia utente dovrebbe apparire. È una semplice rappresentazione in memoria — non il vero DOM del browser. React lo utilizza perché **manipolare direttamente il vero DOM è lento**, e farlo manualmente ad ogni cambio di stato è soggetto a errori. ## Come funziona Quando lo stato cambia, React non tocca immediatamente la pagina. Invece: 1. Costruisce un albero virtuale **nuovo** dai tuoi componenti. 2. Lo **confronta** con l'albero virtuale precedente (riconciliazione) per calcolare l'insieme minimo di modifiche. 3. Applica **solo quelle modifiche** al vero DOM in un singolo aggiornamento in batch. ```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 ; } ``` Quindi scrivi il codice **dichiarativamente** ("l'interfaccia utente appare *così* per questo *stato*") e React determina le operazioni DOM imperative per te. ## Perché è importante / compromessi - **Meno scritture DOM in batch** → meno reflow/repaint costosi. - **Il codice dichiarativo** è più facile da capire rispetto a `document.querySelector` manuale + mutazione. - Non è *magicamente* "più veloce del DOM" — il diffing stesso costa CPU. Il vantaggio è che React evita lavori DOM reali non necessari e ti permette di smettere di ottimizzare manualmente gli aggiornamenti. Le **chiavi** stabili negli elenchi aiutano il diff a rimanere efficiente.