useEffect & Lifecycle

Synchronizing components with external systems - data fetching, subscriptions, timers, and the cleanup function explained properly.

What it is, in plain English: useEffect lets a component synchronize with something outside React's control -- fetching data, setting up a subscription, manually changing the DOM, starting a timer. It runs after the component renders. The dependency array controls when it re-runs: empty array means once on mount, no array means every render, a list of values means whenever those values change. The optional cleanup function (returned from the effect) runs before the next effect and when the component unmounts -- essential for preventing leaks.

Doing things outside of rendering

So far every example just returns JSX based on props and state -- pure rendering. But real apps need to do things React doesn't handle automatically: fetch data from a server, set up a timer, subscribe to an event. These are called side effects, and useEffect is how you handle them.

The basic pattern

React.useEffect(() => {
  // code that runs AFTER the component renders
  console.log("Component rendered!");
});

// Most of the time, you'll provide a dependency array as the second argument:
React.useEffect(() => {
  console.log("This runs once, after the first render");
}, []);  // empty array = run once, like componentDidMount in old class components

The dependency array controls WHEN it runs

// No array -- runs after EVERY render (rarely what you want):
React.useEffect(() => {
  console.log("Runs after every single render");
});

// Empty array -- runs ONCE, after the first render only:
React.useEffect(() => {
  console.log("Runs once, on mount");
}, []);

// Array with values -- runs after first render AND whenever those values change:
React.useEffect(() => {
  console.log(`userId changed to ${userId}`);
}, [userId]);

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

Fetching data -- the most common use case

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

  React.useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => setUser(data));
  }, [userId]);  // re-fetch when userId changes

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

The cleanup function

// If your effect sets something up, it often needs to tear it down.
// Return a function from the effect -- React calls it before the next
// effect run, and when the component unmounts:
function Timer() {
  React.useEffect(() => {
    const id = setInterval(() => console.log("tick"), 1000);

    return () => {
      clearInterval(id);   // cleanup -- stop the timer
    };
  }, []);
}

// Without cleanup, the timer keeps running even after the component
// is removed from the page -- a memory leak.

Try It Yourself (JSX)

// useEffect -- synchronizing with things outside React

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

React.useEffect(() => {
    console.log("Effect running -- starting timer");
    const interval = setInterval(() => {
      setSeconds(s => s + 1);
    }, 1000);

// Cleanup function -- runs when component unmounts or before effect re-runs
    return () => {
      console.log("Cleanup -- stopping timer");
      clearInterval(interval);
    };
  }, []); // empty array = run once on mount

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

// Data fetching with useEffect
function UserProfile({ userId }) {
  const [user, setUser] = React.useState(null);
  const [loading, setLoading] = React.useState(true);

React.useEffect(() => {
    let cancelled = false;
    setLoading(true);

fetch(`https://jsonplaceholder.typicode.com/users/${userId}`)
      .then(r => r.json())
      .then(data => {
        if (!cancelled) {
          setUser(data);
          setLoading(false);
        }
      });

// Cleanup -- avoid setting state if component unmounted or userId changed again
    return () => { cancelled = true; };
  }, [userId]); // re-run whenever userId changes

if (loading) return <p>Loading...</p>;
  return <p>User: {user?.name}</p>;
}

// Document title sync -- a simple DOM side effect
function PageTitle({ title }) {
  React.useEffect(() => {
    document.title = title;
  }, [title]);

return <p>Page title set to: "{title}"</p>;
}

function App() {
  return (
    <div>
      <Timer />
      <UserProfile userId={1} />
      <PageTitle title="My React App" />
    </div>
  );
}

Race conditions and the cleanup-on-every-run pattern

The stale data race condition

// BUG: if userId changes quickly, an OLD fetch can resolve AFTER a newer one,
// overwriting fresh data with stale data:
function ProfileBuggy({ userId }) {
  const [user, setUser] = React.useState(null);

  React.useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => setUser(data));   // could be a STALE response!
  }, [userId]);
}

// FIX: use the cleanup function to ignore stale responses:
function ProfileFixed({ userId }) {
  const [user, setUser] = React.useState(null);

  React.useEffect(() => {
    let ignore = false;

    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => {
        if (!ignore) setUser(data);   // only update if this effect is still current
      });

    return () => { ignore = true; };  // mark stale when userId changes again
  }, [userId]);
}

Cleanup runs BEFORE every re-run, not just on unmount

function ChatRoom({ roomId }) {
  React.useEffect(() => {
    console.log(`Connecting to room ${roomId}`);
    const connection = connectToRoom(roomId);

    return () => {
      console.log(`Disconnecting from room ${roomId}`);
      connection.disconnect();
    };
  }, [roomId]);

  // Sequence when roomId changes from "general" to "random":
  // 1. Cleanup runs: "Disconnecting from room general"
  // 2. Effect runs:  "Connecting to room random"
  // This is why cleanup must undo EXACTLY what the effect did --
  // it runs before every re-run, not just when the component is removed.
}

The infinite loop trap

// ✗ Missing dependency array -- runs every render, which sets state,
// which causes another render, which runs the effect again... infinite loop:
function Buggy() {
  const [count, setCount] = React.useState(0);
  React.useEffect(() => {
    setCount(count + 1);   // no dependency array!
  });  // infinite re-render loop
}

// ✗ Object/array dependency that's recreated every render also causes loops:
function AlsoBuggy({ id }) {
  const options = { id, timeout: 5000 };   // NEW object every render
  React.useEffect(() => {
    fetchData(options);
  }, [options]);  // options is "different" every render → effect runs every time

  // ✓ Fix: depend on the primitive values, not the object:
  // }, [options.id, options.timeout]);
}

useLayoutEffect, effect timing, and the Effect Event pattern

// useEffect runs ASYNCHRONOUSLY after the browser paints --
// good for most side effects (data fetching, subscriptions).

// useLayoutEffect runs SYNCHRONOUSLY, before the browser paints --
// use ONLY when you need to measure/mutate the DOM before the user sees it
// (prevents visual flicker):
function Tooltip({ targetRef }) {
  const [position, setPosition] = React.useState(null);

  React.useLayoutEffect(() => {
    const rect = targetRef.current.getBoundingClientRect();
    setPosition({ top: rect.bottom, left: rect.left });
    // Runs BEFORE paint -- no flicker of the tooltip jumping position
  }, [targetRef]);
}

// Effect timing comparison:
// useEffect:       render → browser paints → effect runs (async, non-blocking)
// useLayoutEffect: render → effect runs (sync, blocking) → browser paints

The "Effect Event" pattern (useEffectEvent, experimental)

// Problem: sometimes you want a value INSIDE an effect without
// making it a dependency that triggers re-runs:
function ChatRoom({ roomId, theme }) {
  React.useEffect(() => {
    const connection = connectToRoom(roomId);
    connection.on("message", (msg) => {
      showNotification(msg, theme);  // theme is used here...
    });
    return () => connection.disconnect();
  }, [roomId, theme]);  // ...but you don't want to reconnect just because theme changed!
}

// useEffectEvent (React 19 experimental) solves this cleanly:
// const onMessage = useEffectEvent((msg) => showNotification(msg, theme));
// React.useEffect(() => {
//   connection.on("message", onMessage);  // always sees latest theme, doesn't trigger re-run
// }, [roomId]);  // only roomId in deps now

Official Sources

The Codex links only to official documentation. No third-party tutorials.