1

I need to implement infinite scrolling in a react app, while my data is huge and the use might keep on scrolling and scrolling for a long time.

All the infinite scrolling solutions that I've found only handle adding the data to the table whole scrolling. But I need to also remove data from the DOM to prevent the app from slowing due to tens of thousands of rows being potentially loaded after some time on the app (think social media feed). I also don't want to keep all the data in the memory and I need to clean old data while scrolling (up and down).

So basically what I need to do:

  1. Load the first 100 rows (1 page) to the page
  2. When the user scrolls down and getting near the bottom, load next page and add to the bottom
  3. When the page has a large amount of pages (lets say 5 page, or 500 rows) start to remove old pages from the top when the user keeps scrolling down
  4. If the user start scrolling up, we need to reverse the functionality - Request the pages we removed again and add them to their place in the top

Does anyone know of such a solution? Any recommendations on how to tackle this if I need to build from scratch?

Thanks!

Fish
  • 21
  • 1
  • Does this answer your question? [Infinite scrolling with React JS](https://stackoverflow.com/questions/21238667/infinite-scrolling-with-react-js) – evolutionxbox Jun 30 '22 at 12:49
  • No, it's not because its only adding rows when scrolling down but doesn't remove any rows to clean the memory. – Fish Jul 03 '22 at 12:48

1 Answers1

0

1. Use react-infinite-scroll-component.
Follow instructions in documentation.
You can see basic example here. Here initially array have 20 elements and fetchMoreData function concatinate 20 more elements to it.
Basically you are concatinating, next elements in in array and adding them over, this is the concept of infinite-scroll. For furthur references, link1, link2.
Or
2. You can implement you custom scrolling as well, like this

Kedar K
  • 41
  • 2
  • 10
  • 1
    All these examples only add content to the page but doesn't remove anything, so with huge amount of data and a few minutes of scrolling it will become very slow. – Fish Jul 03 '22 at 12:46