When React Says Re-render, It Means Three Things
When you call setState, React does not just update the DOM. It runs three separate phases in a sequence. Most developers confuse these phases. Understanding the difference helps you fix performance issues.
The Three Phases:
• Render: React calls your component function. • Reconcile: React compares the new output to the old one. • Commit: React applies the changes to the DOM.
- The Render Phase
React runs your function. It uses the current props. The function returns JSX. This JSX is just a list of JavaScript objects. People call this the virtual DOM. It is not a real DOM. It is a description of what the UI should look like. Nothing appears on the screen yet. This phase is pure math and logic.
- The Reconcile Phase
React holds the old tree and the new tree. It looks for differences between them. If an element type changes, React replaces the whole tree. If only props change, React updates them. This is where keys matter. Keys help React match items in a list by identity instead of position. This phase creates a list of the minimum steps needed to update the DOM.
- The Commit Phase
React takes the list of changes and touches the real DOM. It creates new nodes and removes old ones. This is when users see changes on the screen. After this, the browser paints the screen. Then, useEffect runs.
Common Misconceptions:
• A re-render does not always change the DOM. If the output is the same, React does nothing in the commit phase. • React.memo skips the function call. It does not skip the DOM update. • Props do not trigger re-renders. A parent re-rendering triggers the child. The prop change is just a result.
How to Fix Performance:
If your function is slow, you have a Render problem. Move heavy work out of the function or use memoization.
If React rebuilds huge lists, you have a Reconcile problem. Check your keys.
If the DOM updates too much, you have a Commit problem. Use virtualization or change your structure.
React 19 and the React Compiler now handle much of this work for you. But knowing these phases helps you debug better.