Warning: Can't perform a React state update on an unmounted component in React native-CodePudding

I am getting data from axios.But sometime data is coming and some it is not showing data initially.

get-specific-salary-api.js:---

const AllSpecificSalaryAPI = (yearMonthFilter) => {
  const [specificAllAPIData, setAllSpecificAPIData] = useState("");
  const loginAuthToken = useSelector(
    (state) => state.loginAuthTokenReducer.loginAuthToken
  );
  //NOTE:taking oved input and company selection code for dynamic parameter
  const companyValue = useSelector(
    (state) => state.changeCompanyReducer.company
  );
  const companyCode = companyValue[0];
  const employeeId = companyValue[1];

  useEffect(() => {
    axios
      .get(GET_ALL_SPECIFIC_SALARY, {
        params: {
          hev: companyCode,
          year_month: yearMonthFilter,
          oved: employeeId,
        },
        headers: {
          Authorization: `Bearer ${loginAuthToken}`,
        },
      })
      .then((response) => response.data)
      .then((data) => setAllSpecificAPIData(data))

      .catch((error) => {
        if (error.status === 401) {
          //NOTE: handling token expire
          return ExpireAlertRestart();
        } else {
          Alert.alert(error.message);
        }
      });
  }, []);

  return {
    specificAllAPI: specificAllAPIData,
  };
};

export default AllSpecificSalaryAPI;

i am getting warning message for this.

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.
at [native code]:null in dispatchAction
at src/api/get-specific-salary-api.js:32:12 in axios.get.then.then$argument_0

How can i solve this warning message?

CodePudding user response：

In your useEffect, clean your states like so:

const [specificAllAPIData, setAllSpecificAPIData] = useState(null);

useEffect(() => {
    return () => {
        setAllSpecificAPIData(null);
    };
  }, []);

Please see a better explanation on how useEffect is working here

CodePudding user response：

You are getting this because the component tries to update the state even when the component has unmounted.

To solve this, you can use an indicator variable that tells about the unmounting of the component. On unmounting, it will intercept the request of state update in between and cancel that.

let hasUnmounted = false;
useEffect(() => {
  axios
    .get(GET_ALL_SPECIFIC_SALARY, {
      params: {
        hev: companyCode,
        year_month: yearMonthFilter,
        oved: employeeId,
      },
      headers: {
        Authorization: `Bearer ${loginAuthToken}`,
      },
    })
    .then((response) => response.data)
    .then((data) => {
      if (hasUnmounted) return;
      setAllSpecificAPIData(data)
    })

    .catch((error) => {
      if (hasUnmounted) return;
      if (error.status === 401) {
        //NOTE: handling token expire
        return ExpireAlertRestart();
      } else {
        Alert.alert(error.message);
      }
    });
  return () => {
    hasUnmounted = true;
  }
}, []);

Check this link for implementation: https://codesandbox.io/s/happy-swartz-ikqdn?file=/src/updateErr.js

Note: go to https://ikqdn.csb.app/err in codesandbox's browser