Master React's three-phase rendering process (trigger, render, commit) by analyzing components and understanding when and why React updates the DOM.
Understand React's internal rendering process by analyzing the three critical phases: triggering renders, rendering components, and committing changes to the DOM.
This skill guides you through analyzing and understanding React's rendering lifecycle in any React codebase. You'll learn to identify render triggers, trace component rendering paths, understand when DOM updates occur, and spot performance optimization opportunities.
First, locate the application entry point and understand the initial render:
**Key insight:** Initial render creates all DOM nodes via `appendChild()` API.
Examine the codebase for both types of render triggers:
**Initial Render:**
**State Update Re-renders:**
**Output format:**
```
Render Triggers Found:
1. Initial: [file:line] - createRoot(#root).render(<App />)
2. State Update: [file:line] - setCount() triggers re-render of Counter and children
3. State Update: [file:line] - setUser() triggers re-render from App down
```
For a specific component with state updates, trace the render phase:
**Important:** Rendering is a *calculation* phase only. No DOM changes occur yet.
Analyze how React applies changes to the actual DOM:
**Test case example:** Find an `<input>` that preserves user-typed value across parent re-renders.
Look for potential performance issues and optimization opportunities:
**Optimization candidates:**
```
Performance Issues:
1. [Component] re-renders all children despite no prop changes → Suggest React.memo
2. [Component] recalculates expensive value on every render → Suggest useMemo
3. [Component] creates new callback references → Suggest useCallback
```
Ensure components follow pure rendering rules:
**Check for violations:**
Create a visual trace for a user interaction:
```
User Action: [e.g., "Click increment button"]
↓
1. TRIGGER: onClick → setCount(count + 1)
- State update queued
- Re-render scheduled
↓
2. RENDER: React calls Counter()
- Calculates new JSX with count=1
- Calls child component Buttons()
- Determines <div>{count}</div> changed
↓
3. COMMIT: React updates DOM
- Only updates text node inside <div> (was "0", now "1")
- Skips <button> elements (unchanged)
↓
4. PAINT: Browser repaints changed pixels
```
**Example 1: Preserved Input Value**
```jsx
function Clock({ time }) {
return (
<>
<h1>{time}</h1>
<input />
</>
);
}
```
**Example 2: Cascading Re-renders**
```jsx
function App() {
const [user, setUser] = useState(null);
return <Dashboard user={user} />;
}
```
1. **Rendering ≠ DOM updates:** Rendering is calculating what *should* change; committing applies changes
2. **Two render triggers:** Initial mount and state updates
3. **Recursive rendering:** Updated component's children always re-render (unless memoized)
4. **Minimal commits:** React only touches DOM nodes that changed
5. **Purity matters:** Impure components cause bugs; Strict Mode helps catch them
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/react-render-lifecycle-deep-dive/raw