Render Phase vs Commit Phase
React's work can be understood in two conceptual phases. During rendering, React calls components and calculates the next UI tree. During commit, React applies the necessary host-environment changes and runs relevant lifecycle behavior.
A render does not mean the DOM necessarily changed. React may calculate a new tree that produces no host mutations, or a render may be abandoned before commit in concurrent rendering scenarios.
This distinction matters when debugging performance. Seeing a component render is not equivalent to seeing a visible DOM update.
Render and Commit
Key Takeaways
- Render calculates; commit applies host changes.
- A render can occur without a visible DOM mutation.
- Concurrent rendering makes render work interruptible in modern React.