The useEffect Hook

useEffect lets a function component run side effects — code that reaches outside of pure rendering, such as fetching data, subscribing to an external event source, manually interacting with the DOM, or setting up a timer. Rendering itself should stay pure (no side effects), so useEffect gives React a designated place to run that extra code after the component has rendered.

A useEffect call takes a function to run and an optional dependency array that controls when the effect re-runs. Getting the dependency array right is one of the most important — and most commonly misunderstood — parts of working with React.

Why it matters

Rendering should be pure; fetching data, starting timers and subscribing to events are side effects, and useEffect is where they go. It is also the hook most often misused. A missing dependency gives stale data, a missing clean-up gives memory leaks, and an effect that updates its own dependency gives an endless loop.

The Dependency Array

useEffect(() => { ... }, [dep1, dep2]) runs the effect after the initial render and again any time one of the listed dependencies changes between renders. An empty array [] means the effect runs only once, right after the first render, and never again. Omitting the array entirely makes the effect run after every single render, which is rarely what you want.

Cleanup Functions

If the function passed to useEffect returns another function, React treats that returned function as cleanup logic. React calls the cleanup function right before the effect runs again (when dependencies change) and again when the component unmounts. This is essential for anything that needs to be "undone" — clearing a timer, unsubscribing from a socket, or removing an event listener — to avoid memory leaks and duplicate subscriptions.

Common useEffect Use Cases

useEffect is most often used to synchronize a component with something outside of React's rendering model.

• Data fetching — calling an API when a component mounts or when an ID prop changes, then storing the result in state.
• Subscriptions — attaching a listener (e.g. to a WebSocket, window resize event, or third-party library) and cleaning it up on unmount.
• Manual DOM interaction — focusing an input, measuring an element's size, or integrating with non-React DOM libraries.
• Timers — starting an interval or timeout, and clearing it in the cleanup function so it does not keep running after the component is gone.

Example

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    let isCancelled = false;

    async function fetchUser() {
      const response = await fetch(`/api/users/${userId}`);
      const data = await response.json();
      if (!isCancelled) setUser(data);
    }

    fetchUser();

    return () => {
      isCancelled = true; // cleanup avoids setting state after unmount or on a stale request
    };
  }, [userId]);

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

export default UserProfile;

Initially renders "Loading user..."; once the fetch resolves, re-renders to show the fetched user's name. If userId changes before the previous fetch finishes, or the component unmounts, the cleanup function prevents the stale response from incorrectly updating state.

Exercise

Do this in src/App.jsx of a Vite + React project. Build a stopwatch: the number of seconds increases by one every second from the moment the component appears. Start the interval in an effect that runs once, and stop it when the component is removed.

Expected result: the page shows "Seconds: 0" and counts up by one each second. In development with Strict Mode, React runs the effect twice on mount, and the clean-up keeps only one interval alive.

import { useEffect, useState } from "react";

export default function App() {
  const [seconds, setSeconds] = useState(0);

  // TODO: an effect that starts an interval adding 1 every second,
  //       runs only on mount, and clears the interval on clean-up

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

import { useEffect, useState } from "react";

export default function App() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const id = setInterval(() => {
      setSeconds((s) => s + 1);
    }, 1000);

    return () => clearInterval(id);
  }, []);

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

Quick quiz

Interview questions