What are the render and commit phases in React?

Direct answer

During render React calculates what the component tree should look like; during commit React applies the required changes to the DOM and attaches refs.

Phase	What React does	Side effects?
Render	Calls components and calculates the next UI	Rendering logic should stay pure
Commit	Applies required DOM changes and updates refs	DOM is being synchronized
Browser paint	Browser displays the resulting pixels	Handled by the browser

A render can happen without producing a DOM mutation. This distinction is essential when debugging repeated renders or performance.