AtomValue

⚠️

<AtomValue/> is an experimental feature, so this interface may change.

The AtomValue component provides an interface similar to Jotai's useAtomValue (opens in a new tab) hook as props, allowing declarative usage.

props.atom

You can use Jotai's atom as is.

import { AtomValue } from '@suspensive/jotai'
import { atom } from "jotai";
 
const countAtom = atom(1);
 
const Example = () => (
  <AtomValue atom={countAtom}>
    {(count) => (
      <>count: {count}</>
    )}
  </AtomValue>
)

For Async Atom, it delegates the pending state of the Promise to the parent Suspense until the Promise resolves.

import { AtomValue } from '@suspensive/jotai'
import { Suspense } from '@suspensive/react'
import { atom } from "jotai";
 
const countAtom = atom(1)
const asyncDoubleCountAtom = atom(async (get) => {
  await delay(2000)
  return get(countAtom) * 2
})
 
const Example = () => (
  <Suspense fallback={'pending...'}>
    <AtomValue atom={asyncDoubleCountAtom}>
      {(count) => (
        <>count: {count}</>
      )}
    </AtomValue>
  </Suspense>
)

Motivation

Similar to <Atom/> (opens in a new tab), <AtomValue/> also does not clearly reveal which atoms are used internally in child components and whether they trigger Suspense.