How do you test custom React hooks?

A custom hook is just a function that uses other hooks, so it needs a React renderer to run. renderHook creates a small test component internally and exposes the hook's return value through result.current. That makes it possible to test state transitions and cleanup without inventing a full component.

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

test("increments and resets", () => {
  const { result } = renderHook(() => useCounter(3));

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

  act(() => result.current.reset());
  expect(result.current.count).toBe(3);
});

What renderHook gives you

• result.current for the latest returned value
• rerender to change props and exercise updates
• unmount to verify cleanup and cancellation
• act or waitFor to wrap state updates and async effects

Prefer a component test when the hook is inseparable from rendering, such as a hook that returns props for a form. renderHook is best for reusable logic with a clear input and output: pagination, debouncing, media queries, form state machines. If the hook needs a provider, pass a wrapper to renderHook.