SuperAPI AI Directory

ahooks

General & other

View repository

Updated 10-16 01:10

About this skill

Ahooks React Hooks Library

This skill provides comprehensive expertise for the ahooks React hooks library, covering all 76+ hooks with detailed documentation, examples, and best practices.

Quick Start

Basic Usage

import { useRequest, useMount, useSetState } from 'ahooks';

const MyComponent = () => {
  const { data, loading, error } = useRequest('/api/data');
  const [state, setState] = useSetState({ count: 0 });

  useMount(() => {
    console.log('Component mounted');
  });

return {data}; };


### Common Patterns
- **State Management**: `useSetState`, `useToggle`, `useBoolean` for complex state
- **Data Fetching**: `useRequest` for API calls with caching, retry, polling
- **Performance**: `useDebounce`, `useThrottle` for optimization
- **Lifecycle**: `useMount`, `useUnmount`, `useUpdateEffect` for component lifecycle

## Hook Categories

This skill organizes hooks into 9 main categories:

### 📊 State Management (12 hooks)
State utilities for complex state handling.
**See:** [state-hooks.md](references/state-hooks.md)

### 🔄 Lifecycle Effects (9 hooks)
Component lifecycle and effect management.
**See:** [effect-hooks.md](references/effect-hooks.md)

### 🌐 Data Fetching (6 hooks)
API calls, pagination, infinite scroll, and data caching.
**See:** [request-hooks.md](references/request-hooks.md)

### ⚡ Performance Optimization (9 hooks)
Debounce, throttle, memoization, and RAF optimizations.
**See:** [performance-hooks.md](references/performance-hooks.md)

### 🎨 DOM & UI (12 hooks)
Event listeners, sizing, scrolling, and UI interactions.
**See:** [dom-hooks.md](references/dom-hooks.md)

### 💾 Storage (4 hooks)
Local storage, session storage, cookies, and URL state.
**See:** [dom-hooks.md](references/dom-hooks.md)

### 🌍 Browser APIs (8 hooks)
Network status, visibility, keyboard events, and browser features.
**See:** [dom-hooks.md](references/dom-hooks.md)

### ⏰ Timers (4 hooks)
Intervals, timeouts, and countdown utilities.
**See:** [advanced-hooks.md](references/advanced-hooks.md)

### 🚀 Advanced Utilities (12 hooks)
WebSockets, history management, reactive data, and complex patterns.
**See:** [advanced-hooks.md](references/advanced-hooks.md)

## Getting Help

### Ask About:
- **Hook Usage**: "How to use useRequest with pagination?"
- **Migration**: "How to migrate from useState to useSetState?"
- **Best Practices**: "Performance tips for React hooks?"
- **Integration**: "How to combine useRequest with useAntdTable?"
- **Troubleshooting**: "Why is my useDebounce not working?"
- **TypeScript**: "Type definitions for useBoolean?"

### Comprehensive Guides
- [Migration Guide](references/migration-guide.md) - From React built-ins
- [Best Practices](references/best-practices.md) - Performance and patterns

## Quick Reference

```javascript
// Most commonly used hooks
import {
  useRequest,      // Data fetching
  useMount,        // Component mount
  useUnmount,      // Component unmount
  useSetState,     // State management
  useDebounce,     // Performance
  useThrottle,     // Performance
  useEventListener // DOM events
} from 'ahooks';