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
pleasant-yellow•2y 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 scrollcorrect-apricotOP•2y 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?
pleasant-yellow•2y ago
Does data have a stable reference?
It's one thing if it's slow, another if you are entering an infinite loop
correct-apricotOP•2y ago
@KevinVandy
correct-apricotOP•2y ago
it has to be stable
correct-apricotOP•2y ago
oh, and i pass it to a child component as a prop
correct-apricotOP•17mo 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?