async-fetch

library0.4.0jsnpmunverified

A React hook for async fetch requests with built-in state management, cancellation, and polling. Current stable version is 0.4.0. Provides a simple, hook-based API for making HTTP requests with auto-fetch on mount, manual triggering, polling, and request cancellation. Ships TypeScript definitions. Key differentiators: minimal API surface, built-in polling, and cancellation via AbortController. Suitable for React 16+ projects needing a lightweight alternative to more complex data-fetching libraries like SWR or React Query.

testing

npm install async-fetch

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · ASYNC-FETCH

async-fetch

testingjavascriptv0.4.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

useAsyncFetch

✓ import useAsyncFetch from 'async-fetch'

✗ import { useAsyncFetch } from 'async-fetch'

The hook is a default export, not a named export. Using named import will fail with 'undefined'.

useAsyncFetch

✓ const useAsyncFetch = require('async-fetch').default

✗ const useAsyncFetch = require('async-fetch')

CommonJS users must access .default because the package uses ESM default export.

AsyncFetchOptions

✓ import type { AsyncFetchOptions } from 'async-fetch'

TypeScript users can import the options type for better type safety.

Shows basic usage of the useAsyncFetch hook with buttons for sending and canceling requests.

import React from 'react'; import useAsyncFetch from 'async-fetch'; function App() { const { pending, data, error, sendRequest, cancelRequest } = useAsyncFetch( 'https://jsonplaceholder.typicode.com/todos/1', ); return ( <div> <button onClick={sendRequest}>Send request</button> <button onClick={cancelRequest} disabled={!pending}> Cancel request </button> {pending ? ( 'Loading...' ) : data ? ( JSON.stringify(data) ) : error ? ( JSON.stringify(error) ) : ( '' )} </div> ); } export default App;

Debug

Known issues

gotchaThe hook auto-fetches on mount by default. If you want to control when the request fires, set `auto: false`.

fix

Pass `{ auto: false }` as the second argument to useAsyncFetch.

affects: >=0.0.0

gotchaThe `data` and `error` options set initial state but are repeatedly set by the hook. They are not reactive for updates after mount.

fix

Use initialData and initialError only for initial values; do not rely on them for reactive updates.

affects: >=0.0.0

gotchaThe `query` and `params` options are two separate options that both append to the URL. Using both may duplicate parameters.

fix

Use only one of `query` or `params` to avoid duplicate query string parameters.

affects: >=0.0.0

gotchaThe hook uses AbortController for cancellation. If the browser doesn't support AbortController, cancellation and timeout features will not work.

fix

Polyfill AbortController if supporting older browsers (e.g., Internet Explorer).

affects: >=0.0.0

gotchaThe `parser` option defaults to 'json'. If the response is not valid JSON, parsing will throw and set the error state.

fix

Set the appropriate parser option (e.g., 'text') or ensure the server returns valid JSON when using the default.

affects: >=0.0.0

Errors

Common errors & fixes

TypeError: (0 , useAsyncFetch) is not a function

Using named import instead of default import when using bundlers that do not handle synthetic default imports.

fix

Change import to `import useAsyncFetch from 'async-fetch'` (default import).

useAsyncFetch is not a function

CommonJS require without .default when using ESM package.

fix

Use `const useAsyncFetch = require('async-fetch').default`.

Cannot read properties of undefined (reading 'useState')

Using the hook outside of a React component or without React being in scope.

fix

Ensure the hook is called inside a valid React component, and that React is installed and imported if using JSX.

Upgrade

Version history

0.4.0latest on npm

Audit

Dependencies

reactrequiredpeer dependency required for hooks

Agent activity

19 hits · last 30 days

node

Amazon

OpenAI (training)

Resources

githubhttps://github.com/nameer-rizvi/async-fetch ↗

packageasync-fetch ↗

homepagehttps://github.com/nameer-rizvi/async-fetch#readme ↗