#atom

The multi-phase process React uses to transform component code into DOM updates

Core Idea: React's rendering pipeline is a multi-step process that converts component definitions into actual DOM changes, involving several distinct phases including rendering, reconciliation, and commit phases.

Key Elements

Pipeline Overview

1. Trigger phase (state updates, props changes)
2. Render phase (component rendering and VDOM creation)
3. Reconciliation phase (diffing)
4. Commit phase (DOM updates)
5. Browser rendering phase

Render Phase

• React calls component functions or class render methods
• Creates a new tree of React elements (Virtual DOM)
• Pure and without side effects by design
• May be paused, aborted, or restarted by React
• Results in a snapshot of the UI at a specific point in time

Reconciliation Phase

• Uses the Virtual DOM diffing algorithm
• Compares previous and new element trees
• Identifies the minimal set of changes needed
• Applies heuristics to improve performance:
  • Different component types result in complete rebuilds
  • List elements use "key" props for efficient reordering
  • Only compares elements at the same tree level

Fiber Architecture

• Enables incremental rendering since React 16
• Represents a unit of work in the component tree
• Allows React to:
  • Pause and resume work
  • Assign priority to different types of updates
  • Reuse previous work or abort it
  • Split work into chunks

Commit Phase

• Applies the calculated changes to the actual DOM
• Cannot be interrupted once started
• Handles lifecycle methods and refs
• Executes side effects (useEffect, useLayoutEffect)
• Runs in two sub-phases:
  1. Pre-commit (getSnapshotBeforeUpdate)
  2. Commit (DOM mutations, lifecycle methods)

Batching and Scheduling

• Multiple state updates within a single event are batched
• React 18 introduced automatic batching for all updates
• Concurrent rendering allows prioritization of work
• Transitions API allows marking non-urgent updates

Code Example

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

// When button is clicked:
// 1. Event handler executes, triggering state update
// 2. React schedules a re-render
// 3. Component function is called again, creating new React elements
// 4. React reconciles the differences (only the count text needs to change)
// 5. React updates only the text content of the paragraph in the DOM

Additional Connections

• Broader Context: Frontend Rendering Techniques (one approach among many)
• Applications: React Performance Optimization (practical techniques for improving rendering)
• See Also: Modern Frontend Rendering Approaches (alternative approaches to React)

References

1. React Documentation - Reconciliation
2. React Fiber Architecture Documentation
3. React Team's discussions on GitHub and blog posts about rendering

#react #rendering #javascript #virtualdom #frontend

Connections:

Sources:

• From: Why Virtual DOM Is No Longer Needed