🔌 The useEffect Hook

What Is a Side Effect?

A component's render is meant to be pure: given the same props and state, it returns the same JSX and touches nothing outside itself. Anything that breaks that purity — talking to a server, reading window, starting a timer, subscribing to a socket — is a side effect.

Picture a chef. Cooking the dish from the ingredients on the counter is the render. Ordering more ingredients, setting a kitchen timer, or turning on the extractor fan are side effects — interactions with the world beyond the recipe. You don't do them mid-chop; you do them at the right moment. useEffect is React's "right moment": it runs your effect after the render is committed to the screen.

useEffect Syntax

useEffect takes two arguments: a setup function (your effect) and an optional dependency array. The setup runs after render; if it returns a function, that returned function is the cleanup.

import { useEffect } from 'react';

useEffect(() => {
    // 1. Setup — runs after the render is committed
    //    Do your side effect here.

    return () => {
        // 2. Cleanup (optional) — runs before the next effect
        //    and when the component unmounts.
    };
}, [/* 3. dependencies */]);

A first, minimal effect that runs after every render:

import { useState, useEffect } from 'react';

function Logger() {
    const [count, setCount] = useState(0);

    useEffect(() => {
        console.log('Rendered — count is now', count);
    }); // no dependency array → runs after EVERY render

    return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

The Dependency Array

The second argument controls when the effect re-runs. This is the single most important thing to understand about useEffect. There are three patterns.

1. Run once, on mount

function Welcome() {
    useEffect(() => {
        console.log('Mounted — runs exactly once');
    }, []); // empty array → mount only

    return <h1>Welcome!</h1>;
}

2. Run when a value changes

function UserProfile({ userId }) {
    const [user, setUser] = useState(null);

    useEffect(() => {
        fetchUser(userId).then(setUser);
    }, [userId]); // re-runs whenever userId changes

    if (!user) return <p>Loading…</p>;
    return <p>{user.name}</p>;
}

Cleanup Functions

Anything you start in an effect, you must stop: intervals, event listeners, subscriptions, open connections. Return a function from your effect and React runs it as cleanup — before the effect runs again, and once more when the component unmounts. Think of it as tidying your workspace before the next task and before you leave.

function Timer() {
    const [seconds, setSeconds] = useState(0);

    useEffect(() => {
        // Setup: start the interval
        const id = setInterval(() => {
            setSeconds(s => s + 1); // functional update — always fresh
        }, 1000);

        // Cleanup: stop it so it doesn't leak or double up
        return () => clearInterval(id);
    }, []); // set up once on mount

    return <p>Seconds: {seconds}</p>;
}

function WindowSize() {
    const [size, setSize] = useState({ w: window.innerWidth, h: window.innerHeight });

    useEffect(() => {
        const handleResize = () =>
            setSize({ w: window.innerWidth, h: window.innerHeight });

        window.addEventListener('resize', handleResize);
        // Cleanup: remove the listener to avoid a memory leak
        return () => window.removeEventListener('resize', handleResize);
    }, []);

    return <p>{size.w} × {size.h}</p>;
}

The Effect Lifecycle

Trace one effect through a component's life: it sets up after the first render, and if it has dependencies, it cleans up and re-runs each time those change, then cleans up one final time on unmount.

Data Fetching

The most common effect: load data when the component mounts (or when an id changes). Handle three states — loading, error, success — and guard against a subtle bug where a slow response arrives after the component has moved on.

function UserList() {
    const [users, setUsers]     = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError]     = useState(null);

    useEffect(() => {
        let ignore = false; // guard against stale responses

        async function load() {
            try {
                setLoading(true);
                const res = await fetch('https://api.example.com/users');
                if (!res.ok) throw new Error(`HTTP ${res.status}`);
                const data = await res.json();
                if (!ignore) setUsers(data); // only apply if still relevant
            } catch (err) {
                if (!ignore) setError(err.message);
            } finally {
                if (!ignore) setLoading(false);
            }
        }

        load();
        // Cleanup: mark this run stale if the component re-runs/unmounts
        return () => { ignore = true; };
    }, []); // fetch once on mount

    if (loading) return <p>Loading…</p>;
    if (error)   return <p>Error: {error}</p>;

    return (
        <ul>
            {users.map(u => <li key={u.id}>{u.name}</li>)}
        </ul>
    );
}

More Common Effects

Subscriptions

