async-storage: Infinite re-rendering with hook

Current behavior

I assume this behaviour is due to the functions coming back being new instances each time, but if I use the functions returned from the hook in a useEffect and add them to the dependency array, the useEffect fires infinitely. I can solve this by either not including them in the dependency array (not good practice) or wrapping them in a useCallback (not extraordinarily elegant, but better than the first option).

Expected behavior

The functions returned from the hook should be able to be placed in a dependency array of a useEffect without issue.

Repro steps

Grab the getItem function (for example) from the hook.
Create a useEffect hook that uses getItem.
Do something obvious in the effect that will signal each time it is called (such as a console.warn).
Add getItem to the dependency array of the useEffect.
Run the code.

Environment

Async Storage version: ^1.7.1
React-Native version: 0.59.5
Platform tested: Android
Logs/Error that are relevant: N/A

About this issue

Original URL
State: open
Created 4 years ago
Comments: 18 (2 by maintainers)

Most upvoted comments

Wouldn’t wrapping the functions with useCallback solve this? https://github.com/react-native-community/async-storage/blob/e7e3a4fc8a662ccadfea16bedd645b4fdc20d23b/lib/hooks.js#L24-L27 I mean:

    getItem: useCallback((...args) => AsyncStorage.getItem(key, ...args), [key]),
    setItem: useCallback((...args) => AsyncStorage.setItem(key, ...args), [key]),
    mergeItem: useCallback((...args) => AsyncStorage.mergeItem(key, ...args), [key]),
    removeItem: useCallback((...args) => AsyncStorage.removeItem(key, ...args), [key]),

gustavopch on Apr 23, 2020