React content change based on selected menu with caching
<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>