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()▼

1

Min Heap

Scheduler inserts an update task with priority (lanes). The heap ensures the highest-priority update runs first.

2

Cooperative Scheduling

workLoopConcurrent processes one fiber at a time, checking shouldYield() every 5ms. If the browser needs the thread, React pauses and resumes later.

3

Diff / Patch

For each fiber, reconcileChild compares old children vs new children. It finds the minimal set of DOM operations.

4

Bitmask

Each diffed fiber gets side-effect flags set: Placement|Update|Deletion. Flags are OR'd together and bubble up the tree.

5

Double Buffering

The entire render builds on the workInProgress tree. On commit, React swaps current ↔ workInProgress atomically. The old tree becomes the next workInProgress.

▼DOM updated (commit phase)

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.

For a deep dive into how three of these patterns interlock — bitmask, min-heap, and cooperative scheduling — with every claim backed by source code, read the React Fiber case study.

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

Further Reading

• React Source Code (GitHub)
• React Fiber Architecture