react-stateful-hooks
SSR-first React hooks for browser state — zero hydration mismatches, built on useSyncExternalStore
A small, well-typed collection of React hooks for browser state. Every hook is
built on React’s official useSyncExternalStore, so it renders a stable value
on the server and hydrates without a mismatch — the thing most hook
libraries get wrong. Tree-shakeable, ~2 kB gzipped, ships ESM + CJS + types
npm install react-stateful-hooks0
Open this page in a second tab — both stay in sync, and the value survives a reload
Why this library?
The hooks space is crowded — here is where it is deliberately different. The focus is correctness under SSR and across tabs, not breadth
| react-stateful-hooks | usehooks-ts | react-use | |
|---|---|---|---|
SSR-safe via useSyncExternalStore | ✅ every hook | ⚠️ partial | ⚠️ partial / legacy |
| Cross-tab storage sync | ✅ built in | ❌ | ⚠️ |
| Survives corrupted JSON / quota errors | ✅ falls back | ❌ | ❌ |
| Same-tab sync across components | ✅ | ⚠️ | ⚠️ |
| Bundle size | ~2 kB, tree-shakeable | small | large |
| Runtime dependencies | 1 (official shim) | 0 | many |
| TypeScript-first | ✅ | ✅ | ⚠️ |
The hooks
useLocalStorageStateuseSessionStorageStateuseDebouncedValueuseMediaQueryuseNetworkStateuseCopyToClipboardusePrefersColorSchemeusePrefersReducedMotionuseHydrateduseCookieState
react >= 17 is a peer dependency
Last updated on