Skip to content
Get packs

Guide · Open source

How to use hooks: install ahooks and call useRequest in React

Updated · written with AI from the project's own documentation and checked against our catalogue data

This guide explains how to use alibaba/hooks, published on npm as ahooks, a TypeScript library of React Hooks for common tasks such as data requests, state and browser behavior. It is for React developers who keep rewriting the same logic. By the end you will know how to install ahooks in a React project and import a hook like useRequest.

ahooksalibaba/hooks · ★ 15k · MIT

Quick start

  1. 1Check prerequisites. Confirm you have Node.js and a React project set up.
  2. 2Install the package. Run npm install --save ahooks, or use yarn, pnpm or bun with the matching command.
  3. 3Import a hook. Import the hook you need, such as useRequest, from "ahooks" in a React component.
  4. 4Read the docs for options. Check https://ahooks.js.org/ for the exact API of the hook you chose.
  5. 5Test in your app. Run your app and confirm the hook behaves as you expect in your components.

What ahooks is and when it helps

ahooks is a set of reusable React Hooks. A hook is a function you call inside a React component to handle a recurring job, so you do not write that logic from scratch each time. The README describes it as a high-quality and reliable React Hooks library and says it includes both basic and more advanced hooks.

The hooks cover data requests, state and browser behavior. It is written in TypeScript, so the hook APIs are typed.

  • Good fit: React developers who repeatedly write data-fetching or state logic
  • Good fit: teams building business web apps who want shared hooks
  • Good fit: projects that use TypeScript or need server-side rendering support
  • Not a fit: non-React projects, because the hooks only work inside React components
  • Not a fit: beginners who have not yet learned React state and effects

Install ahooks with npm, yarn, pnpm or bun

You need Node.js and a React project. Add ahooks to your project with the package manager you already use. The README lists these commands.

$ npm install --save ahooks # or $ yarn add ahooks # or $ pnpm add ahooks # or $ bun add ahooks

Import a hook from ahooks

Import the hooks you need by name from the ahooks package. The README's usage example imports useRequest. You can import individual hooks instead of writing the logic yourself.

import { useRequest } from "ahooks";

Know the features before you choose hooks

The README lists a few features. It says the library is easy to learn and use, supports SSR, and gives special treatment to functions to avoid closure problems. It also says it contains a large number of advanced hooks refined from business scenarios and a comprehensive collection of basic hooks.

The README does not describe the full API of each hook. For exact options and return values, check the documentation at https://ahooks.js.org/ before relying on a specific behavior.

  • Supports server-side rendering (SSR)
  • Written in TypeScript with predictable static types
  • Basic and advanced hooks included

Try it in a live demo

The README links to an online demo on CodeSandbox. Open it to see the library running in a browser before you add it to your own project.

Compare ahooks with similar libraries

The README does not compare ahooks with other projects. Comparable projects people often consider are react-use, usehooks-ts and SWR. Read each project's documentation and compare the hooks you need against them.

What people use it for

  • Calling a data-fetching hook such as useRequest instead of writing request state by hand
  • Sharing tested state and browser-behavior hooks across a team's business web apps
  • Using typed hook APIs in a TypeScript React project
  • Rendering React pages on the server, since the library supports SSR

Frequently asked questions

How do I install ahooks?

Install it from npm with npm install --save ahooks. The README also lists yarn add ahooks, pnpm add ahooks and bun add ahooks as alternatives.

What do I need to use ahooks?

The README lists Node.js and a React project as prerequisites. The hooks only work inside React components.

Is ahooks free to use?

The project is released under the MIT licence, as shown in the repository. Check the license file in the repository for the full terms.

Does ahooks support server-side rendering?

Yes. The README says it supports SSR.

How do I import useRequest?

Use import { useRequest } from "ahooks"; as shown in the README usage section.

Is ahooks an alternative to react-use or SWR?

Comparable projects include react-use, usehooks-ts and SWR. The README does not compare them, so review each project's docs against your needs.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

ahooks suits React and TypeScript developers who want tested, reusable hooks for data requests and state, including teams with server-side rendering. It is not for non-React projects or beginners still learning React basics. If you need a hook behavior the README does not document, check the official docs or pick a library whose API you can verify.

Install options & downloads