title: How to keep React component state between mount/unmount?
body: <p>I have a simple component <code>&lt;StatefulView&gt;</code> that maintains an internal state. I have another component <code>&lt;App&gt;</code> that toggles whether or not <code>&lt;StatefulView&gt;</code> is rendered. </p>
  
  <p>However, I want to keep <code>&lt;StatefulView&gt;</code>'s internal state between mounting/unmouting. </p>
  
  <p>I figured I could instantiate the component in <code>&lt;App&gt;</code> and then control whether its rendered/mounted.</p>
  
  <pre><code>var StatefulView = React.createClass({
    getInitialState: function() {
      return {
        count: 0
      }
    },
    inc: function() {
      this.setState({count: this.state.count+1})
    },
    render: function() {
      return (
          &lt;div&gt;
            &lt;button onClick={this.inc}&gt;inc&lt;/button&gt;
            &lt;div&gt;count:{this.state.count}&lt;/div&gt;
          &lt;/div&gt;
      )
    }
  });
  
  var App = React.createClass({
    getInitialState: function() {
      return {
        show: true,
        component: &lt;StatefulView/&gt;
      }
    },
    toggle: function() {
      this.setState({show: !this.state.show})
    },
    render: function() {
      var content = this.state.show ? this.state.component : false
      return (
        &lt;div&gt;
          &lt;button onClick={this.toggle}&gt;toggle&lt;/button&gt;
          {content}
        &lt;/div&gt;
      )
    }
  });
  </code></pre>
  
  <p>This apparently doesnt work and a new <code>&lt;StatefulView&gt;</code> is created on each toggle.</p>
  
  <p>Here's a <a href="https://jsfiddle.net/ccorcos/xd4wkutw/">JSFiddle</a>.</p>
  
  <p>Is there a way to hang on to the same component after it is unmounted so it can be re-mounted?</p>