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

``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 (