React: Render vs Commit phase
23 October 2022 (Updated 23 October 2022)
On this page
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.textContent to do this. The commit phase is always synchronous.