Skip to Content
👀 Check out the changes in Suspensive v3. read more

AtomValue

The AtomValue component provides an interface similar to Jotai’s useAtomValue  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 = () => { return ( <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/>, <AtomValue/> also does not clearly reveal which atoms are used internally in child components and whether they trigger Suspense.

Last updated on