What happens during React's render and commit phases?

Separates React's pure calculation work from DOM mutation, layout effects, passive effects, and browser paint.

1Say itAnswer out loud first

2CompareCompare with Core answer

3RefineRefine with Stronger and Advanced

TL;DR

During render, React calls components to calculate the next UI from props, state, and context. Rendering must stay pure because React may pause, repeat, or discard that work. During commit, React applies the required DOM changes. Layout effects run around that committed layout work, the browser can paint, and passive effects run afterward.

Full answer below

Practice focus

React's update pipeline, render purity, DOM reuse, effect timing, and evidence-based debugging.

Answer first

Answer path

Core answer first, then checkpoints toward a stronger answer.

Start
Core answer
Start here. This is the direct spoken answer to practice first.
Overview
The distinction explains why code can run without a visible DOM change and why side effects do not belong in rendering.
During render, React calls components to calculate the next UI from props, state, and context. Rendering must stay pure because React may pause, repeat, or discard that work. During commit, React applies the required DOM changes. Layout effects run around that committed layout work, the browser can paint, and passive effects run afterward.
Checkpoint
Stronger answer
Optional upgrade with examples, trade-offs, and sharper phrasing.
An update first schedules work, then React renders the affected tree and reconciles the new elements with the previous result. A component rendering does not imply that its DOM node changes; React commits only the differences it needs. Code that talks to the network, mutates shared state, or manipulates the DOM belongs in an event handler or an effect because render may be restarted. I use this model to explain stale reads, flicker, and why logging in render can appear more often than visible updates.

Review signals

Use these to catch weak phrasing, shallow reasoning, and risky claims.

Common mistakesCandidateCommon mistakesMistakes that weaken the answer or signal shallow understanding.Open details

Details

Treating every component render as a DOM mutation.
Performing network requests or shared mutations during render.
Assuming passive effects run before the browser can paint.

What happens during React's render and commit phases?

Practice focus

Answer path

Overview

Review signals

Follow-up prompts

Continue practice

Prerequisite

Tech stacks

Skill areas

Human editorial direction

Was this drill useful?

Found this answer useful?