ahooks

whinc's avatarfrom whinc

Comprehensive ahooks React hooks library specialist. Expert in all 76+ ahooks hooks including state management, effects, data fetching, performance optimization, DOM utilities, and advanced patterns. Use when working with ahooks library, need React hooks utilities or want to learn best practices.

⭐1stars🔀0forks📁View on GitHub🕐Updated Dec 11, 2025
[Code Generation]

When & Why to Use This Skill

This Claude skill is a specialized expert for the ahooks React library, providing comprehensive guidance on over 76 high-quality hooks. It helps developers accelerate frontend development by offering precise code snippets, best practices, and architectural advice for state management, data fetching, and performance optimization within the React ecosystem.

Use Cases

  • Implementing advanced data fetching patterns using useRequest, including features like SWR, polling, and debounced execution.
  • Optimizing React component performance by correctly applying useDebounce, useThrottle, and useMemoizedFn to prevent unnecessary re-renders.
  • Managing complex component states and lifecycles with utilities like useSetState, useMount, and useUpdateEffect for cleaner codebases.
  • Integrating DOM-related functionalities such as infinite scrolling, virtual lists, and event listeners without manual boilerplate code.
  • Migrating legacy React state logic to modern, hook-based patterns following ahooks best practices.
nameahooks
descriptionComprehensive ahooks React hooks library specialist. Expert in all 76+ ahooks hooks including state management, effects, data fetching, performance optimization, DOM utilities, and advanced patterns. Use when working with ahooks library, need React hooks utilities or want to learn best practices.

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

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