Prevent callback execution for dynamically added components

I have developed a multi-page Plotly Dash application. In my app many UI components are created dynamically. According to the Dash documentation, it is possible to prevent callbacks from being executed when the app is first loaded by setting prevent_initial_call=True for specific callbacks. However, this only works if all input and output components are present in the main app layout. When input/output components are created dynamically, the prevent_initial_call parameter does not work, and the callbacks are triggered as soon as the components are created. This can make the Dash app slow, as many callbacks are triggered when components are created dynamically.

Is there a workaround to prevent these callbacks from being triggered when dynamically added components are created?

You could check for some input or a state and add in some logic to utilize dash.no_update

1 Like

Hi @Vah , I experienced the same issue today. I created a brand-new DataTable through a callback. The DataTable did not exist in initial layout. As a result, it could not be accessed in any callback.

I hacked it by keeping a html.Div(id='table') in my initial layout, accessing that div in my callback, and accessing table['props']['derived_virtual_data'] within the callback.

I figured out my desired input would be table['props']['derived_virtual_data'] by printing the entire table within my callback.