Extracting a custom hook

A custom hook names and isolates a slice of stateful logic — that naming is the real product. Components answer “what does this render?”. A custom hook answers “what stateful behavior does this have?”. When you call const debounced = useDebounce(query, 300), the component reads as a sentence: debounce the query. The setTimeout, the cleanup, the dependency array all disappear behind a name that says what they collectively mean.

// inline: the component carries the mechanism
const [debounced, setDebounced] = useState(query);
useEffect(() => {
  const id = setTimeout(() => setDebounced(query), 300);
  return () => clearTimeout(id);
}, [query]);

// extracted: the component carries the intent
const debounced = useDebounce(query, 300);

Nothing about what runs changed. What changed is that the component no longer has to know how debouncing works to read clearly. The hook is a named boundary around stateful behavior.

Extract when the same state+effect+computed sequence appears in 2+ components — duplication is the most honest signal. Two components doing the identical debounce-fetch-cancel dance is a guarantee the logic has a shape worth naming. The win is concrete and double: one place to fix a bug (a missing cleanup, a wrong dependency) instead of two, and a name that lets every future reader skip re-deriving the mechanism.

// useUser(id): the same fetch/loading/error slice two screens needed
function useUser(id: string) {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    let active = true;
    setLoading(true);
    fetchUser(id).then((u) => { if (active) { setUser(u); setLoading(false); } });
    return () => { active = false; }; // ignore the stale response
  }, [id]);
  return { user, loading };
}

Now <ProfileHeader> and <AccountMenu> both call useUser(id). The active flag that prevents a stale response from overwriting a newer one lives in exactly one place — fix it once, both callers benefit.

Extract when a slice has a clear, nameable purpose — even a single caller — because the name buys clarity, not reuse. Reuse is the common trigger, but it isn’t the only valid one. If a component mixes its rendering concern with a self-contained behavior that has a name — “track whether the window is online”, “read this from localStorage and keep it in sync” — pulling that out makes the component readable even with one caller. The test is whether the slice is a genuine concept, not whether it has two call sites.

// one caller today, but "are we online?" is a real, self-contained concept
function useOnlineStatus() {
  const [online, setOnline] = useState(() => navigator.onLine);
  useEffect(() => {
    const on = () => setOnline(true), off = () => setOnline(false);
    window.addEventListener("online", on);
    window.addEventListener("offline", off);
    return () => {
      window.removeEventListener("online", on);
      window.removeEventListener("offline", off);
    };
  }, []);
  return online;
}

The component that uses it now says const online = useOnlineStatus(); instead of housing four addEventListener lines. The concept earned its name.

The failure mode: a single-caller hook that is just useState renamed — pure indirection, no reuse and no clarity gained. This is the trap that makes “extract hooks” feel like cargo-culting. Wrapping one piece of state with no logic in a use-prefixed function reuses nothing (one caller) and clarifies nothing (there was no mechanism to hide). You’ve added a file and a layer to read for zero return.

// ❌ indirection with no payoff: this is useState wearing a costume
function useCount() {
  const [count, setCount] = useState(0);
  return { count, setCount };
}
// caller is now *harder* to read than `const [count, setCount] = useState(0)`

// ✅ this clears the bar: it isolates a real, nameable behavior with logic
function useToggle(initial = false) {
  const [on, setOn] = useState(initial);
  const toggle = useCallback(() => setOn((v) => !v), []);
  return [on, toggle] as const;
}

useCount hides nothing and reuses nothing — delete it. useToggle is borderline but defensible: it names a recurring intent and bundles the toggle logic so callers stop re-writing the (v) => !v updater. The line is behavior or concept, not I put it in a function.