React Common Component Issues: Can’t perform a React state update on an unmounted component [How to Solve]

In some react components, there will be 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 the componentWillUnmount method”

This is because after writing a method to complete the request, we change the state

  payload:values,
        callback:res=>{
          if(res.code === 0){
            notification.success({
              message: 'Password updated successfully',
              description: `The new password is ${res.data}`,
              duration: 0,
            });
            successed&& successed();
              that.setState({
                updatePwdModalVisible:false
              })
            that.getCaptcha();

Solution: using the life cycle hook function: component will unmount, clear the timer before the component is unloaded

that.pwdErrorTimer = setTimeout(() => {
              this.setState({
                updatePwdModalVisible:false
              })
            }, 1000);
componentWillUnmount(){
    clearTimeout(this.pwdErrorTimer);
  }

Similar Posts: