Increase performance? avoid memory leak?

Tags: #<Tag:0x00007f8b19e04718>

hi, wondering if there were any new suggestions on how to increase performance? aside with what’s mentioned in the docs. i’m deciding between HOT and react-data-grid, but HOT seems about 200x slower for large data sets.

i made this to compare them:

https://handsontable-vs-reactdatagrid.onrender.com/

also i’ve seen a lot of tickets about the memory leak, wondering if there was an update on that?


update: i’m experimenting with the HOT api right now and using the setDataAtCell API function is about 5 times faster than changing the data externally

Hi @stuart.clifford

Right now we working on the version 8.0.0. where we use a global index mapper.
After testing in beta2 we detect performance improvement.

You could check this yourself by using the following resources (so far they are not available at npm):
https://cdn.jsdelivr.net/gh/handsontable/handsontable@f2c57dc7288c5d878c810ec2060a3054dbf48938/dist/handsontable.full.min.js
https://cdn.jsdelivr.net/gh/handsontable/handsontable@f2c57dc7288c5d878c810ec2060a3054dbf48938/dist/handsontable.full.min.css

Every feedback will be appreciated.

Hi @stuart.clifford again.

We investigated your test case more closely and I could share with you our conclusion.

You use the API from React Data Grid for both demos, and thus you don’t use our API itself - for example, you use rows with an array of object in the settings option, which isn’t possible in our settings (I know, you pass data from rows to data).

After clicking the button value for the first cell is changed by setState. I understand that it is your case.
But it would be better for us to use setDataAtCell. Here is a demo - https://codesandbox.io/s/set-data-at-first-cell-tjrf4?file=/src/index.js - which show that if use our API to this operation Handsontable is pretty fast.
With setState our react wrapper internally uses updateSettings and loadData, which create a new instance. So this is a major reason for performance slow.

Furthermore, you use eval - https://github.com/WranglHQ/handsontable_vs_reactdatagrid/blob/master/src/ParentHandsontable.js#L153 In addition to being very bad practice, it can affect slower code performance.

Although you use our wrapper, all logic is putting in the parent class, and our wrapper is used only for rendering.

However, in your repo - https://github.com/WranglHQ/handsontable_vs_reactdatagrid - you have some weird measuring system, timeouts and reading values ​​from innerHTML. This is not a very robust measuring system.

Finally, I don’t see a memory leak. As we treat all similar issues with high priority please guide on how to replicate the same.

Hi @stuart.clifford I hope that you will review Piotr’s tips and change the following examples on your website.

However, it you need more details on how we tested it please feel free to contact us on emails - support@handsontable.com