renderingadvanced

Render vs Commit

Render phase computes Virtual DOM diffs without side effects; Commit phase applies changes to the real DOM synchronously.

Mental Model

"The Architect vs The Builder: The architect drafts blueprints in their office (Render Phase); the construction crew pours concrete on site (Commit Phase)."

Interactive Engine Simulation

Simulation Engine Idle

Click "Execute Code" to run state reconciliation simulation.

Executable Code Snippet

Component.jsx

JSX / React 19

1// Phase 1: Render (Pure)
2// React calls your component to see what it wants to render.
3function App() {
4  return <h1>Blueprint</h1>;
5}
6
7// Phase 2: Commit (Side Effects)
8// React applies changes to the actual DOM.

Technical Takeaways & Best Practices

01.Component re-renders are triggered by state or prop changes.
02.Reconciliation algorithm diffs the Virtual DOM to minimize actual DOM updates.
03.Automatic batching optimizes multiple state updates into a single render cycle.

01. The Render Phase

In this phase, React walks down the component tree and determines what has changed. It is **pure and interruptible**. React can pause this work, throw it away, or restart it without the user ever seeing a half-finished UI. No DOM changes happen here.

Phase Invariants

Render: Side-Effect Free

Commit: DOM Mutations

02. The Commit Phase

Once React has the new tree ready, it enters the Commit phase. This is **synchronous and non-interruptible**. React applies all changes to the real DOM in one go. After this, it runs `useLayoutEffect` (synchronously) and `useEffect` (asynchronously).

Expert Rule

"Because the Render phase can be called multiple times before a commit, your component body must be **pure**. Never perform side effects (like API calls or logging) directly in the function body—save them for useEffect or event handlers."