Downgrading performance of entire app when provide 1000+ row

#1

https://jsfiddle.net/zac4fjb8/1/

If provided more rows like 1000 to handsonTable, it impact on the overall application badly.

In sample, click the increment button and note delay to updating local react state.
If reduce rows to 100, they delay will disappear.

Example updating the local state and not updating table on increment,

We are not regenerating data, sound like HandsonTable using resources in background while sitting ideal OR memory leak ?

What the maximum number of rows handsontable support ?
Is there a way to optimize it ?

#2

Hi @harisalipk,
Setting states in the component containing HotTable will “update” the Handsontable instance every time. You can wrap HotTable to the PureComponent like that: https://jsfiddle.net/h6L7gque/.

There is no hard limit. It depends on the end-user machine, available memory allocated for a browser, implementation complexity, settings you would use, the number of cells you would like to show on screen, how many other libraries are used in the app, etc. There are too many factors to judge the best maximum number of rows/columns in your app.

In the matter of optimization, in our documentation, you can find two guides that might help you:

On re-render, cell meta data lost
On re-render, cell meta data lost
#3

Thanks it make sense and it did help.

Some of the grids don’t rerender data if there is no change in data (they maintain internally).
Below is non class bases version incase someone need.
https://jsfiddle.net/u7nzegpj/
https://jsfiddle.net/369pbm1v/

#4

https://jsfiddle.net/j2pcav6y/

Sound like afterInit event firing too early, before API is available.
Is there some event which fire after API is ready, and pass hot instance as param

e.g

onReady(hot)

#5

Hi @harisalipk

You can test afterLoadData and before/afterChange. Here https://handsontable.com/docs/events-and-hooks/#all-available-hooks-example is an example with all the hooks. You can run it in the JSFiddle and compare which hook would be the best one to pick by checking the checkbox programmatically and re-running the fiddle.

#6