title: React Lazy loaded component loosing it's state (gets unmounted)
body: <p>I have the below component that loads my components when required (upon route change).</p>
  
  <pre><code>function DynamicLoader(props) {
    const LazyComponent = React.lazy(() =&gt; import(`${props.component}`));
    return (
      &lt;Suspense fallback={&lt;div&gt;Loading...&lt;/div&gt;}&gt;
        &lt;LazyComponent /&gt;
      &lt;/Suspense&gt;
    );
  }
  </code></pre>
  
  <p>And my Routes (using React-Router) looks like below:</p>
  
  <pre><code>            &lt;Switch&gt;
              {routes.map((prop, key) =&gt; {
                return (
                  &lt;Route
                    exact
                    path={prop.path}
                    render={() =&gt; (
                      &lt;DynamicLoader component={prop.component} /&gt;
                    )}
                    key={key}
                  /&gt;
                );
              })}
            &lt;/Switch&gt;
  </code></pre>
  
  <p>This is working fine as far as mounting the component for each route goes, however it looks like with every change in the parent component, React is unmounting and remounting the lazy loaded component (instead of re-rendering). And this cause all the internal states to reset which is of course undesired. Can anyone recommend any solution please?
  Here is a <a href="https://codesandbox.io/embed/dynamic-comp-loading-sample-9zsc6" rel="noreferrer">codesandbox</a> showing this issue. </p>