Get promise from async atom to pass into Suspense-aware component?

[QWu4xYV]

Hi Jotai community, I'm new to Jotai but so far think it's pretty great!

My question: I have a component which knows how to handle Suspense and uses use on passed-in promises to trigger it. I would like to be able to use this with async atoms, but I can't figure out an elegant way to do that. Is there a way to make useAtom return the promise? I didn't see anything in the docs, which makes me think I either missed something obvious or that I'm doing something wrong philosophically.

This isn't my component, but just as an example:

type SuspenseAwareComponentProps = {
  data: Promise<string>
}
const SuspenseAwareComponent = (props: SuspenseAwareComponentProps) => {
  return (
    <Suspense fallback={<div>Fallback</div>}>
      <InnerSuspenseAwareComponent {...props} />
    </Suspense>
  )
}

const InnerSuspenseAwareComponent = (props: SuspenseAwareComponentProps) => {
  const value = use(props.data)
  return <div>Value: {value}</div>
}

const getPromise = () =>
  new Promise<string>((resolve) =>
    setTimeout(() => {
      resolve('value')
    }, 4000),
  )
const examplePromise = getPromise
const asyncAtom = atom(() => examplePromise)

const SomeOtherComponent = () => {
  // This is where I would like to be able to get a promise,
  // since the underlying component knows how to handle that
  const [data] = useAtom(asyncAtom)
  // return <SuspenseAwareComponent data={data} />;
}

Thanks in advance!

[dai-shi]

There's no straightforward way, but you can use the store api:

  // in component
  const store = useStore();
  const [promise, setPromise] = useState(() => store.get(asyncAtom));
  useEffect(() => store.sub(asyncAtom, () => setPromise(store.get(asyncAtom))), [store, asyncAtom]);

[QWu4xYV]

Got it, thanks! Is there any intention of adding straightforward support for this, or is there an alternative pattern you'd recommend that I should follow to use jotai with a component library like this?

[dai-shi]

When we designed the hook api, and even for now, use isn't officially available. So, such usage is out of the scope. The canonical usage is to use useAtom where you want to consume an atom and suspend.

Alternatively, you can store a promise in an object (or an array) as an atom value:

const anAtom = atom({ promise: Promise.resolve(1) });

fwiw, Valtio v2 API will be designed with use in mind. pmndrs/valtio#810

[khmilevoi]

Hi, I am using this solution for now.

import { Atom } from 'jotai';
import { useStore } from 'jotai/react';
import { useRef } from 'react';

export const useSyncAtom = <Value>($atom: Atom<Value>) => {
  const store = useStore();

  const atomRef = useRef<Value>();

  if (atomRef.current === undefined) {
    atomRef.current = store.get($atom);

    store.sub($atom, () => {
      atomRef.current = store.get($atom);
    });
  }

  return atomRef.current;
};

[dai-shi]

Nice. It should be better to subscribe in useEffect. Otherwise the callback will be called after unmounted and the atom will never be garbage collected.