Minimal data fetching library with React Suspense
npm install react-hooks-fetch



Minimal data fetching library with React Suspense
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
``bash`
npm install react-hooks-fetch
`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}
);
};
// 3️⃣
// FetchProvider is required with initialInputs.
// We should put ErrorBoundary and Suspense inside FetchProvider.
const App = () => (
);
`
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 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 hook
This is the main hook to be used.
#### Parameters
* fn FetchFunc\ options
* {allowUndefined: boolean}?
#### Examples
`javascript
import { useFetch } from 'react-hooks-fetch';
const { input, result, refetch } = useFetch(desc);
`
The examples folder contains working examples.
You can run one of them with
`bash``
PORT=8080 npm run examples:01_minimal
and open
You can also try them in codesandbox.io:
01
02
03
See History for previous implementations.
* 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
* Developing a React Library for Suspense for Data Fetching in Concurrent Mode
* Diving Into React Suspense Render-as-You-Fetch for REST APIs
This is also available in other languages:
* !ko Korean: melonbarCode/react-hooks-fetch
* :cn: Chinese: kaichii/react-hooks-fetch