title: '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
body: <p>im building a react native application ,still i have 2 screens 
  1.Enter mobile
  2.Verify Otp</p>
  
  <p><strong>EnterUserInfo.js</strong></p>
  
  <pre><code>class UserInfoInput extends Component {
      constructor(props) {
      super(props);
  
      this.state = { formValid:true,
                     validMobileNumber:false,
                     .
                     .}}
  
  
     componentWillReceiveProps(nextProps) {
       if(nextProps.common.isFetching===false) {
           this.props.navigation.navigate('VerifyOtpScreen')
           .
           .
         } else {
         this.setState({isLoading:true})
            }} 
  
    onPressNext=()=&gt; {
           this.props.sendOtp(payload)}
  
    render() {
      return (&lt;View/&gt;) 
     }
     }
  
  
   }
  function mapStateToProps(state) {
   return {
      common: state.common
        }
  }
  
  function mapDispatchToProps(dispatch) {
    return {
    ...bindActionCreators({ sendOtp }, dispatch)
     }
   }
  
  export default connect(mapStateToProps,mapDispatchToProps)(UserInfoInput);
  </code></pre>
  
  <p>Here user enter the phone number ,and trigger an action sendOtp,response will be in the reducer and it will be available in the componentwillrecieveprops() lifecycle.</p>
  
  <p><strong>VerifyOtp.js</strong></p>
  
  <pre><code>class VerifyOtp extends Component {
  
    constructor(props) {
          super(props);
          this.state = { oneTimePIN: '' ,
                        .};
        }
  
    componentDidMount(){
           this.setState({ phoneNumber:this.props.common.phone});
         }
  
     componentWillMount() {
        setTimeout(() =&gt; {
          this.setState({ isResendDisabled: false, opacity: 1 });
        }, 30000);
      }
  
    componentWillReceiveProps(nextProps){
    //do operation 
    }
  
      onPressNext=()=&gt;{
        if(this.state.oneTimePIN=='') {
        this.setState({showNotification:true})
        } 
        else {
          this.onSubmit()
        }
      }
  
    onSubmit=()=&gt;{
         this.props.verifyOtp(payload) 
  
       }
   onResendOtp=()=&gt;{
  
        this.props.sendOtp(payload,locationData) 
  
        this.setState({ isResendDisabled: true, opacity: 0.5 });
        setTimeout(() =&gt; {
          this.setState({ isResendDisabled: false, opacity: 1 });
        }, 30000);
  
      }
  
     render() {
          return (&lt;View&gt;&lt;Elements&gt;&lt;/View&gt;)
         }
  
  }
   function mapStateToProps(state) {
       return {
            common: state.common
      }
    }
      function mapDispatchToProps(dispatch) {
        return {
            ...bindActionCreators({ verifyOtp,sendOtp }, dispatch)
        }
      }
  
    export default connect(mapStateToProps,mapDispatchToProps)(VerifyOtp);
   VerifyOtp screen used to verify the otp.
  </code></pre>
  
  <p>The problem is,If i move back to  enterUserinfo screen and move again to the verifyOtp screen im getting the warning message</p>
  
  <blockquote>
    <p>'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
      What is the reason for the warning , and how tackle the issue?</p>
  </blockquote>