React useEffect Hook

Basic Syntax

import { useState, useEffect } from 'react';

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

    useEffect(() => {
        document.title = `Count: ${count}`;
    }, [count]);

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

Every time count changes, the effect runs and updates the document title.

The Dependency Array Explained

Fetching Data (The Classic Use Case)

function UserProfile({ userId }) {
    const [user, setUser] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        const controller = new AbortController();
        setLoading(true);

        fetch(`/api/users/${userId}`, { signal: controller.signal })
            .then(res => res.json())
            .then(data => {
                setUser(data);
                setLoading(false);
            })
            .catch(err => {
                if (err.name !== 'AbortError') {
                    setError(err);
                    setLoading(false);
                }
            });

        return () => controller.abort();
    }, [userId]);

    if (loading) return <p>Loading...</p>;
    if (error) return <p>Error: {error.message}</p>;
    return <h1>{user.name}</h1>;
}

The AbortController cancels the fetch on cleanup. Without it, a user switching profiles quickly would set state on an unmounted component — a bug that used to be very common.

The Cleanup Function

Return a function from useEffect to clean up:

// Timers
useEffect(() => {
    const id = setInterval(() => console.log('tick'), 1000);
    return () => clearInterval(id);
}, []);

// Event listeners
useEffect(() => {
    const handleScroll = () => console.log(window.scrollY);
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
}, []);

// WebSocket connections
useEffect(() => {
    const ws = new WebSocket('wss://api.example.com');
    ws.onmessage = (e) => console.log(e.data);
    return () => ws.close();
}, []);

Every subscription needs a matching cleanup. Memory leaks and "cannot read property of undefined" bugs usually trace back to missing cleanup.

Async Functions in useEffect

You cannot pass an async function directly to useEffect — it returns a Promise, not a cleanup function. Wrap it:

// ❌ Wrong
useEffect(async () => {
    const data = await fetchData();
    setData(data);
}, []);

// ✅ Correct
useEffect(() => {
    async function load() {
        const data = await fetchData();
        setData(data);
    }
    load();
}, []);

// ✅ Also correct (with IIFE)
useEffect(() => {
    (async () => {
        const data = await fetchData();
        setData(data);
    })();
}, []);

Avoiding Infinite Loops

An infinite loop happens when the effect updates a value that is in its own dependency array:

// ❌ Infinite loop — runs on every render
useEffect(() => {
    setCount(count + 1);
}, [count]);

// ❌ Also common — object created every render
useEffect(() => {
    // ...
}, [{ id: 1 }]); // New object every render → effect runs every render

// ✅ Stable value
const id = 1;
useEffect(() => {
    // ...
}, [id]);