Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dai-shi/react-hooks-fetch
[NOT MAINTAINED] Minimal data fetching library with React Suspense
https://github.com/dai-shi/react-hooks-fetch
custom-hook fetch react react-hooks reactjs suspense
Last synced: 19 days ago
JSON representation
[NOT MAINTAINED] Minimal data fetching library with React Suspense
- Host: GitHub
- URL: https://github.com/dai-shi/react-hooks-fetch
- Owner: dai-shi
- License: mit
- Created: 2018-11-29T04:03:56.000Z (almost 6 years ago)
- Default Branch: main
- Last Pushed: 2024-09-27T11:52:30.000Z (about 1 month ago)
- Last Synced: 2024-10-02T08:32:12.734Z (about 1 month ago)
- Topics: custom-hook, fetch, react, react-hooks, reactjs, suspense
- Language: TypeScript
- Homepage:
- Size: 1.81 MB
- Stars: 396
- Watchers: 7
- Forks: 6
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
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.
---
# react-hooks-fetch
[](https://github.com/dai-shi/react-hooks-fetch/actions?query=workflow%3ACI)
[](https://www.npmjs.com/package/react-hooks-fetch)
[](https://bundlephobia.com/result?p=react-hooks-fetch)
[](https://discord.gg/MrQdmzd)
Minimal data fetching library with React Suspense
## Introduction
This library provides a React hook `useFetch` for any async functions.
It utilizes React Suspense and `FetchProvider` is required with initial inputs.
The initial inputs are used to run all async function in the initial render.
Project status: Experimental. We need to collect feedbacks.
Design choices:
* No string keys
* Force prefetching
* Cache size one
* React context based
## Install
```bash
npm install react-hooks-fetch
```
## Usage
```javascript
import React, { Suspense } from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import { FetchProvider, useFetch } from 'react-hooks-fetch';
// 1️⃣
// Create a fetch function.
// The function can take one input argument.
const fetchFunc = async (userId) => {
const res = await fetch(`https://reqres.in/api/users/${userId}?delay=3`);
const data = await res.json();
return data;
};
// 2️⃣
// Define a component to use the fetch function.
// The `refetch` function take a new input argument,
// and it will start fetching before rendering.
const Main = () => {
const { result, refetch } = useFetch(fetchFunc);
const handleClick = () => {
refetch('2');
};
return (
First Name: {result.data.first_name}
Fetch user 2
);
};
// 3️⃣
// FetchProvider is required with initialInputs.
// We should put ErrorBoundary and Suspense inside FetchProvider.
const App = () => (
Error}>
Loading...}>
);
```
## API
### FetchProvider
FetchProvider component
Put this component higher in the component tree.
#### Parameters
* `$0` **FetchProviderProps**
* `$0.initialInputs`
* `$0.children`
#### Examples
```javascript
import { FetchProvider } from 'react-hooks-fetch';
const App = () => (
...
);
```
### useRefetch
useRefetch hook
This returns only `refetch` part of what `useFetch` returns.
#### Parameters
* `fn` **FetchFunc\**
#### Examples
```javascript
import { useFetch } from 'react-hooks-fetch';
const refetch = useRefetch(desc);
refetch('1');
```
### useFetch
useFetch hook
This is the main hook to be used.
#### Parameters
* `fn` **FetchFunc\**
* `options` **{allowUndefined: [boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)}?**
#### Examples
```javascript
import { useFetch } from 'react-hooks-fetch';
const { input, result, refetch } = useFetch(desc);
```
## Examples
The [examples](examples) folder contains working examples.
You can run one of them with
```bash
PORT=8080 npm run examples:01_minimal
```
and open in your web browser.
You can also try them in codesandbox.io:
[01](https://codesandbox.io/s/github/dai-shi/react-hooks-fetch/tree/main/examples/01\_minimal)
[02](https://codesandbox.io/s/github/dai-shi/react-hooks-fetch/tree/main/examples/02\_typescript)
[03](https://codesandbox.io/s/github/dai-shi/react-hooks-fetch/tree/main/examples/03\_noinit)
## Blogs
See [History](./HISTORY.md) for previous implementations.
* [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/)
* [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/)
* [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/)
* [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/)
## Translations
This is also available in other languages:
*  **Korean**: [melonbarCode/react-hooks-fetch](https://github.com/melonbarCode/react-hooks-fetch)
* :cn: **Chinese**: [kaichii/react-hooks-fetch](https://github.com/kaichii/react-hooks-fetch/blob/main/README-zh.md)