How to adequately render more than 10000 data rows using react?

Question

MongoDB

Guys, hello everyone. There is a relatively simple task that is not so easy to implement. There is a component, which in fact is a sheet in which users (10000+) are stored. During the initial mount of the component, a request is made to the server, which returns 100 values. Further, as you scroll down, new data is loaded (the pagination limit is 100 at a time). Each value is wrapped in a ReactCSSTransitionGroup which gives a little animation and gives the background a little highlight to visualize the new rendered data.
The problem is that upon reaching 400+ values ​​(User components in the list), rendering gives a good delay and usability is several times lower than necessary. It turns out that every time we concatenate the old store and the new array with values, each component is still rendered again. How, then, to render only the new, just received data from the server, and then glue it with those already in the store, but at the same time prevent re-rendering?
PS all moments with key, etc. - settled correctly. Thanks for the answer! :)

Answer 1

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