Registry / productivity / react-fetch-hook

react-fetch-hook

library1.9.5jsnpmunverified

React hook for conveniently using the Fetch API. Current stable version is 1.9.5. It is a tiny library (556 B) with both Flow and TypeScript types included. Key differentiators: simple API mirroring fetch, support for custom formatters, error handling with status codes, dependency-based request control (depends array), and a separate usePromise hook for custom async functions. It is actively maintained but has no major releases since 2022.

productivity

npm install react-fetch-hook

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-FETCH-HOOK

react-fetch-hook

productivityjavascriptv1.9.5

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.

useFetch

✓ import { useFetch } from 'react-fetch-hook'

✗ import useFetch from 'react-fetch-hook'

The library exports useFetch as a named export, not default. Common mistake to use default import.

usePromise

✓ import { usePromise } from 'react-fetch-hook/usePromise'

✗ import { usePromise } from 'react-fetch-hook'

usePromise is exported from a subpath, not main entry. TypeScript types are available from the subpath as well.

globalThis

✓ const { useFetch } = require('react-fetch-hook')

✗ const useFetch = require('react-fetch-hook')

CommonJS require should destructure the named export. Direct require gives the module object, not the hook.

Shows basic usage of useFetch with loading, error, and data states. Includes TypeScript types.

import React from 'react'; import { useFetch } from 'react-fetch-hook'; const UserProfile = ({ userId }) => { const { isLoading, data, error } = useFetch(`https://api.example.com/users/${userId}`); if (error) { return <div>Error: {error.status} {error.statusText}</div>; } if (isLoading) { return <div>Loading...</div>; } return <div>Name: {data.name}</div>; }; export default UserProfile;

Debug

Known issues

gotchaThe hook does not automatically cancel requests on component unmount. This can cause memory leaks or state updates on unmounted components.

fix

Manually abort the fetch using AbortController in a useEffect cleanup, or use a wrapper library like react-query which handles cancellation.

affects: *

deprecatedThe 'depends' option was added in v1.5.0 and is the recommended way to conditionally fetch. However, using non-primitive values in 'depends' array may cause unnecessary re-fetches due to reference inequality.

fix

Use primitive values (booleans, numbers, strings) or memoized objects in the 'depends' array. Consider using useMemo for objects.

affects: >=1.5.0

gotchaThe 'formatter' option replaces the default JSON parser. If you provide a custom formatter, you must handle all response types including errors; otherwise, exceptions may be swallowed.

fix

Always check response.ok before parsing in the formatter, or use the built-in error handling.

affects: *

breakingIn v1.0.0, the hook returned an object with 'loading' (boolean). In v1.1.0+, it was renamed to 'isLoading'. Old code using 'loading' will silently return undefined.

fix

Upgrade to v1.1.0+ and use 'isLoading' instead of 'loading'.

affects: <1.1.0

gotchaTypeScript users: types for 'error.status' and 'error.statusText' are not defined in the shipped types; users must cast or use a type assertion.

fix

Define an extended Error interface or use (error as any).status.

affects: *

Errors

Common errors & fixes

TypeError: Cannot destructure property 'isLoading' of 'undefined' or 'null'

Using default import instead of named import: import useFetch from 'react-fetch-hook' returns undefined because default export does not exist.

fix

Replace with: import { useFetch } from 'react-fetch-hook'

Uncaught (in promise) TypeError: Failed to fetch

Network error, CORS issue, or invalid URL passed to useFetch.

fix

Ensure the URL is correct, the server supports CORS, and the network is available. Use a try-catch or check the error object from the hook.

Warning: Can't perform a React state update on an unmounted component.

The component unmounts before the fetch completes, and the hook tries to update state.

fix

Use an AbortController and abort the request in useEffect cleanup, or ignore warnings if acceptable.

Upgrade

Version history

1.9.5latest on npm

Audit

Dependencies

reactrequiredPeer dependency: requires React >=16.8.0 <19.0.0 for hooks support

Agent activity

26 hits · last 30 days

node

OpenAI (training)

Resources

githubssh://git@github.com/ilyalesik/react-fetch-hook ↗

packagereact-fetch-hook ↗

homepagehttps://github.com/ilyalesik/react-fetch-hook#readme ↗