# async-fetch

> A React hook for async fetch requests.

Latest version **0.4.0** (published 2026-04-20) · MIT license · 104 weekly downloads

## Install

```sh
npm install async-fetch
pnpm add async-fetch
yarn add async-fetch
bun add async-fetch
```

## Health

**Score 60/100 (C)** — status: active.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.4.0 |
| Published | 2026-04-20 |
| First published | 2020-08-02 |
| Weekly downloads | 104 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 44.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Nameer Rizvi |
| Maintainers | nameer |
| Keywords | typescript, utils, utilities, esm, cjs |

## Links

- npm: https://www.npmjs.com/package/async-fetch
- Repository: https://github.com/nameer-rizvi/async-fetch
- Homepage: https://github.com/nameer-rizvi/async-fetch#readme
- Issues: https://github.com/nameer-rizvi/async-fetch/issues
- npm.io page: https://npm.io/package/async-fetch

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 0.4.0 (latest) — 2026-04-20
- 0.3.9 — 2026-04-19
- 0.3.8 — 2026-01-03
- 0.3.7 — 2024-10-04
- 0.3.6 — 2024-10-04
- 0.3.5 — 2024-07-08
- 0.3.4 — 2024-05-26
- 0.3.3 — 2024-05-26
- 0.3.2 — 2024-05-24
- 0.3.1 — 2024-05-24
- 0.3.0 — 2024-05-24
- 0.2.9 — 2023-12-19
- 0.2.8 — 2023-03-15
- 0.2.7 — 2023-03-15
- 0.2.6 — 2023-03-07
- … 25 more at https://npm.io/package/async-fetch/versions

## README

# async-fetch

A React hook for async fetch requests with built-in state management, cancellation, and polling.

## Installation

```bash
npm install async-fetch
# or
yarn add async-fetch
```

## Usage

```javascript
import useAsyncFetch from "async-fetch";

function App() {
  const { pending, data, error, sendRequest, cancelRequest } = useAsyncFetch(
    "https://jsonplaceholder.typicode.com/todos/1",
  );

  return (
    <React.Fragment>
      <button onClick={sendRequest}>Send request</button>
      <button onClick={cancelRequest} disabled={!pending}>
        Cancel request
      </button>
      {pending
        ? "Loading..."
        : data
        ? JSON.stringify(data)
        : error
        ? JSON.stringify(error)
        : ""}
    </React.Fragment>
  );
}
```

### Auto-fetch on mount

By default the hook fires on mount. Set `auto: false` to disable:

```javascript
const { pending, data, sendRequest } = useAsyncFetch(url, { auto: false });
```

### POST with JSON body

```javascript
const { pending, data, error } = useAsyncFetch("/api/submit", {
  method: "POST",
  data: { name: "foo" },
});
```

### Polling

```javascript
const { data } = useAsyncFetch("/api/status", { poll: 5000 });
```

### Callbacks

```javascript
useAsyncFetch("/api/user/1", {
  onStart: () => console.log("started"),
  onSuccess: (data) => console.log(data),
  onFail: (error) => console.error(error),
  onFinish: () => console.log("finished"),
});
```

### Cancel on demand

```javascript
const { cancelRequest } = useAsyncFetch("/api/user/1");
<button onClick={cancelRequest}>Cancel</button>;
```

## Request options

The minimum requirement is a URL string as the first argument. The second argument accepts the following options — anything else is passed directly to the underlying `fetch` call.

| Option           | Type                                                        | Default  | Description                                          |
| ---------------- | ----------------------------------------------------------- | -------- | ---------------------------------------------------- |
| `initialPending` | `boolean`                                                   | `false`  | Initial state for `pending`                          |
| `initialError`   | `E`                                                         |          | Initial state for `error`                            |
| `initialData`    | `T`                                                         |          | Initial state for `data`                             |
| `auto`           | `boolean`                                                   | `true`   | Whether to auto-send the request on mount            |
| `poll`           | `number`                                                    |          | Milliseconds between polling requests                |
| `timeout`        | `number`                                                    | `30000`  | Milliseconds before the request is cancelled         |
| `ignoreRequest`  | `boolean`                                                   |          | Skips sending the request when `true`                |
| `ignoreCleanup`  | `boolean`                                                   |          | Skips cancelling the request on unmount when `true`  |
| `query`          | `object`                                                    |          | Key-value pairs appended to the URL as search params |
| `params`         | `object`                                                    |          | Key-value pairs appended to the URL as search params |
| `data`           | `unknown`                                                   |          | Value to send as the request body                    |
| `parser`         | `"json" \| "text" \| "blob" \| "formData" \| "arrayBuffer"` | `"json"` | Method used to parse the response                    |
| `onStart`        | `() => void`                                                |          | Called when the request starts                       |
| `onSuccess`      | `(data: T) => void`                                         |          | Called with the response data on success             |
| `onFail`         | `(error: E) => void`                                        |          | Called with the error on failure                     |
| `onFinish`       | `() => void`                                                |          | Called when the request finishes                     |

## Response

| Property        | Type                  | Description                   |
| --------------- | --------------------- | ----------------------------- |
| `pending`       | `boolean`             | Whether the request is active |
| `error`         | `E`                   | The response error            |
| `data`          | `T`                   | The response data             |
| `sendRequest`   | `() => Promise<void>` | Sends the request manually    |
| `cancelRequest` | `() => void`          | Cancels the active request    |

## License

MIT

---
_Source: https://npm.io/package/async-fetch · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._