Effects: Synchronizing with External Systems

useEffect synchronizes a component with something outside React: subscriptions, timers, DOM APIs, WebSockets, non-React widgets. It runs after render; list every reactive value it uses in the dependency array and return a cleanup function. You don't need an effect to transform data for rendering or to respond to user events — do that during render or in handlers. React 19.2 adds useEffectEvent to read the latest values in effects without re-subscribing.

import { useEffect, useState } from "react";

export function OnlineStatus() {
  const [online, setOnline] = useState(navigator.onLine);

  useEffect(() => {
    const update = () => setOnline(navigator.onLine);
    window.addEventListener("online", update);
    window.addEventListener("offline", update);
    return () => {
      window.removeEventListener("online", update);
      window.removeEventListener("offline", update);
    };
  }, []);

  return <span>{online ? "Online" : "Offline"}</span>;
}

// BUG: Not needed: derived data
// useEffect(() => setFullName(first + " " + last), [first, last]);
// FIX: const fullName = `${first} ${last}`;

Common pitfalls

• Missing dependencies (stale values) or suppressing the lint rule.
• Effects that set state derived from props, causing extra renders.
• No cleanup for subscriptions, intervals or fetches (race conditions).

Key points

• Effects sync with external systems
• Always clean up
• Derive data during render; handle events in handlers

Further reading: react.dev: You might not need an effect