Why Use This?

You Can Use Jotai's Async Atoms More Intuitively with Suspense

Jotai atoms support asynchronous reading/writing. With <Atom/> from @suspensive/jotai, using async atoms becomes incredibly easy.

Jotai's async atoms leverage Suspense to handle asynchronous flows. When an atom initiates an async operation, it delegates the pending state of the Promise to its parent Suspense.

By using it together with @suspensive/react (opens in a new tab), you can use Suspense more powerfully and conveniently.

Use Async Atoms Declaratively

The provided components have the same interface props as Jotai and can be used declaratively. This allows you to clearly express what triggers Suspense at the same depth, similar to SuspenseQuery in @suspensive/react-query (opens in a new tab).

import { Atom } from '@suspensive/jotai'
import { Suspense } from '@suspensive/react'
import { UserProfile } from '~/components'
import { userAtom } from "~/atoms";
 
const Example = () => (
  <Suspense fallback={'pending...'}>
    <Atom atom={userAtom}>{([data]) => <UserProfile key={data.id} {...data} />}
  </Suspense>
)

Jotai's Extension Library can be used together.

Jotai offers a variety of extension libraries, including tRPC (opens in a new tab), Query (opens in a new tab), and Cache (opens in a new tab). These extensions are also compatible with Suspense.

The example below uses the jotai-tanstack-query (opens in a new tab) extension library, introduced in Query (opens in a new tab).

import { AtomValue } from '@suspensive/jotai'
import { Suspense, ErrorBoundary } from '@suspensive/react'
import { UserProfile } from '~/components'
import { userQueryAtom } from '~/queries'
 
const PostsPage = () => (
  <ErrorBoundary fallback={({ error }) => <>{error.message}</>}>
    <Suspense fallback={'pending...'}>
      <AtomValue atom={userQueryAtom}>
        {({ data: user }) => <UserProfile key={user.id} {...user} />}
      </AtomValue>
    </Suspense>
  </ErrorBoundary>
)