Is it possible that using flexible callback signatures causes a delay on the client?

Dash Python
1

I noticed that if I return a small dictionary from a callback and choose a dcc.Store as a single output, my browser tab updates immediately. However, if I choose a corresponding dictionary of Outputs as described in flexible callback signatures, my browser tab takes multiple seconds to update after the response arrives from the server (the tab displays “Updating…” and the app is less responsive during this time). Does registering a callback using a flexible callback signature result in additional JS logic being run on the client?

2

hi @Niklas_Kappel
Can you please share a code example?

3

I just wrote this minimal example that looks just like the code in question. However, it does unfortunately not reproduce the delay for me:

import dash_mantine_components as dmc
from dash import Dash, Input, Output, callback, dcc, html

some_dict = {
    "key_1": {"value": "A string value", "flag": True},
    "key_2": {"value": ("tuple", "value"), "flag": False},
}

slow_button = html.Button("Slow")
input_1 = dmc.TextInput()
switch_1 = dmc.Switch()
input_2a = dmc.TextInput()
input_2b = dmc.TextInput()
switch_2 = dmc.Switch()

fast_button = html.Button("Fast")
store = dcc.Store(id="store")

app = Dash()
app.layout = [
    dmc.MantineProvider(
        [
            slow_button,
            input_1,
            switch_1,
            input_2a,
            input_2b,
            switch_2,
            fast_button,
            store,
        ]
    )
]


@callback(
    output={
        "key_1": {
            "value": Output(input_1, "value"),
            "flag": Output(switch_1, "checked"),
        },
        "key_2": {
            "value": (Output(input_2a, "value"), Output(input_2b, "value")),
            "flag": Output(switch_2, "checked"),
        },
    },
    inputs=[Input(slow_button, "n_clicks")],
)
def slow_callback(n_clicks):
    return some_dict


@callback(
    Output(store, "data"),
    Input(fast_button, "n_clicks"),
)
def fast_callback(n_clicks):
    return some_dict

app.run(debug=True)
4

I found the problem: In my production app, I update the value of a dmc.MultiSelect with 30,000 options. That seems to trigger a lot of JS computation, even though the value update is very simple just as in the MWE.

5

You can always use a limit and searchable to keep the rendering operation down. :slight_smile:

2 Likes