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
}

CodePudding user response：

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]);