0.0.1 • Published 3 years ago
use-suspendable v0.0.1
Intro
React use suspendable hook, suspendable means Promise, Observable, null or undefined.
Observable can be any observable that match the proposed observable API, like rxjs's Observable.
Requirements
It requires Weakmap and Symbol to work.
Notice
You MUST ensure Objest.is equality of the suspendables you pass between renders, or else this hook will treat them as changed and re-subscribe every time it's called. For the same reason, you cannot create Promise or Observable under Suspense, it must be higher than Suspense in the component tree, like this:
- SomeContext1.Provider value={useMemo(()=>axios.get("/api"),[])}
- SomeContext2.Provider value={useMemo(()=>require("rxjs").interval(1000),[])}
- Suspense
- const response, interval = useSuspendable(useContext(SomeContext1), useContext(SomeContext2))
- Suspense
- SomeContext2.Provider value={useMemo(()=>require("rxjs").interval(1000),[])}
Or you can use somekind of cache like react-cache to cache promise.
Example
function App(){
return <SomeContext1.Provider value={useMemo(()=>axios.get("/api"),[])}>
<SomeContext2.Provider value={useMemo(()=>require("rxjs").interval(1000),[])}>
<React.Suspense fallback={"loading..."}>
<Page />
</React.Suspense>
</SomeContext2.Provider>
</SomeContext1.Provider>
}
function Page(){
const [v1, v2, v3, v4] = useSuspendable(useContext(SomeContext1), useContext(SomeContext2), nullOrPromise, undefinedOrPromise)
return <div>
{v1}
{v2}
{v3}
{v4}
</div>
}
0.0.1
3 years ago