Custom Hooks

Extracting and reusing stateful logic between components - what makes a custom hook, naming conventions, and real-world examples.

What it is, in plain English: A custom hook is a JavaScript function whose name starts with 'use' that calls other hooks inside it. It lets you extract component logic -- state, effects, subscriptions -- into a reusable function, without changing the underlying behaviour. Unlike a regular function, a custom hook can use useState, useEffect, and other hooks because React tracks it as part of the calling component's hook chain. Custom hooks are how the React community shares reusable logic.

Extracting reusable logic into a function

If two components need the same stateful logic -- the same useState, the same useEffect pattern -- copying and pasting it is a maintenance trap. A custom hook lets you write that logic ONCE, as a function, and use it in as many components as you need.

The rule: name it "use..." and it can call other hooks

// A custom hook is JUST a function -- the "use" prefix is a convention
// that tells React (and the linter) "this function uses hooks inside it":
function useCounter(initialValue = 0) {
  const [count, setCount] = React.useState(initialValue);

  const increment = () => setCount(c => c + 1);
  const decrement = () => setCount(c => c - 1);
  const reset     = () => setCount(initialValue);

  return { count, increment, decrement, reset };
}

// Now ANY component can reuse this counter logic:
function CounterA() {
  const { count, increment, decrement } = useCounter(0);
  return (
    <div>
      {count}
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
}

function CounterB() {
  const { count, reset } = useCounter(100);   // independent instance, different initial value
  return <div>{count} <button onClick={reset}>Reset</button></div>;
}

A real example -- syncing with localStorage

function useLocalStorage(key, initialValue) {
  const [value, setValue] = React.useState(() => {
    const stored = localStorage.getItem(key);
    return stored ? JSON.parse(stored) : initialValue;
  });

  function setStoredValue(newValue) {
    setValue(newValue);
    localStorage.setItem(key, JSON.stringify(newValue));
  }

  return [value, setStoredValue];
}

// Usage looks exactly like useState, but persists automatically:
function Settings() {
  const [theme, setTheme] = useLocalStorage("theme", "light");
  return <button onClick={() => setTheme("dark")}>{theme}</button>;
}

What custom hooks share -- and what they DON'T share

// Each component that calls a custom hook gets its OWN independent state:
function App() {
  return (
    <>
      <CounterA />   {/* its own count, starts at 0 */}
      <CounterB />   {/* its own count, starts at 100 */}
    </>
  );
}
// Custom hooks share LOGIC (the code), not STATE (the data).
// Calling useCounter() twice creates two completely separate counters.

Try It Yourself (JSX)

// Custom hooks -- extracting reusable stateful logic into a function

// A custom hook for syncing state with localStorage
function useLocalStorage(key, initialValue) {
  const [value, setValue] = React.useState(() => {
    try {
      const item = localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch {
      return initialValue;
    }
  });

return [value, setStoredValue];
}

function PreferencesForm() {
  const [theme, setTheme] = useLocalStorage("theme", "light");
  return (
    <div>
      <p>Current theme: {theme}</p>
      <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
        Toggle theme
      </button>
    </div>
  );
}

// A custom hook for tracking online/offline status
function useOnlineStatus() {
  const [isOnline, setIsOnline] = React.useState(true);

React.useEffect(() => {
    function handleOnline() { setIsOnline(true); }
    function handleOffline() { setIsOnline(false); }

window.addEventListener("online", handleOnline);
    window.addEventListener("offline", handleOffline);

return () => {
      window.removeEventListener("online", handleOnline);
      window.removeEventListener("offline", handleOffline);
    };
  }, []);

return isOnline;
}

function StatusIndicator() {
  const isOnline = useOnlineStatus();
  return <p>{isOnline ? "🟢 Online" : "🔴 Offline"}</p>;
}

// A custom hook for debouncing a value (e.g. search input)
function useDebounce(value, delay) {
  const [debounced, setDebounced] = React.useState(value);

React.useEffect(() => {
    const timer = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(timer);
  }, [value, delay]);

return debounced;
}

function SearchBox() {
  const [query, setQuery] = React.useState("");
  const debouncedQuery = useDebounce(query, 500);

React.useEffect(() => {
    if (debouncedQuery) console.log("Searching for:", debouncedQuery);
  }, [debouncedQuery]);

return <input value={query} onChange={e => setQuery(e.target.value)} placeholder="Search..." />;
}

function App() {
  return (
    <div>
      <PreferencesForm />
      <StatusIndicator />
      <SearchBox />
    </div>
  );
}

Real-world custom hooks

useFetch -- data fetching with loading/error states

function useFetch(url) {
  const [data, setData]       = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [error, setError]     = React.useState(null);

  React.useEffect(() => {
    let cancelled = false;
    setLoading(true);
    setError(null);

    fetch(url)
      .then(res => {
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        return res.json();
      })
      .then(json => { if (!cancelled) { setData(json); setLoading(false); } })
      .catch(err  => { if (!cancelled) { setError(err);  setLoading(false); } });

    return () => { cancelled = true; };
  }, [url]);

  return { data, loading, error };
}

// Every component using this gets the same loading/error/data shape for free:
function UserProfile({ userId }) {
  const { data: user, loading, error } = useFetch(`/api/users/${userId}`);

  if (loading) return <Spinner />;
  if (error)   return <ErrorMessage error={error} />;
  return <p>{user.name}</p>;
}

useWindowSize -- tracking viewport dimensions

function useWindowSize() {
  const [size, setSize] = React.useState({
    width:  window.innerWidth,
    height: window.innerHeight,
  });

  React.useEffect(() => {
    function handleResize() {
      setSize({ width: window.innerWidth, height: window.innerHeight });
    }
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return size;
}

function ResponsiveComponent() {
  const { width } = useWindowSize();
  return width < 768 ? <MobileView /> : <DesktopView />;
}

Composing custom hooks from other custom hooks

// Custom hooks can call OTHER custom hooks:
function usePersistedCounter(key) {
  const [count, setCount] = useLocalStorage(key, 0);   // reuses useLocalStorage!

  return {
    count,
    increment: () => setCount(count + 1),
    decrement: () => setCount(count - 1),
  };
}
// usePersistedCounter combines localStorage persistence + counter logic,
// built entirely from a smaller, already-tested hook.

When NOT to extract a custom hook, and testing them

// Custom hooks are for STATEFUL, REUSABLE logic. If logic is:
// - used in only ONE place → probably doesn't need extraction yet
// - purely a calculation with no hooks inside → just use a regular function
function formatCurrency(amount) {   // NOT a hook -- no hooks called inside, doesn't need "use" prefix
  return new Intl.NumberFormat("en-IN", { style: "currency", currency: "INR" }).format(amount);
}

// Testing custom hooks in isolation with @testing-library/react:
import { renderHook, act } from "@testing-library/react";

test("useCounter increments", () => {
  const { result } = renderHook(() => useCounter(0));

  expect(result.current.count).toBe(0);

  act(() => {
    result.current.increment();
  });

  expect(result.current.count).toBe(1);
});

Custom hooks and the Rules of Hooks still apply

A custom hook is subject to the exact same rules as any built-in hook: it must be called at the top level of a component or another custom hook, never conditionally. The "use" naming convention isn't just stylistic — it's how ESLint's eslint-plugin-react-hooks identifies which functions to apply the Rules of Hooks checks to. A function that uses hooks internally but is NOT named with the "use" prefix will not be checked by the linter, silently allowing rule violations to slip through.

Official Sources

The Codex links only to official documentation. No third-party tutorials.