Fast callback - slow rendering. What is the problem?

Dash Python
13

Hi @jianqiao and @CSS_Fanboy

Try changing the ALL to MATCH in the callback. It’s much much faster. Even with 5000 items, the initial render is a little slow, but the callback to display the button has no lag:

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

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

app.layout = html.Div(children=[
    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(500):
        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),
            dbc.Col(dbc.Button("Button for item #{}".format(i), id={'role': 'show-item-btn', 'index': i},
                           style= {'display': 'none'}), width=1)],
            align='center', className='mb-2 border border-primary rounded large-font-size'))

    return container_elements


@app.callback(Output({'role': 'show-item-btn', 'index': MATCH}, 'style'),
              Input({'role': 'leading-business-partner-checkbox', 'index': MATCH}, "checked"),
              prevent_initial_call=True)
def leading_business_partner_checkbox_items(checked):
    return None if checked else {'display': 'none'}

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