🪝 Custom Hooks

What Is a Custom Hook?

A custom hook is simply a JavaScript function whose name starts with use and that calls other hooks (useState, useEffect, even other custom hooks). It isn't a new React feature — it's a convention that lets you lift stateful logic out of a component and share it, the same way a regular function lets you share plain logic.

Extracting Your First Hook

Here's the classic duplication: every component that loads data repeats the same loading / error / data dance.

// ❌ Repeated in every data-loading component
function ProductList() {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('/api/products')
      .then(res => res.json())
      .then(data => { setData(data); setLoading(false); })
      .catch(err => { setError(err); setLoading(false); });
  }, []);

  if (loading) return <div>Loading…</div>;
  if (error) return <div>Error: {error.message}</div>;
  return <div>{/* render products */}</div>;
}

Lift the three state pieces and the effect into useFetch. The modern version adds cleanup so a response that arrives after the component unmounts (or after url changes) is ignored — a common source of "can't update state on an unmounted component" warnings.

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

  useEffect(() => {
    const controller = new AbortController();
    setLoading(true);
    setError(null);

    fetch(url, { signal: controller.signal })
      .then(res => {
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        return res.json();
      })
      .then(json => { setData(json); setLoading(false); })
      .catch(err => {
        if (err.name === 'AbortError') return; // ignore cancelled fetch
        setError(err);
        setLoading(false);
      });

    // Cleanup: cancel the request if url changes or component unmounts.
    return () => controller.abort();
  }, [url]);

  return { data, loading, error };
}

// ✅ Now the component is tiny and declarative
function ProductList() {
  const { data, loading, error } = useFetch('/api/products');
  if (loading) return <div>Loading…</div>;
  if (error) return <div>Error: {error.message}</div>;
  return <div>{/* render products */}</div>;
}

useLocalStorage

A hook that behaves exactly like useState but transparently persists to localStorage — so a preference survives a page refresh. This is the canonical "extract reusable logic" example.

function useLocalStorage(key, initialValue) {
  // Lazy initializer: read localStorage only once, on mount.
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.warn(`Error reading localStorage key "${key}":`, error);
      return initialValue;
    }
  });

  // A setter with the same API as useState (value OR updater function).
  const setValue = (value) => {
    try {
      const valueToStore =
        value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.warn(`Error setting localStorage key "${key}":`, error);
    }
  };

  return [storedValue, setValue];
}

// Usage — identical feel to useState, but it remembers.
function DarkModeToggle() {
  const [isDark, setIsDark] = useLocalStorage('darkMode', false);
  return (
    <button onClick={() => setIsDark(prev => !prev)}>
      {isDark ? '🌞 Light Mode' : '🌙 Dark Mode'}
    </button>
  );
}

useDebounce & useWindowSize

useDebounce — wait for the typing to stop

Firing an API call on every keystroke floods your server. Debouncing returns a value that only updates after the user pauses. It's a tiny hook with an outsized impact on search boxes.

function useDebounce(value, delay = 500) {
  const [debounced, setDebounced] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => setDebounced(value), delay);
    // If value changes before `delay`, cancel the pending update.
    return () => clearTimeout(handler);
  }, [value, delay]);

  return debounced;
}

function SearchBox() {
  const [term, setTerm] = useState('');
  const debouncedTerm = useDebounce(term, 400);

  useEffect(() => {
    if (debouncedTerm) searchAPI(debouncedTerm); // runs 400ms after typing stops
  }, [debouncedTerm]);

  return (
    <input
      value={term}
      onChange={(e) => setTerm(e.target.value)}
      placeholder="Search…"
    />
  );
}

useWindowSize — subscribe to the viewport

Any hook that adds an event listener must remove it on cleanup, or you leak listeners every time the component mounts.

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

  useEffect(() => {
    const handleResize = () =>
      setSize({ width: window.innerWidth, height: window.innerHeight });

    window.addEventListener('resize', handleResize);
    handleResize(); // sync once on mount
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return size;
}

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

Composing Hooks

The real superpower: a custom hook can call other custom hooks. Here useAuth is built entirely out of the smaller hooks we've written, layering behavior instead of rewriting it.

function useAuth() {
  // Persist the token across refreshes with our own hook…
  const [token, setToken] = useLocalStorage('token', null);
  const [user, setUser] = useLocalStorage('user', null);
  // …and reuse useFetch to load the current user when a token exists.
  const { data: freshUser, loading } = useFetch(
    token ? `/api/me?token=${token}` : null
  );

  const login = async (email, password) => {
    const res = await authAPI.login(email, password);
    setToken(res.token);
    setUser(res.user);
  };

  const logout = () => {
    setToken(null);
    setUser(null);
  };

  return {
    user: freshUser ?? user,
    isAuthenticated: Boolean(token),
    loading,
    login,
    logout,
  };
}

// A whole auth system in one line per component.
function App() {
  const { isAuthenticated, loading } = useAuth();
  if (loading) return <LoadingScreen />;
  return isAuthenticated ? <Dashboard /> : <LoginPage />;
}

Testing Custom Hooks

Because a hook is just logic, you can test it without rendering a real UI. React Testing Library's renderHook mounts the hook in a throwaway component and act flushes updates.

// useCounter.js
function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);
  return {
    count,
    increment: () => setCount(c => c + 1),
    decrement: () => setCount(c => c - 1),
    reset: () => setCount(initialValue),
  };
}

// useCounter.test.js
import { renderHook, act } from '@testing-library/react';
import { useCounter } from './useCounter';

test('increments the count', () => {
  const { result } = renderHook(() => useCounter(10));
  expect(result.current.count).toBe(10);

  act(() => result.current.increment());
  expect(result.current.count).toBe(11);
});

test('resets to the initial value', () => {
  const { result } = renderHook(() => useCounter(5));
  act(() => { result.current.increment(); result.current.reset(); });
  expect(result.current.count).toBe(5);
});

Practice & Quiz

function useToggle(initial = false) {
  const [on, setOn] = useState(initial);
  const toggle = useCallback((value) => {
    setOn(prev => (typeof value === 'boolean' ? value : !prev));
  }, []);
  return [on, toggle];
}

function usePrevious(value) {
  const ref = useRef();
  useEffect(() => {
    // Runs AFTER render, so ref holds the prior value during render.
    ref.current = value;
  }, [value]);
  return ref.current;
}

// Usage
function Counter({ count }) {
  const prev = usePrevious(count);
  return <p>Now: {count}, before: {prev ?? '—'}</p>;
}

Best Practices & Pitfalls

✅ Do

• Name every hook use* so the linter enforces the Rules of Hooks
• Keep each hook focused on one responsibility
• Return a consistent shape every render (array like useState, or a stable object)
• Clean up listeners, timers, and requests in the effect's return function
• Compose small hooks into larger ones instead of duplicating logic

❌ Don't

• Call hooks conditionally or inside loops — always top level
• Run side effects directly in the hook body (they belong in useEffect)
• Return different shapes on different renders ({ loading } then { user })
• Expect two components to share state through one hook — use Context for that

// ❌ Bad: shape changes → destructuring in the component breaks
function useAuth() {
  if (loading) return { loading };
  if (user) return { user };
  return null;
}

// ✅ Good: same keys every time
function useAuth() {
  return { user, loading, error };
}

Summary

📚 Additional Resources

• react.dev — Reusing Logic with Custom Hooks
• react.dev — Rules of Hooks
• react.dev — useRef reference

🚀 What's Next?

You've completed the hooks deep dive — useContext, useReducer, and custom hooks. Next we start assembling multi-page apps: Client-Side Routing Concepts, where the URL drives which component renders without a full page reload.