import type { RecoilState, Loadable, LoadablePromise, Snapshot } from 'recoil';
import { atom, useRecoilSnapshot, useRecoilState } from 'recoil';
import { useCallback } from 'react';
function memoize<R, T>(func: (state: RecoilState<T>, snapshot: Snapshot) => R) {
  const cache: Map<RecoilState<T>, R> = new Map();
  return function memoized(state: RecoilState<T>, snapshot: Snapshot) {
    if (!cache.has(state)) {
      cache.set(state, func(state, snapshot));
    return cache.get(state)!;
const loadableAtomFamily = memoize(<T>(state: RecoilState<T>, snapshot: Snapshot) =>
  atom<Loadable<T>>({
    key: `loadable_${state.key}`,
    default: snapshot.getLoadable(state)
type AsyncSetter<T> = Promise<T> | (<TArgs extends any[]>(...args: TArgs) => Promise<T>);
function useAtomLoadable<T>(atom: RecoilState<T>): [Loadable<T>, (arg: AsyncSetter<T>) => void] {
  const snapshot = useRecoilSnapshot();
  const [value, setValue] = useRecoilState(loadableAtomFamily(atom, snapshot));
  const set = useCallback(
    (arg: AsyncSetter<T>) => {
      (async () => {
        const promise: LoadablePromise<T> = new Promise((resolve) =>
          (typeof arg === 'function' ? arg() : arg).then((result) => resolve({ value: result }))
        setValue({
          state: 'loading',
          contents: promise
        });
        try {
          setValue({
            state: 'hasValue',
            contents: (await promise).value
          });
        } catch (error) {
          setValue({
            state: 'hasError',
            contents: error
          });
      })(); // wrapping this so the return type is void, not Promise<void>
    [setValue]
  return [value, set];
And some convenience hooks to add Suspense support and analogs for useSetRecoilState and useRecoilValue.
export function useAtomAsync<T>(atom: RecoilState<T>): [T, (arg: AsyncSetter<T>) => void] {
  const [value, setValue] = useAtomLoadable(atom);
  if (value.state === 'hasValue') {
    return [value.contents, setValue];
  throw value.contents;
export function useSetAtomAsync<T>(atom: RecoilState<T>): (arg: AsyncSetter<T>) => void {
  const [, setValue] = useAtomLoadable(atom);
  return setValue;
export function useAtomAsyncValue<T>(atom: RecoilState<T>): T {
  const [value] = useAtomLoadable(atom);
  if (value.state === 'hasValue') {
    return value.contents;
  throw value.contents;
export default useAtomLoadable;




    

Finally I made an atom whose default value is an arbitrary Promise. I feel like this is jank but I don't know what Promise to pass in as the default. Please advise?
export const fooState = atom<Foo>({
  key: 'state',
  default: Promise.resolve() as any as Promise<Foo>
So now I have a setter for my atom that accepts a promise or a promise callback. In my case I'm using using useEffect to sync a route param with the recoil state and an async resource.
const setFoo = useSetAtomAsync(currentState);
const { id } = useParams<{ id?: string }>();
useEffect(() => {
  if (id) {
    // promise
    setFoo(RemoteAPI.fetchFoo(id));
}, [id, setFoo]);
// or push updates to an API and sync the result
function handleSubmit(data: Foo) {
  // promise callback
  setFoo(async () => {
    const value = await RemoteAPI.updateFoo(data);
    return value;
  });
It feels like the problem I'm trying to solve is very fundamental but I had to do a bunch of stuff to get there. Am I missing something? Does my solution make sense?
          
@justintoman - Yup, I absolutely agree that this pattern is something we want to support better with Recoil.  We're exploring an API to help manage the "global" async state subscription and atom sync.  But, we're still considering alternatives and validating it with some libraries, so we aren't ready to publish it yet.  We're also looking at the ability to explicitly set Atoms to async values so you can get the benefit of Suspense with Atoms beyond the default.  But, that requires defining some subtle API semantics and API changes.
      changed the title
How to store data to state asynchronously. And know if request is 'loading', 'hasContent', 'hasError' 
Ability to set an Atom to a Promise / pending async value.
    Aug 31, 2020
          
hey there, couple years later, but I stumbled upon this issue to do something similar. I realized what I needed was actually to have a POST request I could call, not when the component rendered but upon user action, and still get the loading/value/error state, similar to things being discussed on this topic. Also, I needed it to be identified by it's id not the params
This is my solution:
type LazySelector<T, P> = {
  get: RecoilValueReadOnly<T | undefined>
  call: RecoilValueReadOnly<(params: P) => void>
export const lazySelectorFamily = <T, P>(props: {
  key: string
  get: (id: string) => (params: P) => Promise<T>
}): ((id: string | undefined) => LazySelector<T, P>) => {
  const requests: RecoilState<{ [key: string]: Promise<T> }> = atom({
    key: props.key,
    default: {} as { [key: string]: Promise<T> },
  const getter = selectorFamily({
    key: `${props.key}Getter`,
    get:
      (id) =>
      async ({ get }) => {
        return id ? await get(requests)[id.toString()] : undefined
  const caller = selectorFamily({
    key: `${props.key}Caller`,
    get:
      (id) =>
      async ({ get, getCallback }) => {
        const currentRequests = get(requests)
        return getCallback(({ set }) => (params: P) => {
          if (!id) return
          const newValue = props.get(id.toString())(params)
          set(requests, {
            ...currentRequests,
            [id.toString()]: newValue,
  return (id: string | undefined) => ({ get: getter(id), call: caller(id) })
export const useRecoilLazyLoadable = <T, P>(lazySelector: LazySelector<T, P>): [Loadable<T | undefined>, (params: P) => void] => {
  const get = useRecoilValueLoadable(lazySelector.get)
  const call = useRecoilValue(lazySelector.call)
  return [get, call]
Basically I store the promises in an atom, and use a selector to wrap around it to return the current promise to be able to be used with suspense/loadable, or undefined if the request was not triggered yet, then another selector which uses getCallback to be able to have a caller function with a nice type signature for the desired params




    

Then you can define the selector like that:
export const generateImageRequest = lazySelectorFamily({
  key: "generateImageRequest",
  get: (_id) => async (params: { frame: GenerationFrame; editor: Editor }) => {
    return await generateImage(params)
And use it like this:
const [imageRequest, generateImage] = useRecoilLazyLoadable(generateImageRequest(popup?.target.id))
const onClick = useCallback(async () => {
  generateImage({
    frame: popup.target,
    editor: editor,
}, [popup, generateImage, editor])
return (
     <Button size="compact" onClick={onClick}>
        Generate
     </Button>
     {imageRequest.state == "loading" && "Loading..."}
     {imageRequest.state == "hasValue" && imageRequest.getValue() && <img src={imageRequest.getValue().image} />}
  </div>
This makes it very easy to both trigger the call whenever you want (not on component render), and render according to the state of the promise
          
I have a similar (same?) problem.
The default property for an atom already accepts a Promise and that makes using Suspense work nicely. In the example below, I would like to not load the remote list of APIs eagerly, but only after the user clicks a button. How can this be accomplished without a selector, hacking Snapshots or dozens of lines of utility code–if at all?
I feel like I a missing something simple. I did read the docs multiple times... 😅
import { Suspense } from 'react'
import { atom, useRecoilValue } from 'recoil'
const publicApisAtom = atom<ApiInfoList>({
  key: 'PublicApis',
  default: fetch('https://api.publicapis.org/entries') // from https://apipheny.io/free-api/
    .then((result) => result.json() as Promise<PublicApis>)
    .then((publicApis) => publicApis.entries)
function ApiList() {
  const publicApis = useRecoilValue(publicApisAtom)
  return <>{publicApis.map((it) => <p key={it.API}>{it.API}: {it.Link}</p>)}</>
function App() {
  return <>
    <Suspense fallback={<p>Public APIs loading ...</p>}>
      <p>Public APIs:</p>
      <ApiList />
    </Suspense>
type PublicApis = { readonly count: number, readonly entries: ApiInfoList }
type ApiInfoList = ReadonlyArray<ApiInfo>
type ApiInfo = {
  readonly API: string, readonly Description: string, readonly Auth: string,
  readonly HTTPS: boolean, readonly Cors: string, readonly Link: string,
  readonly Category: string