Getting started

Start with one behavior, not a new layer in your application. The Hook index groups the library by the problem each Hook solves.

Make the component client-side

Better Hooks uses React client Hooks. In an RSC application, put 'use client' in the smallest component that calls one:

'use client';
 
import { useToggle } from 'better-hooks/use-toggle';
 
export function DetailsButton() {
  const [open, toggle] = useToggle(false);
 
  return (
    <button type="button" aria-expanded={open} onClick={() => toggle()}>
      {open ? 'Hide details' : 'Show details'}
    </button>
  );
}

A client-only React application does not need the directive. The direct import keeps this component's dependency easy to spot; the root better-hooks export works too.

Give the first render a calm answer

Server rendering cannot know the viewport, connection, or storage contents. Use an explicit initial value when the UI needs one. Browser-facing Hooks also document their neutral server value: useWindowSize starts at { width: 0, height: 0 }, while useMediaQuery accepts defaultMatches.

The browser value arrives after hydration. Build the first frame so that this handoff does not move or replace more UI than necessary.

Let the Hook own its work

Do not add a second timer or native listener around the Hook. Change its inputs and let React trigger the matching cleanup. This is especially important for delayed callbacks, browser subscriptions, observers, and network work.

Keep going

Open the reference page for the Hook you chose; it lists the signature, behavior, SSR notes, and a live example. For the lifecycle rules shared by the library, continue with React 19.