Q1React Reconciliation & Virtual DOMSeniortechnical
How does React's Reconciliation and Fiber architecture work, and how do keys prevent unnecessary DOM re-renders?
Why Interviewers Ask This:
Evaluates core React internals, rendering performance bottlenecks, and fiber work-loop understanding.
Verified Model Answer:
React Reconciliation is the algorithm React uses to diff the tree of elements to determine which parts of the real DOM need to be updated.
1. **The Fiber Architecture:**
Prior to React 16, reconciliation was synchronous (the Stack Reconciler), meaning large component trees could block the main thread and drop frames. Fiber introduced a linked-list data structure representing units of work. It splits rendering into two phases:
- **Render Phase (Asynchronous / Interruptible):** Builds the work-in-progress fiber tree, computes effects, and can pause or yield to the browser for high-priority tasks (e.g. user input, animations).
- **Commit Phase (Synchronous / Uninterruptible):** Flushes all DOM mutations to the browser in one shot.
2. **The Role of 'key':**
When children change, React iterates over both lists of children simultaneously. Without keys, if an item is prepended to the start of a list, React mutates every single child. With stable keys, React maps existing fibers by key and reorders DOM nodes rather than destroying and recreating them. Never use array index as a key for dynamic lists where order or items can change.
Executable Reference (tsx):
tsx
// Optimal List Rendering with Stable Keys and Memoization
import React, { memo } from "react";
interface Item {
id: string; // Stable UUID or DB Primary Key
title: string;
}
// Prevent re-rendering unchanged children
const ListItem = memo(function ListItem({ item }: { item: Item }) {
return <li className="py-2 px-3 hover:bg-zinc-100">{item.title}</li>;
});
export function UserList({ items }: { items: Item[] }) {
return (
<ul>
{items.map((item) => (
// Key MUST be unique and stable across re-renders
<ListItem key={item.id} item={item} />
))}
</ul>
);
}Explanation: Using item.id as the key allows React Fiber to identify exactly which node moved, changed, or unmounted, eliminating redundant tree reconciliations.
Essential Talking Points:
- •Fiber is an incremental rendering engine that breaks work into units of work that can be paused, resumed, or aborted.
- •React uses a heuristic O(n) diffing algorithm comparing element types and unique keys.
- •Keys allow React to match fiber nodes between commits, preventing re-mounts and state loss in lists.