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 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.