Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

react-hooks-fetch

Build Status npm version bundle size

React custom hooks for data fetching with Suspense

Important notes

If you are looking for useEffect-based React hooks for Fetch API, please visit https://github.com/dai-shi/react-hooks-async.

This is a library for async functions with Suspense

Introduction

Suspense for data fetching is a new feature coming in React. This library provides useFetch hook for Render-as-You-Fetch. It discourages Fetch-on-Render pattern.

Install

npm install react-hooks-fetch

Usage

import React, { Suspense, useTransition } from 'react';
import ReactDOM from 'react-dom';

import { ErrorBoundary, createFetchStore, useFetch } from 'react-hooks-fetch';

const DisplayData = ({ result, refetch }) => {
  const [startTransition, isPending] = useTransition({
    timeoutMs: 1000,
  });
  const onClick = () => {
    startTransition(() => {
      refetch('2');
    });
  };
  return (
    <div>
      <div>First Name: {result.data.first_name}</div>
      <button type="button" onClick={onClick}>Refetch user 2</button>
      {isPending && 'Pending...'}
    </div>
  );
};

const fetchFunc = async (userId) => (await fetch(`https://reqres.in/api/users/${userId}?delay=3`)).json();
const store = createFetchStore(fetchFunc);
store.prefetch('1');

const Main = () => {
  const [result, refetch] = useFetch(store, '1');
  return <DisplayData result={result} refetch={refetch} />;
};

const App = () => (
  <ErrorBoundary fallback={error => <h1>{error.message}</h1>}>
    <Suspense fallback={<span>Loading...</span>}>
      <Main />
    </Suspense>
  </ErrorBoundary>
);

ReactDOM.createRoot(document.getElementById('app')).render(<App />);

API

createFetchStore

create fetch store

Parameters

  • fetchFunc FetchFunc<Result, Input>
  • preloaded Array<{input: Input, result: Result}>?

Examples

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

const fetchFunc = async (userId) => (await fetch(`https://reqres.in/api/users/${userId}?delay=3`)).json();
const store = createFetchStore(fetchFunc);
store.prefetch('1');

ErrorBoundary

Extends Component

ErrorBoundary with retry support

Examples

import { ErrorBoundary } from 'react-hooks-fetch';

const App = () => (
  <ErrorBoundary
    fallback={({ error, retry }) => (
      <div>
        <span>{error.message}</span>
        <button type="button" onClick={retry}>Retry</button>
      </div>
    )}
  >
    ...
  </ErrorBoundary>
};

useFetch

useFetch hook

Parameters

  • store FetchStore<Result, Input>
  • initialInput Input?

Examples

import { useFetch } from 'react-hooks-fetch';

const [result, refetch] = useFetch(store, initialInput);

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.

About

React custom hooks for data fetching with Suspense

Topics

Resources

License

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •