The difference between createJSONStorage and using the atomWithAsyncStorage pattern.

[peterpme]

Hi there,

I've been working on an implementation with expo-secure-store, which is similar to AsyncStorage for react native.

export const atomWithSecureStorage = (key: string, initialValue: any) => {
  const baseAtom = atom(initialValue);

  baseAtom.onMount = (setValue) => {
    (async () => {
      const item = await SecureStore.getItemAsync(key);
      setValue(item ? JSON.parse(item) : initialValue);
    })();
  };

  const derivedAtom = atom(
    (get) => get(baseAtom),
    (get, set, update) => {
      const nextValue =
        typeof update === "function" ? update(get(baseAtom)) : update;
      set(baseAtom, nextValue);
      SecureStore.setItemAsync(key, JSON.stringify(nextValue));
    }
  );

  return derivedAtom;
};

vs.

const storage = createJSONStorage(() => {
  return {
    getItem: SecureStore.getItemAsync,
    setItem: SecureStore.setItemAsync,
  }
})

When I use the createJSONStorage in an async selector:

export const sessionDataAtom = atom(async (get) => {
  const s = await get(atomWithJSONStorage)
  return s
});

with or without async, s not only includes the data, but it also includes the promise data:

  "orig": {
        "_h": 1,
        "_i": 0,
        "_j": null,
        "_k": {
          "promise": {
            "_h": 0,
            "_i": 0,
            "_j": null,
            "_k": null
          }
        }
      },
      "status": "pending"
    },

The first approach works, but the second doesn't. Looking under the hood, it seems like createJSONStorage is very similar.

What am I missing? I thought it was maybe something to do with the SecureStore implementation, but even when I do this:

const storage = createJSONStorage(() => {
  return {
    getItem(key: string): => SecureStore.getItemAsync(key),
    setItem: SecureStore.setItemAsync,
  }
})

The same result applies.

I feel like I'm very close, but have mixed something up. Reading through createJSONStorage doesn't seem to have anything strange happening:

      const parse = (str: string | null) => {
        str = str || ''
        if (lastStr !== str) {
          try {
            lastValue = JSON.parse(str, options?.reviver)
          } catch {
            return initialValue
          }
          lastStr = str
        }
        return lastValue
      }
      const str = getStringStorage()?.getItem(key) ?? null
      if (isPromiseLike(str)) {
        return str.then(parse) as never
      }
      return parse(str) as never

[dai-shi]

Hmm, I don't see anything suspicious. You want to dig deeper like reproducing it without SecureStore. (and then you can have a shareable StackBlitz link.)

In general, the custom atomWithAsyncStorage pattern seems good. (I'd prefer it to might-be-too-general atomWithStorage.)

[peterpme]

Sounds good, I will mess around, thanks!

My goal is to make sure that session = useAtomValue(session) is guaranteed to return (if it exists) and right now, my component will render twice:

• session null
• session exists

[dai-shi]

That's an expected/designed behavior with atomWithStorage. See getOnInit option.