⚡ The useEffect Hook

Understanding Purity

// ✅ PURE Function (no side effects)
function add(a: number, b: number): number {
    return a + b; // Only returns a value, no external changes
}

// ✅ PURE React Component
const Greeting: React.FC<{ name: string }> = ({ name }) => {
    return <h1>Hello, {name}!</h1>; // Only renders JSX
};

// ❌ IMPURE (has side effects)
function addAndLog(a: number, b: number): number {
    console.log('Adding numbers'); // Side effect: logging
    return a + b;
}

// ❌ IMPURE React Component (DON'T DO THIS)
const BadComponent: React.FC = () => {
    document.title = 'My App'; // Side effect in render!
    fetch('/api/data'); // Side effect in render!
    return <h1>Hello</h1>;
};

What Counts as a Side Effect?

The Concept

useEffect(() => {
    // This code runs AFTER the component renders
    console.log('Component rendered!');
    
    // Perform side effects here:
    // - Fetch data
    // - Set up subscriptions
    // - Update document
    // - Start timers
});

Simple Example: Document Title

import { useState, useEffect } from 'react';

const PageTitle: React.FC = () => {
    const [count, setCount] = useState(0);
    
    // ✅ Effect runs after every render
    useEffect(() => {
        document.title = `Count: ${count}`;
        console.log('Effect ran!');
    });
    
    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>
                Increment
            </button>
        </div>
    );
};

// What happens:
// 1. Component renders with count = 0
// 2. Effect runs, sets title to "Count: 0"
// 3. User clicks button
// 4. Component re-renders with count = 1
// 5. Effect runs again, sets title to "Count: 1"

Where It Comes From

// Import from React
import { useEffect } from 'react';

// Or with other hooks
import { useState, useEffect } from 'react';

// It's a hook, so:
// ✅ Call it at the top level of your component
// ❌ Don't call it inside loops, conditions, or nested functions

Full Form

useEffect(
    // 1. Effect function (required)
    () => {
        // Side effect code goes here
        console.log('Effect running');
        
        // 2. Cleanup function (optional)
        return () => {
            console.log('Cleanup running');
        };
    },
    // 3. Dependency array (optional but important!)
    [dependency1, dependency2]
);

What Goes Inside?

useEffect(() => {
    // This is the effect function
    // Put your side effects here
    
    // Examples:
    console.log('Component rendered');
    document.title = 'My App';
    fetch('/api/data');
    const timer = setTimeout(() => {}, 1000);
    
    // Any code that should run after render
});

Effect Function Examples

// Example 1: Update document title
useEffect(() => {
    document.title = `You clicked ${count} times`;
});

// Example 2: Log when component renders
useEffect(() => {
    console.log('Component rendered with props:', props);
});

// Example 3: Focus an input
useEffect(() => {
    inputRef.current?.focus();
});

// Example 4: Set up analytics
useEffect(() => {
    analytics.track('Page viewed', { page: 'Home' });
});

Returning a Cleanup Function

useEffect(() => {
    // Set up
    const timer = setInterval(() => {
        console.log('Tick');
    }, 1000);
    
    // Cleanup (optional but often needed)
    return () => {
        clearInterval(timer);
        console.log('Timer cleaned up');
    };
});

// When does cleanup run?
// 1. Before the effect runs again (on re-render)
// 2. When the component unmounts (is removed)

Three Ways to Use Dependencies

// 1. No dependency array: Runs after EVERY render
useEffect(() => {
    console.log('Runs on every render');
}); // ⚠️ Usually not what you want!

// 2. Empty dependency array: Runs ONCE on mount
useEffect(() => {
    console.log('Runs once when component mounts');
}, []); // ✅ Common pattern

// 3. With dependencies: Runs when dependencies change
useEffect(() => {
    console.log('Runs when count changes');
}, [count]); // ✅ Most common pattern

Typing Effects

import { useEffect } from 'react';

// Effect function doesn't return anything (except cleanup)
useEffect(() => {
    // TypeScript infers this returns void
    console.log('Hello');
});

// Cleanup function must return void
useEffect(() => {
    const timer = setInterval(() => {}, 1000);
    
    // ✅ Correct: returns void
    return () => {
        clearInterval(timer);
    };
    
    // ❌ Wrong: can't return other values
    // return 42; // TypeScript error!
});

