whinc/my-claude-plugins/ahooks

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 <div>{data}</div>;
};

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

🔄 Lifecycle Effects (9 hooks)

Component lifecycle and effect management. See: effect-hooks.md

🌐 Data Fetching (6 hooks)

API calls, pagination, infinite scroll, and data caching. See: request-hooks.md

⚡ Performance Optimization (9 hooks)

Debounce, throttle, memoization, and RAF optimizations. See: performance-hooks.md

🎨 DOM & UI (12 hooks)

Event listeners, sizing, scrolling, and UI interactions. See: dom-hooks.md

💾 Storage (4 hooks)

Local storage, session storage, cookies, and URL state. See: dom-hooks.md

🌍 Browser APIs (8 hooks)

Network status, visibility, keyboard events, and browser features. See: dom-hooks.md

⏰ Timers (4 hooks)

Intervals, timeouts, and countdown utilities. See: advanced-hooks.md

🚀 Advanced Utilities (12 hooks)

WebSockets, history management, reactive data, and complex patterns. See: 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 - From React built-ins
• Best Practices - Performance and patterns

Quick Reference

// 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';