react-suspense-fetch


A low-level library for React Suspense for Data Fetching

Introduction

React 18 comes with Suspense (sort of),
but Suspense for Data Fetching is left for data frameworks.
The goal of this library is to provide a thin API
to allow Suspense For Data Fetching without richer frameworks.

Project status: Waiting more feedbacks before finalizing the API.

Install

``bash
npm install react-suspense-fetch
`

Usage

`javascript
import React, { Suspense, useState, useTransition } from 'react';
import { createRoot } from 'react-dom/client';

import { createFetchStore } from 'react-suspense-fetch';

// 1️⃣
// Create a store with an async function.
// The async function can take one input argument.
// The input value becomes the "key" of cache.
// By default, keys are compared with strict equal ===.
const store = createFetchStore(async (userId) => {
const res = await fetch(https://reqres.in/api/users/${userId}?delay=3);
const data = await res.json();
return data;
});

// 2️⃣
// Prefetch data for the initial data.
// We should prefetch data before getting the result.
// In this example, it's done at module level, which might not be ideal.
// Some initialization function would be a good place.
// We could do it in render function of a component close to root in the tree.
store.prefetch('1');

// 3️⃣
// When updating, wrap with startTransition to lower the priority.
const DisplayData = ({ result, update }) => {
const [isPending, startTransition] = useTransition();
const onClick = () => {
startTransition(() => {
update('2');
});
};
return (