Dash Performance: Many Single Output Callbacks vs. Single Multiple Output Callback

Dash Python
1

General questions on performance:

Which is a better practice for increasing app performance (both on initial load and during use):

  1. many callbacks that update a single output, or
  2. single callback that updates many outputs? (does using dash.callback_context affect overall callback performance?)

See example below for toggling a component that opens/closes

## MULTIPLE "SINGLE" CALLBACKS

@app.callback(Output("dmc-modal-1", "opened"), Input("dmc-modal-btn-1", 'n_clicks'), State("dmc-modal-1", "opened"))
def _toggle_modal_1(n, is_open):
    return not is_open if n else is_open

@app.callback(Output("dmc-modal-2", "opened"), Input("dmc-modal-btn-2", 'n_clicks'), State("dmc-modal-2", "opened"))
def _toggle_modal_2(n, is_open):
    return not is_open if n else is_open

@app.callback(Output("dmc-modal-3", "opened"), Input("dmc-modal-btn-3", 'n_clicks'), State("dmc-modal-3", "opened"))
def _toggle_modal_3(n, is_open):
    return not is_open if n else is_open


## === VS. === ##


## SINGLE "MULTIPLE" CALLBACK

@app.callback(
    Output("dmc-modal-1", "opened"), 
    Output("dmc-modal-2", "opened"), 
    Output("dmc-modal-3", "opened"), 
    Input("dmc-modal-btn-1", "n_clicks"), 
    Input("dmc-modal-btn-2", "n_clicks"), 
    Input("dmc-modal-btn-3", "n_clicks"), 
    State("dmc-modal-1", "opened"),
    State("dmc-modal-2", "opened"),
    State("dmc-modal-3", "opened"),
)
def _toggle_modals(n1, n2, n3, is_open_1, is_open_2, is_open_3):

    ctx = dash.callback_context
    triggered_id = ctx.triggered[0]["prop_id"]

    if triggered_id == "dmc-modal-btn-1.n_clicks":
        is_open_1 = not is_open_1
    elif triggered_id == "dmc-modal-btn-1.n_clicks":
        is_open_2 = not is_open_2
    elif triggered_id == "dmc-modal-btn-1.n_clicks":
        is_open_3 = not is_open_3

    return is_open_1, is_open_2, is_open_3
2

Hello @hibachi !

I do not know the anwer performance wise but readability wise you might be interested in pattern matching callbacks :slight_smile:

3

Hi @hibachi, I think in this example there is no huge difference between the two approaches.

If you use only one callback, keep in mind that all information of the input, state and output properties have to travel between browser and server.

That said, imagine you want to update the figure of a dcc.Graph() instead of the opened property of the modals. All figures, which can get quite big if you display color images with px.imshow() for example, would have to go forth an back between server and browser even if you wanted to update only one of the figures.

For your example, I would rather have one callback due to code repetition and readability.