Skip to content

Conversation

@daomtthuan
Copy link

Summary

Make asyncStorage object in hook useAsyncStorage just re-render when key changed.
When use hook in Component:

const [state, setState] = useState("value");
const storage = useAsyncStorage("key");

// and some hooks used `storage ` and dependent it.
const action1 = useCallback(() => {
  // do somethings with storage
}, [storage]);

//  some hooks dependent `action1`.
const action2 = useCallback(() => {
  action1();
}, [action1]);

// some hooks change state of Component
const action3 = useCallback(() => {
  setState("newValue");
}, []);

When state changed, this make component re-render, but if useAsyncStorage without useMemo, the storage in hook will re-render too (no need).
And then, if storage is re-rendered, it make action1 and action 2 re-render.
In my case, it make my app go to infinity loop.

So I suggest to use useMemo in hook

@daomtthuan daomtthuan closed this Dec 10, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant