React useEffect Hook: Complete Guide to Dependencies and Cleanup

The useEffect hook is arguably the most powerful, yet most widely misunderstood tool in a React developer’s arsenal. It allows functional components to synchronize with external systems like APIs, subscriptions, and the browser DOM.

However, misconfiguring your dependency array or forgetting a cleanup function can instantly introduce severe memory leaks or infinite re-render loops that crash the browser.

In this comprehensive guide, we will break down exactly how to control the useEffect execution cycle safely.

1. The Anatomy of useEffect

The hook accepts two arguments: a callback function containing your side-effect logic, and an optional dependency array that dictates when the effect should re-run.

JavaScript

import { useEffect } from 'react';

useEffect(() => {
    // 1. Setup Phase: Your side effect logic runs here (e.g., fetch data)
    
    return () => {
        // 2. Cleanup Phase: Runs before the component unmounts 
        // OR before the effect runs again.
    };
}, [/* 3. Dependency Array */]);

2. Mastering the Dependency Array

The dependency array is where 90% of React bugs originate. It tells React when to skip applying an effect.

• No Array undefined: The effect runs after every single render. Use this extremely sparingly, as updating state inside it will cause an infinite loop.
• Empty Array []: The effect runs only once after the initial mount. Perfect for fetching initial page data or adding a global window event listener.
• Populated Array [stateA, propB]: The effect runs on mount, and then only re-runs if stateA or propB have changed since the last render.

3. Preventing Memory Leaks with Cleanup Functions

If your effect creates a continuous process—like a setInterval, a WebSocket connection, or an event listener—you must return a cleanup function. If a user navigates away from the component without cleaning up, the process keeps running in the background, consuming memory.

Here is the correct way to handle a window resize listener:

JavaScript

import { useState, useEffect } from 'react';

export default function WindowSizeTracker() {
    const [width, setWidth] = useState(window.innerWidth);

    useEffect(() => {
        // Setup the listener
        const handleResize = () => setWidth(window.innerWidth);
        window.addEventListener('resize', handleResize);

        // Cleanup the listener when the component unmounts
        return () => {
            window.removeEventListener('resize', handleResize);
        };
    }, []); // Empty array ensures we only attach the listener once

    return <div>Current window width: {width}px</div>;
}

4. Fetching Data Safely

When fetching data asynchronously inside useEffect, you cannot make the callback function itself async. Instead, declare an async function inside the effect and call it immediately.

Furthermore, you should implement an AbortController in your cleanup function to cancel the fetch request if the user navigates away before the API responds.

JavaScript

useEffect(() => {
    const controller = new AbortController();
    
    const fetchUserData = async () => {
        try {
            const response = await fetch('/api/user', { signal: controller.signal });
            const data = await response.json();
            setUserData(data);
        } catch (error) {
            if (error.name !== 'AbortError') {
                console.error("Fetch failed", error);
            }
        }
    };

    fetchUserData();

    // Abort the fetch if the component unmounts mid-request
    return () => controller.abort();
}, []);