React hooks that can make any data suspensible.
npm install use-react-suspense
> React hooks that can make any data suspensible.
> Forked from react-promise-suspense
To install the stable version:
``sh`
$ yarn add use-react-suspense
Example
https://codesandbox.io/s/use-react-suspense-example-mcxou
`tsx
import {useSuspense} from 'use-react-suspense';
const PostListing = () => {
const [data] = useSuspense(
async (url, method) => {
const response = await fetch(url, {method});
return response.json();
},
['https://api.domain.com/posts', 'GET'] as const
);
return
{JSON.stringify(data, null, 2)};export default function App() {
return (
);
}
`
`tsx`
const [data] = useSuspense(Function, Input[], Options): SuspenseResult
Type: Function true
Required:
The function takes inputs arguments and returns a thenable (async function or a promise)
`tsx`
const [data] = useSuspense(
async (arg1, arg2) => {
console.log(arg1, arg2);
},
[input1, input2]
);
Type: Array []
Default: Function
An array of dependencies, using deep comparison to cache data. And as arguments on to
Type: Object false
Required:
#### Options.cacheTime
Type: Number Infinity
Default: Infinity
The time in milliseconds after data will be clean, it defaults to (keep-alive forever)
#### Options.cacheError
Type: Boolean false
Default: true
If set to , the error will be cache
An array of your data and utility
`tsx`
const [data, {clear}] = useSuspense(...)
#### The 1st
Type: any
The data has resolved from Function
#### The 2nd
Type: Object
And object list of utility:
- clear: () => void`
Clear cache manually. This is helpful when to want clear cache on unmount the component.
MIT