Does Patch work in this case?

Dash Python
1

hello Teachers!!

I’d like to make a button to add a row

when it already has many rows it takes so long
so I’m trying to use Patch…
Help me please…
!!

from dash import Dash, html, dcc, Input, Output,State, Patch, callback

app = Dash(__name__)

lst = [1] * 10000
app.layout = html.Div(
    [
        html.Button('add text ', id='btn'),
        html.Div([html.H3(i) for i in lst[::-1]],id='output_div')
    ]
)

@callback(
    Output("output_div", "children"),
    Input("btn", "n_clicks"),
)
def add_rows(n_clicks):
    p = Patch()
    p.insert(0,{'props': {'children': n_clicks}, 'type': 'H3', 'namespace': 'dash_html_components'})
    return p


if __name__ == "__main__":
    app.run(debug=True)
2

Hi @nicobockko !

I guess that’s the right way to do :+1:
but why not simply p.insert(0, html.H3(n_clicks))

I thing it is more a rendering issue, it’s slow because you insert the new component in the first place and every H3 has to re-render. If you add it at the end it is quicker…
But if you need to add it first, how to do it more efficiently :frowning_face:

Maybe someone else will :crossed_fingers: