What is useEffect in React - Visual Explanation

Concept Flow - What is useEffect

Component Renders

↓

useEffect Runs

↓

Effect Code Executes

↓

Optional Cleanup Runs

↓

Wait for Next Render or Dependency Change

↩Back to useEffect Runs if dependencies change

Shows how useEffect runs after the component renders, executes its code, optionally cleans up, and waits for dependency changes to run again.

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>;
}

A timer component that increases count every second using useEffect to set up and clean up the interval.

Execution Table

Step	Trigger	State Before	Action	State After	What Re-renders	DOM Change
1	Initial render	count=0	Render component, schedule useEffect	count=0	Timer component	<div>0</div>
2	After render	count=0	Run useEffect: setInterval starts	count=0	No re-render yet	No change
3	1 second passes	count=0	Interval callback: setCount(1)	count=1	Timer component	<div>1</div>
4	Re-render due to state change	count=1	Render component, useEffect dependencies unchanged	count=1	Timer component	<div>1</div>
5	Another second passes	count=1	Interval callback: setCount(2)	count=2	Timer component	<div>2</div>
6	Component unmounts	count=2	Cleanup: clearInterval called	count=2	No re-render	No change

💡 Component unmounts, cleanup runs, interval stops.

Variable Tracker

Variable	Start	After Step 1	After Step 3	After Step 5	Final
count	0	0	1	2	2
intervalId	undefined	set	set	set	cleared

Key Moments - 3 Insights

Why does useEffect run after the component renders and not before?

useEffect runs after rendering so it can safely interact with the DOM or perform side effects without blocking the UI update, as shown in step 2 where it runs after the initial render.

What happens if the dependency array is empty?

The effect runs only once after the first render and cleans up on unmount, as seen in steps 2 and 6 where the interval is set once and cleared on unmount.

Why does the component re-render when setCount is called inside useEffect?

Calling setCount updates state, triggering a re-render to show the new count value, demonstrated in steps 3 and 5 where count changes cause re-renders.

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 3 and Step 4 in the execution_table.

At which step does the cleanup function run?

A Step 6

B Step 4

C Step 2

D Step 3

💡 Hint

Look for the step mentioning 'Cleanup' in the 'Action' column.

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

A useEffect would run only once after initial render

B Cleanup would never run

C useEffect would run after every render

D State would never update

💡 Hint

Think about how useEffect behaves without dependencies, referencing the 'Trigger' column.

Concept Snapshot

useEffect(() => { effect }, [deps])
- Runs effect after render
- Runs again if deps change
- Cleanup runs before next effect or unmount
- Used for side effects like timers, fetch
- Empty deps = run once after first render

Full Transcript

useEffect is a React hook that runs code after the component renders. It lets you perform side effects like starting timers or fetching data. The effect runs after the DOM updates, so it doesn't block the UI. You can give it a list of dependencies to control when it runs again. If the list is empty, it runs only once after the first render. You can also return a cleanup function to run before the effect runs again or when the component unmounts. In the example, useEffect sets up a timer that updates count every second and cleans up the timer when the component is removed.