Nuestra aplicación utiliza el desplazamiento infinito para navegar por grandes listas de elementos heterogéneos. Hay algunas arrugas:

Es común que nuestros usuarios tengan una lista de 10,000 artículos y necesiten desplazarse por 3k +.Estos son elementos ricos, por lo que solo podemos tener unos pocos cientos en el DOM antes de que el rendimiento del navegador sea inaceptable.Los artículos son de diferentes alturas.Los elementos pueden contener imágenes y permitimos que el usuario salte a una fecha específica. Esto es complicado porque el usuario puede saltar a un punto de la lista en el que necesitamos cargar imágenes sobre la ventana gráfica, lo que empujaría el contenido hacia abajo cuando se cargan. El no poder manejar eso significa que el usuario puede saltar a una fecha, pero luego cambiarse a una fecha anterior.

Soluciones incompletas conocidas:

https://github.com/guillaumervls/react-infinite-scroll - esto es solo un simple componente "cargar más cuando lleguemos al fondo". No elimina ninguno de los DOM, por lo que morirá en miles de elementos.

http://blog.vjeux.com/2013/javascript/scroll-position-with-react.html - Muestra cómo almacenar y restaurar la posición de desplazamiento cuando se inserta en la parte superioro Inserción en la parte inferior, pero no ambas juntas.

No estoy buscando el código para una solución completa (aunque eso sería genial). En cambio, estoy buscando la "manera de reaccionar" para modelar esta situación. ¿Se encuentra la posición de desplazamiento o no? ¿Qué estado debería seguir para conservar mi posición en la lista? ¿Qué estado debo mantener para activar un nuevo render cuando me desplazo cerca de la parte inferior o superior de lo que se representa?