Phoenix channel data to redux - poor performance

I am banging my head against the wall for the last 2 days trying to understand why dispatching redux actions from phoenix channels suffers so much in performance… Here is mock code:

topics.on('go', payload => {
  for (let i = 0; i < 200; i++) { 
    this.props.dispatch({ type: 'GO',
       payload: {
         tree: { name: payload.tree.name },
         keyword: { keyword: i },
       },
     });
  }
});

This takes ~5s, same loop outside “channel listener” takes like 0.1s.

In production code there is no for-loop, but there are ~500 events coming via channel in 1-2s burst, which pretty much hangs the browser for a minute or two. What am I missing?

1 Like

No idea off the top of my head, have you tried any of the techniques here http://benchling.engineering/deep-dive-react-perf-debugging/ ?

2 Likes

Thanks, trying to further debug it now but problem seems to be with: this.conn.onmessage function:

https://github.com/phoenixframework/phoenix/blob/master/web/static/js/phoenix.js#L621

I am not a Redux person, and I’ve only touched channels briefly, and I can only see a small window of your code…but I wanted to throw out there - is there any handling of your redux actions that trigger messages on the channel that would be recursively (but not infinitely) be triggering the looped handler? In other words, do you have a finite feedback loop that is causing a jittery bounce that delays resolving the state?

Action -> client does something -> publishes message to channel -> gets broadcasted -> causes action handler -> repeat until no responsive actions called.

1 Like