persist with AsyncStorage race condition?

[hanrelan]

Hi -
I'm wondering if there's a race condition with zustand persist using AsyncStorage as a backend. Specifically, I don't think that AsyncStorage guarantees that if you do:

AsyncStorage.setItem("a", "1").then(...)
AsyncStorage.setItem("a", "2").then(...)

That the final result will be 2. The first call could take longer than the second to complete and have 1 as the result.

If that's the case (this is hard to create a repro for so is mostly a theoretical concern), then I think the way persist calls AsyncStorage (at the end of every state update) would result in saved state being out-of-date.

Not an expert so not sure if that's true, but if it is, would something like this be necessary for it to work properly?

import AsyncStorage from "@react-native-async-storage/async-storage"

type State = {
  queue: { key: string; value: string }[]
  isSaving: boolean
}
const state: State = { queue: [], isSaving: false }

const setItem = async (key: string, value: string) => {
  state.queue.push({ key, value })
  if (!state.isSaving) {
    state.isSaving = true
    try {
      while (state.queue.length > 0) {
        const { key, value } = state.queue.pop()!
        await AsyncStorage.setItem(key, value)
      }
    } finally {
      state.isSaving = false
    }
  }
}

const SafeAsyncStorage = {
  setItem,
  getItem: AsyncStorage.getItem,
  removeItem: AsyncStorage.removeItem,
}
export default SafeAsyncStorage