Sluggish scrolling when rendering table with large dataset in React

[spacejamtda]

So I'm creating an application with real-time streaming data in a table using react (v16.1.1). The number of rows shown at a time can be rather large (400+ rows) and when those situations occur, the scrolling behavior on browsers (desktop & mobile) really takes a hit and staggers when attempting to browse the content. Has anybody experienced this kind of scrolling behavior when rendering large data sets in a table?

I'm expecting React to be able to efficiently draw/redraw these elements with ease but that doesn't appear to be the case. I tried using JSFiddle to recreate the scenario but did not have much success.

[gaearon]

Have you checked out these resources?

https://reactjs.org/docs/optimizing-performance.html
https://bvaughn.github.io/react-virtualized

[spacejamtda]

Hey @gaearon, yeah I checked out those resources. React-Virtualized unfortunately doesn't meet my front-end needs/use-cases so I went with my own custom table component. I coupled my table solution with react-lazyload (https://github.com/jasonslyvia/react-lazyload) to get a similar react-virtualized effect but it still doesn't seem to efficiently render.

[gaearon]

Can you provide a reduced test case that shows the problem?

[quantizor]

@spacejamtda more than likely, your root issue is trying to inject and modify too many DOM elements at once. Your best bet is to implement an element recycling strategy that only renders the content in view.

[gaearon]

I'll close because there isn't enough information here to help.

[ArunRapolu]

How to display a List of arrays with react-virtualized in a Table.