Is there a way to optimize the number of calls from 'afterColumnResize'

Tags: #<Tag:0x00007efc6577de00>
#1

Our application is currently using the settings manualColumnResize along with afterColumnResize. The column widths are being stored in an array of numbers in state named columnWidths: number [] and passed to manualColumnResize. When we resize a column by dragging the blue line at the header, we use afterColumnResize to update that the value in columnWidths.

We are seeing a performance issue when we select a range of N columns and change the column width because afterColumnResize is getting called for each column, which is then forcing N re-renders due to state changing and creating this delay of row updates and laggy behavior. Is there a way to optimize this to just 1 call for selection ranges, or is there an alternative way to do this properly?

#2

Hi @victorh

Could you please share a demo of your current logic of afterColumnResize? That would help us to debug the code and hopefully find a better solution.

#3

@aleksandra_budnik

https://jsfiddle.net/gzd5ynbj/29/

Fiddle link above. To replicate, select columns A to EH, then adjust the column width by dragging the blue line in the header.

What ends up happening is that handleAfterColumnResize gets called N times (from A to EH) and the table sort of lags/hangs for a second while its firing the function N times.

Is there a way to “batch” all those calls into 1? Or some pattern to implement to avoid that delay?

#5

Hi @victorh

Handsontable does not fully support the React state management at the moment.
You can read more about that issue here https://github.com/handsontable/handsontable/issues/8372 on our Github board. We have gathered some feedback from users and are planning to fix that issue as soon as we finish tasks that are on our Roadmap for this month.

I added your example as a separate case to ensure that our QA will also check it.

I will keep you updated about the release date for this issue.

1 Like
#6

Hi @victorh

I just wanted to let you know that in Handsontable v11.1.0 we’ve made state-management changes.
We’ve released a new method called updateData() that allows you to update your dataset without resetting your states.

Here’s the full list of changes https://handsontable.com/docs/release-notes/#_11-1-0

#7

I am happy to announce that the epic at https://github.com/handsontable/handsontable/issues/8372 is solved in v12. If you would have any issues with updating to the newest version please contact us at support@handsontable.com

#8