Building Your Own Hooks

Two components in the React for Beginners series need the same window-width value — or the same online-status listener, the same localStorage sync. Copying a useEffect between files works, but it doubles the bug fixes. React's answer is the custom hook: extract stateful logic into a function whose name starts with use, call it from any component, and share behaviour without sharing state.

What a custom hook is

A custom hook is an ordinary function that may call other hooks. Nothing more. Its superpower is packaging: each component that calls it gets its own independent copy of the internal state, while the logic lives in one place.

import { useState } from 'react';

function useCounter(start = 0) {
  const [count, setCount] = useState(start);
  const increment = () => setCount((c) => c + 1);
  const decrement = () => setCount((c) => c - 1);
  const reset = () => setCount(start);

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

Expected output: nothing on its own — hooks render nothing. Consumed as shown next, the hook behaves exactly like locally declared state.

Using a custom hook

Call it at the top of a component like any built-in hook. Two components using useCounter stay fully independent:

function LikeButton() {
  const { count, increment } = useCounter(0);
  return <button onClick={increment}>Likes: {count}</button>;
}

function CartSummary() {
  const { count, increment, decrement } = useCounter(0);
  return (
    <div>
      <button onClick={decrement}>-</button>
      <span>Items: {count}</span>
      <button onClick={increment}>+</button>
    </div>
  );
}

Expected output: clicking "Likes" never disturbs the cart count, and vice versa — each call to useCounter creates its own useState slot. Sharing the logic did not share the state.

A hook with an effect: useOnlineStatus

Custom hooks shine for effects. Wrapping the subscribe/cleanup pair once means every consumer gets it right:

import { useEffect, useState } from 'react';

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

  useEffect(() => {
    function goOnline() { setOnline(true); }
    function goOffline() { setOnline(false); }

    window.addEventListener('online', goOnline);
    window.addEventListener('offline', goOffline);

    return () => {
      window.removeEventListener('online', goOnline);
      window.removeEventListener('offline', goOffline);
    };
  }, []);

  return online;
}

// In any component:
const online = useOnlineStatus();
return online ? <p>Connected</p> : <p className="warn">Offline mode</p>;

Expected output: the indicator flips the moment the connection drops — even with dev tools' offline mode — and the listener is removed when the last consumer unmounts, because cleanup lives inside the hook.

The rules of hooks still apply

Custom hooks inherit every constraint of built-ins, which is why they are recognisable by name:

Designing a good hook

• One concern per hook — useOnlineStatus does one thing; a hook that fetches, validates and navigates is three hooks.
• Return what callers need — a value, or an object like { count, increment }; document the shape in a comment or TypeScript later.
• Accept configuration as arguments — defaults, ids, intervals: parameters keep the hook general.
• Compose hooks — a hook may call other hooks; usePaginatedFetch can build on a useFetch.
• Keep side effects inside effects — a hook that sets state during render is a bug, not a feature.

Custom hook vs utility function

The deciding test: does it use hooks? Pure transformations — formatting dates, sorting arrays, calculating totals — belong in plain modules where they are testable without React. If the function calls useState, useEffect, useContext or another hook, it must be a custom hook.

Common mistakes

• Conditional hook calls — if (ready) { const v = useThing(); } breaks React; restructure instead.
• Forgetting the use prefix — ESLint cannot enforce hook rules on getStatus(), and reviewers miss it too.
• Sharing state unintentionally — module-level variables inside a hook leak between consumers; keep state in hooks, config in arguments.
• Missing cleanup — every listener, timer or subscription added in the hook needs its removal in the returned cleanup.
• God hooks — one hook doing five jobs forces every caller to pay for all five; split it.

Practice checklist

1. Extract your earlier counter logic into useCounter and use it in two components; verify independence.
2. Build useOnlineStatus and test with the network tab's offline toggle.
3. Write useLocalStorage(key, initial) that syncs state to storage — note the lazy initialiser.
4. Create a hook with a deliberate conditional call, read the ESLint error, then fix the structure.
5. Refactor one duplicated effect from your earlier chapters into a shared hook.

Your hooks are production-shaped — finish the series by surviving failures and going live: Error Boundaries and Deployment.