Effect execution timing in React - Step-by-Step Execution

Concept Flow - Effect execution timing

Component Render Start

↓

Evaluate JSX

↓

Commit DOM Updates

↓

Run useEffect Cleanup (if any)

↓

Run useEffect Callback

↓

Wait for next render or unmount

This flow shows how React runs effects after rendering and DOM updates, including cleanup before running new effects.

Execution Sample

React

import React, { useState, useEffect } from 'react';

function Timer() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setCount(c => c + 1), 1000);
    return () => clearInterval(id);
  }, []);
  return <div>{count}</div>;
}

This React component uses useEffect to start a timer that increments count every second, cleaning up on unmount.

Execution Table

Step	Trigger	State Before	Action	State After	What Re-renders	DOM Change
1	Initial render	count=0	Render JSX <div>0</div>	count=0	Timer component	Display 0
2	Commit phase	count=0	Run useEffect callback: start interval	count=0	No re-render yet	No change
3	After 1 second	count=0	Interval callback: setCount(1)	count=1	Timer component	Display 1
4	Render due to state change	count=1	Render JSX <div>1</div>	count=1	Timer component	Update display to 1
5	Commit phase	count=1	No cleanup needed (first effect run)	count=1	No re-render	No change
6	After 2 seconds	count=1	Interval callback: setCount(2)	count=2	Timer component	Display 2
7	Render due to state change	count=2	Render JSX <div>2</div>	count=2	Timer component	Update display to 2
8	Commit phase	count=2	No cleanup needed	count=2	No re-render	No change
9	Component unmount	count=2	Run useEffect cleanup: clearInterval	count=2	Timer component removed	Remove display

💡 Component unmount triggers cleanup, stopping the interval and ending updates.

Variable Tracker

Variable	Start	After 1	After 2	After 3	Final
count	0	1	2	3	Stopped at unmount

Key Moments - 3 Insights

Why does the effect run after the component renders and not during?

React runs effects after the DOM updates to avoid blocking rendering and to ensure the DOM is ready. See execution_table steps 2 and 5 where effects run after render and commit.

When and why does the cleanup function run?

Cleanup runs before the next effect or on unmount to avoid memory leaks. In the table, cleanup runs at step 9 when the component unmounts.

Why doesn't the effect run on every render in this example?

Because the dependency array is empty ([]), the effect runs only once after the initial render, as shown in step 2.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of count at step 4?

A 0

B 1

C 2

D Undefined

💡 Hint

Check the 'State After' column at step 4 in the execution_table.

At which step does the useEffect cleanup function run?

A Step 9

B Step 5

C Step 2

D Step 7

💡 Hint

Look for 'Run useEffect cleanup' in the 'Action' column.

If the dependency array was omitted, how would the effect execution change?

A Effect runs only once after initial render

B Effect never runs

C Effect runs after every render

D Effect runs only on unmount

💡 Hint

Recall how useEffect behaves without dependencies; check the explanation in key_moments.

Concept Snapshot

useEffect runs after render and DOM update.
Cleanup runs before next effect or on unmount.
Empty dependency array means effect runs once.
State changes trigger re-render and possibly effect cleanup.
Effects do not block UI rendering.

Full Transcript

This visual trace shows how React's useEffect hook executes after the component renders and commits DOM updates. Initially, the component renders with count 0. Then the effect callback runs, starting an interval timer. Every second, the interval updates count, causing re-renders. Each re-render updates the displayed count. Cleanup runs only when the component unmounts, stopping the timer. The effect does not run on every render because the dependency array is empty. This ensures effects run at the right time without blocking UI updates.