Loading...
See how React's virtual DOM works with an interactive visualization. Watch JSX compile to React.createElement calls, build a virtual DOM object tree, and diff to find real DOM updates.
Loading visualization...
The virtual DOM is a lightweight JavaScript object tree that mirrors the structure of the real DOM. React builds this tree from JSX via createElement, diffs it on re-renders, and applies only the minimal set of changes to the actual browser DOM.
JSX is not HTML. It is syntactic sugar that a build tool like Babel transforms into React.createElement calls before the code reaches the browser. Each JSX tag becomes a function call that returns a plain JavaScript object describing an element's type, props, and children.
These plain objects form a tree called the virtual DOM. It has the same shape as the UI you described in JSX, but it exists entirely in memory as regular JavaScript data, not as browser DOM nodes.
When state changes, React calls your component again to produce a new virtual DOM tree, compares it with the previous one (reconciliation), and updates only the real DOM nodes that actually changed. This avoids expensive full-page re-renders.
Interview framing: define Virtual DOM in one sentence, then explain one concrete runtime behavior and one common pitfall with a short code example.
The virtual DOM is not a web standard or a browser API. It is a pattern React uses internally. The browser only sees real DOM nodes after React has processed the virtual tree.
Fix: Think of the virtual DOM as a blueprint (plain JS objects) that React translates into real DOM operations. The browser never interacts with it directly.
The virtual DOM adds overhead: React must build the object tree, diff it, and then update the DOM. For simple UIs with few updates, directly manipulating the DOM can be faster.
Fix: The virtual DOM wins when updates are frequent and scattered across a large tree. It batches and minimizes DOM writes, which is where the real performance gain comes from.
JSX uses camelCase attributes (className, onClick) and requires a single root expression. Writing HTML attributes like 'class' or 'onclick' will not work or will cause warnings.
Fix: Remember that JSX compiles to JavaScript function calls. Use className instead of class, htmlFor instead of for, and camelCase event handlers.
Common interview prompts with concise model answers.
The virtual DOM is an in-memory tree of plain JavaScript objects that describes the UI. React uses it to avoid direct DOM manipulation on every state change. Instead, React builds a new virtual tree, diffs it against the previous one, and applies only the necessary changes to the real DOM.
JSX compiles to React.createElement calls (or the jsx runtime in React 17+). Each JSX tag becomes a function call that returns a plain object with type, props, and children fields.
// JSX
<button className="btn">Click</button>
// Compiles to
React.createElement("button", { className: "btn" }, "Click")
// Returns
{ type: "button", props: { className: "btn", children: "Click" } }A host element has a string type (like 'div' or 'span') and maps directly to a real DOM node. A component element has a function (or class) as its type. React must call that function to resolve it into host elements before it can create DOM nodes.
React calls the component function again to produce a new virtual DOM tree. It then diffs (reconciles) this new tree against the previous one, identifies the minimum set of changes, and applies those changes to the real DOM in a single batch.
Continue with these concepts to strengthen your mental model.
function Greeting() { return ( <div> <h1>Hello</h1> <p>World</p> </div> );}waiting
no calls yet
no output yet