title: React content change based on selected menu with caching
body: <p>I have this code.</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>class Component {
    
    state = {
      selectedView: 'foo',
    }
    
    onMenuClicked(event, menuItem) {
      switch(menuItem) {
        case 'foo':
          this.setState({ selectedView: 'foo'})
          break;
        case 'bar':
          this.setState({ selectedView: 'bar'})
          break;
      }
    }
    
    renderBar() {
      return &lt;Bar /&gt;    
    }
  
    renderFoo() {
      return &lt;Foo /&gt;  
    }
    
    renderContent() {
      switch(this.state.selectedView) {
        case 'foo':
          return this.renderFoo();
        case 'bar':
          return this.renderBar();
      }
    }
    
    render() {
      return(
        &lt;div&gt;
          &lt;Menu onMenuSelected((e, menuItem) =&gt; this.onMenuClicked(e, menyItem)) /&gt; // items foo and bar
          {this.renderContent()}
        &lt;/div&gt;
      )
    }</code></pre>
  </div>
  </div>
  </p>
  
  <p>This works fine. However, since foo and bar component are very heavy and the chances of user toggling between these components are high, I would like to have this kind of flow,</p>
  
  <ul>
  <li>On page load, render foo</li>
  <li>If bar is clicked for the first time, render bar</li>
  <li>For all subsequent menu changes, just hide/show the foo/bar components (based on menu clicked) and don't reload them on every menu change. </li>
  </ul>
  
  <p>I need to adapt my code (the cleanest way possible) to have such behavior. Any help would be appreciated. Thank you.</p>