What is the Virtual DOM and why does React use it?

Question

Accepted Answer

The **Virtual DOM (VDOM)** is a lightweight JavaScript object tree that *describes* what the UI should look like. It is a plain in-memory representation — not the real browser DOM. React uses it because **directly manipulating the real DOM is slow**, and doing it manually on every state change is error-prone. ## How it works When state changes, React doesn't immediately touch the page. Instead it: 1. Builds a **new** virtual tree from your components. 2. **Diffs** it against the previous virtual tree (reconciliation) to compute the minimal set of changes. 3. Applies **only those changes** to the real DOM in one batched update. ```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 ; } ``` So you write code **declaratively** ("the UI looks like *this* for *this* state") and React figures out the imperative DOM operations for you. ## Why it matters / trade-offs - **Fewer, batched DOM writes** → fewer expensive reflows/repaints. - **Declarative code** is easier to reason about than manual `document.querySelector` + mutate. - It is *not* magically "faster than the DOM" — the diffing itself costs CPU. The win is that React avoids unnecessary real-DOM work and lets you stop hand-optimizing updates. Stable **keys** in lists help the diff stay efficient.