React useEffect Hook: Dependencies, Cleanup, Examples

useEffect runs a piece of code after React has rendered your component and updated the screen. You use it to keep a component in sync with something outside React, like a timer, a network connection or an event listener, and you control when it runs again with a dependency array.

import { useState, useEffect } from 'react';

export default function App() {
    const [count, setCount] = useState(0);

    useEffect(() => {
        console.log('effect ran, count is', count);
    }, [count]);

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

Open the console under the preview: the effect logs once when the component appears, then again after every click. Change [count] to [] and click again: the effect stays silent after the first log.

The syntax

useEffect(() => {
    // setup: runs after the render is on the screen
    return () => {
        // cleanup: runs before the next setup, and on unmount
    };
}, [dependencies]);

• The first argument is the setup function. It can return a cleanup function, or nothing.
• The second argument is the dependency array: every value from the component that the setup reads (props, state, and anything computed from them).
• Call useEffect at the top level of the component, like every hook.

Effects run after render

Rendering is React calling your component function to find out what the screen should show. Effects wait until that work is finished and the DOM is updated, so inside an effect the page already shows the new values.

import { useState, useEffect } from 'react';

export default function App() {
    const [count, setCount] = useState(0);

    console.log('1. render, count =', count);

    useEffect(() => {
        const text = document.querySelector('button').textContent;
        console.log('2. effect, the button now says:', text);
    });

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

Every click logs the render first and the effect second, and the effect reads the button text React just wrote. This is why reading the DOM, starting a timer or connecting to a server belongs in an effect and not in the component body: the body runs during rendering, before anything is on the screen, and React may call it more often than you expect.

Effects usually run after the browser has painted. When an effect must measure the DOM before paint, use useLayoutEffect instead, which always runs before paint.

The dependency array: three shapes

The dependency array decides when the effect runs again. There are three shapes, and this block uses all of them so you can watch the difference.

import { useState, useEffect } from 'react';

export default function App() {
    const [a, setA] = useState(0);
    const [b, setB] = useState(0);

    useEffect(() => {
        console.log('no array: after every render');
    });

    useEffect(() => {
        console.log('[]: once, after the first render');
    }, []);

    useEffect(() => {
        console.log('[a]: a is now', a);
    }, [a]);

    return (
        <div>
            <button onClick={() => setA(a + 1)}>a + 1 (a = {a})</button>{' '}
            <button onClick={() => setB(b + 1)}>b + 1 (b = {b})</button>
        </div>
    );
}

On load all three effects log. Click a + 1 and two of them run: the one with no array and the one that depends on a. Click b + 1 and only the one with no array runs, because nothing in [] or [a] changed.

React compares each dependency with its previous value using Object.is. Numbers, strings and booleans compare by value. Objects, arrays and functions compare by identity, which matters a lot (see below).

Do not leave a value out of the array to make an effect run less often. The effect would keep using the value from an old render. The react-hooks/exhaustive-deps lint rule catches this; it is part of the ESLint setup that Vite's React template and Next.js's ESLint config include.

Cleanup

Many effects start something that has to be stopped: a connection, a subscription, a timer. Return a function from the effect and React calls it at two moments: right before the effect runs again with new dependencies, and when the component leaves the screen (unmount).

import { useState, useEffect } from 'react';

function connect(room) {
    console.log('connect to', room);
    return { disconnect: () => console.log('disconnect from', room) };
}

function ChatRoom({ room }) {
    useEffect(() => {
        const connection = connect(room);
        return () => connection.disconnect();
    }, [room]);

    return <p>Welcome to #{room}</p>;
}

export default function App() {
    const [room, setRoom] = useState('general');
    const [show, setShow] = useState(true);

    return (
        <div>
            <select value={room} onChange={(e) => setRoom(e.target.value)}>
                <option>general</option>
                <option>music</option>
                <option>travel</option>
            </select>{' '}
            <button onClick={() => setShow(!show)}>{show ? 'Hide' : 'Show'} chat</button>
            {show && <ChatRoom room={room} />}
        </div>
    );
}

Pick another room: the console shows disconnect from general and then connect to music. The old connection always closes before the new one opens. Click Hide and the cleanup runs one last time, because ChatRoom was unmounted.

The function connect here is a stand-in for a real chat or WebSocket client. The shape is the same for any of them: create it in the setup, close it in the cleanup.

Clearing a timer

A timer started in an effect keeps running after the component is gone unless the cleanup stops it.

import { useState, useEffect } from 'react';

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

    useEffect(() => {
        console.log('start timer');
        const id = setInterval(() => {
            console.log('tick');
            setSeconds((s) => s + 1);
        }, 1000);
        return () => {
            console.log('cleanup: clear timer');
            clearInterval(id);
        };
    }, []);

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

export default function App() {
    const [show, setShow] = useState(true);
    return (
        <div>
            <button onClick={() => setShow(!show)}>{show ? 'Hide' : 'Show'} timer</button>
            {show && <Ticker />}
        </div>
    );
}

Delete the clearInterval(id); line, then hide the timer: tick keeps arriving in the console from a component that no longer exists. Each Show starts another one.

Note setSeconds((s) => s + 1). The effect runs once, so a plain setSeconds(seconds + 1) would read seconds from the first render forever and stop at 1. The updater function always gets the latest value.

Removing an event listener

Event listeners on window or document follow the same pattern. Pass the same function to removeEventListener that you passed to addEventListener:

useEffect(() => {
    function handleKeyDown(e) {
        if (e.key === 'Escape') onClose();
    }
    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
}, [onClose]);

The infinite loop

An effect that sets a state value it also depends on starts a loop: the state changes, React renders, the dependency changed, the effect runs and sets the state again.

// Never stops: every render runs the effect, every effect causes a render
useEffect(() => {
    setCount(count + 1);
});

// Same loop: count changes, so the effect runs again
useEffect(() => {
    setCount(count + 1);
}, [count]);

The component renders without end and the tab stays busy. React does not stop this loop: in development it logs a "Maximum update depth exceeded" error to the console, and in production it logs nothing. This block runs the second version with a stop condition, so you can watch the loop without freezing the page:

import { useState, useEffect } from 'react';

export default function App() {
    const [count, setCount] = useState(0);

    console.log('render', count);

    useEffect(() => {
        if (count < 5) {
            setCount(count + 1);
        }
    }, [count]);

    return <p>count = {count}</p>;
}

The console logs render 0 through render 5: six renders for one mount, each one started by the effect. The fixes depend on what you meant:

• You wanted it once. Use [] and the updater form, setCount((c) => c + 1), so count is not a dependency.
• You are computing a value from other state. Do not store it at all; compute it during render, as shown in the last section of this page.
• You are reacting to a user action. Put the code in the event handler.

Objects and functions as dependencies

An object, array or function created in the component body is a new value on every render, so an effect that depends on it runs after every render, even when nothing inside it changed.

import { useState, useEffect } from 'react';

export default function App() {
    const [query, setQuery] = useState('react');
    const [dark, setDark] = useState(false);

    const options = { query, limit: 10 };

    useEffect(() => {
        console.log('search for', options.query);
    }, [options]);

    return (
        <div style={{ background: dark ? '#222' : '#fff', color: dark ? '#fff' : '#222', padding: 12 }}>
            <input value={query} onChange={(e) => setQuery(e.target.value)} />{' '}
            <button onClick={() => setDark(!dark)}>Toggle dark</button>
        </div>
    );
}

Toggling the colors has nothing to do with the search, yet every toggle logs search for react again. Move the options line inside the effect and change the array to [query]: toggles go quiet and only typing in the input runs the search.

That is the general fix. Create objects and functions inside the effect that uses them, and depend on the primitive values they are built from. When a function must live outside the effect, useCallback keeps its identity stable between renders.

Why effects run twice in development

With <StrictMode> on (a new Vite app wraps the root in it, and the Next.js App Router turns it on by default), React runs a test in development: it mounts each component, runs its effects, runs their cleanups, and runs the effects again. For the chat room above, the development console shows:

connect to general
disconnect from general
connect to general

This happens once, on mount, and only in development. It exists to expose effects that are missing a cleanup: if two runs in a row break something, the user would break it too by leaving and coming back. The fix is never to block the second run with a ref; it is to write the cleanup. The preview on this page runs like a production build, so you will not see the double run here.

You might not need an effect

Effects are for syncing with systems outside React. Two common uses are better without one.

Values computed from props or state. Calculate them during render. Storing them in state and syncing with an effect costs an extra render, and the first of those renders puts a stale value in the DOM:

import { useState, useEffect } from 'react';

function WithEffect({ first, last }) {
    const [fullName, setFullName] = useState('');
    useEffect(() => {
        setFullName(first + ' ' + last);
    }, [first, last]);
    console.log('WithEffect renders:', JSON.stringify(fullName));
    return <p>{fullName}</p>;
}

function Computed({ first, last }) {
    const fullName = first + ' ' + last;
    console.log('Computed renders:', JSON.stringify(fullName));
    return <p>{fullName}</p>;
}

export default function App() {
    const [first, setFirst] = useState('Ada');
    return (
        <div>
            <button onClick={() => setFirst(first === 'Ada' ? 'Grace' : 'Ada')}>
                Switch name
            </button>
            <WithEffect first={first} last="Lovelace" />
            <Computed first={first} last="Lovelace" />
        </div>
    );
}

Each click renders WithEffect twice, and its first render still shows the old name. Computed renders once with the right value.

Code that responds to a user action. Sending a form, showing a toast after a purchase, or posting an analytics event for a click belongs in the event handler. You know exactly what happened there, while an effect only knows that some value changed.

useEffectEvent

Sometimes an effect needs the latest value of a prop without re-running when that prop changes. In the chat room, a notification should use the current theme, but switching the theme should not reconnect. React 19.2 adds useEffectEvent for this:

import { useEffect, useEffectEvent } from 'react';

function ChatRoom({ roomId, theme }) {
    const onConnected = useEffectEvent(() => {
        showNotification('Connected!', theme); // always the latest theme
    });

    useEffect(() => {
        const connection = createConnection(roomId);
        connection.on('connected', () => onConnected());
        connection.connect();
        return () => connection.disconnect();
    }, [roomId]); // theme is not a dependency
}

A function from useEffectEvent is only for calling inside effects. Do not pass it to other components or list it in a dependency array.