Custom Hooks — React Deep Dive

what is a custom hook?

A custom hook is a plain JavaScript function whose name starts with use and that may call other hooks. It extracts the wiring of state + effects + refs into one reusable unit, so useState + useEffect + useRef boilerplate never has to be copy-pasted between components. The hook itself holds no state — each component that calls it gets its own isolated state. That is the whole point: shared logic, private state.

rule	what it means	why it matters
1. name starts with `use`	e.g. `useToggle`, `useLocalStorage` — capital U, then lowercase	the linter (`eslint-plugin-react-hooks`) & Fast Refresh key off this prefix; without it they cannot detect hook violations
2. may call other hooks	`useState`, `useEffect`, `useReducer`, even other custom hooks, freely inside	this is what makes the logic "stateful" — composing hooks is composition of state machines
3. obeys the Rules of Hooks	call hooks at the top level, never inside loops/conditions/nested functions	React tracks hook state by call order — conditional calls break that bookkeeping
4. returns anything	value, [value, setter] array, or {key, key} object — your choice	convention: arrays for a single concept (caller renames), objects for many fields
5. takes anything	initial values, callbacks, refs — pure arguments in, anything out	hooks are just functions; params let callers configure behavior at the call site

1 · three hooks you write (edit me)

// Custom hook 1: useToggle — wraps useState for a boolean flip
function useToggle(initial) {
  var state = React.useState(initial);
  var value = state[0];
  var setValue = state[1];
  var toggle = React.useCallback(function () {
    setValue(function (v) { return !v; });
  }, []);
  return [value, toggle];
}

// Custom hook 2: usePrevious — wraps useRef + useEffect to remember last value
function usePrevious(value) {
  var ref = React.useRef(value);
  React.useEffect(function () {
    ref.current = value;
  }, [value]);
  return ref.current;
}

// Custom hook 3: useCounter — wraps useState + useCallback; stable action callbacks
function useCounter(initial) {
  var state = React.useState(initial);
  var count = state[0];
  var setCount = state[1];
  var increment = React.useCallback(function () { setCount(function (c) { return c + 1; }); }, []);
  var decrement = React.useCallback(function () { setCount(function (c) { return c - 1; }); }, []);
  var reset = React.useCallback(function () { setCount(initial); }, [initial]);
  return { count: count, increment: increment, decrement: decrement, reset: reset };
}

// The component: each hook call gets ITS OWN state
function CustomHooksDemo() {
  // useToggle — array destructure (single concept)
  var onOff = useToggle(false);
  var isOn = onOff[0];
  var toggleOn = onOff[1];

  // useCounter + usePrevious — object destructure + tracked previous value
  var counter = useCounter(0);
  var prevCount = usePrevious(counter.count);

  return (
    <div className="max-w-sm mx-auto p-5 bg-[#161b22] rounded-xl border border-[#30363d]">
      <h2 className="text-lg font-bold text-[#61dafb] mb-3">Custom Hooks Demo</h2>

      {/* useToggle */}
      <div className="mb-4 p-3 bg-[#0d1117] rounded border border-[#30363d]">
        <p data-testid="toggle-state" className="text-sm">Toggle: {isOn ? 'ON' : 'OFF'}</p>
        <button data-testid="toggle-btn" onClick={toggleOn}
          className="mt-2 px-3 py-1 bg-[#61dafb] text-[#0d1117] rounded font-bold text-xs">
          Flip
        </button>
      </div>

      {/* useCounter + usePrevious */}
      <div className="p-3 bg-[#0d1117] rounded border border-[#30363d]">
        <p data-testid="count-display" className="text-sm">
          Count: {counter.count} (was: {prevCount})
        </p>
        <div className="flex gap-2 mt-2">
          <button data-testid="inc-btn" onClick={counter.increment}
            className="px-3 py-1 bg-[#61dafb] text-[#0d1117] rounded font-bold text-xs">+</button>
          <button data-testid="dec-btn" onClick={counter.decrement}
            className="px-3 py-1 bg-[#30363d] text-[#e6edf3] rounded font-bold text-xs">−</button>
          <button data-testid="reset-btn" onClick={counter.reset}
            className="px-3 py-1 border border-[#30363d] text-[#8b949e] rounded font-bold text-xs">Reset</button>
        </div>
      </div>
    </div>
  );
}

createRoot(document.getElementById('root')).render(<CustomHooksDemo/>);

2 · Babel compiles JSX → element tree

<CustomHooksDemo/> becomes React.createElement(CustomHooksDemo). The three use* functions are ordinary JS — only their calls to React hooks are special. Each component instance owns a separate slot of state per hook call.

// (hit "compile & render" to see Babel's output)

3 · live React (three hooks, proven)

Click Flip to toggle useToggle, click + to drive useCounter while usePrevious trails the last value. The gold-check does this automatically: assert OFF → flip ON → flip OFF → inc (1/0) → inc (2/1) → reset (0/2).

live: — · gold: OFF → ON → OFF → 1/0 → 2/1 → 0/2

common custom hooks catalog

hook	wraps	common use case
`useToggle(initial)`	`useState`	boolean on/off flags — modals, switches, accordions
`usePrevious(value)`	`useRef` + `useEffect`	access the previous value of any state/prop (diff detection)
`useCounter(initial)`	`useState` + `useCallback`	increment / decrement / reset numeric state with stable callbacks
`useDebounce(value, ms)`	`useState` + `useEffect`	delay a rapidly-changing value (search-as-you-type, resize)
`useLocalStorage(key, init)`	`useState` + `useEffect`	persist state across reloads; lazy-init from `localStorage`
`useFetch(url)`	`useState` + `useEffect`	data fetching with `{data, loading, error}` shape
`useMediaQuery(query)`	`useState` + `useEffect`	subscribe to CSS media queries, re-render on breakpoint change
`useEventListener(target, event, fn)`	`useRef` + `useEffect`	attach/detach DOM or window listeners with correct cleanup