use(asyncAtom)

[joernroeder]

It would be super handy to have a hook useAsyncAtom(atom) which awaits the initialisation under the hood and just returns the value. Right now, when using useSelector(asyncAtom, () ...) I always have to filter out the other statuses and therefore the return type is undefined | Data.

It feels like something with Reacts use() and a suspense boundary could get us there.

I have this helper which allows me to await until the atom is resolved, but hooks obvls don't know. This smells similar to useSuspenseQuery vs useQuery.

import { createAsyncAtom } from '@xstate/store';

type AsyncAtom = ReturnType<typeof createAsyncAtom>;

export function waitForAsyncAtom(atom: AsyncAtom) {
  return new Promise((resolve, reject) => {
    atom.subscribe((snapshot) => {
      if (snapshot.status === 'done') {
        return resolve(snapshot.data);
      }

      if (snapshot.status === 'error') {
        return reject(snapshot.error);
      }
    });
  });
}

[davidkpiano]

Good idea; if we wanted it to work with use(…) I think all we'd need to do is make it thenable 🤔

Want to try this out in a PR?