useEffect

Core Hook

React renders UI. But who handles the music? Timers, subscriptions, events — the DJ booth of your component.

🎧 Theme: DJ Booth

Your component is a DJ booth. Rendering is dropping the beat — but side effects (timers, API calls, event listeners) are the equipment setup. useEffect is your roadie: it wires up gear after each performance and tears it down before the next set, keeping the booth clean.

The Chaotic DJ

What happens when you drop a beat directly in the component body? Every render starts a new track without stopping the old one — pure noise.

CHAOTICSide effects in the render body

Noise Level0 beats active

The Pro DJ: useEffect

useEffect runs your code AFTER render, and the cleanup function stops the old beat before the next one plays. One clean track at a time.

PRO DJuseEffect with cleanup

128BPM

Beats: 0

1 active — cleanup works!

Track loads→Beat plays→Genre changes→Old beat stops→New beat plays

fixed-dj.tsx

function DJ() {
  const [genre, setGenre] = useState("House");
  const [playing, setPlaying] = useState(false);
  const [beat, setBeat] = useState(0);

  useEffect(() => {
    if (!playing) return;

    const ms = (60 / genre.bpm) * 1000;
    const id = setInterval(() => {
      setBeat(b => b + 1);
    }, ms);

    // Cleanup: stop the old beat before starting the new one
    return () => clearInterval(id);
  }, [playing, genre]);
  //         ↑ only re-run when these change

  return <Equalizer genre={genre} beat={beat} />;
}

The Mixing Board

useEffect(fn, [])

Set up the speakers once

Run on mount, clean up on unmount

POWER

useEffect(fn, [track])

Switch when the playlist changes

Run when track or BPM changes

TRACK

BPM

useEffect(fn)

Restart after every button press

Run after every single render

CHAOS

The dependency array is your setlist — it tells React which knob changes should cue the next track.

Playground

useEffect connects React to the outside world — the browser tab, intervals, event listeners, and more. Spin these decks.

🎵Now Playing DisplayDependency Array

Type a track name — watch your browser tab update. Change volume — the effect is skipped.

Now Playing

Sunset Vibes_

Volume (75)

Effect ran 0 times

now-playing.tsx

const [trackName, setTrackName] = useState("Sunset Vibes");
const [volume, setVolume] = useState(75);

useEffect(() => {
  document.title = `🎵 ${trackName}`;
  effectCount.current += 1;

  return () => { document.title = "Learn Hooks"; };
}, [trackName]); // only runs when trackName changes
// Volume changes? Effect is SKIPPED.

🥁Beat Loop MachineCleanup Pattern

Play the loop, change BPM — the old interval is cleaned up and a new one starts at the new tempo.

BPM120

Vinyl Scratch: OFF

Total beats: 0

beat-loop.tsx

const [bpm, setBpm] = useState(120);
const [playing, setPlaying] = useState(false);
const [step, setStep] = useState(0);

useEffect(() => {
  if (!playing) return;

  const ms = (60 / bpm) * 1000;
  const id = setInterval(() => {
    setStep(s => (s + 1) % 8);
  }, ms);

  // Cleanup: old interval stops when BPM changes
  return () => clearInterval(id);
}, [playing, bpm]);

🎹DJ KeyboardEvent Listener

Press any key — the listener was added once on mount and removed on unmount. Always exactly 1 listener.

SpaceSpace

1Kick

2Snare

3Hi-hat

↑Vol +

↓Vol −

Press any key...

Keys pressed

Active listeners

dj-keyboard.tsx

useEffect(() => {
  function handleKeyDown(e: KeyboardEvent) {
    setLastKey(e.key);
    setCount(c => c + 1);
  }

  window.addEventListener("keydown", handleKeyDown);

  // Cleanup: remove on unmount
  return () => window.removeEventListener("keydown", handleKeyDown);
}, []); // Empty array = mount only, one listener

These are the patterns that trip up developers most often. Switch between Wrong and Fixed to compare the code side by side.

Missing dependency array

Omitting the dependency array causes the effect to run every render

Don't do this

player.tsx

function NowPlaying({ trackId }) {
  const [track, setTrack] = useState(null);

  useEffect(() => {
    fetch(`/api/tracks/${trackId}`)
      .then(res => res.json())
      .then(data => setTrack(data));
  }); // no dependency array — runs after EVERY render

  return <div>{track?.name}</div>;
}

Without a dependency array, React has no way to know when to skip re-running the effect. If the effect updates state, it triggers a re-render which triggers the effect again — an infinite loop. Use [] for mount-only effects, or list the specific values the effect depends on.

Forgetting cleanup (memory leaks)