// Dependencies must be array
useEffect(() => {
    console.log(count);
}, [count]); // ✅ Array of dependencies

// Common TypeScript pattern
interface Props {
    userId: string;
}

const UserProfile: React.FC<Props> = ({ userId }) => {
    useEffect(() => {
        // userId is properly typed as string
        console.log(`Fetching data for user: ${userId}`);
    }, [userId]); // TypeScript checks userId is in scope
    
    return <div>User Profile</div>;
};

The Rule

React compares each dependency with its previous value. If any dependency changed, the effect runs.

const [count, setCount] = useState(0);
const [name, setName] = useState('Alice');

useEffect(() => {
    console.log(`Count: ${count}, Name: ${name}`);
}, [count, name]);

// Scenario 1: count changes from 0 to 1
// Result: Effect runs ✅

// Scenario 2: name changes from 'Alice' to 'Bob'
// Result: Effect runs ✅

// Scenario 3: Neither changes
// Result: Effect doesn't run ❌

// Scenario 4: Both change
// Result: Effect runs once ✅ (not twice!)

Pattern 1: No Dependency Array

// Runs after EVERY render
useEffect(() => {
    console.log('Every render');
}); // No second argument

// Use case: Rarely needed
// Usually indicates you should use a dependency array instead

Pattern 2: Empty Dependency Array

// Runs ONCE when component mounts
useEffect(() => {
    console.log('Component mounted');
    
    return () => {
        console.log('Component unmounted');
    };
}, []); // Empty array

// Use cases:
// - Initialize data on mount
// - Set up subscriptions
// - Start timers
// - Fetch initial data

// Example: Fetch data once
useEffect(() => {
    fetch('/api/user')
        .then(res => res.json())
        .then(data => setUser(data));
}, []); // Runs once on mount

Pattern 3: With Dependencies

// Runs when specified values change
useEffect(() => {
    console.log(`User ${userId} selected`);
    fetchUserData(userId);
}, [userId]); // Runs when userId changes

// Use cases:
// - Sync with prop changes
// - React to state changes
// - Re-fetch when parameters change

// Example: Search as user types
const [searchTerm, setSearchTerm] = useState('');
const [results, setResults] = useState([]);

useEffect(() => {
    if (searchTerm) {
        fetch(`/api/search?q=${searchTerm}`)
            .then(res => res.json())
            .then(data => setResults(data));
    }
}, [searchTerm]); // Re-run when search term changes

Understanding Comparison

// Primitives: Compared by value
const [count, setCount] = useState(0);
useEffect(() => {
    console.log(count);
}, [count]); // ✅ count compared by value (0 === 0)

// Objects: Compared by reference
const [user, setUser] = useState({ name: 'Alice' });
useEffect(() => {
    console.log(user.name);
}, [user]); // ⚠️ user compared by reference (may cause extra runs)

// Better: Depend on specific properties
useEffect(() => {
    console.log(user.name);
}, [user.name]); // ✅ Compare only name property

// Arrays: Also compared by reference
const [items, setItems] = useState([1, 2, 3]);
useEffect(() => {
    console.log('Items changed');
}, [items]); // New array reference triggers effect

// Functions: Always new reference
const handleSubmit = () => {
    console.log('Submit');
};
useEffect(() => {
    // ...
}, [handleSubmit]); // ⚠️ Different function every render!

The Problem

// ❌ WITHOUT cleanup
const Timer: React.FC = () => {
    const [seconds, setSeconds] = useState(0);
    
    useEffect(() => {
        setInterval(() => {
            setSeconds(prev => prev + 1);
        }, 1000);
    }, []);
    
    return <div>Seconds: {seconds}</div>;
};

// Problem: When component unmounts, interval keeps running!
// setSeconds tries to update non-existent component
// Memory leak! 💥

✅ WITH Cleanup

const Timer: React.FC = () => {
    const [seconds, setSeconds] = useState(0);
    
    useEffect(() => {
        const intervalId = setInterval(() => {
            setSeconds(prev => prev + 1);
        }, 1000);
        
        // Cleanup function
        return () => {
            clearInterval(intervalId);
            console.log('Timer cleaned up');
        };
    }, []);
    
    return <div>Seconds: {seconds}</div>;
};

