use-suspensible
React hooks that can make any data suspensible.
Why?
This is a proof-of-concept for using Suspense with non-promise based async libraries. Also see observable-hooks on implementing Render-as-You-Fetch pattern with Suspense and Rxjs Observable.
Installation
yarn
yarn add use-suspensible
npm
npm install --save use-suspensible
Usage
import React Suspense useState useEffect from 'react'import useSuspensible from 'use-suspensible' { return { }} const App = const data setData = return <Suspense => <Content = /> </Suspense> { return <h1>datacontent</h1> ;}
Default trigger Suspense on null
or undefined
.
useSuspensibledata
Custom comparison for checking finish state.
useSuspensibledata, data.status === 'finish'
You can have any number of useSuspensible
in a Component.
return <> <h1>data1content</h1> <h1>data2content</h1> <h1>data3content</h1> </>
TypeScript >= 3.7
Beware
Due to the design of Suspense, each time a suspender is thrown, the children of Suspense
Component will be destroyed and reloaded. Do not initialize async data and trigger Suspense in the same Component.
import React Suspense useState useEffect from 'react'import useSuspensible from 'use-suspensible' { return { }} const App = return <Suspense => <Content /> </Suspense> { const data setData = // This will cause infinite update. return <h1>datacontent</h1> ;}