Nosso aplicativo usa rolagem infinita para navegar em grandes listas de itens heterogêneos. Existem algumas rugas:

É comum que nossos usuários tenham uma lista de 10.000 itens e precisam percorrer 3k +.Como itens são ricos, podemos ter apenas algumas centenas no DOM antes que o desempenho do navegador se torne inaceitável.Os itens têm alturas variadas.Os itens podem conter imagens e permitimos que o usuário pule para uma data específica. Isso é complicado porque o usuário pode pular para um ponto da lista em que precisamos carregar imagens acima da janela de visualização, o que empurraria o conteúdo para baixo quando eles carregassem. Deixar de lidar com isso significa que o usuário pode pular para uma data, mas depois mudar para uma data anterior.

Soluções conhecidas e incompletas:

https://github.com/guillaumervls/react-infinite-scroll - este é apenas um simples componente "carregue mais quando atingirmos o fundo". Ele não seleciona nenhum DOM, portanto, ele morre em milhares de itens.

http://blog.vjeux.com/2013/javascript/scroll-position-with-react.html - Mostra como armazenar e restaurar a posição de rolagem ao inserir na parte superiorou inserindo na parte inferior, mas não os dois juntos.

Não estou procurando o código para uma solução completa (embora isso seja ótimo.) Em vez disso, estou procurando a "maneira de reagir" para modelar essa situação. A posição da rolagem está ou não? Em que estado devo rastrear para manter minha posição na lista? Que estado eu preciso manter para acionar uma nova renderização quando rolar para perto da parte inferior ou superior do que é renderizado?