// Now: When component unmounts, interval is cleared ✅
// No memory leak! 🎉

Cleanup Timing Example

const EffectLifecycle: React.FC = () => {
    const [count, setCount] = useState(0);
    
    useEffect(() => {
        console.log(`Effect running for count: ${count}`);
        
        return () => {
            console.log(`Cleanup running for count: ${count}`);
        };
    }, [count]);
    
    return (
        <button onClick={() => setCount(count + 1)}>
            Count: {count}
        </button>
    );
};

// Console output:
// Mount: "Effect running for count: 0"
// Click: "Cleanup running for count: 0"
//        "Effect running for count: 1"
// Click: "Cleanup running for count: 1"
//        "Effect running for count: 2"
// Unmount: "Cleanup running for count: 2"

1. Timers

// setTimeout
useEffect(() => {
    const timeoutId = setTimeout(() => {
        console.log('Delayed action');
    }, 3000);
    
    return () => {
        clearTimeout(timeoutId);
    };
}, []);

// setInterval
useEffect(() => {
    const intervalId = setInterval(() => {
        console.log('Repeating action');
    }, 1000);
    
    return () => {
        clearInterval(intervalId);
    };
}, []);

2. Event Listeners

useEffect(() => {
    const handleResize = () => {
        console.log('Window resized');
    };
    
    window.addEventListener('resize', handleResize);
    
    return () => {
        window.removeEventListener('resize', handleResize);
    };
}, []);

// Mouse events
useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
        console.log(`Mouse: ${e.clientX}, ${e.clientY}`);
    };
    
    document.addEventListener('mousemove', handleMouseMove);
    
    return () => {
        document.removeEventListener('mousemove', handleMouseMove);
    };
}, []);

3. Subscriptions

// WebSocket
useEffect(() => {
    const ws = new WebSocket('ws://localhost:8080');
    
    ws.onmessage = (event) => {
        console.log('Message:', event.data);
    };
    
    return () => {
        ws.close();
        console.log('WebSocket closed');
    };
}, []);

// EventSource (Server-Sent Events)
useEffect(() => {
    const eventSource = new EventSource('/api/events');
    
    eventSource.onmessage = (event) => {
        console.log('Event:', event.data);
    };
    
    return () => {
        eventSource.close();
    };
}, []);

4. Async Operations (avoiding race conditions)

Fetching inside an effect has a subtle trap. If userId changes from 1 to 2 quickly, you fire two requests—and the response for user 1 might arrive after user 2's, leaving the wrong data on screen. The cleanup function is how you cancel the stale request. There are two idiomatic patterns:

// Pattern A: a "cancelled" flag — ignore a late response
useEffect(() => {
    let cancelled = false;
    
    const fetchData = async () => {
        const response = await fetch('/api/data');
        const data = await response.json();
        
        // Only update if not cancelled
        if (!cancelled) {
            setData(data);
        }
    };
    
    fetchData();
    
    return () => {
        cancelled = true; // Mark as cancelled
    };
}, []);

// Pattern B: AbortController — actually cancel the request (preferred)
useEffect(() => {
    const controller = new AbortController();

    fetch('/api/data', { signal: controller.signal })
        .then(res => res.json())
        .then(data => setData(data))
        .catch(err => {
            // Aborting rejects the promise — ignore that specific error
            if (err.name === 'AbortError') return;
            console.error(err);
        });

    return () => {
        controller.abort(); // Cancel the in-flight request on cleanup
    };
}, []);

Two Types of Effects

useEffect Timing (Standard)

const TimingExample: React.FC = () => {
    const [count, setCount] = useState(0);
    
    console.log('1. Component rendering, count:', count);
    
    useEffect(() => {
        console.log('3. Effect running, count:', count);
    });
    
    console.log('2. About to return JSX');
    
    return <button onClick={() => setCount(count + 1)}>{count}</button>;
};

// Console output when component mounts:
// 1. Component rendering, count: 0
// 2. About to return JSX
// 3. Effect running, count: 0

// User clicks button:
// 1. Component rendering, count: 1
// 2. About to return JSX
// 3. Effect running, count: 1

When You Have Multiple Effects

