react native, Can't perform a React state update on an unmounted component

Question

When i login in my i.m getting memory leakage 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"

Login function

 const onSubmit = () => {
    const checkValid = isValidData();
    if (checkValid) {
      updateState({isLoading: true});
      action
        .login_with_password({
          country_code: countryCode,
          phone_no: phoneNumber,
          password,
        })
        .then(res => {
          console.log(res);
          if (!res.data.ref_code_verified) {
            navigate(strings.nav_referalcode);
          } else if (!res.data.profile_completed) {
            navigate(strings.nav_profile_setUp);
          } else if (res.data.interest_ids.length == 0) {
            navigate(strings.nav_interest);
            updateState({isLoading: false});
          } else if (res.data.strongest_subject == null) {
            navigate(strings.nav_subject);
            updateState({isLoading: false});
          } else if (!res.data.competitive_exam) {
            navigate(strings.nav_exam);
            updateState({isLoading: false});
          } else if (res.data.purchased_plans.length == 0) {
            navigate(strings.nav_purchase_plan);
            updateState({isLoading: false});
          }

          updateState({isLoading: false});
        })
        .catch(error => {
          console.log(error);
          showError(error.message);
          updateState({isLoading: false});
        });
    }
  };

and there is no useEffect in my home page. Why I'm getting that error? Anyone know how to fix this?

Answer 1

Issue

You are likely seeing this warning because you are queueing a route transition to another page in your app and enqueueing a state update. The transition occurs, the component unmounts, and then React tries to update state but can't.

Solution

Remove the state update calls from the app paths. Return the navigation, keep the last state update in the case that no conditions are met.

const onSubmit = () => {
  const checkValid = isValidData();
  if (checkValid) {
    updateState({ isLoading: true });
    action
      .login_with_password({
        country_code: countryCode,
        phone_no: phoneNumber,
        password,
      })
      .then(res => {
        console.log(res);
        if (!res.data.ref_code_verified) {
          return navigate(strings.nav_referalcode);
        } else if (!res.data.profile_completed) {
          return navigate(strings.nav_profile_setUp);
        } else if (!res.data.interest_ids.length) {
          return navigate(strings.nav_interest);
        } else if (res.data.strongest_subject === null) {
          return navigate(strings.nav_subject);
        } else if (!res.data.competitive_exam) {
          return navigate(strings.nav_exam);
        } else if (!res.data.purchased_plans.length) {
          return navigate(strings.nav_purchase_plan);
        }

        updateState({ isLoading: false });
      })
      .catch(error => {
        console.log(error);
        showError(error.message);
        updateState({ isLoading: false });
      });
  }
};