---
title: react-hooks
description: "Small, focused, tree-shakeable React hooks — one hook, one subpath, no forced bundle."
sidebar:
  label: Overview
type: package
package: "@zap-studio/react-hooks"
---

`react-hooks` is a collection of 100+ small, focused React hooks. Each hook ships as its own subpath export — importing one never pulls in unrelated hooks — with SSR-safe defaults and 100% test coverage.

## Motivation

Reaching a browser API from React usually means hand-writing a `useEffect` — a resize listener, a `matchMedia` subscription, an `IntersectionObserver` — and each one carries the same two risks: forget the cleanup and you get a leaked listener that keeps firing after unmount, or forget to guard `window`/`document`/`navigator` and the same code throws on the server or hydrates to a value the client's first render did not have.

`react-hooks` wraps these APIs — `IntersectionObserver`, `ResizeObserver`, the Battery/Geolocation/Share/Wake Lock APIs, `matchMedia`, and more — behind a small, correct React interface instead of code you write from scratch. Every hook is SSR- and hydration-safe: nothing touches `window`, `document`, or `navigator` outside an effect or a guarded check, so server renders never throw and hydration never mismatches.

Every hook also ships as its own standalone, side-effect-free module — import it on its own and it tree-shakes cleanly. Public hooks never import each other; some share small internal helper modules, so pulling in `useIsMobile` never drags in unrelated hook code.

## Conventions

- Every hook is available both from the top-level `.` barrel and from its own subpath (e.g. `@zap-studio/react-hooks/sensors/use-is-mobile`) — same function either way.
- No hook file imports another hook file.

### Unstable vs. Experimental

Two different name markers warn about two different kinds of risk:

- **`Unstable`** — the hook reads a private API with no public type, not guaranteed to stay the same shape between React versions. Only `useUnstableFiber` and `useUnstableRenderReason` carry this marker, both in [Debug / Observability](/react-hooks/debug): they walk react-dom's internal Fiber tree, the same private structure React DevTools itself reads. The risk is about **this package breaking on a React upgrade**, not about the browser.
- **`Experimental`** — the hook wraps a browser Web API that MDN itself badges "Experimental," like the Idle Detection API or Web NFC. The hook's own code is stable; the risk is that **the browser API can change or ship in fewer browsers than you'd like**. Every `useExperimental*` hook still fails closed: `supported: false` (or the equivalent) wherever the underlying API doesn't exist, instead of throwing.

A hook with neither marker is built entirely on public, standard APIs — safe to treat like any other hook in the package.

## Hooks by Category

- [Sensors](/react-hooks/sensors) — viewport, network, device, and permission state (`useMediaQuery`, `useOnlineStatus`, `useGeolocation`, `useBattery`, ...)
- [DOM / Element Interaction](/react-hooks/dom) — ref'd-element observers and browser chrome APIs (`useClickOutside`, `useIntersectionObserver`, `useFullscreen`, ...)
- [Input](/react-hooks/input) — keyboard, gamepad, and pointer input (`useKeyPress`, `useHotkeys`, `useGamepad`, ...)
- [Media](/react-hooks/media) — camera, microphone, and screen capture (`useCamera`, `useMediaRecorder`, `useSpeechRecognition`, ...)
- [History & Navigation](/react-hooks/navigation) — `popstate` and the Navigation API (`usePopState`, `useNavigation`, `useNavigationBlocker`, ...)
- [Network](/react-hooks/network) — WebSocket and Server-Sent Events (`useWebSocket`, `useEventSource`)
- [PWA](/react-hooks/pwa) — installability and service worker state (`useInstallPrompt`, `useServiceWorker`, ...)
- [Commerce](/react-hooks/commerce) — the Payment Request API (`usePaymentRequest`)
- [Lifecycle](/react-hooks/lifecycle) — mount/unmount, timers, and async helpers (`useMount`, `useInterval`, `useAsync`, ...)
- [State](/react-hooks/state) — local, persisted, and cross-tab state (`useLocalStorage`, `useIndexedDB`, `useBroadcastChannel`, ...)
- [Debug / Observability](/react-hooks/debug) — render diagnostics (`useRenderCount`, `useWhyDidYouUpdate`, `useUnstableFiber`, ...)

## Learn More

- [Getting Started](/react-hooks/getting-started) — install the package