Experimental Dash Cycle Breaker (to help with syncing two components)

Dash Python
1

Cycles are a persistent issue with more complex dash apps (at least for me). The primary use case is generally to sync the state of two (or more) components. There are a couple of solutions to this, but it can make your callback layouts fairly complicated.

I propose a DashCycleBreaker component which makes this easier. I have created an experimental version here: https://github.com/BusinessOptics/dash-circuit-breaker .

To run it do the usual:

  • create a venv,
  • install requirements,
  • npm run build
  • python usage.py

The basic idea is that the component has two props, input and output. When the input is changed it will fire an update on the output with the same value (if input and output are different).

This allows you to escape the cycle detection and create an eventually consistent state by creating call backs that map as below:

inputA:value → breaker:input
breaker:output → inputB:value
inputB:value → inputA:value

It does this by abusing the react component lifecycle, the code is very simple and the core is below:

export default class DashCycleBreaker extends Component {
    render() {
        return null;
    }

    componentDidUpdate() {
        const {input, output, setProps} = this.props;
        if (output != input) {
            setProps({output: input});
        }
    }
}

This seems to work fine. But obviously is abusing the lifecycle of both React and Dash.

My question is, given the lifecycle abuse, can you see an obvious (or non-obvious) issue with this approach? It seems like it would make a bunch of use cases a lot simpler. Though obviously should be used with care.

1 Like