Patterns from React
React's reconciler is a masterclass in combining low-level patterns. The first five patterns all appear in a single render cycle.
Render Cycle Patterns
| Pattern | Where in React | What It Does |
|---|---|---|
| Bitmask | ReactFiberFlags.js | Side-effect flags on fiber nodes |
| Double Buffering | Fiber current / alternate | Atomic tree swap during reconciliation |
| Cooperative Scheduling | workLoopConcurrent | Yield every 5ms to keep UI responsive |
| Min Heap | SchedulerMinHeap.js | Priority queue for scheduled tasks |
| Diff / Patch | ReactChildFiber.js | Reconcile old and new children lists |
How They Compose: A Single Render Cycle
When you call setState, all five patterns fire in sequence:
setState()▼Scheduler inserts an update task with priority (lanes). The heap ensures the highest-priority update runs first.
workLoopConcurrent processes one fiber at a time, checking shouldYield() every 5ms. If the browser needs the thread, React pauses and resumes later.
For each fiber, reconcileChild compares old children vs new children. It finds the minimal set of DOM operations.
Each diffed fiber gets side-effect flags set: Placement|Update|Deletion. Flags are OR'd together and bubble up the tree.
The entire render builds on the workInProgress tree. On commit, React swaps current ↔ workInProgress atomically. The old tree becomes the next workInProgress.
The key insight: these patterns are not independent features — they form a pipeline. The heap decides what to render, cooperative scheduling decides when to render, diff/patch decides what changed, bitmasks encode how it changed, and double buffering ensures the swap is atomic.
See Pattern Connections for the full interactive composition diagram.
More Patterns in React
| Pattern | Where in React | What It Does |
|---|---|---|
| Batch Processing | unstable_batchedUpdates | Multiple setState calls batched into a single re-render |
| Dirty Flag | ReactFiberFlags.js | Fiber flags (Placement, Update, Deletion) mark which subtrees need work |
| Observer | useEffect cleanup pattern | Subscribe on mount, unsubscribe on cleanup — decoupled state observation |