title: ReactJS - Maximum update depth exceeded error in PrivateRoute function
body: <p>I'm using the concept of a private router to protect my application, but also to redirect in the case something hasn't been set up.</p>
  <p>I have the error: <code>Maximum update depth exceeded</code> from the following code:</p>
  <pre><code>function PrivateRoute ({component: Component, ...rest }) {
      const stateFn = state =&gt; state.init;
      const init = useSelector(stateFn)
  
      const isInstalled = init.installationComplete;
      const isUserStored = localStorage.getItem('user');
  
      return (
          &lt;Route
              render={props =&gt;
                  isUserStored &amp;&amp; isInstalled ? (
                      &lt;Component {...props} {...rest} /&gt;
                  ) : !isInstalled  ? (
                      &lt;Redirect
                          to={{
                              pathname: &quot;/install&quot;,
                              state: { from: props.location }
                          }}
                      /&gt;
                  ) : (
                      &lt;Redirect to={{ pathname: '/login', state: { from: props.location } }} /&gt;
                  )
              }
          /&gt;
      );
  }
  </code></pre>
  <p>What am I doing wrong that's causing the error? And why?</p>
  <p>Here's where I'm using the PrivateRoute:</p>
  <pre><code>class App extends React.Component&lt;any, any&gt; {
      constructor(props) {
          super(props);
  
          const { dispatch } = this.props;
  
          dispatch(initActions.loadInit());
  
          history.listen((location, action) =&gt; {
              // clear alert on location change
              dispatch(alertActions.clear());
          });
      }
  
      render() {
          const { alert } = this.props;
          return (
              &lt;React.Fragment&gt;
                  &lt;Helmet titleTemplate=&quot;%s | Conductor&quot; defaultTitle=&quot;Conductor&quot;/&gt;
                  &lt;StylesProvider injectFirst&gt;
                      &lt;MuiThemeProvider theme={theme[0]}&gt;
                          &lt;ThemeProvider theme={theme[0]}&gt;
                              {alert.message &amp;&amp;
                                  &lt;Alert mb={4} severity={alert.type}&gt;{alert.message}&lt;/Alert&gt;
                              }
                              &lt;Router history={history}&gt;
                                  &lt;div&gt;
                                      &lt;PrivateRoute component={HomePage} /&gt;
                                      &lt;Route path=&quot;/login&quot; component={LoginPage} /&gt;
                                      &lt;Route path=&quot;/install&quot; component={InstallationPage} /&gt;
                                  &lt;/div&gt;
                              &lt;/Router&gt;
                          &lt;/ThemeProvider&gt;
                      &lt;/MuiThemeProvider&gt;
                  &lt;/StylesProvider&gt;
              &lt;/React.Fragment&gt;
          );
      }
  }
  
  </code></pre>