Black Lives Matter. Please consider donating to Black Girls Code today.

Any performance tips when dealing with large number of callbacks?

I have a user configuration page that allows users to design their own dashboard, it allows the users to specify a grid of 1 - 15 rows, and for each row to have 1 - 12 columns. Each cell then has 3 controls that let them specify what will be displayed in that cell.

The nice thing about associating each of these controls with an input to a callback is that the user can see the effect of their change immediately. But in total we end up > 500 callbacks, this causes some delay compared to other pages in initially opening the page, and general interacting with controls as you have to wait a few seconds after each update you make.

Any suggestions? Perhaps I’m not thinking of something?

I was able to fix this somewhat. I changed from having 1 callback that was generating the html for all 15 rows, to 15 callbacks that each changed the viability of their respective row.

This approach of minimizing the amount of effect each callback has so it doesn’t trigger other callbacks seems to be a good practise and I will try to stick to this going forward.

However all callbacks trigger on page load so that still ends up being quite slow :slightly_frowning_face:. I’ll try and post a small example this evening.