1

What is the proper used of UseEffect in react-Native? this is the 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 a useEffect cleanup function.

  const [task, setTask] = useState(null);
  const fetchData = React.useCallback(  () => {
    const newTask = InteractionManager.runAfterInteractions( async () => {
      try {
       const _token =  await AsyncStorage.getItem('@token');
      let UserId = await AsyncStorage.getItem('@UserID')
      setToken(_token);
      fetchParents(UserId, _token);
      fetchStudent(UserId, _token);
       fetchTeacher(UserId, _token);
       UserProfile(UserId, _token)
      } catch(e) {
        console.log(e);
      }

    });
    setTask(newTask)
  }, [])

useEffect( () => {
  fetchData()
  // to cleanup tasks on component will mount
  return () => {
    task.cancel();
    setTask(null)  // to remove task from state
}, []}
);

const fetchParents = async (UserId, _token) => {
  try {
    fetch(config.API_URL + '/Parents/Application/Access/10/'+UserId, {
      method: 'GET',
      headers: {
        //Headers
        'Authorization': 'Bearer '+ _token,
        'Content-Type': 'application/json',
      },
    })
    .then((response) =>  response.json().then(data=>({status:response.status, body:data})) )
    .then((response) => {
      if(response.status==200)
      {
        if(response.body.length > 0)
        {
          setParent(response.body[0].udf_Users_IsHaveApplicationAccess)
        }else{
          console.log("err");
        }
      }else{
        console.log("error");
      } 
    });
  
  } catch (e) {
    console.log(e);
  }
}
const fetchStudent = async (UserId, _token) => {
    .....//same code in fetchParents
}
const fetchTeacher = async (UserId, _token) => {
    .....//same code in fetchParents
}
const UserProfile = async (UserId, _token) => {
    .....//same code in fetchParents
}

enter image description here

May Yie
  • 87
  • 1
  • 9
  • What is `fetchParents`? – ksav Oct 12 '21 at 00:50
  • oh please wait ill wil update the question – May Yie Oct 12 '21 at 00:51
  • please see the updated question – May Yie Oct 12 '21 at 00:52
  • 1
    https://stackoverflow.com/questions/53949393/cant-perform-a-react-state-update-on-an-unmounted-component – ksav Oct 12 '21 at 01:08
  • Also, remove this `setTask(null) ` – ksav Oct 12 '21 at 01:09
  • Still getting error sir :( – May Yie Oct 12 '21 at 01:10
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/238047/discussion-between-may-yie-and-ksav). – May Yie Oct 12 '21 at 01:11
  • You can fix this issue by removing the cleanup function, but wait a minute, this is not a good solution, I think this is not a solution at all. instead of removing the cleanup function, try to solve the problem and find the logical reasons for happening this issue. I refer to take a look at this https://stackoverflow.com/questions/53949393/cant-perform-a-react-state-update-on-an-unmounted-component?rq=1 post and try to find the problem, it's a simple issue and has many solutions to solve it instead of removing the cleanup or setState after component unmount. – nima Oct 12 '21 at 06:50
  • Does this answer your question? [Can't perform a React state update on an unmounted component](https://stackoverflow.com/questions/53949393/cant-perform-a-react-state-update-on-an-unmounted-component) – nima Oct 12 '21 at 06:50

1 Answers1

1

Do this

const fetchData = React.useCallback(  () => {
  const newTask = InteractionManager.runAfterInteractions( async () => {
  const _token =  await AsyncStorage.getItem('@token');
  let UserId = await AsyncStorage.getItem('@UserID')
  setToken(_token);
  fetchParents(UserId, _token);
  fetchStudent(UserId, _token);
   fetchTeacher(UserId, _token);
   UserProfile(UserId, _token)
  });
  setTask(newTask)
}, [])

// your useEffect

useEffect(() => {
  fetchData()
}, [reRender]);
  • thanks for your answer, but there is an issue within, you omitted the cleanup return from the useEffect hook which is needed in the author code snippet. – nima Oct 12 '21 at 06:43
  • for more information look at this post https://stackoverflow.com/questions/53949393/cant-perform-a-react-state-update-on-an-unmounted-component?rq=1 – nima Oct 12 '21 at 06:44