title: React js, Maximum update depth exceeded
body: <p>I'm facing an error:</p>
  
  <blockquote>
    <p>Maximum update depth exceeded. This can happen when a component
    repeatedly calls setState inside componentWillUpdate or
    componentDidUpdate. React limits the number of nested updates to
    prevent infinite loops.</p>
  </blockquote>
  
  <p>My code is:</p>
  
  <pre><code>class Login extends React.Component {
    constructor(props){
      super(props);
      this.state = {
        firstName: '',
        password: '',
        isLogged: false
      }
      this.handleSubmit = this.handleSubmit.bind(this);
      this.handleChangeFirstName = this.handleChangeFirstName.bind(this);
      this.handleChangePassword = this.handleChangePassword.bind(this);
    }
  
    handleChangeFirstName(event) {
      this.setState({firstName: event.target.value})
    }
    handleChangePassword(event) {
      this.setState({password: event.target.value})
    }
  
    handleSubmit(event) {
      console.log('login');
      console.log('first name:' ,this.state.firstName);
      console.log('password:' ,this.state.password);
      this.props.loginRequest(this.state.firstName, this.state.password);
      // console.log('login',this.props)
    }
  
    componentDidUpdate() {
      if(this.props.request.message === 'ok'){
        console.log('ok');
        this.setState({isLogged: true});
        this.props.history.push('/');
        //path is ok!!!
        console.log('path from history: ', this.props.history);
      }
    }
  
    render() {
      return(
        &lt;div&gt;
          {this.state.isLogged ? &lt;App /&gt;
           :
          &lt;div className="container"&gt;
            &lt;div className="row"&gt;
              &lt;div className="col-sm-5 log-style"&gt;
                &lt;div className="log-title"&gt;
                  &lt;h2&gt;Admin Login&lt;/h2&gt;
                  &lt;p&gt;Please enter you login details&lt;/p&gt;
                &lt;/div&gt;
                &lt;div className="row p-2"&gt;
                  &lt;input 
                    type="text" 
                    id="fname" 
                    onChange={this.handleChangeFirstName}
                    className="form-control input-sm"
                    placeholder="First name" 
                    style={{'border':'none'}} required/&gt;
                &lt;/div&gt;
                &lt;div className="row p-2"&gt;
                  &lt;input 
                    type="password"
                    id="pass"
                    onChange={this.handleChangePassword}
                    className="form-control input-sm"
                    placeholder="Password" 
                    style={{'border':'none'}} required/&gt;
                &lt;/div&gt;
                &lt;div className="row" style={{'marginTop':'40px'}}&gt;
                  &lt;div className="col-sm-6" style={{'padding': '2px'}}&gt;
                    &lt;input type="checkbox" 
                      style={{
                       'float': 'left',
                       'marginTop': '10px',
                       'marginLeft': '13px'
                      }} /&gt;
                     &lt;label 
                       style={{
                        'marginTop': '7px',
                        'marginLeft': '9px'
                     }}&gt;Remember me &lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div className="col-sm-6" 
                    style={{
                     'paddingTop': '7px',
                     'textAlign': 'right'
                    }}&gt;
                    &lt;a href="#" 
                      style={{
                       'color': 'purple', 
                       'fontSize': '13px'
                      }}&gt;
                      Forgot password?&lt;/a&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
  
                &lt;div className="row" style={{'justifyContent': 'center'}}&gt;
                  &lt;div className="btn btn-sm borderBtn" 
                    style={{
                     'backgroundColor':'purple'}}
                      onClick={() =&gt; this.handleSubmit(event)}&gt;
                    &lt;span className="fi-account-login"&gt;Login&lt;/span&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
         }  
         &lt;/div&gt;
      )
    }
  }
  
  
  const mapStateToProps = state =&gt; (
    { user: state.userReducer.user, request: state.userReducer.request }
  );
  
  const mapDispatchToProps = dispatch =&gt; 
    bindActionCreators({loginRequest}, dispatch);
  
  
  export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Login));
  </code></pre>
  
  <p>I have another component which uses Router to switch pages, and a mail component in which includes Login page.</p>