Awesome
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, which provides similar capabilities to this library in its latest state.
react-hooks-fetch
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
npm install react-hooks-fetch
Usage
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 (
<div>
<div>First Name: {result.data.first_name}</div>
<button type="button" onClick={handleClick}>Fetch user 2</button>
</div>
);
};
// 3️⃣
// FetchProvider is required with initialInputs.
// We should put ErrorBoundary and Suspense inside FetchProvider.
const App = () => (
<FetchProvider initialInputs={[[fetchFunc, '1']]}>
<ErrorBoundary fallback={<h1>Error</h1>}>
<Suspense fallback={<span>Loading...</span>}>
<Main />
</Suspense>
</ErrorBoundary>
</FetchProvider>
);
API
<!-- Generated by documentation.js. Update this documentation by updating the source code. -->FetchProvider
FetchProvider component
Put this component higher in the component tree.
Parameters
-
$0
FetchProviderProps$0.initialInputs
$0.children
Examples
import { FetchProvider } from 'react-hooks-fetch';
const App = () => (
<FetchProvider initialInputs={[[fn, input]]}>
...
</FetchProvider>
);
useRefetch
useRefetch hook
This returns only refetch
part of what useFetch
returns.
Parameters
fn
FetchFunc<Input, Result>
Examples
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<Input, Result>options
{allowUndefined: boolean}?
Examples
import { useFetch } from 'react-hooks-fetch';
const { input, result, refetch } = useFetch(desc);
Examples
The examples folder contains working examples. You can run one of them with
PORT=8080 npm run examples:01_minimal
and open http://localhost:8080 in your web browser.
You can also try them in codesandbox.io: 01 02 03
Blogs
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
Translations
This is also available in other languages:
- Korean: melonbarCode/react-hooks-fetch
- :cn: Chinese: kaichii/react-hooks-fetch