How React Rendering Works

Rendering is the process where React calls your component to build a virtual DOM description, diffs it against the previous one (reconciliation), and commits only the differences to the real DOM. A re-render runs your function again, but it does not automatically touch the page — only changed nodes are updated.

Learn How React Rendering Works in our free React course — an interactive lesson with runnable examples, a practice exercise and a quick recall.

Part of the free React course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

1️⃣ Render Phase vs Commit Phase

Rendering happens in two phases. In the render phase , React calls your component to build a new virtual-DOM tree — this must be pure and has no DOM side effects. In the commit phase , React applies the diff to the real DOM and runs effects. The render is cheap; the commit is where the costly DOM work happens, and React keeps it minimal.

2️⃣ What Triggers a Re-render & the Diff

A component re-renders when its state changes (via a setter), when its props change , or when its parent re-renders . React then runs reconciliation : it compares the new virtual DOM to the old one node by node and computes the smallest set of real changes. Inside lists, stable key s let React match items across renders instead of rebuilding them.

3️⃣ Re-render ≠ DOM Update, and Bailing Out

A re-render is just React re-running your function and re-diffing — it is usually cheap. If the produced tree matches the previous one, no DOM is touched . React also bails out : if you set state to a value equal to the current one (by Object.is ), it can skip the work entirely. For expensive subtrees, React.memo , useMemo , and useCallback help skip re-renders — but profile before optimizing.

These steps describe React's pipeline from a state change to the screen. Put them in the right order:

📋 Quick Reference

1. Name the three things that trigger a re-render.

A state update, a change in received props, or the parent re-rendering.

No. Only the diff is committed; if the new tree matches the old one, the DOM is untouched.

Match list items across renders during reconciliation so it reuses unchanged ones instead of rebuilding.

A series of state updates arrives over time. A commit happens only when the new value differs from the last committed one. Count the commits and check your output.

Practice quiz

What are React's two rendering phases?

  • Mount and unmount
  • Fetch and paint
  • The render phase (build virtual DOM) and the commit phase (apply to real DOM)
  • Diff and reconcile

Answer: The render phase (build virtual DOM) and the commit phase (apply to real DOM). Render builds the virtual DOM (pure, no DOM writes); commit applies the diff and runs effects.

Does every re-render update the real DOM?

  • No — only the diffed changes are committed; an unchanged tree leaves the DOM untouched
  • Yes, always
  • Only on the first render
  • Only if you call useEffect

Answer: No — only the diffed changes are committed; an unchanged tree leaves the DOM untouched. A re-render produces a new virtual DOM; React commits only the differences.

Which three things trigger a re-render?

  • A mutated variable, a console.log, a comment
  • Only state updates
  • Network requests, timers, and clicks
  • A state update, a props change, or the parent re-rendering

Answer: A state update, a props change, or the parent re-rendering. Re-renders come from a state setter, changed props, or a parent re-rendering — not plain variable changes.

What is reconciliation?

  • Fetching data before render
  • Diffing the new virtual DOM against the previous one to find minimal changes
  • Running effects after paint
  • Resetting component state

Answer: Diffing the new virtual DOM against the previous one to find minimal changes. Reconciliation is the diff step that computes the smallest set of real DOM changes.

What do keys help React do during reconciliation?

  • Match list items across renders so unchanged ones are reused
  • Style list items
  • Sort the list
  • Prevent re-renders entirely

Answer: Match list items across renders so unchanged ones are reused. Stable keys let React match items across renders instead of rebuilding them.

In the render phase, your component must be…

  • Allowed to write to the DOM
  • Async
  • Pure, with no DOM side effects
  • Wrapped in useEffect

Answer: Pure, with no DOM side effects. The render phase must be pure; side effects belong in the commit phase (e.g. useEffect).

What does 'bailing out' mean in React?

  • Throwing an error
  • Skipping work when nothing changed (e.g. setting state to an Object.is-equal value)
  • Unmounting a component
  • Forcing a re-render

Answer: Skipping work when nothing changed (e.g. setting state to an Object.is-equal value). If a state update equals the current value, React can skip the re-render work entirely.

Why might 'my change doesn't show up' happen?

  • You called too many setters
  • You used a key
  • You wrapped it in memo
  • You mutated a plain variable instead of calling a state setter

Answer: You mutated a plain variable instead of calling a state setter. React only re-renders on state/props changes; mutating a variable doesn't notify React.

Which comparison does React use to decide a bail-out on equal state?

  • JSON.stringify
  • Object.is
  • deep equality
  • ==

Answer: Object.is. React uses Object.is to compare the new state value with the current one.

Using the array index as a list key can cause…

  • Faster rendering
  • A compile error
  • Items to jump or lose input state when the list changes
  • Automatic memoization

Answer: Items to jump or lose input state when the list changes. Indexes shift on add/delete/reorder, so React matches the wrong items; use a stable, unique id.