React Fiber and Reconciliation

React's stack reconciler couldn't pause. Fiber replaced it with an interruptible, linked-list-based work unit system. Each fiber node represents a piece of UI — and React can stop, resume, or discard work on any node at any time.

React's work loop is a while loop that processes one fiber at a time, checking after each unit whether it should yield to the browser. performUnitOfWork, beginWork, completeWork, and shouldYield form the heartbeat of concurrent React.

React doesn't treat every update equally. The lane model assigns each update a priority level — SyncLane for clicks, TransitionLane for deferred work, IdleLane for background tasks. Higher-priority lanes interrupt lower ones.

React's diffing algorithm is O(n), not O(n^3). It achieves this by two heuristics: same type means update, different type means destroy. Keys disambiguate list items. Understanding this algorithm explains every 'unexpected behavior' you've seen.

Keys aren't just for lists. They control component identity — when React should preserve state and when it should start fresh. Index-as-key creates subtle bugs. Key-as-reset is a deliberate unmount/remount. Master keys to master React.

React splits work into two phases. The render phase is pure, interruptible, and touches no DOM. The commit phase is synchronous and performs all DOM mutations, ref assignments, and effect execution. Mixing them up causes the hardest React bugs.

Concurrent rendering lets React work on multiple versions of the UI simultaneously. useTransition and startTransition mark updates as interruptible, keeping the UI responsive during expensive renders. This is how React achieves smooth 60fps during heavy updates.

Suspense catches thrown promises. When a component throws a promise during render, React shows the fallback UI, waits for the promise to resolve, then retries the render. Under the hood, it's a fiber-level try/catch with special scheduling.

React 18 batches all state updates everywhere — setTimeout, promises, native events — not just React event handlers. flushSync is the escape hatch. Combined with transitions, this changes how you think about update timing.

React 19 introduces the React Compiler (automatic memoization), the use() hook (read promises and context), Server Actions (mutation without API routes), and form actions. These aren't incremental — they change how you write React.

Eight React reconciliation scenarios. For each: predict which DOM nodes React touches, which components re-render, and which state survives. Detailed explanations trace through React's exact diffing logic.