{"id":13796760,"url":"https://github.com/dai-shi/react-hooks-fetch","last_synced_at":"2025-05-15T07:07:28.591Z","repository":{"id":38290777,"uuid":"159605489","full_name":"dai-shi/react-hooks-fetch","owner":"dai-shi","description":"[NOT MAINTAINED] Minimal data fetching library with React Suspense","archived":false,"fork":false,"pushed_at":"2024-12-10T22:44:20.000Z","size":1649,"stargazers_count":395,"open_issues_count":2,"forks_count":6,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-04-14T10:42:48.978Z","etag":null,"topics":["custom-hook","fetch","react","react-hooks","reactjs","suspense"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dai-shi.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-11-29T04:03:56.000Z","updated_at":"2025-02-11T21:34:21.000Z","dependencies_parsed_at":"2024-01-07T07:11:10.678Z","dependency_job_id":"a591aa40-8c38-4aa8-892c-447b8aa1400b","html_url":"https://github.com/dai-shi/react-hooks-fetch","commit_stats":{"total_commits":191,"total_committers":7,"mean_commits":"27.285714285714285","dds":0.08376963350785338,"last_synced_commit":"bf3a69fd3bee21535676cdde52476975710add2b"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dai-shi%2Freact-hooks-fetch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dai-shi%2Freact-hooks-fetch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dai-shi%2Freact-hooks-fetch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dai-shi%2Freact-hooks-fetch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dai-shi","download_url":"https://codeload.github.com/dai-shi/react-hooks-fetch/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254292042,"owners_count":22046426,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["custom-hook","fetch","react","react-hooks","reactjs","suspense"],"created_at":"2024-08-03T23:01:14.772Z","updated_at":"2025-05-15T07:07:23.582Z","avatar_url":"https://github.com/dai-shi.png","language":"TypeScript","funding_links":[],"categories":["Data Fetching Libraries"],"sub_categories":[],"readme":"This project is no longer maintained. It was a long journey to explore the possibilities for data fetching with hooks and suspense, but with React 19, the official way to do data fetching with suspense is to use server components. If you need a client-side solution, check out [Jotai](https://github.com/pmndrs/jotai), which provides similar capabilities to this library in its latest state.\n\n---\n\n# react-hooks-fetch\n\n[![CI](https://img.shields.io/github/actions/workflow/status/dai-shi/react-hooks-fetch/ci.yml?branch=main)](https://github.com/dai-shi/react-hooks-fetch/actions?query=workflow%3ACI)\n[![npm](https://img.shields.io/npm/v/react-hooks-fetch)](https://www.npmjs.com/package/react-hooks-fetch)\n[![size](https://img.shields.io/bundlephobia/minzip/react-hooks-fetch)](https://bundlephobia.com/result?p=react-hooks-fetch)\n[![discord](https://img.shields.io/discord/627656437971288081)](https://discord.gg/MrQdmzd)\n\nMinimal data fetching library with React Suspense\n\n## Introduction\n\nThis library provides a React hook `useFetch` for any async functions.\nIt utilizes React Suspense and `FetchProvider` is required with initial inputs.\nThe initial inputs are used to run all async function in the initial render.\n\nProject status: Experimental. We need to collect feedbacks.\n\nDesign choices:\n\n*   No string keys\n*   Force prefetching\n*   Cache size one\n*   React context based\n\n## Install\n\n```bash\nnpm install react-hooks-fetch\n```\n\n## Usage\n\n```javascript\nimport React, { Suspense } from 'react';\nimport { ErrorBoundary } from 'react-error-boundary';\n\nimport { FetchProvider, useFetch } from 'react-hooks-fetch';\n\n// 1️⃣\n// Create a fetch function.\n// The function can take one input argument.\nconst fetchFunc = async (userId) =\u003e {\n  const res = await fetch(`https://reqres.in/api/users/${userId}?delay=3`);\n  const data = await res.json();\n  return data;\n};\n\n// 2️⃣\n// Define a component to use the fetch function.\n// The `refetch` function take a new input argument,\n// and it will start fetching before rendering.\nconst Main = () =\u003e {\n  const { result, refetch } = useFetch(fetchFunc);\n  const handleClick = () =\u003e {\n    refetch('2');\n  };\n  return (\n    \u003cdiv\u003e\n      \u003cdiv\u003eFirst Name: {result.data.first_name}\u003c/div\u003e\n      \u003cbutton type=\"button\" onClick={handleClick}\u003eFetch user 2\u003c/button\u003e\n    \u003c/div\u003e\n  );\n};\n\n// 3️⃣\n// FetchProvider is required with initialInputs.\n// We should put ErrorBoundary and Suspense inside FetchProvider.\nconst App = () =\u003e (\n  \u003cFetchProvider initialInputs={[[fetchFunc, '1']]}\u003e\n    \u003cErrorBoundary fallback={\u003ch1\u003eError\u003c/h1\u003e}\u003e\n      \u003cSuspense fallback={\u003cspan\u003eLoading...\u003c/span\u003e}\u003e\n        \u003cMain /\u003e\n      \u003c/Suspense\u003e\n    \u003c/ErrorBoundary\u003e\n  \u003c/FetchProvider\u003e\n);\n```\n\n## API\n\n\u003c!-- Generated by documentation.js. Update this documentation by updating the source code. --\u003e\n\n### FetchProvider\n\nFetchProvider component\n\nPut this component higher in the component tree.\n\n#### Parameters\n\n*   `$0` **FetchProviderProps** \n\n    *   `$0.initialInputs`  \n    *   `$0.children`  \n\n#### Examples\n\n```javascript\nimport { FetchProvider } from 'react-hooks-fetch';\n\nconst App = () =\u003e (\n  \u003cFetchProvider initialInputs={[[fn, input]]}\u003e\n    ...\n  \u003c/FetchProvider\u003e\n);\n```\n\n### useRefetch\n\nuseRefetch hook\n\nThis returns only `refetch` part of what `useFetch` returns.\n\n#### Parameters\n\n*   `fn` **FetchFunc\\\u003cInput, Result\u003e** \n\n#### Examples\n\n```javascript\nimport { useFetch } from 'react-hooks-fetch';\n\nconst refetch = useRefetch(desc);\nrefetch('1');\n```\n\n### useFetch\n\nuseFetch hook\n\nThis is the main hook to be used.\n\n#### Parameters\n\n*   `fn` **FetchFunc\\\u003cInput, Result\u003e** \n*   `options` **{allowUndefined: [boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)}?** \n\n#### Examples\n\n```javascript\nimport { useFetch } from 'react-hooks-fetch';\n\nconst { input, result, refetch } = useFetch(desc);\n```\n\n## Examples\n\nThe [examples](examples) folder contains working examples.\nYou can run one of them with\n\n```bash\nPORT=8080 npm run examples:01_minimal\n```\n\nand open \u003chttp://localhost:8080\u003e in your web browser.\n\nYou can also try them in codesandbox.io:\n[01](https://codesandbox.io/s/github/dai-shi/react-hooks-fetch/tree/main/examples/01\\_minimal)\n[02](https://codesandbox.io/s/github/dai-shi/react-hooks-fetch/tree/main/examples/02\\_typescript)\n[03](https://codesandbox.io/s/github/dai-shi/react-hooks-fetch/tree/main/examples/03\\_noinit)\n\n## Blogs\n\nSee [History](./HISTORY.md) for previous implementations.\n\n*   [React Hooks Tutorial on Developing a Custom Hook for Data Fetching](https://blog.axlight.com/posts/react-hooks-tutorial-on-developing-a-custom-hook-for-data-fetching/)\n*   [useFetch: React custom hook for Fetch API with Suspense and Concurrent Mode in Mind](https://blog.axlight.com/posts/usefetch-react-custom-hook-for-fetch-api-with-suspense-and-concurrent-mode-in-mind/)\n*   [Developing a React Library for Suspense for Data Fetching in Concurrent Mode](https://blog.axlight.com/posts/developing-a-react-library-for-suspense-for-data-fetching-in-concurrent-mode/)\n*   [Diving Into React Suspense Render-as-You-Fetch for REST APIs](https://blog.axlight.com/posts/diving-into-react-suspense-render-as-you-fetch-for-rest-apis/)\n\n## Translations\n\nThis is also available in other languages:\n\n*   ![ko](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/South-Korea.png) **Korean**: [melonbarCode/react-hooks-fetch](https://github.com/melonbarCode/react-hooks-fetch)\n*   :cn: **Chinese**: [kaichii/react-hooks-fetch](https://github.com/kaichii/react-hooks-fetch/blob/main/README-zh.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdai-shi%2Freact-hooks-fetch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdai-shi%2Freact-hooks-fetch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdai-shi%2Freact-hooks-fetch/lists"}