{"id":49618,"library":"use-axios","title":"use-axios","description":"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.","status":"active","version":"1.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/ArnoSaine/use-axios","tags":["javascript","react","hooks","axios"],"install":[{"cmd":"npm install use-axios","lang":"bash","label":"npm"},{"cmd":"yarn add use-axios","lang":"bash","label":"yarn"},{"cmd":"pnpm add use-axios","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"uses React hooks and Suspense","package":"react","optional":false},{"reason":"actually makes HTTP requests via axios","package":"axios","optional":false}],"imports":[{"note":"Default export is the main hook.","wrong":"import { useAxios } from 'use-axios'","symbol":"useAxios","correct":"import useAxios from 'use-axios'"},{"note":"Named export, returns a tuple [error, response].","wrong":"import useAxiosSafe from 'use-axios'","symbol":"useAxiosSafe","correct":"import { useAxiosSafe } from 'use-axios'"},{"note":"Named export, must be used to manually invalidate cache.","wrong":"import refetch from 'use-axios'","symbol":"refetch","correct":"import { refetch } from 'use-axios'"},{"note":"Named export for creating custom axios instances.","wrong":null,"symbol":"create","correct":"import { create } from 'use-axios'"}],"quickstart":{"code":"import { Suspense } from 'react';\nimport useAxios from 'use-axios';\n\nfunction User({ id }) {\n  const { data } = useAxios(`/api/users/${id}`);\n  return <div>First name: {data.first_name}</div>;\n}\n\nfunction App() {\n  return (\n    <Suspense fallback=\"Loading...\">\n      <User id=\"1\" />\n    </Suspense>\n  );\n}\n\nexport default App;","lang":"javascript","description":"Minimal example: useAxios with React Suspense to show a loading fallback while fetching user data."},"warnings":[{"fix":"Wrap the calling component in a <Suspense> with a fallback.","message":"useAxios throws a promise on pending request to trigger Suspense, so it must be called inside a component wrapped in Suspense.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Destructure as [error, { data }].","message":"useAxiosSafe returns a tuple [error, response] instead of a single object, unlike useAxios.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure arguments are stable references or use primitive strings.","message":"Caching relies on stable JSON stringification of arguments; non-primitive or deeply nested objects may cause cache misses.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure a component using the same URL/config is rendered when calling refetch.","message":"refetch only works if at least one component is mounted with the same arguments.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"search_vec":"'1.0.0':21 '16.8':69 'across':36 'api':27 'automat':32 'axio':3,9,29,71,97 'bodi':19 'boundari':50 'built':92 'cach':33,65,91 'compon':18,37 'data':14,66 'depend':75 'design':84 'differenti':78 'error':49,55 'error-handl':54 'fetch':15 'first':83 'function':17,61 'global':35 'handl':56 'hook':6,96 'insid':16 'integr':8 'invalid':64 'javascript':94 'key':77 'load':87 'manag':89 'manual':63,86 'mirror':28 'offer':39 'paramet':30 'peer':74 'plus':58 'react':5,11,68,95 'refetch':60 'requir':67 'respons':34 'safer':53 'simpl':26 'stabl':23 'state':88 'suspens':12,47,82 'suspense-first':81 'throw':42 'use':2,24,45 'use-axio':1 'useaxio':43 'useaxiossaf':57 'version':20","created_at":"2026-06-07T17:02:41.752913+00:00","updated_at":"2026-06-07T17:02:41.752913+00:00","problems":[{"fix":"Wrap the component in <Suspense> fallback={...} />.","cause":"useAxios is called outside a component wrapped in Suspense, so it throws a promise but the error boundary catches it as undefined.","error":"TypeError: Cannot destructure property 'data' of 'undefined' or 'null'"},{"fix":"Wrap the component in an ErrorBoundary (e.g., react-error-boundary).","cause":"useAxios throws on error; without ErrorBoundary, the error propagates as an unhandled promise.","error":"Uncaught (in promise) Error: Request failed with status code 404"},{"fix":"Use `import useAxios from 'use-axios'` (without curly braces).","cause":"Incorrect import syntax: using named import instead of default import.","error":"ReferenceError: useAxios is not defined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":"https://github.com/ArnoSaine/use-axios#readme","github":"https://github.com/ArnoSaine/use-axios","docs":null,"changelog":null,"pypi":null,"npm":"use-axios","openapi_spec":null,"status_page":null,"smithery":null,"categories":["testing"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-07","next_check":"2026-09-05","install_tag":null}}