'React table, editable with pagination and 20k rows performance issues
I have an React table that contains 20k+ rows and some of these rows contains editable fields. I e.g. have a number field in which I have a component where it is possible to +/- the value.
I have been using the Examples: Editable Data from react tables own page, where all data is stored in as useState and then on each update it is changed - this however performes very badly, as the re-render delays the value changes when clicking the + button multiple times. Is there a way to handle this better and maybe also keep the original data such that is it possible to do a "reset", such that I don't need to overwrite the entire dataset for the table.
Solution 1:[1]
I did some research on the topic and found that you could use react-virtualized.
React components for efficiently rendering large lists and tabular data
It seems that it would be perfect solution to your problem.
Whats very cool is that by default all react-virtualized components use shallowCompare to avoid re-rendering unless props or state has changed.
Hope this will be a good replacement for react-table
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Damian Busz |