[useResizeColumns] User action lags with increase in row and columns

When grid has good amount of cells displayed then on column resize - both user action and column re-sizing functionality starts lagging.

Can be reproduced at - https://codesandbox.io/s/resize-columns-lagging-9puen In above example this occurs with 70 rows with ~30 columns, but real world applications will have more render costly cell, then this lag would be easily observed by lib users with less data also.

Is there anything we can do to improve this performance(assuming that cell renderer is fully optimized) ?

[ViieeS]

@tannerlinsley

I just tested in prod. The reconciliation phase is much much faster, but rendering to v-dom phase is still slow, simply due to the amount of cells. The biggest offender here is prepareRow, then after that just the actual renderer. A few ideas from here:

• virtualizing the columns and rows would really speed things up without hurting a lot
• memoizing the actual output of these cells would also speed things up, but also would start to restrict the update-ability of the cells in the future.

How about to not affect cells size until mouse button up? Just need to draw a vertical line and move it like in old Windows.

[xSynack]

I fixed this by adding react. memo to my table body. Then I passed a custom function to react. memo that would check if any column is resizing and not rerender my row cells until isResizing is false. Iv only tested with 1000 rows in development and performance now is 10/10 when resizing. Hope this helps anyone.