Fast callback - slow rendering. What is the problem?

Dash Python
11

Hi @CSS_Fanboy

The second callback looks odd. Why have the same input and output for items checked?

Try running this (it’s much faster). It still gets a little slow when there are more than 500, but this should be OK for your use case of about 260.


import dash
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Output, Input, ALL

app = dash.Dash(__name__, title="dummy")

app.layout = html.Div(
    children=[
        html.Div(id="output"),
        html.Button("Click me", id="btn"),
        html.Div(id="main-container"),
    ]
)

@app.callback(Output('main-container', 'children'),
    Input('btn', 'n_clicks'), prevent_initial_call=True)
def btn_clicked(n_clicks):
    container_elements = []
    for i in range(150):
        container_elements.append(dbc.Row(children=[
            dbc.Col(children=dbc.FormGroup(children=[
                dbc.Checkbox(id={'role': 'leading-business-partner-checkbox', 'index': i}, checked=False, className='custom-control-input', disabled=False),
                dbc.Label(children='Item #{}'.format(i), className='form-check-label custom-control-label big-checkbox ml-5 mt-1',
                          html_for='{{"index":{},"role":"leading-business-partner-checkbox"}}'.format(i))],
                className='custom-control custom-checkbox'), className='bg-light', width=1)],
            align='center', className='mb-2 border border-primary rounded large-font-size'))

    return container_elements


@app.callback(
    Output("output", "children"),
    Input({"role": "leading-business-partner-checkbox", "index": ALL}, "checked"),
)
def leading_business_partner_checkbox_items(items_checked):
    return html.Div(
        [
            f"  item# {i} is checked"
            for (i, checked) in enumerate(items_checked)
            if checked
        ]
    )


if __name__ == "__main__":
    app.run_server(host="0.0.0.0", debug=True)