Why doesn’t React just update the DOM directly? Since browsers already let us use things like document.querySelector() or innerHTML to change the page, why do we even need a “Virtual DOM”?
Concept Explanation
The Virtual DOM is React’s way of updating the UI efficiently. It’s not a replacement for the real DOM — it’s a JavaScript object tree stored in memory that represents what the real DOM should look like.
Whenever the component’s state or props change:
- React creates a new Virtual DOM.
- It compares the new Virtual DOM with the previous one (this is called diffing).
- Then React only updates the parts of the real DOM that actually changed.
Why not update the DOM directly?
Because direct DOM manipulation is expensive:
- Every update can trigger a reflow — the browser has to recalculate the size and position of elements.
- Then it often triggers a repaint — the browser redraws the updated pixels on screen.
- If React touched the real DOM for every single state change, it would cause tons of reflows and repaints — and that kills performance.
The Virtual DOM fixes this by:
- Doing all the calculations in memory first (cheap operations).
- Applying all changes at once to the real DOM.
- Reducing how often reflows and repaints happen.
Example Code
Traditional DOM Manipulation
const el = document.createElement('div');
el.textContent = 'Hello';
document.body.appendChild(el);
- You have to manually manage the DOM.
- Every time the data changes, you decide what to update yourself.
React + Virtual DOM
function App({ name }) {
return <div>Hello {name}</div>;
}
- You just declare what the UI should look like for a given state.
- React takes care of the updates behind the scenes.
Common Misunderstanding
- ❌ “Virtual DOM is always faster than direct DOM manipulation.”
- Not really — Virtual DOM itself has a cost.
- For static or simple pages, direct DOM updates can be faster.
- But for large apps with frequent updates, the Virtual DOM wins because it batches and minimizes DOM operations.
Real-World Value
- Performance optimization – reduces how often reflows and repaints happen.
- Developer experience – you don’t have to manually track DOM updates, just declare
UI = f(state, props). - Cross-platform flexibility – since Virtual DOM is just JavaScript, the same concept works for React Native too.
Summary
- The Virtual DOM is a DOM tree built in memory by React.
- When React updates, it diffs the new and old Virtual DOM, then patches the real DOM in one go.
- Goal: minimize reflow/repaint → better performance.
- Real value: cleaner developer experience + solid performance balance.