{"id":49060,"library":"react-fetch-hook","title":"react-fetch-hook","description":"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.","status":"active","version":"1.9.5","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/ilyalesik/react-fetch-hook","tags":["javascript","react","hooks","fetch","typescript"],"install":[{"cmd":"npm install react-fetch-hook","lang":"bash","label":"npm"},{"cmd":"yarn add react-fetch-hook","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-fetch-hook","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency: requires React >=16.8.0 <19.0.0 for hooks support","package":"react","optional":false}],"imports":[{"note":"The library exports useFetch as a named export, not default. Common mistake to use default import.","wrong":"import useFetch from 'react-fetch-hook'","symbol":"useFetch","correct":"import { useFetch } from 'react-fetch-hook'"},{"note":"usePromise is exported from a subpath, not main entry. TypeScript types are available from the subpath as well.","wrong":"import { usePromise } from 'react-fetch-hook'","symbol":"usePromise","correct":"import { usePromise } from 'react-fetch-hook/usePromise'"},{"note":"CommonJS require should destructure the named export. Direct require gives the module object, not the hook.","wrong":"const useFetch = require('react-fetch-hook')","symbol":"globalThis","correct":"const { useFetch } = require('react-fetch-hook')"}],"quickstart":{"code":"import React from 'react';\nimport { useFetch } from 'react-fetch-hook';\n\nconst UserProfile = ({ userId }) => {\n  const { isLoading, data, error } = useFetch(`https://api.example.com/users/${userId}`);\n\n  if (error) {\n    return <div>Error: {error.status} {error.statusText}</div>;\n  }\n\n  if (isLoading) {\n    return <div>Loading...</div>;\n  }\n\n  return <div>Name: {data.name}</div>;\n};\n\nexport default UserProfile;","lang":"typescript","description":"Shows basic usage of useFetch with loading, error, and data states. Includes TypeScript types."},"warnings":[{"fix":"Manually abort the fetch using AbortController in a useEffect cleanup, or use a wrapper library like react-query which handles cancellation.","message":"The hook does not automatically cancel requests on component unmount. This can cause memory leaks or state updates on unmounted components.","severity":"gotcha","affected_versions":"*"},{"fix":"Use primitive values (booleans, numbers, strings) or memoized objects in the 'depends' array. Consider using useMemo for objects.","message":"The '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.","severity":"deprecated","affected_versions":">=1.5.0"},{"fix":"Always check response.ok before parsing in the formatter, or use the built-in error handling.","message":"The '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.","severity":"gotcha","affected_versions":"*"},{"fix":"Upgrade to v1.1.0+ and use 'isLoading' instead of 'loading'.","message":"In 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.","severity":"breaking","affected_versions":"<1.1.0"},{"fix":"Define an extended Error interface or use (error as any).status.","message":"TypeScript users: types for 'error.status' and 'error.statusText' are not defined in the shipped types; users must cast or use a type assertion.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"search_vec":"'1.9.5':17 '2022':73 '556':23 'activ':65 'api':12,35 'array':53 'async':61 'b':24 'base':49 'code':46 'control':51 'conveni':8 'current':13 'custom':40,60 'depend':48,52 'dependency-bas':47 'differenti':33 'error':42 'fetch':3,11,37,77 'flow':27 'formatt':41 'function':62 'handl':43 'hook':4,6,58,76 'includ':31 'javascript':74 'key':32 'librari':22 'maintain':66 'major':70 'mirror':36 'react':2,5,75 'react-fetch-hook':1 'releas':71 'request':50 'separ':56 'simpl':34 'sinc':72 'stabl':14 'status':45 'support':38 'tini':21 'type':30 'typescript':29,78 'use':9 'usepromis':57 'version':15","created_at":"2026-06-07T16:59:50.899858+00:00","updated_at":"2026-06-07T16:59:50.899858+00:00","problems":[{"fix":"Replace with: import { useFetch } from 'react-fetch-hook'","cause":"Using default import instead of named import: import useFetch from 'react-fetch-hook' returns undefined because default export does not exist.","error":"TypeError: Cannot destructure property 'isLoading' of 'undefined' or 'null'"},{"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.","cause":"Network error, CORS issue, or invalid URL passed to useFetch.","error":"Uncaught (in promise) TypeError: Failed to fetch"},{"fix":"Use an AbortController and abort the request in useEffect cleanup, or ignore warnings if acceptable.","cause":"The component unmounts before the fetch completes, and the hook tries to update state.","error":"Warning: Can't perform a React state update on an unmounted component."}],"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/ilyalesik/react-fetch-hook#readme","github":"ssh://git@github.com/ilyalesik/react-fetch-hook","docs":null,"changelog":null,"pypi":null,"npm":"react-fetch-hook","openapi_spec":null,"status_page":null,"smithery":null,"categories":["productivity"],"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}}