Using useEffect with async?

I’m using this code:

useFocusEffect(
  useCallback(async () => {
    const user = JSON.parse(await AsyncStorage.getItem("user"));

    if (user.uid) {
      const dbRef = ref(dbDatabase, "/activity/" + user.uid);

      onValue(query(dbRef, limitToLast(20)), (snapshot) => {
        console.log(snapshot.val());
      });

      return () => {
        off(dbRef);
      };
    }
  }, [])
);

I’m getting this error:

An effect function must not return anything besides a function, which
is used for clean-up. It looks like you wrote ‘useFocusEffect(async ()
=> …)’ or returned a Promise. Instead, write the async function inside your effect and call it immediately.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

I tried to put everything inside an async function, but then the off() is not being called.

>Solution :

Define the dbRef variable outside the nested async function so your cleanup callback can reference it, and allow for the possibility it may not be set as of when the cleanup occurs.

Also, whenever using an async function in a place that doesn’t handle the promise the function returns, ensure you don’t allow the function to throw an error (return a rejected promise), since nothing will handle that rejected promise.

Also, since the component could be unmounted during the await, you need to be sure that the async function doesn’t continue its logic when we know the cleanup won’t happen (because it already happened), so you may want a flag for that (didCleanup in the below).

So something like this:

useFocusEffect(
    useCallback(() => {
        let dbRef;
        let didCleanup = false;
        (async() => {
            try {
                const user = JSON.parse(await AsyncStorage.getItem("user"));

                if (!didCleanup && user.uid) {
                    dbRef = ref(dbDatabase, "/activity/" + user.uid);

                    onValue(query(dbRef, limitToLast(20)), (snapshot) => {
                        console.log(snapshot.val());
                    });
                }
            } catch (error) {
                // ...handle/report the error...
            }
        })();
        return () => {
            didCleanup = true;
            if (dbRef) {
                off(dbRef);
            }
        };
    }, [])
);