title: ReactJS: Modeling Bi-Directional Infinite Scrolling
body: <p>Our application uses infinite scrolling to navigate large lists of heterogenous items. There are a few wrinkles:</p>
  
  <ul>
  <li>It's common for our users to have a list of 10,000 items and need to scroll through 3k+.</li>
  <li>These are rich items, so we can only have a few hundred in the DOM before browser performance becomes unacceptable.</li>
  <li>The items are of varying heights.</li>
  <li>The items may contain images and we allow the user to jump to a specific date. This is tricky because the user can jump to a point in the list where we need to load images above the viewport, which would push the content down when they load. Failing to handle that means that the user may jump to a date, but then be shifted to an earlier date.</li>
  </ul>
  
  <p>Known, incomplete solutions:</p>
  
  <ul>
  <li><p>(<a href="https://github.com/guillaumervls/react-infinite-scroll" rel="nofollow noreferrer">react-infinite-scroll</a>) - This is just a simple "load more when we hit the bottom" component. It does not cull any of the DOM, so it will die on thousands of items.</p></li>
  <li><p>(<a href="http://blog.vjeux.com/2013/javascript/scroll-position-with-react.html" rel="nofollow noreferrer">Scroll Position with React</a>) - Shows how to store and restore the scroll position when inserting at the top <strong><em>or</em></strong> inserting at the bottom, but not both together.</p></li>
  </ul>
  
  <p>I'm not looking for the code for a complete solution (although that would be great.) Instead, I'm looking for the "React way" to model this situation. Is scroll position state or not? What state should I be tracking to retain my position in the list?  What state do I need to keep so that I trigger a new render when I scroll near the bottom or top of what is rendered?</p>