title: How to preserve the state for a "just hidden" component
body: <p>Through <a href="https://stackoverflow.com/questions/37359194/how-should-i-be-recreating-a-stateful-child-component-in-a-parents-render-metho">my previous question</a> I learned that React preserves the state for child components automatically and that's why <a href="https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-shouldnt-go-in-state" rel="nofollow noreferrer">its documentation says</a>:</p>
  
  <blockquote>
    <p>What <strong>Shouldn't</strong> Go in State?</p>
    
    <p><strong>React components</strong>: Build them in render() based on underlying props and state.</p>
  </blockquote>
  
  <p>Now my question is how to do the same for components that we are just hiding?</p>
  
  <p>Consider a child component that in an iteration is not going to be shown and at the same time we would like to preserve its state for the future when it is going to be brought back!</p>
  
  <p>To illustrate what I exactly mean I've designed a case scenario to show it to you. In the following code you can add stateful child components. A checkbox is provided for each component so you can flag them. Finally the third button will <strong>hide</strong> the child components that are not flagged. I'm looking for a way to restore the state for the not-flagged components once they are brought back.</p>
  
  <p><a href="http://codepen.io/mehranziadloo/pen/YWKPWR?editors=0010" rel="nofollow noreferrer">Executable code</a></p>
  
  <pre><code>class BlackBox extends React.Component
  {
    constructor() {
      super();
      this.state = {
        checked: false,
        counter: 0,
      };
    }
  
    increment = () =&gt; {
      this.setState(Object.assign({}, this.state, { counter: this.state.counter+1 }));
    };
  
    switch = () =&gt; {
      this.setState(Object.assign({}, this.state, { checked: !this.state.checked }));
    };
  
    isChecked() {
        return this.state.checked;
    }
  
    render() {
      return (
        &lt;span onClick={this.increment} title={this.props.id} style={{
          fontSize: '24pt',
          border: '1px solid black',
          margin: 10,
          padding: 10,
        }}&gt;
          &lt;input type="checkbox" onChange={this.switch} checked={this.state.checked} /&gt;
          {this.state.counter}
        &lt;/span&gt;
      );
    }
  }
  
  class RedBox extends React.Component
  {
    constructor() {
      super();
      this.state = {
        checked: false,
        counter: 0
      };
    }
  
    increment = () =&gt; {
      this.setState(Object.assign({}, this.state, { counter: this.state.counter+1 }));
    };
  
    switch = () =&gt; {
      this.setState(Object.assign({}, this.state, { checked: !this.state.checked }));
    };
  
    isChecked() {
        return this.state.checked;
    }
  
    render() {
      return (
        &lt;span onClick={this.increment} title={this.props.id} style={{
          fontSize: '24pt',
          border: '1px solid red',
          margin: 10,
          padding: 10,
        }}&gt;
          &lt;input type="checkbox" onChange={this.switch} checked={this.state.checked} /&gt;
          {this.state.counter}
        &lt;/span&gt;
      );
    }
  }
  
  class Parent extends React.Component {
      static blackCount = 0;
      static redCount = 0;
      state = {
        childCmps: [],
        showOnlyChecked: false,
      };
      constructor(props, context) {
        super(props, context);
      }
  
      addBlackBox = () =&gt; {
        this.setState(Object.assign({}, this.state, {
          childCmps: [...this.state.childCmps, { Component: BlackBox,  id: "black" + (++Parent.blackCount) }],
        }));
      };
  
      addRedBox = () =&gt; {
        this.setState(Object.assign({}, this.state, {
          childCmps: [...this.state.childCmps, { Component: RedBox, id: "red" + (++Parent.redCount) }],
        }));
      };
  
      showHide = () =&gt; {
        this.setState(Object.assign({}, this.state, {
          showOnlyChecked: !this.state.showOnlyChecked,
        }));
      };
  
      render() {
        let children = this.state.childCmps.map(child =&gt; &lt;child.Component key={child.id} id={child.id} ref={child.id} /&gt;);
        return (
          &lt;div&gt;
            &lt;button onClick={this.addBlackBox}&gt;Add Black Box&lt;/button&gt; 
            &lt;button onClick={this.addRedBox}&gt;Add Red Box&lt;/button&gt;
            &lt;button onClick={this.showHide}&gt;Show / Hide Unchecked&lt;/button&gt;
            &lt;br /&gt;&lt;br /&gt;
            {children.filter(box =&gt; !this.state.showOnlyChecked || this.refs[box.props.id].isChecked())}
          &lt;/div&gt;
        );
      }
  }
  
  ReactDOM.render(
      &lt;Parent /&gt;,
      document.getElementById("root")
  );
  </code></pre>