My virtualized Table renders terribly slow. I can't delete an item because it takes ages
https://stackblitz.com/edit/vitejs-vite-mwwcvr?file=src%2FTable%2Findex.tsx
What can I do to further improve the performance of the table? The requirement is to handle about 3000 row without pagination but it works terribly slow
7 Replies
rare-sapphire•14mo ago
you might want to have your
useReactTable hook call 1 component level above the useVirtualizer hook call. The virtualizer re-renders on every scroll. The table does not need to re-render on every scrollabsent-sapphireOP•14mo ago
Thank you for the suggestion. I've separated the table components into TableComponent and TableContainer, but it is still impossible to delete an item. Would you please take a look to see if this is what you meant?
rare-sapphire•14mo ago
Does data have a stable reference?
It's one thing if it's slow, another if you are entering an infinite loop
absent-sapphireOP•14mo ago
@KevinVandy
absent-sapphireOP•14mo ago
it has to be stable
absent-sapphireOP•14mo ago
oh, and i pass it to a child component as a prop
absent-sapphireOP•14mo ago
I realized the render was super slow because the editable cells were always inputs. So, I'm changing them to
<p> when not in EditMode and only switching to inputs on user action. But now it doesn’t feel like an editable table anymore 🤷♂️. Any suggestions on how to handle inputs in a more performant way?