Warning: An effect function must not return anything besides a function, which is used for clean-up

Question

i cant find my mistake why should i use cleanup , and return anything when i am use useefect i just want to check if the user is logged in or not .. ?

useEffect(async () => {
    var item = await AsyncStorage.getItem("User");
    console.log(item);
    if (item == null || item == undefined) {
      props.navigation.navigate("Login");
    }
    else {
      var user = await JSON.parse(item);
      if(user.fullname=="admin"){
        props.navigation.navigate("AdminHP");
      }
      else{
        props.navigation.navigate("UserHP");
      }
    }
    console.log("effect");
    
  },[]);

Does this answer your question? [React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing](https://stackoverflow.com/questions/53332321/react-hook-warnings-for-async-function-in-useeffect-useeffect-function-must-ret) — lusc, Aug 05 '21 at 10:59
`useEffect(async () =>...` returns a promise. Move the code to a separat function and just call it in `useEffect( () => { checkAndRedirect() })` — Martin, Aug 05 '21 at 11:00

score 7 · Accepted Answer · answered Aug 05 '21 at 11:03

useEffect(() => {
    async function check() {
      var item = await AsyncStorage.getItem("User");
    console.log(item);
    if (item == null || item == undefined) {
      props.navigation.navigate("Login");
    }
    else {
      var user = await JSON.parse(item);
      if(user.fullname=="admin"){
        props.navigation.navigate("AdminHP");
      }
      else{
        props.navigation.navigate("UserHP");
      }
    }
    console.log("effect");
    }

    check()
  }, [])

Aayush Neupane · Answer 2 · 2023-01-13T07:48:02.013

Though the answer provided by Emran Quedan is correct, It lacks an explanation, As martin has mentioned in the comment, the root issue is because React’s useEffect hook expects a cleanup function returned from its callback which is called when the component unmounts. Using an async function like

useEffect(async () => {

},[])

here will cause a bug because when async callback function of the useEffect is called, Promise is returned instead of function. But the rule is that we should either return clean up function or nothing from the callback given to the useEffect,but async function by its property always return Promise which violates this rule. to solve the issue slightly elegant syntax is like

useEffect(() => {
 (async () => {

    //Put your logic here

  })();

  }, [])```

In the above syntax, `async` function is defined and immediately called.

score 0 · Answer 3 · answered Oct 06 '22 at 15:56

I had the same problem and from what I understand:

It is recommended that you do not send an async function as a direct callback of useEffect, but you can pass a callback that inside it you declare an async function

    useEffect(() => {
        async function func() {
            await method()
        }
    }, [])

Warning: An effect function must not return anything besides a function, which is used for clean-up

3 Answers3