React Basics
React Virtual DOM
The virtual DOM is a plain JavaScript object tree that mirrors what you want on screen. Because creating and comparing JavaScript objects is far cheaper than reading and writing real DOM nodes, React builds this tree first and uses it to work out the smallest possible set of real DOM operations.
What is Virtual DOM in React?
The virtual DOM is a plain JavaScript object tree that mirrors what you want on screen. Because creating and comparing JavaScript objects is far cheaper than reading and writing real DOM nodes, React builds this tree first and uses it to work out the smallest possible set of real DOM operations.
Why Virtual DOM matters
Direct DOM manipulation is slow and error-prone: every read of offsetHeight or write of innerHTML can force the browser to recalculate layout. The virtual DOM lets you write code as if you re-created the whole UI each time, while React quietly keeps the actual updates tiny.
Virtual DOM example
// You write:
const el = <h1 className="title">Hi</h1>;
// The compiler produces roughly:
const el = React.createElement('h1', { className: 'title' }, 'Hi');
// Which evaluates to a plain object:
// { type: 'h1', props: { className: 'title', children: 'Hi' } }How this works
Each JSX element compiles to a createElement call that returns an ordinary object describing a node. A whole screen becomes a nested tree of such objects. React holds the previous tree, diffs it against the new one, and produces a patch list for the real DOM.
Virtual DOM vs real DOM
| Aspect | Real DOM | Virtual DOM |
|---|---|---|
| What it is | Browser objects tied to rendering | Plain JavaScript objects in memory |
| Cost of an update | May trigger reflow and repaint | Just object creation and comparison |
| Who updates it | Your code, or React during commit | React, on every render |
| Can you read layout from it | Yes (offsetWidth, getBoundingClientRect) | No — it holds no measurements |
Common mistakes with Virtual DOM
- Believing the virtual DOM is always faster than hand-written DOM code — carefully hand-tuned code can win; the virtual DOM buys maintainability with good-enough speed.
- Reaching for document.getElementById inside a React component instead of using a ref.
- Thinking the virtual DOM stores styles or measurements — it stores only your described props.
React Virtual DOM— Interview Questions & FAQs
Is the virtual DOM faster than the real DOM?+
It is faster than naive real-DOM code that rewrites large sections on every change, because it batches and minimises updates. It is not faster than an expert hand-optimising a single hot path — the real win is that you get near-optimal updates without writing that code.
Does React 19 still use a virtual DOM?+
Yes. Modern React adds concurrent rendering, which can pause and resume work, but the underlying model is still building an element tree in memory and diffing it against the previous one.