const MultipleEffects: React.FC = () => {
    useEffect(() => {
        console.log('Effect 1');
        return () => console.log('Cleanup 1');
    }, []);
    
    useEffect(() => {
        console.log('Effect 2');
        return () => console.log('Cleanup 2');
    }, []);
    
    useEffect(() => {
        console.log('Effect 3');
        return () => console.log('Cleanup 3');
    }, []);
    
    return <div>Hello</div>;
};

// On Mount:
// Effect 1
// Effect 2
// Effect 3

// On Unmount:
// Cleanup 1
// Cleanup 2
// Cleanup 3

// Effects run in the order they're defined!

Setting State Inside Effects

const EffectWithState: React.FC = () => {
    const [count, setCount] = useState(0);
    const [doubled, setDoubled] = useState(0);
    
    // Effect that updates state
    useEffect(() => {
        console.log('Effect: Doubling count');
        setDoubled(count * 2);
    }, [count]);
    
    return (
        <div>
            <p>Count: {count}</p>
            <p>Doubled: {doubled}</p>
            <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
    );
};

// Timeline when user clicks:
// 1. setCount(1) called
// 2. Component re-renders with count = 1
// 3. Effect runs, sees count changed
// 4. setDoubled(2) called
// 5. Component re-renders again with doubled = 2

Effects Can't Be Async Functions

// ❌ WRONG: Can't make effect function async
useEffect(async () => {
    const data = await fetch('/api/data');
    // TypeScript error: Effect must return cleanup or void
}, []);

// ✅ CORRECT: Define async function inside
useEffect(() => {
    const fetchData = async () => {
        const response = await fetch('/api/data');
        const data = await response.json();
        setData(data);
    };
    
    fetchData();
}, []);

// ✅ CORRECT: Use .then()
useEffect(() => {
    fetch('/api/data')
        .then(res => res.json())
        .then(data => setData(data))
        .catch(err => console.error(err));
}, []);

Updating the Browser Tab Title

const DocumentTitle: React.FC = () => {
    const [count, setCount] = useState(0);
    const [unread, setUnread] = useState(0);
    
    useEffect(() => {
        if (unread > 0) {
            document.title = `(${unread}) You have notifications`;
        } else {
            document.title = 'My App';
        }
    }, [unread]);
    
    return (
        <div>
            <h1>Notifications</h1>
            <p>Unread: {unread}</p>
            <button onClick={() => setUnread(unread + 1)}>
                New Notification
            </button>
        </div>
    );
};

Countdown Timer

const Countdown: React.FC<{ seconds: number }> = ({ seconds: initialSeconds }) => {
    const [seconds, setSeconds] = useState(initialSeconds);
    const [isActive, setIsActive] = useState(false);
    
    useEffect(() => {
        if (!isActive) return;
        
        if (seconds === 0) {
            setIsActive(false);
            alert('Time is up!');
            return;
        }
        
        const intervalId = setInterval(() => {
            setSeconds(prev => prev - 1);
        }, 1000);
        
        return () => clearInterval(intervalId);
    }, [seconds, isActive]);
    
    return (
        <div>
            <h2>{seconds} seconds</h2>
            <button onClick={() => setIsActive(!isActive)}>
                {isActive ? 'Pause' : 'Start'}
            </button>
            <button onClick={() => setSeconds(initialSeconds)}>
                Reset
            </button>
        </div>
    );
};

Stopwatch

const Stopwatch: React.FC = () => {
    const [time, setTime] = useState(0);
    const [isRunning, setIsRunning] = useState(false);
    
    useEffect(() => {
        if (!isRunning) return;
        
        const startTime = Date.now() - time;
        
        const intervalId = setInterval(() => {
            setTime(Date.now() - startTime);
        }, 10);
        
        return () => clearInterval(intervalId);
    }, [isRunning]);
    
    const formatTime = (ms: number) => {
        const seconds = Math.floor(ms / 1000);
        const minutes = Math.floor(seconds / 60);
        const hours = Math.floor(minutes / 60);
        
        return `${hours.toString().padStart(2, '0')}:${(minutes % 60)
            .toString()
            .padStart(2, '0')}:${(seconds % 60).toString().padStart(2, '0')}`;
    };
    
    return (
        <div>
            <h1>{formatTime(time)}</h1>
            <button onClick={() => setIsRunning(!isRunning)}>
                {isRunning ? 'Pause' : 'Start'}
            </button>
            <button onClick={() => { setTime(0); setIsRunning(false); }}>
                Reset
            </button>
        </div>
    );
};

