# ahooks — High-Quality React Hooks Library by Alibaba

> A comprehensive collection of production-ready React hooks covering state management, side effects, DOM manipulation, and advanced patterns. Provides over 60 hooks with full TypeScript support and SSR compatibility.

## Install

Save in your project root:

# ahooks — High-Quality React Hooks Library by Alibaba

## Quick Use
```bash
npm install ahooks
```
```tsx
import { useRequest, useDebounce, useLocalStorageState } from 'ahooks';

function App() {
  const { data, loading } = useRequest(() => fetch('/api/users').then(r => r.json()));
  const [search, setSearch] = useState('');
  const debouncedSearch = useDebounce(search, { wait: 300 });
  return loading ? <p>Loading...</p> : <ul>{data.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}
```

## 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/

---
Source: https://tokrepo.com/en/workflows/asset-8844cd48
Author: AI Open Source