use-axios

library1.0.0jsnpmunverified

A React hook that integrates axios with React Suspense for data fetching inside function component bodies. Version 1.0.0 is stable, uses a simple API mirroring axios parameters, and automatically caches responses globally across components. It offers both a throwing `useAxios` (for use with Suspense and Error Boundaries) and a safer error-handling `useAxiosSafe`, plus a `refetch` function to manually invalidate cached data. Requires React ≥16.8 and `axios` as a peer dependency. Its key differentiator is the Suspense-first design: no manual loading state management, with caching built in.

testing

npm install use-axios

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · USE-AXIOS

use-axios

testingjavascriptv1.0.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.

useAxios

✓ import useAxios from 'use-axios'

✗ import { useAxios } from 'use-axios'

Default export is the main hook.

useAxiosSafe

✓ import { useAxiosSafe } from 'use-axios'

✗ import useAxiosSafe from 'use-axios'

Named export, returns a tuple [error, response].

refetch

✓ import { refetch } from 'use-axios'

✗ import refetch from 'use-axios'

Named export, must be used to manually invalidate cache.

create

✓ import { create } from 'use-axios'

Named export for creating custom axios instances.

Minimal example: useAxios with React Suspense to show a loading fallback while fetching user data.

import { Suspense } from 'react'; import useAxios from 'use-axios'; function User({ id }) { const { data } = useAxios(`/api/users/${id}`); return <div>First name: {data.first_name}</div>; } function App() { return ( <Suspense fallback="Loading..."> <User id="1" /> </Suspense> ); } export default App;

Debug

Known issues

gotchauseAxios throws a promise on pending request to trigger Suspense, so it must be called inside a component wrapped in Suspense.

fix

Wrap the calling component in a <Suspense> with a fallback.

affects: >=1.0.0

gotchauseAxiosSafe returns a tuple [error, response] instead of a single object, unlike useAxios.

fix

Destructure as [error, { data }].

affects: >=1.0.0

gotchaCaching relies on stable JSON stringification of arguments; non-primitive or deeply nested objects may cause cache misses.

fix

Ensure arguments are stable references or use primitive strings.

affects: >=1.0.0

gotcharefetch only works if at least one component is mounted with the same arguments.

fix

Ensure a component using the same URL/config is rendered when calling refetch.

affects: >=1.0.0

Errors

Common errors & fixes

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

useAxios is called outside a component wrapped in Suspense, so it throws a promise but the error boundary catches it as undefined.

fix

Wrap the component in <Suspense> fallback={...} />.

Uncaught (in promise) Error: Request failed with status code 404

useAxios throws on error; without ErrorBoundary, the error propagates as an unhandled promise.

fix

Wrap the component in an ErrorBoundary (e.g., react-error-boundary).

ReferenceError: useAxios is not defined

Incorrect import syntax: using named import instead of default import.

fix

Use `import useAxios from 'use-axios'` (without curly braces).

Upgrade

Version history

1.0.0latest on npm

Audit

Dependencies

reactrequireduses React hooks and Suspense

axiosrequiredactually makes HTTP requests via axios

Agent activity

12 hits · last 30 days

node

Resources

githubhttps://github.com/ArnoSaine/use-axios ↗

packageuse-axios ↗

homepagehttps://github.com/ArnoSaine/use-axios#readme ↗