React: Render vs Commit phase

In a nutshell

React splits its work into a “render phase” and a “commit phase”.

Render phase

Contains all the work of walking through your component tree and building the virtual DOM/element tree.

Commit phase

At this point, React has figured out what changes need to be applied to the DOM. So it applies the necessary changes to match the DOM tree with the new virtual DOM. Layout effects and class component lifecycle hooks are executed here.

The useEffect hooks run on a short delay after the commit phase is done, to allow the browser to paint before the effects are run.

Sources

• Render and Commit – React docs