How to clean up function in a useffect call?

Question

So i am updating state in a useEffect hook and getting this error i dont how to use cleanup function if we use async/await syntax in a useEffect hooks

Error :Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in %s.%s, a useEffect cleanup function,


  const getToken = async () => {
    const mytoken = await AsyncStorage.getItem("fb_token");
    if (mytoken) {
      navigation.navigate("Main", { screen: "Map" });
      setToken(mytoken);
    } else {
      setToken(false);
    }
  };
    getToken();

  }, [navigation]);```

How to update state and use clean up function should i declare this function outside hook but if i do that how would i use that function as a clean up?

You are performing `setToken` after navigating to another page. That might be the issue — MorKadosh, May 26 '20 at 07:43
if i call setToken before navigate function will i need to call clean up function after that? — Yash Gupta, May 26 '20 at 07:48
See if this helps: https://stackoverflow.com/a/49906662/8826104 — , May 26 '20 at 07:54

score 5 · Accepted Answer · answered May 26 '20 at 07:47

You can get a callback when the component is unmounting or remounting as a result of one of the useEffect dependencies changing, by returning a function from useEffect. You can use that to set a flag to let yourself know things have changed. See *** comments:

useEffect(() => {
    let cancelled = false; // *** A flag to let us know this is cancelled

    const getToken = async () => {
        const mytoken = await AsyncStorage.getItem("fb_token");
        if (!cancelled) { // *** Check the flag
            if (mytoken) {
                navigation.navigate("Main", { screen: "Map" });
                setToken(mytoken);
            } else {
                setToken(false);
            }
        }
    };
    getToken().catch(error => {                 // ***
        // Handle/report error here...          // *** Handle errors from the async function
    });                                         // ***

    // *** A callback to let us know to set the flag
    return () => {
        cancelled = true;
    };
}, [navigation]);

(You're also breaking one of the rules of promises, flagged above: Always either handle errors, or pass the promise chain onto something that will.)

Note that as I mentioned earlier, that will skip setting the token in two situations:

The component unmounted (the one that was causing you trouble)
navigation changed

How to clean up function in a useffect call?

1 Answers1