ahooks — High-Quality React Hooks Library by Alibaba

Introduction

ahooks is a React hooks library developed by the Ant Group (Alibaba) that provides a curated set of over 60 hooks for common development patterns. Rather than writing custom hooks for debouncing, request management, or DOM events, teams can import battle-tested implementations that handle edge cases, cleanup, and TypeScript types out of the box.

What ahooks Does

• Provides useRequest for declarative data fetching with caching, polling, and retry
• Offers state hooks like useLocalStorageState, useSessionStorageState, and useMap
• Includes DOM hooks for click-outside detection, intersection observer, and resize tracking
• Delivers effect hooks for debounce, throttle, interval, timeout, and lock patterns
• Supports SSR environments with safe window/document access guards

Architecture Overview

ahooks is organized into hook categories: Async (useRequest), State, Effect, DOM, and Advanced. Each hook is a self-contained module with its own tests, types, and documentation. The library uses a monorepo structure with independent compilation so that tree-shaking works at the hook level. useRequest — the most complex hook — implements a plugin architecture internally, allowing features like caching, polling, debounce, and error retry to compose independently.

Self-Hosting & Configuration

• Install via npm or yarn — no configuration files needed
• Import individual hooks for automatic tree-shaking in any modern bundler
• Configure useRequest defaults (polling interval, cache time, retry count) via options
• Wrap your app in a ConfigProvider for global defaults across all ahooks instances
• Works with React 16.8+ and supports React 18 concurrent features

Key Features

• useRequest with built-in loading states, caching, polling, pagination, and SWR-like revalidation
• useDebounce and useThrottle that handle value and callback variants with proper cleanup
• useVirtualList for rendering large lists with smooth scrolling and minimal DOM nodes
• Full TypeScript generics so return types infer correctly from input parameters
• Comprehensive test coverage and documentation with live examples for every hook

Comparison with Similar Tools

• React Use — large collection of community hooks; ahooks is more curated with consistent API design and TypeScript quality
• SWR — Vercel's data fetching library focused on the stale-while-revalidate pattern; ahooks' useRequest covers similar ground plus pagination and manual triggers
• TanStack Query (React Query) — the most popular async state manager; more powerful for complex caching but ahooks bundles state, DOM, and effect hooks alongside
• usehooks-ts — TypeScript-first hook collection; smaller set with simpler implementations compared to ahooks' production-hardened hooks
• Mantine Hooks — hooks bundled with the Mantine UI library; ahooks is UI-library agnostic

FAQ

Q: Does ahooks work with Next.js and SSR? A: Yes. ahooks guards against server-side window/document access and works in SSR frameworks like Next.js.

Q: Can I use just one hook without importing the entire library? A: Yes. Each hook is a separate module, so modern bundlers tree-shake unused hooks automatically.

Q: How does useRequest compare to React Query? A: useRequest covers common data fetching patterns (loading, error, caching, polling) in a simpler API. React Query offers more advanced features like query invalidation and infinite queries.

Q: Is ahooks actively maintained? A: Yes. The library is maintained by the Ant Group open-source team and receives regular updates.

Sources

• https://github.com/alibaba/hooks
• https://ahooks.js.org/