title: Async react routes and infinite loop
body: <p>I decided to use async router loading and i created HOC like this: </p>
  
  <pre class="lang-js prettyprint-override"><code>const asyncComponent = (importComponent) =&gt; {
      return class extends React.Component {
          state = {
              component: null
          }
  
          componentDidMount() {
              importComponent()
                  .then(cmp =&gt; {
                      this.setState({component: cmp.default});
                  });
          }
  
          render() {
              const C = this.state.component;
              return C ? &lt;C {...this.props}/&gt; : null;
          }
      }
  };
  
  export default asyncComponent;
  </code></pre>
  
  <p>I used this HOC in my router for profile: </p>
  
  <pre class="lang-js prettyprint-override"><code>import asyncComponent from '../../../../hoc/async.routes.hoc.jsx'
  
  export const UserProfileRoute = () =&gt; (
      &lt;div&gt;
          &lt;Route path="/" name="applicantProfile" exact component={
              asyncComponent(() =&gt; (import('../containers/profile.ctrl.jsx')))
          } /&gt;
      &lt;/div&gt;
  )
  </code></pre>
  
  <p>At the component I call action in the method componentDidMount and after action state updated, method componentDidMount called again and i get infinite loop. Also HOC call all methods and call Router again, Router call component from the scratch - constructor, render, componentDidMount. </p>
  
  <p>My component after update state call all method inside like it is first render of component.</p>
  
  <p>First Main component:</p>
  
  <pre class="lang-js prettyprint-override"><code>@withRouter
  @connect(mapStateToProps)
  @i18n
  @oauth
  export default class Main extends React.Component {
  
      constructor(props){
          super(props);
      }
  
      render() {
          return (
        &lt;div className="fl fl--dir-col fl--justify-b h-100"&gt;
          &lt;Header /&gt;
          &lt;CombineRoutes {...this.props} /&gt;
          &lt;Footer /&gt;
        &lt;/div&gt;
      )
  
      }
  
  }
  </code></pre>
  
  <p>Main component call this:</p>
  
  <pre class="lang-js prettyprint-override"><code>export const CombineRoutes = (props) =&gt; (
      &lt;Switch&gt;
          &lt;IncludedProfile {...props} /&gt;
      &lt;/Switch&gt;
  )
  </code></pre>
  
  <p>When i change the state in User container . 1 - 'Main component' calls 'render' method, 2 - CombineRoutes return UserProfileRoute, 3 - UserProfileRoute again load component throught async HOC, 4 -  'User container' calls 'constructor()' again. Maybe HOC again load my component? thats why my component call 'constructor()' again? </p>
  
  <p>Does someone have the same problem?</p>