Setting up subscriptions or timers without tearing them down

Don't do this

beat-loop.tsx

function BeatLoop({ bpm }) {
  useEffect(() => {
    const id = setInterval(() => {
      playBeat();
    }, 60000 / bpm);
    // no cleanup — interval runs forever, even after unmount
  }, [bpm]);

  return <div>BPM: {bpm}</div>;
}

When the component unmounts or the effect re-runs, the old interval/listener keeps firing. This causes memory leaks, duplicate listeners, and attempts to update unmounted components. Always return a cleanup function that tears down whatever the effect set up.

Objects or arrays as dependencies

Passing a new object/array literal into the dependency array

Don't do this

player.tsx

function Playlist({ userId }) {
  const options = { includeHidden: true, userId };

  useEffect(() => {
    fetchPlaylist(options);
  }, [options]); // new object every render = infinite loop!

  return <div>Loading...</div>;
}

React compares dependencies with Object.is() (reference equality). A new object {} or array [] is created on every render, so it always looks 'different' — causing the effect to re-run infinitely. Depend on primitive values instead, or memoize the object with useMemo.

Using async directly as the effect callback

Marking the useEffect callback function as async

Don't do this

player.tsx

function NowPlaying({ trackId }) {
  // async callback returns a Promise, not a cleanup function
  useEffect(async () => {
    const res = await fetch(`/api/tracks/${trackId}`);
    const data = await res.json();
    setTrack(data);
  }, [trackId]);
}

useEffect expects its callback to return either undefined or a cleanup function. An async function always returns a Promise, so React can never call your cleanup. Define an inner async function and call it immediately instead.

The Pro DJ: useEffect

useEffect runs your code AFTER render, and the cleanup function stops the old beat before the next one plays. One clean track at a time.

PRO DJuseEffect with cleanup

128BPM

Beats: 0

1 active — cleanup works!

Track loads→Beat plays→Genre changes→Old beat stops→New beat plays

fixed-dj.tsx

function DJ() {
  const [genre, setGenre] = useState("House");
  const [playing, setPlaying] = useState(false);
  const [beat, setBeat] = useState(0);

  useEffect(() => {
    if (!playing) return;

    const ms = (60 / genre.bpm) * 1000;
    const id = setInterval(() => {
      setBeat(b => b + 1);
    }, ms);

    // Cleanup: stop the old beat before starting the new one
    return () => clearInterval(id);
  }, [playing, genre]);
  //         ↑ only re-run when these change

  return <Equalizer genre={genre} beat={beat} />;
}

The Mixing Board

useEffect(fn, [])

Set up the speakers once

Run on mount, clean up on unmount

POWER

useEffect(fn, [track])

Switch when the playlist changes

Run when track or BPM changes

TRACK

BPM

useEffect(fn)

Restart after every button press

Run after every single render

CHAOS

The dependency array is your setlist — it tells React which knob changes should cue the next track.

const [trackName, setTrackName] = useState("Sunset Vibes"); const [volume, setVolume] = useState(75); useEffect(() => { document.title = `🎵 ${trackName}`; effectCount.current += 1; return () => { document.title = "Learn Hooks"; }; }, [trackName]); // only runs when trackName changes // Volume changes? Effect is SKIPPED.

const [bpm, setBpm] = useState(120); const [playing, setPlaying] = useState(false); const [step, setStep] = useState(0); useEffect(() => { if (!playing) return; const ms = (60 / bpm) * 1000; const id = setInterval(() => { setStep(s => (s + 1) % 8); }, ms); // Cleanup: old interval stops when BPM changes return () => clearInterval(id); }, [playing, bpm]);

useEffect(() => { function handleKeyDown(e: KeyboardEvent) { setLastKey(e.key); setCount(c => c + 1); } window.addEventListener("keydown", handleKeyDown); // Cleanup: remove on unmount return () => window.removeEventListener("keydown", handleKeyDown); }, []); // Empty array = mount only, one listener

function BeatLoop({ bpm }) { useEffect(() => { const id = setInterval(() => { playBeat(); }, 60000 / bpm); // no cleanup — interval runs forever, even after unmount }, [bpm]); return <div>BPM: {bpm}</div>; }

function Playlist({ userId }) { const options = { includeHidden: true, userId }; useEffect(() => { fetchPlaylist(options); }, [options]); // new object every render = infinite loop! return <div>Loading...</div>; }

useEffect

The Chaotic DJ

The Pro DJ: useEffect

The Mixing Board

Playground

Common Mistakes

useEffect

The Chaotic DJ

The Pro DJ: useEffect

The Mixing Board

Playground

Common Mistakes