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

SetAtom

The SetAtom component provides an interface similar to Jotai’s useSetAtom  hook as props, allowing declarative usage.

props.atom

You can use Jotai’s atom as is.

import { SetAtom } from '@suspensive/jotai' import { atom } from 'jotai' const switchAtom = atom(false) const Example = () => ( <SetAtom atom={switchAtom}> {(setCount) => ( <> <button onClick={() => setCount(true)}>Set True</button> <button onClick={() => setCount(false)}>Set False</button> </> )} </SetAtom> )

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

import { SetAtom } from '@suspensive/jotai' import { atom } from 'jotai' const request = async () => fetch('https://...').then((res) => res.json()) const baseAtom = atom(0) const Example = () => ( <SetAtom atom={baseAtom}> {(setValue) => ( <> {/* Suspense will be triggered until the Promise resolves. */} <button onClick={() => setValue(request())}>request</button> </> )} </SetAtom> )

Motivation

Similar to <Atom/>, <SetAtom/> also does not clearly reveal which atoms are used internally in child components and whether they trigger Suspense.

Last updated on