React: Render vs Commit phase

In a nutshell

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

Render phase is when React calls your components and performs reconciliation – figures out how to match your React element tree with the host element tree. The render phase can be interrupted, paused and resumed, or restarted.

Commit phase is when React actually manipulates the host tree (e.g., the DOM) to do all the things it needs to do to match it with your element tree. The React renderer uses APIs on host instances such as Node.appendChild() or Node.textContent to do this. The commit phase is always synchronous.

Sources

• Render and Commit – React docs