ReactJS render() method called more often than necessary in complex RefluxJS application
|Added at||2016-06-28 20:06|
I have a RefluxJS application which has several stores and a pretty deep component hierarchy. I've tried to make the components very independent, with each connecting to the stores it needs to render; and the stores themselves sometimes call Actions that other stores listen to.
I've found that I get a lot of spurious calls to my components' render() methods, because two stores might listen to the same action, and different components in the hierarchy might listen to those different stores. This is affecting the user experience because sometimes there's a little bit of lag.
Here's some code:
This is way oversimplified (in this example I'd probably just add a loading indicator of some kind), but illustrates the basic issue that you can see the UI sort of transitioning through intermediate states while you're doing things.
How can I improve my React/Reflux design in order to avoid multiple renders triggering from a single interaction?