function ChatRoom({ roomId }) {
    const [messages, setMessages] = useState([]);

    useEffect(() => {
        const sub = subscribeToChat(roomId, (msg) =>
            setMessages(prev => [...prev, msg])
        );
        return () => sub.unsubscribe(); // resubscribe cleanly when roomId changes
    }, [roomId]);

    return messages.map((m, i) => <p key={i}>{m}</p>);
}

Debounced search

Wait until the user pauses typing before hitting the API. The cleanup cancels the pending timeout on every keystroke, so only the last one fires.

function SearchBox() {
    const [query, setQuery]     = useState('');
    const [results, setResults] = useState([]);

    useEffect(() => {
        if (!query) { setResults([]); return; }

        const id = setTimeout(() => {
            searchAPI(query).then(setResults);
        }, 300); // wait 300ms after the last keystroke

        return () => clearTimeout(id); // cancel if query changes first
    }, [query]);

    return (
        <div>
            <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Search…" />
            <ul>{results.map(r => <li key={r.id}>{r.title}</li>)}</ul>
        </div>
    );
}

Syncing to localStorage

function Notes() {
    const [text, setText] = useState(() => localStorage.getItem('notes') || '');

    useEffect(() => {
        localStorage.setItem('notes', text); // persist on every change to text
    }, [text]);

    return <textarea value={text} onChange={(e) => setText(e.target.value)} />;
}

Dependency Pitfalls

1. Infinite loops

If an effect sets state that's in its own dependency array, it re-runs forever. Break the cycle with the functional update form or a correct dependency list.

// ❌ Infinite loop: effect sets count, count is a dependency, repeat forever
useEffect(() => {
    setCount(count + 1);
}, [count]);

// ✅ If you truly need to increment once, do it without depending on count,
//    or rethink whether this belongs in an effect at all.

2. Stale closures

// ❌ count is captured once and never updates → always 0 + 1
useEffect(() => {
    const id = setInterval(() => setCount(count + 1), 1000);
    return () => clearInterval(id);
}, []); // count missing from deps

// ✅ functional update reads the latest value, no dependency needed
useEffect(() => {
    const id = setInterval(() => setCount(c => c + 1), 1000);
    return () => clearInterval(id);
}, []);

3. Object & function dependencies change every render

Objects and functions created inside the component are new on every render, so an effect that depends on them re-runs every time. Depend on primitive values, move the object out, or memoize with useMemo/useCallback.

// ❌ filters is a brand-new object each render → effect runs every render
function UserSearch() {
    const filters = { active: true, role: 'admin' };
    useEffect(() => { fetchUsers(filters); }, [filters]);
}

// ✅ depend on the primitive fields instead
function UserSearch() {
    const active = true;
    const role   = 'admin';
    useEffect(() => { fetchUsers({ active, role }); }, [active, role]);
}

Practice & Quiz

function Clock() {
    // TODO: store the current time in state
    // TODO: start an interval that updates it every second
    // TODO: clear the interval in cleanup
}

function Clock() {
    const [time, setTime] = useState(new Date());

    useEffect(() => {
        const id = setInterval(() => setTime(new Date()), 1000);
        return () => clearInterval(id);
    }, []);

    return <p>{time.toLocaleTimeString()}</p>;
}

function TitleCounter() {
    const [count, setCount] = useState(0);

    useEffect(() => {
        document.title = `Clicked ${count} times`;
    }, [count]); // re-run whenever count changes

    return <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>;
}

Best Practices & Pitfalls

✅ Do

• Give every effect a correct, complete dependency array
• Return cleanup for anything you subscribe to, listen on, or schedule
• Keep one effect focused on one concern — split unrelated logic
• Use functional updates inside timers/listeners to dodge stale closures
• Guard async responses with an ignore flag or AbortController

❌ Don't

• Set state a dependency reads without a plan — that's an infinite loop
• Omit dependencies to "make it run once" if the effect uses changing values
• Put derived values in an effect when you could compute them during render
• Forget cleanup — leaked intervals and listeners are a top React bug

Summary

📚 Additional Resources

• react.dev — useEffect reference
• react.dev — Synchronizing with Effects
• react.dev — You Might Not Need an Effect
• react.dev — Lifecycle of Reactive Effects

🚀 What's Next?

You've met state and effects individually. Next we zoom out to see how they combine over a component's whole life — mounting, updating, and unmounting — in Component Lifecycle, where useEffect reveals itself as the modern replacement for the old class lifecycle methods.