Excessive rerenders on various browser events react-base-table

[RichardSPrins]

Currently using react-base-table v1.12.0

Migrating from react-table to react-base-table usage across app, this is a new table and I am experiencing excessive rerenders across any scroll or mouseover events on the whole table.

All custom components used in cellRenderer are memorized, as well as the data being passed into the table, yet seeing intense performance drops from rerenders.

Loom video linked below for reference.

https://www.loom.com/share/e8032526b6644874bffc08fbc959c09c

Gist for code reference:
https://gist.github.com/RichardSPrins/fd760e50b5529b1f222d8c6ee5808c54

[lehos]

same problem. react-base-table is best library for my needs, but full table re-renders on hover and scroll are stop-factor

[kaleem-elahi]

then what to do about this issue ?

[RichardSPrins]

then what to do about this issue ?

I don't have any suggestions, as I am just bringing up an issue that doesn't seem to be discussed at all with this library.

[nihgwu]

Sorry I lost my access to Github for a long while but I'm back now

[kaleem-elahi]

Np @nihgwu What can we do about this issue @nihgwu ?

[nihgwu]

@kaleem-elahi I'll investigate this week, sorry for the delay

[nihgwu]

Hey, do you experience performance issue? It's intended to re-render the table if you have frozen columns as there would be two (or three if you have both left and right frozen columns) inner tables and I need to update the current hovering row state to sync the hovering style. And I don't think that would be a problem, you will see only the rows that have hovering state changed would re-render.
For re-rendering in scrolling, the style will be cached so only new rows would be rendered and existing rows won't be re-rendered, the highlight update from the dev-tools indicates the re-invoke of items in Grid but not TableRow, but after scrolled, the style cache will be reset, so all the rows will be re-rendered, but again while you are keeping scrolling, only the new rows will be rendered.
https://github.com/bvaughn/react-window/blob/master/src/createGridComponent.js#L825, I don't know why the author did that, but I think it's fine as from my experience the bottleneck of performance for the table is happened during scrolling and we can grantee there won't be unnecessary re-renders, if you feel it would be more pleasant to not reset the style cache after scroll stoped, I can cache the style from my side

[lehos]

I can cache the style from my side

so can you do it, please?

[igor-litvintsev]

same problem. react-base-table is best library for my needs, but full table re-renders on hover and scroll are stop-factor

the same problem, lehos please tell me which library you use?