react-base-table icon indicating copy to clipboard operation
react-base-table copied to clipboard

Published 20 hours ago • verified publisher icon Autodesk

Excessive rerenders on various browser events react-base-table

Open RichardSPrins opened this issue 4 years ago • 9 comments

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

RichardSPrins avatar May 24 '21 17:05 RichardSPrins

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

lehos avatar May 27 '21 08:05 lehos

then what to do about this issue ?

kaleem-elahi avatar Jun 09 '21 16:06 kaleem-elahi

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.

RichardSPrins avatar Jun 09 '21 17:06 RichardSPrins

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

nihgwu avatar Jun 10 '21 01:06 nihgwu

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

kaleem-elahi avatar Jun 10 '21 08:06 kaleem-elahi

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

nihgwu avatar Jun 10 '21 08:06 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

nihgwu avatar Jun 13 '21 22:06 nihgwu

I can cache the style from my side

so can you do it, please?

lehos avatar Jul 08 '21 10:07 lehos

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?

igor-litvintsev avatar Aug 05 '22 06:08 igor-litvintsev