title: React: Prevent remount when parent rerenders
body: <p>I've got a component, <code>Split</code>, which takes two children. The first child will be displayed on the left hand side of the screen &amp; the second child on the right hand side. If the screen width goes below a certain point then only the right side will be displayed and the left side will be removed from the DOM.</p>
  
  <p>Example children could be a <code>Sidebar</code> component and a <code>Content</code> component. For mobile devices i don't want to display the menu, but have a special mobile menu that i pop up.</p>
  
  <p>My question is: How can i remove the <code>Sidebar</code> component without unmounting &amp; remounting the <code>Content</code> component too?</p>
  
  <p>My <code>Content</code> component fetches data on <code>componentDidMount</code> and i don't want it to refetch or re-mount(thus discarding user input) again.</p>
  
  <p>Basically i have something like this:</p>
  
  <pre><code>&lt;Split&gt;
    &lt;Sidebar/&gt;
    &lt;Content/&gt;
  &lt;/Split&gt;
  </code></pre>
  
  <p>And <code>Split</code>'s render method looks something like this:</p>
  
  <pre><code>let children;
  let firstChild = this.props.children[0];
  let lastChild = this.props.children.pop();
  if (this.state.responsive === 'singleColumn') {
    children = (
      &lt;div&gt;
        &lt;div style={{display: 'none'}}&gt;{firstChild}&lt;/div&gt;
        {lastChild}
      &lt;/div&gt;
    );
  } else {
    children = (
      &lt;div&gt;
        {firstChild}
        {lastChild}
      &lt;/div&gt;
    );
  }
  
  return (
    &lt;div&gt;
      {children}
    &lt;/div&gt;
  );
  </code></pre>
  
  <p>Even though {lastChild} is always rendered, no matter what, it still gets unmounted and remounted each time split has to re-render!</p>
  
  <p>Even having a render that looks like this:</p>
  
  <pre><code>return (
    &lt;div&gt;
      {this.props.children.pop()}
    &lt;/div&gt;
  );
  </code></pre>
  
  <p>causes the last child(which never changes) to be unmounted &amp; remounted before being rendered.</p>
  
  <p>If i instead modify <code>Split</code> and pass the component that will always be in the DOM as an attribute like so:</p>
  
  <pre><code>&lt;Split staticComponent={&lt;Content /&gt;}&gt;
    &lt;Sidebar /&gt;
  &lt;/Split&gt;
  </code></pre>
  
  <p>it works fine. Then why doesn't it work when im just popping the last child like this <code>{this.props.children.pop()}</code> as opposed to this <code>{this.props.staticComponent}</code></p>
  
  <p>Is there a sane way to solve this?</p>