react-use — Essential Collection of React Hooks

Introduction

react-use is a comprehensive library of reusable React hooks that covers nearly every common UI and state pattern. Instead of writing custom hooks for debouncing, media queries, local storage, or clipboard access, teams import battle-tested implementations from a single dependency. The library has grown organically around real-world needs and is one of the most widely adopted hooks collections in the React ecosystem.

What react-use Does

• Provides 100+ hooks organized by category: sensors, UI, animations, side-effects, lifecycles, and state
• Offers browser API hooks like useMedia, useGeolocation, useIdle, useBattery, and useNetworkState
• Includes state management hooks such as useList, useMap, useSet, useQueue, and useCounter
• Supplies side-effect hooks like useDebounce, useThrottle, useTimeout, useInterval, and useAsync
• Delivers animation hooks including useSpring, useTween, and useRaf for frame-accurate control

Architecture Overview

react-use is a flat collection of independent hooks, each in its own module. There is no shared runtime or context provider required. Hooks are written in TypeScript and compiled to both ESM and CommonJS. Tree-shaking works out of the box, so bundlers only include the hooks you actually import. Each hook follows React's rules of hooks and is designed to be composable with other hooks.

Self-Hosting & Configuration

• Install via npm, yarn, or pnpm: npm install react-use
• No configuration file or provider component needed
• Import individual hooks to keep bundle size minimal
• Works with React 16.8+ (hooks API) and React 18/19
• TypeScript types are included in the package

Key Features

• Sensor hooks detect mouse position, scroll position, window size, device orientation, and battery status
• UI hooks manage clipboard, fullscreen mode, CSS variables, favicon, and page title
• Lifecycle hooks mirror componentDidMount, componentDidUpdate, and componentWillUnmount patterns
• State hooks provide enhanced versions of useState with undo, redo, history, and validation
• All hooks are individually importable for optimal tree-shaking

Comparison with Similar Tools

• ahooks — Alibaba's hook library with a focus on enterprise patterns and request management; react-use is broader in sensor and animation coverage
• usehooks — A curated set of well-documented hooks; react-use offers a larger catalog with more niche utilities
• @mantine/hooks — Tightly coupled to the Mantine UI system; react-use is framework-agnostic
• react-hookz — A newer alternative with strict TypeScript; react-use has wider adoption and more community examples
• Custom hooks — Writing your own gives full control but duplicates well-solved problems that react-use already handles

FAQ

Q: Does react-use increase bundle size significantly? A: No. Each hook is a separate module, so tree-shaking ensures only imported hooks are bundled. Typical usage adds a few kilobytes.

Q: Is react-use compatible with React 18 and concurrent features? A: Yes. The hooks follow standard React hook contracts and work with concurrent mode, Suspense, and server components where applicable.

Q: Can I use react-use in a Next.js or Remix project? A: Yes. Hooks that access browser APIs should be used in client components ('use client' directive in Next.js App Router).

Q: How does react-use compare to writing hooks from scratch? A: react-use saves time on common patterns. For highly specialized logic, a custom hook may be appropriate, but for standard needs like debouncing or local storage, react-use is well-tested and maintained.

Sources

• https://github.com/streamich/react-use
• https://streamich.github.io/react-use/