title: Getting Warning: Cannot update during an existing state transition inside render
body: <p>There are lots of question around this warning already, but I can't understand why my code is causing this warning. Just trying a basic login screen to get mobile no. and if valid no., action to send otp is dispatched and user is navigated to another screen.
  Commented out few <code>setState</code> lines but still getting this warning. Any help is appreciated.
  Code:</p>
  <pre><code>class Login extends Component{
  state = {
     phone: '',
     validNumber: ''
   }
  
   handlePhoneChange(value) {
      var regex = /^0[9786]{1}[0-9]{9}/;   
      this.setState({phone: value, validNumber: ''})  
      if(regex.test(value))
      {
        //this.setState({validNumber: 'true'})
         this.props.sendOtp(value)
       }
       else if(value.length == 11) 
      {
        //    this.setState({validNumber: 'false'})
          } 
      }
  
      onLoginSuccess(){
          const {loginSuccess} = this.props;
          if(loginSuccess != null &amp;&amp; loginSuccess != undefined)
          {
              if(loginSuccess === 'YES')
              {
                 // this.resetValues()
                  this.props.navigation.navigate('Otp')
              }
          }
      }
  
      resetValues() {
          this.props.resetResponse()
          // this.setState({
          //      phone: '', 
          //     validNumber: ''
          // });
      }
  
      render(){
          return (
          &lt;View style={{ flex: 1}} &gt;
                  &lt;Input 
                  placeholder='Enter Mobile Number'
                  keyboardType = 'phone-pad' 
                  value = {this.state.phone}
                  onChangeText = { (value) =&gt; { this.handlePhoneChange(value.replace(/\D/g,'')) } }
                  inputStyle = {{fontSize: 14}}
                  maxLength = {11}
                  rightIcon = { this.state.validNumber === 'true'? 
                              &lt;CustomIcon name = 'Tick' size={25} color = 'green'/&gt; : null}
                  errorMessage = {this.state.validNumber === 'false'? 'Please enter a valid number' : ''}
                  /&gt;
                  {this.onLoginSuccess()}
          &lt;/View&gt;
          )
      }
  }
  
  </code></pre>
  <p>UPDATE:
  Warning msg is as follows</p>
  <pre><code>  ERROR    Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.
      in LoginScreen (created by ConnectFunction)
      in ConnectFunction (created by SceneView)
      in SceneView (created by CardContainer)
      in RCTView (at View.js:34)
      in View (created by CardContainer)
      in RCTView (at View.js:34)
      in View (created by CardContainer)
      in RCTView (at View.js:34)
      in View (created by ForwardRef(CardSheet))
      in ForwardRef(CardSheet) (created by Card)
      in RCTView (at View.js:34)
      in View (at createAnimatedComponent.js:165)
      in AnimatedComponent (at createAnimatedComponent.js:215)
      in ForwardRef(AnimatedComponentWrapper) (created by PanGestureHandler)
      in PanGestureHandler (created by PanGestureHandler)
      in PanGestureHandler (created by Card)
      in RCTView (at View.js:34)
      in View (at createAnimatedComponent.js:165)
      in AnimatedComponent (at createAnimatedComponent.js:215)
      in ForwardRef(AnimatedComponentWrapper) (created by Card)
      in RCTView (at View.js:34)
      in View (created by Card)
      in Card (created by CardContainer)
      in CardContainer (created by CardStack)
      in RCTView (at View.js:34)
      in View (created by MaybeScreen)
      in MaybeScreen (created by CardStack)
      in RCTView (at View.js:34)
      in View (created by MaybeScreenContainer)
      in MaybeScreenContainer (created by CardStack)
      in CardStack (created by Context.Consumer)
      in KeyboardManager (created by Context.Consumer)
      in RNCSafeAreaProvider (at SafeAreaContext.tsx:74)
      in SafeAreaProvider (created by Context.Consumer)
      in SafeAreaProviderCompat (created by StackView)
      in RCTView (at View.js:34)
      in View (created by StackView)
      in StackView (created by StackView)
      in StackView
      in Unknown (created by Navigator)
      in Navigator (created by NavigationContainer)
      in NavigationContainer (at App.js:22)
      in Provider (at App.js:21)
      in App (at renderApplication.js:45)
      in RCTView (at View.js:34)
      in View (at AppContainer.js:106)
      in RCTView (at View.js:34)
      in View (at AppContainer.js:132)
      in AppContainer (at renderApplication.js:39)
  </code></pre>