Repository navigation
Infinite Looping using Store as an Input for a layout generator function #745
Description
Is your feature request related to a problem? Please describe.
Using a Store leads to Infinite loops in Callbacks.
I'm trying to create something like https://codepen.io/mau5FN/pen/FGAsa, in which the current state of the array [{name, year}] is stored in a dcc.Store.
I have a function using this store as an Input that generates the appropriate children for another element.
I'm running into an infinite loop where an update to either the name or year fields triggers an update to the Store data, which then triggers a re-render, which triggers the initial Store dropdown value update, and so on.
I can try to make a minimal repro later, but in essence:
app.layout
dcc.Store(id='store', data=[])
html.Div(children=[], id='generated-content')
generate callback
@app.callback(
Output('generated-content', 'children'),
[Input('store', 'data')]
)
def generate_layout(data):
return [html.Div([
dcc.Dropdown(id=f'er-year-dropdown-{idx}', value=item['year']),
dcc.Button(id=f'er-add-button-{idx}'),
dcc.Button(id=f'er-remove-button-{idx}'),
]) for idx, item in enumerate(data)]
# plus some code for filling out data up to the length for callback declaration purposes
update callback
@app.callback(
Output("store", "data"),
[
Input(f"er-{key}-{idx}", value)
for idx in range(5)
for key, value in {
"add-button": "n_clicks",
"remove-button": "n_clicks",
"year-dropdown": "value",
}.items()
],
[State("store", "data")],
)
def er_add_row(*args):
ctx = dash.callback_context
data = ctx.states.get("store.data")
action = re.search("er-(.*)-\d+", ctx.triggered[0]["prop_id"]).group(1)
idx = int(re.search("(\d+)", ctx.triggered[0]["prop_id"]).group(1))
if action == "add-button":
if ctx.triggered[0]["value"] is not None and len(data) < ITEMS_LIMIT:
data.append({"year":2019 })
elif action == "remove-button":
if ctx.triggered[0]["value"] is not None:
del data[idx]
elif action == "year-dropdown":
if (
ctx.triggered[0]["value"] is not None
and ctx.triggered[0]["value"] != data[idx]["year"]
):
data[idx]["year"] = ctx.triggered[0]["value"]
return data
Describe the solution you'd like
I would like a way to specify on a component a property that prevents the callback on render. Alternatively, maybe first class memoization support where it does not trigger the callback if no data has changed in any of the inputs
Describe alternatives you've considered
I tried memoization, but that only caches the return value rather than skipping the callback
Activity
mmartinsky commentedon May 24, 2019
Using #680
dash.no_updatewas a godsend.See https://github.com/plotly/dash/pull/680/files#diff-7eb47fc18d4a6196f0940784484a5bf3R175 for example usage
[-][Feature Request][/-][+]Infinite Looping using Store as an Input for a layout generator function[/+]