TypeError: destroy is not a function in useEffect caused by async/await

Question

My React Native (0.61.5) has a 16.9.0 React bundled which is not the most current one. In app useEffect returns an error of TypeError: distroy is not a function:

Here is the useEffect code:

useEffect(async () => {
    try {
      let url = `${GLOBAL.BASE_URL}/api/events/active?group_id=${encodeURIComponent(group_id)}&_role=${role}&_grpmember_id=${grpmember_id}&_group_id=${encodeURIComponent(group_id)}&_device_id=${encodeURIComponent(device_id)}`;
      let res =  await fetch(url, {
        method: "GET",
          headers: {
          'Accept': 'application/json, text/plain',
          'Content-Type': 'application/json',   
          "x-auth-token": token.password,
          "x-auth-secret": token.username,
        }
      });
      //check secret token 
      let secret = res.headers.get("x-auth-secret");
      let jwttoken = res.headers.get("x-auth-token");
      res = await res.json();
      if (secret && jwttoken && (typeof secret !== 'undefined') && (typeof jwttoken !== 'undefined') && secret !== null && jwttoken !== null) {
        if(await helper.updateJwtToken(secret, jwttoken)) {
          setToken({password: jwttoken, username: secret});
          authVal.updateToken(token); //set state token in App.js
        };
      } else if (jwttoken === "route to verfi") {
        navigation.navigate("Verif1", {cell: res.cell, cell_country_code: res.cell_country_code, existing_user:true});      
      };
      //update state
      var ordered_data = eventsByDate(res);
      setActiveEvents(ordered_data);

    } catch (err) {
      console.log("Error in event refreshing data ", err);     
    };
  })

According to a online post, the problem is most likely caused by a couple of async/await in the method. It seems to me that the more recent version of React shall fix this problem. What is the version of react shall I upgrade to? Or there is other work around for this instead of version upgrade.

Answer 1

I think you should remove the async keyword and just write useEffect(() => {...}); The best way would be to create a separate function and use it:

const doStuff = async () => {...};
useEffect(() => { doStuff(); });

Answer 2

You can move your method inside another function and call that function inside useEffect.

 useEffect(() => {
    checkUserVerification();
 }, []);
 const checkUserVerification = async () => {
     await yourCode
 };