Question: ReactJS render() method called more often than necessary in complex RefluxJS application

Question

ReactJS render() method called more often than necessary in complex RefluxJS application

Answers 0
Added at 2016-06-28 20:06
Tags
Question

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:

var Actions = Reflux.createActions(['changeUser']);
Actions.changeUser.preEmit = () => console.log('Action emit: changeUser');

var UserStore = Reflux.createStore({
  listenables: [Actions],

  onChangeUser(user) {
    this.trigger(user);
  }
});

var MessageStore = Reflux.createStore({
  listenables: [Actions],

  onChangeUser(user) {
    setTimeout(() => {
      // pretend we had to go to an API or something to get this
      var message = "Welcome to the app!";
      this.trigger(message);
    }, 500);
  },
});

var App = React.createClass({
  mixins: [Reflux.connect(UserStore, 'user')],

  render() {
    console.log('Component render: App');

    if (!this.state.user) {
      return (
        <button onClick={() => Actions.changeUser('Some User')}>
          Click to make stuff happen
        </button>
      );
    }

    return (
      <div>
        <div>Hello, {this.state.user}.</div>
        <Message / >
      </div>
    );
  }
});

var Message = React.createClass({
  mixins: [Reflux.connect(MessageStore, 'message')],

  render() {
    console.log('Component render: Message');

    return <div>Your message: {this.state.message}</div>;
  }
});

ReactDOM.render( <App/> , document.getElementById('app'));

Fiddle: https://jsfiddle.net/9xwnxos6/

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?

Answers to

ReactJS render() method called more often than necessary in complex RefluxJS application

Source Show
◀ Wstecz