동기

Jotai의 비동기 atom은 Suspense와 함께 동작하지만, 훅은 어떤 atom이 Suspense를 발생시키는지 숨깁니다. @suspensive/jotai는 이를 드러냅니다.

훅은 무엇이 Suspense를 발생시키는지 숨깁니다

자식 컴포넌트가 비동기 atom과 함께 useAtom을 사용하면, 부모에서는 어떤 자식이 Suspense를 발생시키는지 알 수 없습니다. Suspense 경계 설정이 추측이 됩니다.


const PaymentPage = () => (
  <Suspense fallback={'pending...'}>
    {/* UserInfo가 Suspense를 발생시킬까? 어떤 atom 때문에? 여기서는 알 수 없습니다. */}
    <UserInfo />
    <ShoppingCart />
  </Suspense>
)

Suspensive의 <Atom/>, <AtomValue/>, <SetAtom/>을 활용하면 atom 사용이 JSX에 바로 선언되어 — 무엇이 어디서 Suspense를 발생시키는지 정확히 볼 수 있습니다.


const PaymentPage = () => (
  <Suspense fallback={'pending...'}>
    {/* 명확합니다: userAtom이 여기서 Suspense를 발생시킵니다. */}
    <Atom atom={userAtom}>{([data]) => <UserProfile {...data} />}</Atom>
    <Atom atom={cartAtom}>{([data]) => <ShoppingCart {...data} />}</Atom>
  </Suspense>
)

Jotai 확장 생태계와 호환됩니다

Jotai에는 tRPC , Query , Cache 등의 확장 라이브러리가 있습니다. Suspensive의 <Atom/>, <AtomValue/>, <SetAtom/>을 활용하면 이러한 확장 라이브러리의 atom도 별도의 래퍼 없이 바로 사용할 수 있습니다.


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