atomWithStorage trouble with AsyncStorage

[AuroPick]

Hi. I am trying to store error data with atomWithStorage in React Native.

This is my atom

export const errorStorageAtom = atomWithStorage('errorStorage', {}, createJSONStorage(() => AsyncStorage))

and on error I am trying to save it

const errorStorageUpdate = useUpdateAtom(errorStorageAtom)

try {
                        const [
                            fetchedChatsAndLastMessages,
                            fetchedPreviousShuffleOfCurrentUser,
                            fetchedNotificationToken,
                            fetchedCoordinates,
                            fetchedWaitingSubscription,
                            fetchedWaitingPurchase
                        ] = await Promise.all([
                            getChatsAndLastMessages(),
                            Storage.getItem(`previousShuffle:${userId}`, []),
                            messaging().getToken(),
                            getLocationIfPermissionGranted(),
                            Storage.getItem('WaitingSubscription'),
                            Storage.getItem('WaitingPurchase')
                        ])

                        chatsAndLastMessages = fetchedChatsAndLastMessages
                        previousShuffleOfCurrentUser = fetchedPreviousShuffleOfCurrentUser
                        notificationToken = fetchedNotificationToken
                        coordinates = fetchedCoordinates
                        waitingSubscription = fetchedWaitingSubscription
                        waitingPurchase = fetchedWaitingPurchase

                        throw Error('aaaaa')
                    } catch (e) {
                        console.log(e)

                        rollbar.error(e, { screen: 'Loader', message: 'an error occurred while fetching chats messages and token' })

                        errorStorageUpdate((prev) => ({ ...prev, fetchingChatsMessagesAndToken: { error: JSON.stringify(e, Object.getOwnPropertyNames(e)), screen: 'Loader', message: 'an error occurred while fetching chats messages and token' } }))
                    }

but I get this error in console and wait forever

Reading pending atom state in write operation. We throw a promise for now. {"init": {"_U": 0, "_V": 1, "_W": {"fetchingChatsMessagesAndToken": [Object], "initFunction": [Object]}, "_X": null}, "onMount": [Function anonymous], "read": [Function anonymous], "toString": [Function toString], "write": [Function anonymous]}

on ticket send I am resetting it

const [errorStorage, setErrorStorage] = useAtom(errorStorageAtom)
setErrorStorage({})

jotai: 1.4.0
react-native: 0.64.2

[dai-shi]

Thanks for reporting.
This is probably a use case we didn't consider deeply.
If I understand correctly, it calls ErrorStorageUpdate() before errorStorage is used somewhere. Does that sound likely?

Can you try two things?

a) Instead of ErrorStorageUpdate(prev => ({ ... })), just ErrorStorageUpdate({ ... }).

b) Enable delayInit option:

export const errorStorageAtom = atomWithStorage('errorStorage', {}, { ...createJSONStorage(() => AsyncStorage), delayInit: true })

[AuroPick]

Hi thanks for reply.

Delay init fixed my problem.

[dai-shi]

That's good to hear.
We should improve the docs to add delayInit storage option in atomWithStorage. cc: @sandren