React useEffect Hook

Run a side effect after every render by calling useEffect with no dependency array.

useEffect(() => {
  console.log("Component rendered"); // runs after every render
});

Update the document title after each render as a common side-effect pattern.

useEffect(() => {
  document.title = `You clicked ${count} times`;
  // Runs after every render where count may have changed
});

Wrap async logic in an inner function because the effect callback itself cannot be async.

useEffect(() => {
  async function loadData() {
    const res = await fetch("/api/users");
    const data = await res.json();
    setUsers(data);
  }
  loadData(); // call the async function immediately
}, []);

Use useEffect for imperative side effects like logging, analytics, or third-party integrations.

useEffect(() => {
  analytics.track("page_view", { page: pathname }); // fire-and-forget side effect
}, [pathname]); // re-fires when the route changes

Keep effect callbacks synchronous at the top level and wrap any async work inside.

// Wrong: async effect callback — cleanup return value is lost
useEffect(async () => { await doSomething(); }, []);

// Right: inner async function with explicit call
useEffect(() => {
  async function run() { await doSomething(); }
  run();
}, []);

Fetch data when the component mounts by using an empty dependency array.

useEffect(() => {
  fetch("/api/data")
    .then((r) => r.json())
    .then(setData);
}, []); // runs once on mount

Track loading and error state alongside the fetch for complete async UI handling.

useEffect(() => {
  setLoading(true);
  fetch(url)
    .then((r) => r.json())
    .then(setData)
    .catch(setError)
    .finally(() => setLoading(false));
}, [url]); // re-fetches when url changes

Cancel stale requests with AbortController to prevent setting state after unmount.

useEffect(() => {
  const controller = new AbortController();
  fetch(url, { signal: controller.signal })
    .then((r) => r.json())
    .then(setData)
    .catch((err) => {
      if (err.name !== "AbortError") setError(err); // ignore intentional cancellation
    });
  return () => controller.abort(); // cancel on unmount or url change
}, [url]);

Re-fetch automatically when a dependency like userId changes by including it in the array.

useEffect(() => {
  async function load() {
    const res = await fetch(`/api/users/${userId}`);
    setUser(await res.json());
  }
  load();
}, [userId]); // re-runs every time userId changes

Use SWR or React Query in production for caching, deduplication, and automatic revalidation.

import useSWR from "swr";

// SWR handles loading state, caching, and revalidation on focus
const { data, error, isLoading } = useSWR("/api/user", fetcher);

Sync state with localStorage by reading on mount and writing when state changes.

useEffect(() => {
  const saved = localStorage.getItem("theme");
  if (saved) setTheme(saved); // restore on mount
}, []);

useEffect(() => {
  localStorage.setItem("theme", theme); // persist on every change
}, [theme]);

Track the previous value of a variable by storing it in a ref before each update.

const prevCountRef = useRef<number | undefined>(undefined);

useEffect(() => {
  prevCountRef.current = count; // store current as previous after each render
}, [count]);

const prevCount = prevCountRef.current; // previous value available during render

Use multiple separate useEffect calls for unrelated concerns to keep each effect focused.

useEffect(() => { /* handle auth token refresh */ }, [token]);
useEffect(() => { /* sync theme to body class */ }, [theme]);
useEffect(() => { /* track window resize */ }, []);
// Three concerns → three effects, each independently managed

Focus an input or dialog element after it becomes visible in the DOM.

useEffect(() => {
  if (isOpen && inputRef.current) {
    inputRef.current.focus(); // focus runs after the DOM updates
  }
}, [isOpen]); // re-runs whenever isOpen toggles to true

Update the document title reactively to reflect dynamic values like unread counts.

useEffect(() => {
  document.title = unreadCount > 0
    ? `(${unreadCount}) My App`
    : "My App";
}, [unreadCount]); // updates whenever unreadCount changes

Treat Strict Mode's extra dev-only mount cycle as a debugging aid, not a bug, when writing custom hooks or subscriptions.

function useChatRoom(roomId) {
  useEffect(() => {
    const connection = createConnection(roomId);
    connection.connect();
    return () => connection.disconnect(); // must fully undo connect()
  }, [roomId]); // Strict Mode connects, disconnects, reconnects in dev to prove cleanup is correct
}