Black Lives Matter. Please consider donating to Black Girls Code today.

Cycle Dependency

Hey,

Ive seen that there is a topic on this form a year ago. I want to roll this out again tho.
Is it possible to have 2 Components listen to eachother, without having an infinite callback loop?

React is premised on a one-way flow of data, which makes this problem tricky. My preferred way to deal with it is to put mutually dependent nodes A and B in some container (we’ll call it Foo) and write the callback like so:

@app.callback(dash.dependencies.Output('Foo', 'children'),
                        [dash.dependencies.Input('A', 'value'),
                         dash.dependencies.Input('B', 'value')])
def update_a_and_b(a, b):
   # do stuff
   return [a, b]

This way the function will be called whenever A or B update, returning new nodes in their place. [N.B. - should probably clarify yes that means you will have to return two new nodes, since the target for this callback is the children property of A & B’s parent container – not those nodes’ value attribute. I have a framework that resolves situations like this automatically and intend to share it soon, but it’s not quite ready for primetime :slightly_smiling_face:)] There’s a performance cost to this, but it’s nominal.