title: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside (Jwt ) Redux
body: <p>When compile this code, I get "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>
  
  <p>//index.js</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  import App from './App';
  import * as serviceWorker from './serviceWorker';
  import { store } from './helpers';
  import { Provider } from 'react-redux';
  import { configureFakeBackend } from './helpers';
  
  configureFakeBackend();
  ReactDOM.render(
    &lt;Provider store={store} &gt;
      &lt;App /&gt;
    &lt;/Provider&gt;
  ,
   document.getElementById('root'));
  
  serviceWorker.unregister();</code></pre>
  </div>
  </div>
  </p>
  
  <p>//App.js</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
  import { connect } from 'react-redux';
  import { Layout, Menu } from 'antd';
  import { history } from './helpers';
  import './App.css';
  import { alertActions } from './actions';
  import PrivateRoute from './components/PrivateRoute';
  import LoginPage from './containers/LoginPage';
  import Dashboard from './containers/Dashboard';
  import Boards from './containers/Boards';
  import Board from './containers/Board';
  import NoMatch from './containers/NoMatch';
  
  
  const { Header, Content, Footer } = Layout;
  
  class App extends Component {
    constructor(props){
      super(props);
      const { dispatch } = this.props;
      history.listen((location, action) =&gt; {
        // clear alert on location change
        dispatch(alertActions.clear());
      });
    }
    render() {
      const { alert } = this.props;
      return (
        &lt;Router history={history} &gt;
          &lt;Layout&gt;
            &lt;Header className="header"&gt;
              &lt;div className="logo" /&gt;
              &lt;Menu
                theme="dark"
                mode="horizontal"
                defaultSelectedKeys={['1']}
                style={{ lineHeight: '64px' }}
              &gt;
                &lt;Menu.Item key="1"&gt;
                  &lt;Link to="/"&gt;Dashboard&lt;/Link&gt;
                &lt;/Menu.Item&gt;
               &lt;Menu.Item key="2"&gt;
                  &lt;Link to="/boards"&gt;Boards&lt;/Link&gt;
                &lt;/Menu.Item&gt;
              &lt;/Menu&gt;
            &lt;/Header&gt;
  
            &lt;Content style={{ padding: '0 50px' }}&gt;
              &lt;Layout style={{ padding: '24px 0', background: '#fff' }}&gt;
                &lt;Content style={{ padding: '0 24px', minHeight: 700 }}&gt;
                  &lt;Switch&gt;
  
                     &lt;PrivateRoute exact path="/" component={Dashboard} /&gt;
  
                     &lt;PrivateRoute path="/boards/:id" component={Board} /&gt;
                    &lt;PrivateRoute path="/boards" component={Boards} /&gt;
                    &lt;PrivateRoute component={NoMatch} /&gt;
                    &lt;Route path="/login" component={LoginPage} /&gt;
                  &lt;/Switch&gt;
                &lt;/Content&gt;
              &lt;/Layout&gt;
            &lt;/Content&gt;
            &lt;Footer style={{ textAlign: 'center' }}&gt;Abcd&lt;/Footer&gt;
          &lt;/Layout&gt;
        &lt;/Router&gt;
      );
    }
  }
  
  function mapStateToProps(state){
    const { alert } = state;
    return {
      alert
    }
  }
  
  export default connect(mapStateToProps)(App);</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/tdoqr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tdoqr.png" alt="enter image description here"></a></p>
  
  <p>I used redux for state management.I don't know why it happened ?
  There is my project folder.
  <a href="https://ufile.io/gdip8" rel="nofollow noreferrer">enter link description here</a> </p>