ahooks

ahooks is a large, well-documented library of reusable React hooks covering everything from basic state and lifecycle helpers (useBoolean, useToggle, useMount) to advanced, business-scenario-driven hooks like useRequest (async data fetching with caching, retry, and polling), useDebounce/useThrottle, drag-and-drop, and DOM interaction hooks (useHover, useClickAway, useInViewport).

Maintained by Alibaba and used extensively across its internal products, ahooks is written in TypeScript with predictable static types, supports SSR, and ships bilingual (English/Chinese) documentation with live demos for every hook — making it one of the most comprehensive general-purpose React hooks collections available.

What You Get

• A broad catalog of basic hooks (useBoolean, useToggle, useCounter, useMap, useSet, useLatest) for everyday component state
• useRequest, a full-featured async data-fetching hook with caching, deduplication, polling, retry, and pagination built in
• DOM and browser interaction hooks (useHover, useClickAway, useInViewport, useDrag/useDrop, useEventListener, useMouse)
• Debounce/throttle hooks (useDebounce, useDebounceFn, useThrottle, useThrottleFn) and effect variants (useDeepCompareEffect, useAsyncEffect)
• Bilingual documentation (English/Chinese) with a live CodeSandbox demo for every individual hook

Common Use Cases

• Replacing hand-rolled useEffect/useState boilerplate for data fetching with useRequest’s caching, retry, and polling behavior
• Adding debounced/throttled input handling to search boxes and forms without reimplementing timer logic
• Building drag-and-drop or DOM-interaction features (useDrag, useHover, useInViewport) without a separate dependency per behavior
• Standardizing common component patterns (toggles, counters, maps/sets as state) across a large team’s codebase

Under The Hood

Architecture — ahooks is organized as a pnpm-workspace monorepo (packages/hooks, plus split-out packages like @ahooksjs/use-url-state) where every hook lives in its own directory under packages/hooks/src/<hookName>/ with a co-located index.ts, __tests__/, demo/, and bilingual markdown docs. This one-hook-per-folder layout keeps each hook independently documented and testable while still being re-exported from a single top-level index.ts barrel file for the published ahooks package.

Tech Stack — Nearly 100% TypeScript, built and bundled for CJS (lib/), ESM (es/), and a UMD unpkg build (dist/ahooks.js), with sideEffects: false set for tree-shaking. useRequest in particular is architected as a plugin-based hook internally, composing smaller behaviors (cache, polling, retry, debounce) as independent plugins layered onto a base fetch hook.

Code Quality — Every hook directory ships its own __tests__ folder, and coverage is tracked via Coveralls (visible in the README badge). Consistent structure across ~80 hooks (test + demo + doc per hook) makes the codebase easy to navigate despite its size, and the top-level index.spec.ts provides an integration-level smoke test across the full public API surface.

API Design — Hooks follow React’s use-prefixed naming convention consistently and are designed to be dropped in with minimal configuration (e.g. useRequest(fetchFn) works out of the box, with options layered on top only when needed). The bilingual per-hook documentation with runnable demos significantly lowers the learning curve for adopting any single hook without needing to understand the whole library.