Await

⚠️

<Await/> is experimental feature, this interfaces could be changed

This component exposes a fallback of the nearest parent Suspense if the Promise returned by the received asynchronous function is pending. Afterwards, when the Promise is fulfilled, the guaranteed awaited data can be used in children components.

Additionally, this data is cached in the received key and can be used immediately without pending when reused.

import { Await } from '@suspensive/react-await'
import { Suspense } from '@suspensive/react'
 
const getPost = (postId: number) => fetch(`/post/${postId}`).then<Post>((res) => res.json())
 
const Example = () => (
  <Suspense fallback="awaiting...">
    <Await options={{ key: ['post', 2] as const, fn: ({ key: [, postId] }) => getPost(postId) }}>
      {(awaited) => <>{awaited.data}</>} // Post
    </Await>
  </Suspense>
)

Installation Installation