Registry / testing / use-abortable-fetch

use-abortable-fetch

library3.0.3jsnpmunverified

React hook that wraps the Fetch API and automatically aborts in-flight requests when the component unmounts or a new request is initiated. Version 3.0.3 is current stable with no regular release cadence; niche alternative to SWR/React Query for simple cases. Differentiator: minimal API (only one hook), no caching, no deduplication, built-in abort controller logic.

testing

npm install use-abortable-fetch

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · USE-ABORTABLE-FETC

use-abortable-fetch

testingjavascriptv3.0.3

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.

useAbortableFetch

✓ import useAbortableFetch from 'use-abortable-fetch'

✗ const { useAbortableFetch } = require('use-abortable-fetch')

Package exports a default export only; named import will fail

useAbortableFetch

✓ import useAbortableFetch from 'use-abortable-fetch'

✗ import { useAbortableFetch } from 'use-abortable-fetch'

Named export is not provided; incorrect destructuring

useAbortableFetch

✓ const useAbortableFetch = require('use-abortable-fetch').default

✗ const useAbortableFetch = require('use-abortable-fetch')

CommonJS require returns the default export, but only if using .default; direct require gives an object with default property

Shows basic usage of useAbortableFetch hook with loading, error, and data states.

import React from 'react'; import useAbortableFetch from 'use-abortable-fetch'; const Joke = () => { const { data, loading, error, abort } = useAbortableFetch( 'https://api.chucknorris.io/jokes/random' ); if (loading) return <div>Loading...</div>; if (error) return <div>Error: {error.message}</div>; return <div>{data?.value || 'No joke'}</div>; }; export default Joke;

Debug

Known issues

breakingIn version 2.x, fetch returned a promise with .json() already parsed; in 3.x, data is the parsed JSON directly.

fix

Update to v3.x and remove extra .json() call; data is the response body.

affects: 2.x

breakingVersion 1.x used a different hook signature (options object vs URL string).

fix

Migrate to v3.x: call hook with URL string or options object with 'url' property.

affects: 1.x

gotchaThe hook does not cache responses; each render triggers a fetch unless dependencies change.

fix

Use useMemo or external caching if repeated fetches are undesirable.

affects: >=3.0.0

gotchaError handling: fetch rejects only on network failure, not HTTP error status (4xx, 5xx).

fix

Check response.ok or handle error status in onError callback or manually.

affects: >=3.0.0

gotchaThe returned error object may be a string or Error object; not consistent.

fix

Normalize error handling: if (error instanceof Error) ... else ...

affects: >=3.0.0

Errors

Common errors & fixes

Attempted import error: 'useAbortableFetch' is not exported from 'use-abortable-fetch'.

Named import used instead of default import.

fix

Replace import { useAbortableFetch } with import useAbortableFetch.

TypeError: (0 , _useAbortableFetch.default) is not a function

CommonJS require without .default.

fix

Use const useAbortableFetch = require('use-abortable-fetch').default; or switch to ES import.

TypeError: Failed to fetch

Network error or CORS issue; fetch aborted due to component unmount.

fix

Ensure URL is correct and CORS allows request; check if component unmounts prematurely.

Upgrade

Version history

3.0.3latest on npm

Audit

Dependencies

reactrequiredpeer dependency for hook functionality

Agent activity

8 hits · last 30 days

node

Amazon

Resources

githubhttps://github.com/mauricedb/use-abortable-fetch ↗

packageuse-abortable-fetch ↗

homepagehttps://github.com/mauricedb/use-abortable-fetch#readme ↗