title: How not to lose component state/scroll position when component is unmounted
body: <h2>INTRODUCTION</h2>
  
  <p>I have a component which contains 2 child components, let's call them <code>listComponent</code> and <code>itemComponent</code>.</p>
  
  <p><strong>listComponent</strong>: has a "load more" button and is scrollable. Each element of the list has a route link which routes to itemComponent. </p>
  
  <p><strong>itemComponent</strong>: contains the information about a specific element of the list. Has a back button which routes the application back to listComponent.</p>
  
  <h2>THE PROBLEM</h2>
  
  <p>Each time the user clicks on an element to go to the itemComponent of that item, it unmounts the listComponent. The problem is that when he goes back the listComponent, it's remounted from scratch, losing all "load more" he did and the scroll position, makind it almost unusable.</p>
  
  <h2>THE QUESTION</h2>
  
  <p>I want that when users click the "back" button on itemComponent, listComponent loads as it was when leaved, scrolled where it was and with all the "loaded more" items.</p>
  
  <h2>SAMPLE CODE</h2>
  
  <pre><code>&lt;Switch&gt;
    &lt;Route
      path="/list"
      component={listComponent}
    /&gt;
    &lt;Route
      path="/list/:item"
      component={itemComponent}
    /&gt;
  &lt;/Switch&gt;
  </code></pre>