useEffect Hook

Synchronize a component with an external system by running side effects after render.

Recipe

Quick-reference recipe card — copy-paste ready.

// Run after every render
useEffect(() => {
  console.log("rendered");
});
 
// Run once on mount
useEffect(() => {
  fetchData();
}, []);
 
// Run when dependencies change
useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]);
 
// Cleanup on unmount or before re-running
useEffect(() => {
  const id = setInterval(tick, 1000);
  return () => clearInterval(id);
}, []);

When to reach for this: You need to synchronize with something outside React — fetching data, subscribing to events, manipulating the DOM, or setting up timers.

Working Example

"use client";
 
import { useEffect, useState } from "react";
 
export function WindowSize() {
  const [size, setSize] = useState({ width: 0, height: 0 });
 
  useEffect(() => {
    function handleResize() {
      setSize({ width: window.innerWidth, height: window.innerHeight });
    }
 
    handleResize(); // Set initial size
    window.addEventListener("resize", handleResize);
 
    return () => window.removeEventListener("resize", handleResize);
  }, []);
 
  return (
    <p className="text-sm font-mono">
      Window: {size.width} × {size.height}
    </p>
  );
}

What this demonstrates:

• Subscribing to a browser event (resize) inside useEffect
• Returning a cleanup function to remove the listener on unmount
• Empty dependency array [] so the effect runs only once on mount
• Setting initial state inside the effect to avoid SSR hydration mismatch

Deep Dive

How It Works

• useEffect runs after the browser paints the screen, not during render
• React calls your setup function after the component mounts and after every re-render where dependencies changed
• Before re-running the effect, React calls the previous cleanup function (if provided)
• On unmount, React calls the cleanup function one final time
• In Strict Mode during development, React mounts, unmounts, and re-mounts every component to surface missing cleanup logic

Parameters & Return Values

Variations

Data fetching with cleanup (abort controller):

useEffect(() => {
  const controller = new AbortController();
 
  async function load() {
    const res = await fetch(`/api/users/${id}`, {
      signal: controller.signal,
    });
    const data = await res.json();
    setUser(data);
  }
 
  load();
  return () => controller.abort();
}, [id]);

Connecting to a WebSocket:

useEffect(() => {
  const ws = new WebSocket(url);
  ws.onmessage = (e) => setMessages((prev) => [...prev, JSON.parse(e.data)]);
  return () => ws.close();
}, [url]);

Syncing with localStorage:

useEffect(() => {
  localStorage.setItem("theme", theme);
}, [theme]);

TypeScript Notes

// Effect with async — must wrap because useEffect cannot return a Promise
useEffect(() => {
  async function fetchData() {
    const res = await fetch("/api/data");
    const json: DataType = await res.json();
    setData(json);
  }
  fetchData();
}, []);
 
// TypeScript catches missing cleanup return types automatically

Gotchas

• Infinite loop — Updating state that is also a dependency causes the effect to re-run endlessly. Fix: Narrow your dependency array or move the state update behind a condition.

• Missing dependencies — Omitting a value from the dependency array causes stale data inside the effect. Fix: Include all reactive values used inside the effect, or refactor to remove the dependency.

• Async directly in useEffect — Returning a Promise instead of a cleanup function produces a React warning. Fix: Define an async function inside the effect and call it immediately.

• Race conditions on fast re-renders — If id changes quickly, an older fetch may resolve after a newer one and overwrite correct data. Fix: Use an AbortController or a boolean ignore flag in cleanup.

• Running on the server — useEffect does not run during SSR. Accessing window or document without guarding causes build errors. Fix: Access browser APIs only inside useEffect or behind a typeof window !== "undefined" check.

Alternatives

Why not fetch in useEffect? For many apps, frameworks like Next.js offer server-side data fetching that avoids loading spinners and waterfalls. Reserve useEffect fetching for truly client-only data needs.

Real-World Example

From a production Next.js 15 / React 19 SaaS application (SystemsArchitect.io).

// Production example: Keyboard navigation for study cards
// File: src/hooks/use-card-keyboard.ts
import { useEffect } from "react";
 
interface UseCardKeyboardOptions {
  isAutoplayOn: boolean;
  cardNumber: number;
  totalCards: number;
  hasMoreCards: boolean;
  onCardClick: () => void;
  onNext: () => void;
  onPrev: () => void;
}
 
export function useCardKeyboard({
  isAutoplayOn, cardNumber, totalCards, hasMoreCards,
  onCardClick, onNext, onPrev,
}: UseCardKeyboardOptions) {
  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (isAutoplayOn) return;
      if (event.code === "Space" || event.key === " ") {
        event.preventDefault();
        onCardClick();
      } else if (event.key === "ArrowLeft" || event.key === "a") {
        event.preventDefault();
        if (cardNumber > 1) onPrev();
      } else if (event.key === "ArrowRight" || event.key === "d") {
        event.preventDefault();
        if (cardNumber < totalCards || hasMoreCards) onNext();
      }
    };
    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, [cardNumber, totalCards, hasMoreCards, isAutoplayOn, onCardClick, onNext, onPrev]);
}

What this demonstrates in production:

• Cleanup removes the keydown listener on unmount and whenever dependencies change, preventing stale handlers from accumulating.
• Every referenced value inside the effect is included in the dependency array. Missing even one (like cardNumber) would cause stale closure bugs where old values are captured.
• The onCardClick, onNext, and onPrev callbacks should be wrapped in useCallback by the parent component. Without that, every parent re-render creates new function references, causing this effect to unsubscribe and resubscribe the listener unnecessarily.
• The isAutoplayOn guard at the top of the handler is a production pattern for disabling keyboard input during automated playback without removing the listener entirely.
• Extracting this into a custom hook keeps the component clean and makes the keyboard behavior independently testable.

FAQs

useEffect(() => {
  async function fetchData() {
    const res = await fetch("/api/data");
    setData(await res.json());
  }
  fetchData();
}, []);

useEffect(() => {
  const controller = new AbortController();
  fetch(`/api/users/${id}`, { signal: controller.signal })
    .then(res => res.json())
    .then(setUser);
  return () => controller.abort();
}, [id]);

useEffect((): (() => void) => {
  const id = setInterval(tick, 1000);
  return () => clearInterval(id);
}, []);
// TypeScript infers the cleanup type automatically
// in most cases -- explicit typing is rarely needed.

Related

• useState — state that your effects read and write
• useRef — mutable values that persist across renders without triggering effects
• useCallback — stabilize functions used as effect dependencies
• Custom Hooks — extract reusable effect logic into custom hooks