React › Virtual DOM & Reconciliation

What is the virtual DOM in React, and why does React use it?

Beginner

Answer

The virtual DOM is a lightweight, plain JavaScript representation of what the actual page should look like, kept in memory by React. When state changes, React first updates this lightweight virtual version, compares it to the previous version, and only then makes the minimum necessary changes to the real, slower browser DOM, making updates much faster overall.

// You never write this directly, but conceptually React creates something like:
const virtualElement = {
  type: 'button',
  props: { children: 'Click Me' },
};
// React compares this against the previous version before touching the real DOM

Real-world example A large data table updates only the specific cells that actually changed on the real page, instead of redrawing the entire table every time, thanks to React comparing virtual DOM versions before touching the real, slower browser DOM.

Common follow-ups: Why is updating the real browser DOM generally slower than updating a plain JavaScript object?;Does every single change to state cause the entire virtual DOM to be rebuilt from scratch?

Performance (memo/useMemo);Components & JSX