Decrease number of triggered callbacks - improve performance

Dash Python
1

I am developing a sort of a single page application in Dash. To make the UI easier for the user I am using Dash Mantine Tabs with more than 20 tabs.

There is one central tab where user can select a project and when a project is selected all other components on all tabs get triggered because most components depend on the selected project. This means that on a change of a project I get ~250 callbacks triggered. Most of these callbacks wont do anything but return either no_update or empty states but it still takes ~15-20 seconds to schedule and execute all of them.

What would be the best way to decrease number of executed callbacks? Best thing would be if I could update components on a tab only when that tab becomes active (user clicks on it). There is no need to execute callbacks on tabs that are not visible, is there a way to prevent this?

2

Hello @dusanb,

Welcome to the community!

Are these clientside or server side? If server side, is there a way you can bring it over to the clientside, this will help you tremendously.

3

Hi @dusanb

See this section in the dcc.Tabs docs regarding content as tab children vs content as callback. This will apply when using Dash Mantine tabs as well:

1 Like
4

Technically, I believe you could put a clientside callback ‘in front’ of the relevant callbacks, which triggers the server side callback conditionally depending on e.g. tab visibility.

In practice, for that many callbacks, you would have to formalize the solution into e.g. a decorator, to make at feasible to implement.

1 Like
5

I think when the user selects the project, you could just set a value in dcc.Store with the selected project name/id and any other settings the user selects in the master tab.

Then depending on what the user does to change the view (switch tab, create a new tab etc), you could have a call back which renders the data using the value in dcc.Store. (callback will have to use State of dcc.Store instead of Input)

If using tabs, you could combine dcc.Store and the suggestion from @AnnMarieW.

6

Thank you for great ideas, they made me dig deeper into documentation and explore advanced features.

Eventually I have decided to make an independent callback for each tab. This callback is triggered whenever user changes a Project but only if tab is currently visible and if there was a Project change. This way tabs can keep their state/context in normal operation and they are refreshed only if a Project is changed and user switches to a tab.

2 Likes