ahooks

Why ahooks?

ahooks distinguishes itself by being more than just a collection of utilities; it is a production-grade infrastructure layer used extensively within Alibaba's massive ecosystem.

• The useRequest Powerhouse: Far more than a simple fetch wrapper, useRequest is a complete async state manager supporting SWR, polling, debounce, throttling, caching, and pagination out of the box.
• Production Battle-Tested: Developed and used in high-traffic enterprise applications, ensuring edge cases in state management and DOM interactions are handled robustly.
• Advanced UI Patterns: Includes complex UI logic hooks like useVirtualList (for rendering large datasets) and useInfiniteScroll, which are rarely found in utility libraries.
• TypeScript First: Written in TypeScript with precise type definitions, ensuring excellent developer experience and autocomplete support.
• Comprehensive Scope: Covers everything from basic state (useToggle, useSet) to DOM sensors (useSize, useEventListener) and lifecycle management.

Code Snippet

The useRequest hook is the crown jewel of ahooks. This example demonstrates handling a manual form submission with built-in loading state and automatic error handling.

import React from 'react';
import { useRequest } from 'ahooks';
import { message } from 'antd';

// 1. Define your async service
function editUsername(username) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (Math.random() > 0.5) {
        resolve();
      } else {
        reject(new Error('Failed to update username'));
      }
    }, 1000);
  });
}

export default () => {
  // 2. Use the hook to manage the async lifecycle
  const { run, loading } = useRequest(editUsername, {
    manual: true, // Do not execute immediately on mount
    onSuccess: (result, params) => {
      message.success(`Username changed to "${params[0]}" !`);
    },
    onError: (error) => {
      message.error(error.message);
    },
  });

  return (
    <button
      disabled={loading}
      type="button"
      onClick={() => run('NewName')}
    >
      {loading ? 'Saving...' : 'Edit Username'}
    </button>
  );
};

In this pattern, loading state management is fully automated, removing the need to manually set useState(true) before the request and useState(false) after.

Pros and Cons

No library is perfect; understanding the trade-offs is key to selecting the right tool.

Pros

• useRequest Magic: Drastically reduces boilerplate for async operations. It effectively replaces 90% of the need for Redux/Context for server state in simpler apps.
• Documentation Quality: Excellent documentation with interactive examples for every single hook.
• Reliability: High maintenance frequency and adoption by a major tech giant ensure bugs are fixed quickly.

Cons

• Bundle Size: While tree-shakable, importing the entire library is heavy. Users must ensure their build tool is correctly configured to shake unused hooks.
• Learning Curve: Specifically for useRequest, the API surface is vast (options for caching, polling, parallel requests, etc.), which can be overwhelming for beginners.
• Overlap: If you are already using TanStack Query or SWR, the useRequest hook (a huge part of ahooks) becomes redundant.

Comparison with Other Hooks Libraries

The table below outlines the positioning differences between ahooks and other popular hooks libraries:

Ecosystem & Extensions

ahooks is comprehensive, but it often pairs well with UI libraries used in the Alibaba ecosystem:

• Ant Design: ahooks is deeply integrated into the Ant Design philosophy and is the recommended hooks library for AntD users.
• ProComponents: Higher-level components that rely heavily on ahooks for state and logic.