Python Forum

Hi All,

I am new to Dash. I’ve just started working on a dash component library in React. I have encountered a problem when trying to update a component prop from a Dash back-end callback. In order to illustrate my problem I suggest a simple example with a Button and a Div components. The Div needs to display the number of clicks.

I have the below implementation:

app.layout = html.Div(id='wrapper', children = [
    html.Button(id='click-btn', n_clicks = 0, children =  'Click' ),
    html.Div(id='click-result'),
])

@app.callback(Output('click-result', 'children'), [Input('click-btn', 'n_clicks')])
def click_btn_handler(n_clicks):
    if n_clicks != 0:
        time.sleep(5)
        return n_clicks

I am clicking the button four times. Let’s say the interval between clicks is ~1 second. I can see that dash-renderer makes four requests to call my callback and then updates the Div’s children prop. As a result, the Div component is being updated only with the response from the last request - “children” is only being set to 4.

I suppose, probably for optimization purposes, dash-renderer ignores the previous three requests and waits for response only from the last one. However, I want my components to be updated with all responses that are returned from Dash callbacks. My components have functional purpose. They are supposed to execute some JavaScript logic and communicate with the back-end.

I would like to know, if there is a way to achieve this, or some workaround. I have searched to find whether this behavior is configurable for example, but I found nothing.

Thanks