react-use

react-use is a large, community-maintained library of more than 100 custom React Hooks that cover almost everything a typical application needs beyond React’s built-in useState and useEffect — device sensors like battery and geolocation, UI helpers like click-away and hover detection, animation hooks like useRaf and useSpring, side-effect utilities like debounce, throttle, and local/session storage, and state-management factories like createReducer and createStateContext.

Rather than reinventing common hook patterns in every project, teams pull in exactly the hooks they need — the library is organized by category (Sensors, UI, Animations, Side-effects, Lifecycles, State) with individual documentation pages and live demos for each hook, making it a reliable substitute for dozens of small bespoke hooks that would otherwise be hand-rolled and maintained per project.

What You Get

• 100+ individually documented React Hooks spanning sensors, UI, animations, side-effects, lifecycles, and state management
• Zero-config imports — pull in only the specific hooks you use via import { useToggle } from 'react-use'
• TypeScript-first source with full type declarations shipped in both CommonJS (lib/) and ES module (esm/) builds
• Storybook-powered live demos and per-hook markdown docs under docs/ for nearly every export
• State-sharing factories (createReducerContext, createStateContext, createGlobalState) for cross-component state without pulling in a full state library

Common Use Cases

• Tracking device/browser sensors (battery, geolocation, network state, window size) in dashboards and PWAs
• Debouncing/throttling user input and async calls with useDebounce, useThrottle, and useAsyncFn
• Persisting and syncing component state to localStorage/sessionStorage with useLocalStorage/useSessionStorage
• Building UI interactions like click-away dismissal, hover tracking, and long-press gestures without new dependencies
• Sharing state across components via factory hooks instead of adopting Redux or another global store

Under The Hood

Architecture react-use is a flat collection of ~115 independent hook modules under src/, each exporting a single default hook (e.g. src/useLocalStorage.ts, src/useDebounce.ts) plus a src/factory/ directory (createReducer.ts, createStateContext.ts, createGlobalState.ts, createHTMLMediaHook.ts) for hooks that need to be parameterized before use, and a src/misc/ directory (util.ts, hookState.ts, isDeepEqual.ts) holding shared internals like the isBrowser guard and noop. Everything is re-exported through a single flat barrel file, src/index.ts, so consumers get one import surface (import { useX } from 'react-use') regardless of how the implementation is organized internally — there is no internal dependency graph between hooks beyond a handful that compose smaller hooks (useDebounce wraps useTimeoutFn, for instance).

Tech Stack The library targets ES5/CommonJS via tsc (tsconfig.json: target: es5, strict: true, noUnusedLocals/noUnusedParameters enforced) and additionally emits an ES module build (esm/) with a second tsc -m esNext pass, so consumers can pick whichever module format their bundler prefers. react and react-dom are declared as peer dependencies ("*"), keeping the package usable across a wide range of React versions, while runtime dependencies are kept deliberately small and single-purpose (js-cookie, screenfull, fast-deep-equal, throttle-debounce, nano-css, resize-observer-polyfill). Builds, linting, and releases are automated with semantic-release, husky pre-push hooks (lint && clean && build && test), and Storybook for interactive documentation.

Code Quality The tests/ directory mirrors src/ closely with 77 test files, one per hook or factory (e.g. useAsync.test.tsx, createReducer.test.ts), run through Jest with both a browser and an SSR/Node config (jest.config.ts / jest.config.node.ts) to catch server-rendering regressions in browser-only hooks. TypeScript strict mode plus ESLint with eslint-plugin-react-hooks enforces rules-of-hooks compliance, though a number of hooks carry explicit eslint-disable-next-line react-hooks/rules-of-hooks comments where conditional early-returns (e.g. the isBrowser guard in useLocalStorage) are intentional and safe. Error handling favors silent, documented fallbacks over throwing — useLocalStorage’s localStorage calls are wrapped in try/catch with comments explaining private-mode/quota failure cases — a defensible pattern for a browser-utility library, though it does mean failures are swallowed rather than surfaced to the caller.

API Design The library’s core design choice is one hook per concern with a small, predictable signature — most hooks return either a single value, a [state, setState] tuple mirroring useState, or a [state, actions] pair, which keeps the learning curve low once a developer has used two or three hooks from the set. Naming is consistent and discoverable (use + noun/verb, create + noun for factories), and nearly every hook has a matching doc page under docs/ with a live CodeSandbox/Storybook demo, which meaningfully lowers the cost of evaluating whether a given hook fits a specific need before adopting it.