Custom Hooks

Custom hooks share stateful logic, not state itself. Each call owns independent state while following the same behavior.

Extract a browser integration

01function useOnlineStatus() {
02  const [online, setOnline] = useState(navigator.onLine);
03  useEffect(() => {
04    const update = () => setOnline(navigator.onLine);
05    window.addEventListener("online", update);
06    window.addEventListener("offline", update);
07    return () => { window.removeEventListener("online", update); window.removeEventListener("offline", update); };
08  }, []);
09  return online;
10}

Hooks begin with use and may call other hooks only at the top level. Design the return value around what consumers need, not internal implementation.

Choose useful boundaries

Extract a hook when several components share a meaningful behavior or when a complex integration deserves its own contract. Do not wrap every small state call.

Keep this

Extract cohesive stateful behavior, obey hook rules, hide integration details, and keep each call independent.