Window Resize Listener

const WindowSize: React.FC = () => {
    const [windowSize, setWindowSize] = useState({
        width: window.innerWidth,
        height: window.innerHeight
    });
    
    useEffect(() => {
        const handleResize = () => {
            setWindowSize({
                width: window.innerWidth,
                height: window.innerHeight
            });
        };
        
        window.addEventListener('resize', handleResize);
        
        return () => {
            window.removeEventListener('resize', handleResize);
        };
    }, []);
    
    return (
        <div>
            <h2>Window Size</h2>
            <p>Width: {windowSize.width}px</p>
            <p>Height: {windowSize.height}px</p>
        </div>
    );
};

Keyboard Shortcuts

const KeyboardShortcuts: React.FC = () => {
    const [lastKey, setLastKey] = useState('');
    
    useEffect(() => {
        const handleKeyDown = (e: KeyboardEvent) => {
            // Ctrl+S to save
            if (e.ctrlKey && e.key === 's') {
                e.preventDefault();
                console.log('Save triggered');
                setLastKey('Ctrl+S');
            }
            
            // Escape to close
            if (e.key === 'Escape') {
                console.log('Close triggered');
                setLastKey('Escape');
            }
        };
        
        document.addEventListener('keydown', handleKeyDown);
        
        return () => {
            document.removeEventListener('keydown', handleKeyDown);
        };
    }, []);
    
    return (
        <div>
            <h2>Try Keyboard Shortcuts</h2>
            <p>Press Ctrl+S or Escape</p>
            <p>Last key: {lastKey}</p>
        </div>
    );
};

Persist State to localStorage

const PersistentCounter: React.FC = () => {
    const [count, setCount] = useState(() => {
        // Load from localStorage on mount
        const saved = localStorage.getItem('count');
        return saved ? parseInt(saved, 10) : 0;
    });
    
    // Save to localStorage whenever count changes
    useEffect(() => {
        localStorage.setItem('count', count.toString());
    }, [count]);
    
    return (
        <div>
            <h2>Count: {count}</h2>
            <button onClick={() => setCount(count + 1)}>Increment</button>
            <p>Refresh the page - count persists!</p>
        </div>
    );
};

Auto-focus Input on Mount

import { useRef, useEffect } from 'react';

const AutoFocusInput: React.FC = () => {
    const inputRef = useRef<HTMLInputElement>(null);
    
    useEffect(() => {
        // Focus input when component mounts
        inputRef.current?.focus();
    }, []);
    
    return (
        <div>
            <label htmlFor="search">Search:</label>
            <input
                ref={inputRef}
                type="text"
                id="search"
                placeholder="Start typing..."
            />
        </div>
    );
};

Detect Clicks Outside Element

const DropdownMenu: React.FC = () => {
    const [isOpen, setIsOpen] = useState(false);
    const dropdownRef = useRef<HTMLDivElement>(null);
    
    useEffect(() => {
        if (!isOpen) return;
        
        const handleClickOutside = (event: MouseEvent) => {
            if (dropdownRef.current && 
                !dropdownRef.current.contains(event.target as Node)) {
                setIsOpen(false);
            }
        };
        
        document.addEventListener('mousedown', handleClickOutside);
        
        return () => {
            document.removeEventListener('mousedown', handleClickOutside);
        };
    }, [isOpen]);
    
    return (
        <div ref={dropdownRef}>
            <button onClick={() => setIsOpen(!isOpen)}>
                Toggle Menu
            </button>
            {isOpen && (
                <ul className="dropdown-menu">
                    <li>Option 1</li>
                    <li>Option 2</li>
                    <li>Option 3</li>
                </ul>
            )}
        </div>
    );
};

Debounce Search Input

