ahooks vs react-use vs react-hooks: A Professional Comparison

When scaling React applications, developers often reach for utility libraries to avoid reinventing the wheel for common patterns like data fetching, window resizing, or local storage management. While React provides the core primitives, libraries like ahooks and react-use fill the gaps with battle-tested implementations. However, not all packages with "hooks" in the name are created equal. Let's break down the technical realities of these three options.

🏗️ Library Maturity and Maintenance Status

The most critical decision factor here is the active maintenance status of the library.

ahooks is actively maintained with frequent releases. It is widely used in the enterprise sector, particularly within ecosystems related to Ant Design. The codebase is rigorous, with heavy emphasis on TypeScript types and edge-case handling.

// ahooks: Actively maintained, robust TypeScript support
import { useRequest } from 'ahooks';

const { data, loading, run } = useRequest(() => 
  fetch('/api/user').then(res => res.json())
);

react-use is also actively maintained, though its release cadence is different. It functions as a community collection, meaning new hooks are added frequently based on contributor needs. It is stable but covers a much wider, sometimes experimental, surface area.

// react-use: Active community collection
import { useLocalStorage } from 'react-use';

const [value, setValue] = useLocalStorage('my-key', 'default');

react-hooks (the specific npm package by this name) is effectively dead. It has seen little to no meaningful updates in years, lacks comprehensive documentation, and does not compare to the feature depth of the other two. Using it in a new project is a technical debt risk.

// react-hooks: Avoid this package
// No modern example recommended. 
// Legacy usage often lacks TypeScript defs and modern React compliance.

🔄 Advanced State and Request Management

Handling asynchronous data flow and complex state dependencies is where these libraries diverge significantly.

ahooks shines with its useRequest hook. It isn't just a wrapper around fetch; it includes built-in caching, polling, debouncing, throttling, and retry logic out of the box. This reduces boilerplate significantly for data-heavy dashboards.

// ahooks: Built-in polling and retry logic
import { useRequest } from 'ahooks';

const { data, run } = useRequest(getUserAPI, {
  pollingInterval: 3000, // Auto-poll every 3s
  retryCount: 3,         // Retry on failure
  cacheKey: 'user-data'  // Built-in caching
});

react-use takes a more atomic approach. It provides useAsync or useAsyncFn, which handle the loading and error states but leave the strategy (polling, retrying) up to you. This offers more control but requires more code for complex scenarios.

// react-use: Atomic async handling, manual strategy
import { useAsyncFn } from 'react-use';

const [state, callback] = useAsyncFn(async () => {
  const res = await fetch('/api/user');
  return res.json();
});

// You must implement your own polling/retry logic here

react-hooks typically lacks these advanced compositional patterns entirely, often forcing developers to write useEffect blocks manually for basic fetching.

// react-hooks: Manual implementation required
// Developer must write useEffect, useState, and cleanup manually
useEffect(() => {
  let cancelled = false;
  fetch('/api').then(data => { if(!cancelled) setState(data) });
  return () => { cancelled = true; };
}, []);

🖥️ Browser API and Sensor Integration

For interacting with the browser environment (window size, clipboard, sensors), the focus shifts to breadth of coverage.

react-use is the leader here. It has an enormous catalog of hooks for specific browser APIs. If you need to track device orientation, clipboard content, or even battery status, react-use likely has a dedicated hook for it.

// react-use: Extensive browser API coverage
import { useBattery, useClipboard, useWindowSize } from 'react-use';

const { level, charging } = useBattery();
const { copy } = useClipboard();
const { width, height } = useWindowSize();

ahooks covers the essential browser APIs needed for most enterprise apps (window size, scroll position, document visibility) but does not aim to cover every obscure sensor. Its implementations are often more optimized for performance in high-frequency update scenarios.

// ahooks: Essential APIs with performance focus
import { useSize, useScroll, useDocumentVisibility } from 'ahooks';

const ref = useRef(null);
const size = useSize(ref); // Efficiently tracks element size
const scroll = useScroll(ref);

react-hooks offers very limited support in this area, often missing modern APIs entirely or providing implementations that do not handle cleanup correctly.

// react-hooks: Limited or outdated API support
// Often missing hooks for modern sensors or proper event cleanup

🎯 Event Handling and Performance

How the libraries handle high-frequency events (scroll, resize, mouse move) impacts application smoothness.

ahooks provides specialized hooks like useDebounce and useThrottle that work not just on values, but on functions and effects (useDebounceFn, useThrottleFn). This is critical for preventing performance bottlenecks in search inputs or scroll listeners.

// ahooks: Dedicated throttling/debouncing for functions
import { useThrottleFn } from 'ahooks';

const { run: handleScroll } = useThrottleFn(() => {
  console.log('Scrolling...');
}, { wait: 100 });

// Directly usable in event listeners without extra wrappers

react-use offers useDebounce and useThrottle primarily for values. While you can achieve similar results with functions, the API is sometimes less direct for complex event handling scenarios compared to ahooks.

// react-use: Value-focused throttling
import { useDebounce } from 'react-use';

const [debouncedValue] = useDebounce(value, 500);
// Function throttling often requires wrapping in useMemo/callback manually

react-hooks generally lacks these optimized utilities, forcing developers to import separate lodash methods or write custom logic.

🤝 Similarities: Shared Ground

Despite their differences, the viable libraries share common goals and patterns.

1. ⚛️ Built on React Primitives

Both ahooks and react-use strictly follow React's rules of hooks. They do not introduce magical runtime behaviors but compose useState, useEffect, and useRef.

// Both libraries follow standard hook rules
// Can be mixed and matched in the same component
import { useToggle } from 'ahooks';
import { useLocalStorage } from 'react-use';

function Component() {
  const [state, toggle] = useToggle();
  const [stored, setStored] = useLocalStorage('key', false);
  // ... works seamlessly together
}

2. 📦 TypeScript First

Modern versions of both ahooks and react-use are written in TypeScript and export high-quality type definitions. This ensures autocompletion and type safety in large codebases.

// Both provide strong types
// ahooks
const { data } = useRequest<User>(() => api.getUser()); 
// data is typed as User | undefined

// react-use
const [val, setVal] = useLocalStorage<number>('count', 0);
// val is typed as number

3. ✅ Server-Side Rendering (SSR) Safety

Both libraries take care to check for the existence of the window object to prevent crashes during Server-Side Rendering (Next.js, Remix, etc.).

// Both handle SSR gracefully
// Accessing window.innerWidth inside these hooks won't crash on the server
const { width } = useWindowSize(); // from either library

📊 Summary: Key Differences

💡 The Big Picture

ahooks is the engineering choice for serious applications. If your team is building admin panels, financial dashboards, or any app where data fetching complexity and performance are paramount, ahooks provides the structural tools (useRequest, useThrottleFn) to keep code clean and efficient. It feels like a professional toolkit.

react-use is the explorer's choice. If you need to quickly tap into the clipboard API, track battery life, or manage local storage with minimal setup, react-use has a hook ready to go. It is perfect for adding specific browser capabilities without writing boilerplate.

react-hooks should be ignored. In the fast-moving React ecosystem, this package represents a dead end. It offers no unique value over the other two and carries the risk of unmaintained code.

Final Thought: For most professional teams, a combination of ahooks (for core logic) and react-use (for niche browser APIs) is a powerful strategy. Avoid react-hooks entirely to ensure your project remains maintainable and secure.