useFetch
is a React hook that supports the React 16.6 Suspense component
implementation.
The design decisions and development process for this package are outlined in the Medium article React Suspense with the Fetch API.
npm install fetch-suspense --save
oryarn add fetch-suspense
import useFetch from 'fetch-suspense';
import React, { Suspense } from 'react';
// This fetching component will be delayed by Suspense until the fetch request
// resolves.
// The return value of useFetch will be the response of the server.
const MyFetchingComponent = () => {
const data = useFetch('/path/to/api', { method: 'POST' });
return 'The server responded with: ' + data;
};
// The App component wraps the asynchronous fetching component in Suspense.
// The fallback component (loading text) is displayed until the fetch request
// resolves.
const App = () => {
return (
<Suspense fallback="Loading...">
<MyFetchingComponent />
</Suspense>
);
};
If you don't want to rely on the global fetch
API, you can create your own
useFetch
hook by importing the createUseFetch
helper function.
import { createUseFetch } from 'fetch-suspense';
import myFetchApi from 'my-fetch-package';
import React, { Suspense } from 'react';
// Create a useFetch hook using one's own Fetch API.
// NOTE: useFetch hereafter refers to this constant, not the default export of
// the fetch-suspense package.
const useFetch = createUseFetch(myFetchApi);
// This fetching component will be delayed by Suspense until the fetch request
// resolves.
// The return value of useFetch will be the response of the server.
const MyFetchingComponent = () => {
const data = useFetch('/path/to/api', { method: 'POST' });
return 'The server responded with: ' + data;
};
// The App component wraps the asynchronous fetching component in Suspense.
// The fallback component (loading text) is displayed until the fetch request
// resolves.
const App = () => {
return (
<Suspense fallback="Loading...">
<MyFetchingComponent />
</Suspense>
);
};