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!