Bulk Insert And Delete Performance

[BrianHung]

Hi, I’m trying to build a spreadsheet on top of mobx state tree. I’ve modeled it as a table, consisting of cols and rows, and cells which have references to cols and rows.

Im running into performance issues with bulk creating and deleting thousands of MST nodes, imagine 20.000 cells from 32 cols and 625 rows. Specifically, all of it is synchronous and blocks the UI. As a result, the app freezes and the user can’t interact with it. I’ve experimented with async and generator actions to chunk creating and deleting nodes, but it doesn’t seem to help (actually worsens with the chunking overhead).

does anyone have an advice or suggestions of successfully implementing an app with bulk creating and deleting? Thanks.

[chakrihacker]

I am curious why the chunk approach worsens it. Is it because after every chunk delete, the component is rendering again??

If so, I would suggest keep a loading/delete marker, when ever that is true show bulk delete in progress please wait and freeze the Sheet by not rendering until the operation is complete. once the operation is done, you can remount the sheet or let the sheet update itself.

You can use this library to freeze the components https://github.com/software-mansion/react-freeze