title: React tabs - switching destroys component, need to maintain the same component
body: <p>I am trying to make a multi-tabbed SPA with React and Material-UI. I use code from this demo as an example: <a href="https://codesandbox.io/s/qlq1j47l2w" rel="nofollow noreferrer">https://codesandbox.io/s/qlq1j47l2w</a></p>
  
  <p>It appears that if I follow the aforementioned example, I end up returning new instance of the component with tab contents each time I navigate between the tabs:</p>
  
  <pre><code>      &lt;Tabs
          value={value}
          onChange={this.handleChange}
          indicatorColor="primary"
          textColor="primary"
          scrollable
          scrollButtons="auto"
        &gt;
          &lt;Tab label="Tab 1" /&gt;
          &lt;Tab label="Tab 2" /&gt;
        &lt;/Tabs&gt;
      &lt;/AppBar&gt;
      {value === 0 &amp;&amp; &lt;Tab1Contents/&gt;}
      {value === 1 &amp;&amp; &lt;Tab2Contents/&gt;}
  </code></pre>
  
  <p>As Tab1Contents is a form, I would like its internal state to be retained, instead of loading a new instance of the component, which the code above appears to do.</p>
  
  <p>What is the best way to get React to use only one instance of the component and 'memorise field values'?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I have added Redux to the example, but the store corresponding to the form within the Tab is destroyed the moment I switch away. Is there any other way to implement tabs in React that would hide the tab contents, instead of destroying them and re-creating them from scratch each time I navigate away?</p>