pointer remains identical, the component is skipped. React.memo extends this by performing a shallow comparison of prop values when references differ.

// This breaks React.memo — new object created every render
<Button style={{ color: 'red' }} />

// This works — same reference if color hasn't changed
const style = useMemo(() => ({ color: 'red' }), []);
<Button style={style} />

Phase 3: Type vs Content Diffing

When a component must re-render, React compares the old and new JSX output. The primary diffing criterion is type, not content. Identical types trigger in-place updates; different types trigger complete destruction and recreation of the DOM node, fiber, and internal state.

// Every time isLoggedIn changes, the entire form loses its state
{isLoggedIn ? <UserForm /> : <GuestForm />}

// UserForm and GuestForm are different types — React destroys one and creates the other
// Any input values typed into the form are gone

Phase 4: List Reconciliation with key

Positional diffing fails on dynamic lists. React uses the key prop to build a hash map of existing fibers. During reconciliation, it matches new items against the map by identifier, reusing fibers where possible, creating new ones for additions, and deleting unmatched fibers.

// Dangerous — index as key
items.map((item, i) => <Row key={i} data={item} />)

Phase 5: Marking vs Commit Phase

The reconciler never touches the real DOM during traversal. It annotates fibers with mutation instructions (insert, update, delete). Only after the full tree is processed does React enter the Commit phase, applying all marks synchronously in a single pass. This guarantees atomic UI updates and prevents half-rendered states.

Pitfall Guide

1. Inline Object/Function Creation in Props: Creating new objects or functions directly in JSX (style={{}}, onClick={() => {}}) generates fresh references on every render, bypassing reference equality checks and breaking React.memo optimization. Always memoize or extract stable references.
2. Array Index as key in Dynamic Lists: Using positional indices as keys causes fiber-state leakage when items are prepended, removed, or reordered. React reuses fibers based on shifted indices, resulting in corrupted state and incorrect input values. Always use stable, unique identifiers from your data model.
3. Conditional Type Switching Without State Preservation: Swapping between different component types (<A /> vs <B />) forces React to destroy the old fiber and mount a new one, wiping all internal state. If state persistence is required across conditional renders, maintain the same component type and toggle internal visibility or data props.
4. Misunderstanding Reference vs Deep Equality: React's default prop comparison uses strict reference equality, not deep structural comparison. Developers expecting field-level diffing without React.memo will experience unnecessary re-renders or missed optimizations. Explicitly implement shallow comparison when structural equality matters.
5. Expecting Synchronous DOM Updates During Render: The reconciler's marking phase is purely computational. Attempting to read DOM measurements or trigger side effects during render will yield stale or inconsistent results. Defer DOM interactions to useLayoutEffect or useEffect, which execute after the commit phase completes.

Deliverables

• Reconciler Walkthrough Blueprint: Step-by-step architecture diagram mapping flag propagation, reference checking, type diffing, and commit scheduling across the Fiber tree.
• Performance Optimization Checklist: 12-point validation matrix covering memoization boundaries, key stability, prop reference hygiene, and commit-phase safety for production React applications.
• Configuration Templates: Production-ready patterns for React.memo shallow comparison, stable list key generation, and conditional rendering strategies that preserve fiber state across UI transitions.