const SearchWithDebounce: React.FC = () => {
    const [searchTerm, setSearchTerm] = useState('');
    const [debouncedTerm, setDebouncedTerm] = useState('');
    const [results, setResults] = useState<string[]>([]);
    
    // Debounce the search term
    useEffect(() => {
        const timerId = setTimeout(() => {
            setDebouncedTerm(searchTerm);
        }, 500); // Wait 500ms after user stops typing
        
        return () => {
            clearTimeout(timerId);
        };
    }, [searchTerm]);
    
    // Fetch results when debounced term changes
    useEffect(() => {
        if (debouncedTerm) {
            console.log('Searching for:', debouncedTerm);
            // Simulate API call
            setResults([
                `Result 1 for "${debouncedTerm}"`,
                `Result 2 for "${debouncedTerm}"`,
                `Result 3 for "${debouncedTerm}"`
            ]);
        } else {
            setResults([]);
        }
    }, [debouncedTerm]);
    
    return (
        <div>
            <input
                type="search"
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                placeholder="Search..."
            />
            <ul>
                {results.map((result, i) => (
                    <li key={i}>{result}</li>
                ))}
            </ul>
        </div>
    );
};

✅ Correct Patterns

// Pattern 1: Fetch data once
useEffect(() => {
    fetch('/api/data')
        .then(res => res.json())
        .then(setData);
}, []); // Empty array = once on mount

// Pattern 2: Update based on prop
useEffect(() => {
    if (userId) {
        fetchUser(userId);
    }
}, [userId]); // Only when userId changes

// Pattern 3: Conditional state update
useEffect(() => {
    if (count > 10 && !hasShownAlert) {
        alert('Count is over 10!');
        setHasShownAlert(true); // Update different state
    }
}, [count, hasShownAlert]); // Won't loop if condition prevents it

// Pattern 4: Effect doesn't update its dependencies
const [input, setInput] = useState('');
const [debouncedInput, setDebouncedInput] = useState('');

useEffect(() => {
    const timer = setTimeout(() => {
        setDebouncedInput(input); // Updates different state
    }, 500);
    return () => clearTimeout(timer);
}, [input]); // input changes, but we don't update it

✅ Good: Separate Concerns

const MyComponent: React.FC = () => {
    // Effect 1: Document title
    useEffect(() => {
        document.title = `Page ${page}`;
    }, [page]);
    
    // Effect 2: Data fetching
    useEffect(() => {
        fetchData();
    }, [userId]);
    
    // Effect 3: Event listener
    useEffect(() => {
        window.addEventListener('resize', handleResize);
        return () => window.removeEventListener('resize', handleResize);
    }, []);
    
    // Each effect has single responsibility
};

❌ Bad: Everything in One Effect

const MyComponent: React.FC = () => {
    useEffect(() => {
        // Too much in one effect!
        document.title = `Page ${page}`;
        fetchData();
        window.addEventListener('resize', handleResize);
        
        return () => {
            window.removeEventListener('resize', handleResize);
        };
    }, [page, userId]); // Runs for both changes
};

Optimize Effect Execution

// ❌ Runs on every render
useEffect(() => {
    expensiveOperation();
});

// ✅ Runs only when needed
useEffect(() => {
    expensiveOperation();
}, [dependency]);

// ✅ Early return for unnecessary work
useEffect(() => {
    if (!shouldRun) return;
    expensiveOperation();
}, [shouldRun, dependency]);

What You Learned

Congratulations! You've mastered the useEffect hook—one of React's most powerful and essential features:

• ✅ Understanding side effects and why they need special handling
• ✅ Using useEffect to run code after renders
• ✅ Mastering dependency arrays for controlling when effects run
• ✅ Implementing cleanup functions to prevent memory leaks
• ✅ Understanding effect execution timing and lifecycle
• ✅ Common patterns: timers, event listeners, document updates
• ✅ Avoiding infinite loops and other common pitfalls
• ✅ Writing clean, maintainable effects with TypeScript

// Document title
useEffect(() => {
    document.title = title;
}, [title]);

// Timer
useEffect(() => {
    const id = setInterval(() => {}, 1000);
    return () => clearInterval(id);
}, []);

// Event listener
useEffect(() => {
    window.addEventListener('event', handler);
    return () => window.removeEventListener('event', handler);
}, []);

// Focus input
useEffect(() => {
    inputRef.current?.focus();
}, []);

// localStorage sync
useEffect(() => {
    localStorage.setItem('key', value);
}, [value]);