✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚾️ It's finally Baseball season! Root for the home team... & Register for our Sports Analytics Webinar!

On creating 100 new buttons dynamically, all callbacks assigned to them fire without being pressed

Hi all,
I’m creating a dynamic layout that has 100 buttons, each button connected to a different output div. My issue is that just on creating the button, it fires its callback, calling 100 callbacks in succession. This slows the whole thing down a bit. I would like it to be fired only when user presses the button. I might end up having 500 buttons or links in the final app.

How can I avoid this?

My callback header is:

app.callback(
Output(f"details_div_{i}", ‘children’),
[Input(f"button-{i}", ‘n_clicks_timestamp’),
Input(f"button-{i}", ‘name’)], [State(‘url’, ‘search’)])(
generate_detail_callback(i)
)

As a result, it causes an extra delay of 800ms until the page is loaded on a local machine, which almost doubles the time. See the chrome network calls for dash_update_component calls below.
Over a slower latency connection, this can be even worse.

thanks.