Detailed explanation
The virtual DOM is an informal name for React’s in-memory representation of the UI. React elements are lightweight JavaScript descriptions of what should appear on screen, including element types, props, and children; they are not actual browser DOM nodes. When rendering runs after a state, props, or context change, React produces new descriptions. Reconciliation is the process of matching that output with the previously rendered tree to determine what should be preserved, updated, mounted, or removed. This lets developers describe the desired UI rather than manually synchronising DOM operations with application state.
Under the hood, React maintains a Fiber tree that tracks component identity, state, and pending work. During the render phase, React calls components as needed and reconciles their output. It uses practical matching rules rather than computing a mathematically optimal tree difference. An element’s type, key, and position within its parent help determine its identity. If the identity matches, React can preserve the existing component state and reuse compatible DOM nodes while updating their properties or children. If the type changes, such as from a div to a section, React replaces that subtree and resets state in components below it.
Keys are especially important when reconciling lists. A stable key, unique among siblings, lets React recognise the same item even when its position changes. For example, using a database record’s ID helps preserve the correct input state when records are reordered. Array indexes can associate state with the wrong item when entries are inserted, removed, or reordered. Random keys change identity on every render, causing unnecessary remounts. Keys are scoped to their parent; they do not preserve identity when an item moves to a different parent.
After rendering completes, the commit phase applies the required DOM changes. For <li>Old</li> becoming <li>New</li>, React preserves the li and updates its text content. A component re-render therefore does not necessarily mean any DOM mutation. Interviewers usually expect this distinction, an explanation of identity and keys, and awareness that virtual DOM reconciliation does not guarantee the smallest possible set of DOM operations or automatically outperform every manual DOM update.
Key points to remember
- The virtual DOM describes the UI in memory; it is not a copy of the browser’s DOM objects.
- Reconciliation matches new render output against the existing tree using identity rules.
- Type, key, and position determine whether React preserves or resets component state.
- Stable keys identify list items among siblings across insertions, deletions, and reordering.
- Rendering calculates changes; committing applies DOM updates, and some renders require none.
Common mistakes candidates make
- Claiming React computes a guaranteed minimal DOM diff or that the virtual DOM is always faster.
- Using random keys or array indexes for dynamic lists and overlooking state-identity bugs.
- Assuming every component re-render recreates its DOM nodes or resets its state.
Likely follow-up questions
What happens when a component’s key changes?
React treats it as a different component instance, unmounting the old one and mounting a new one. Its local state resets, which can be useful when intentionally resetting a form.
Is reconciliation the same as React.memo?
No: reconciliation determines how render output maps to the existing tree. React.memo can skip rendering a component when its props compare equal, but its own state or consumed context can still trigger rendering.
Can React start rendering without changing the DOM?
Yes: rendering computes the proposed UI without immediately mutating the DOM. With concurrent rendering, React can pause or abandon render work; only committed work produces the corresponding DOM changes.
Interview tip: Start with the UI-description model, walk through the li text update, and then explain how types and stable keys control identity.