Any possible solution to make the table less janky?

[haohcraft]

Notice that the table in the example feels so janky even though we already try to limited the number of reactElement rendered.

Wondering the reason(s) for that and possible solution towards it.

[KamranAsif]

Hey,

Are you using shouldComponentUpdate? I found it can be a big source of lag because each cell will attempt to render when anything changes. Check out an example here: http://schrodinger.github.io/fixed-data-table-2/example-reorder.html

We've spent a lot of time optimizing FDT for our application. Feel free to prod more in the maintained fork: https://github.com/schrodinger/fixed-data-table-2

This repo has been more or less abandoned.

[haohcraft]

@KamranAsif thanks for pointing out.

[xinghul]

Hey @KamranAsif, what do you mean by using shouldComponentUpdate? it's not even invoked I think. Please correct me if I'm wrong, assuming there's no state/props change, the render and shouldComponentUpdate will not trigger after the initial render. But since it's buffered rendering, when scrolling happens, rows got removed/appended dynamically, which is inevitable and the cause of the slowness?

If that's the case, is there anything I can do the improve the performance?

[wcjordan]

Cells tend to be re-rendered frequently because their containing component will be re-rendered during a scroll even though their state and props aren't changed. If you inherit React.PureComponent or add performance checks to shouldComponentUpdate you can avoid these cell re-renders.

I recommend looking at the example cells. They allow the examples to scroll without jank.

The pagination example in particular has an interesting trick for re-rendering the cells only when data updates come in from requests to the backend by including a dataVersion prop from the data store.