React and very long lists. How to make it "not lag"?

Question

JavaScript

Good day, colleagues! We have a list of unlimited length (in the future). At the moment the list consists of 26k lines. The whole thing lags wildly when scrolling the wheel. Pagination isn't quite right. I would like to do something like infinity scroll, but here's the dilemma: having screwed it up to the end, the user will lag everything just as it lags before.
Looking at the wall, for example, on VKontakte, they implement this by removing old entries from the DOM, and a specially trained DIV takes their height.
In order not to make such a bike, tell me, please, are there any ready-made solutions?
PS: if something is not clear, write in the comments, I will explain.

Answer 1

https://github.com/bvaughn/react-virtualized

Answer 2

it's called "virtual scroll"
Here's the finished bike (and there are 4 more but they have fewer stars)
developerdizzle.github.io/react-virtual-list - here's an example with 100K records. Most of the ones I've seen are designed only for cases where we always know the height of the list element in advance. In VKontakte or there, LinkedIns are a little trickier, where they try to pre-render the list in advance, and it also helps them that the data is not loaded immediately (not immediately 100K items, but in pieces of 100 pieces, for example). This gives more scope for action.

Answer 3

There are no ready made solutions. Everyone cycles in their own way, but it all comes down to one thing - there are only visible lines in the DOM. Those. when scrolling down, the top lines are removed, and vice versa when scrolling up. Then display problems begin with very fast scrolling back and forth, in general, a creative task, go for it.