title: Multiple setState queues up and causes everything to feel slow
body: <p>I have a ReactJS menu component with 4 buttons which triggers the right-hand side of my page and a bunch of filters to reload on click.</p>
  
  <pre><code>render: function() {
      return (
          &lt;div className="menu"&gt;
              {
                  this.state.items.map(function(menuNode) {
                      return (
                          &lt;MenuItem item={menuNode} onClick={this.handleClick} key={menuNode.name} /&gt;
                      );
                  }, this)
              }
          &lt;/div&gt;
      );
  },
  handleClick: function(selected) {
      this.state.items.forEach(function(item) {
          item.selected = false;
      });
      selected.selected = true;
      this.setState({
          items: this.state.items
      });
  
      resetReact.BoxStructure(selected);
      resetReact.Filter(selected);
  }
  </code></pre>
  
  <p><code>resetReact.BoxStructure()</code> and <code>resetReact.Filter()</code> triggers a <code>setProps()</code>/<code>setState()</code> with new content in my page (BoxStructure) and filter components.</p>
  
  <p>They are set in <code>componentDidMount</code> on each of those components like so:</p>
  
  <pre><code>var BoxStructure = React.createClass({
  
      ...
  
      componentDidMount: function() {
          if(this.props.callback)
              this.props.callback();
  
          resetReact.BoxStructure = function(selected) {
              this.state.boxes = selected.content;
              this.setProps({
                  color: selected.color,
                  callback: selected.callback,
                  key: selected.name
              });
          }.bind(this);
  }
  });
  </code></pre>
  
  <p>This works, but the menu feels really slow and it's like it's waiting for the entire page to load before it changes selected menu item. BoxStructure is taking several seconds to load, which is fine and expected, but I don't want the menu to wait for that before it changes the selected item. From a user perspective it feels like nothing happened when I clicked the button.</p>
  
  <p>This can be solved by adding <code>setTimeout</code> 1ms:</p>
  
  <pre><code>handleClick: function(selected) {
      this.state.items.forEach(function(item) {
          item.selected = false;
      });
      selected.selected = true;
      this.setState({
          items: this.state.items
      });
      setTimeout(function() {
          resetReact.BoxStructure(selected);
          resetReact.Filter(selected);
      }, 1);
  }
  </code></pre>
  
  <p>Now the menu changes instantly and then the page may take as long as it likes to render, just the way I want it to, but the question is why and am I doing something fundamentally wrong? I think <code>setTimeout</code> is forcing reloading to be asynchronous, but I get the feeling it's not the right way to achieve what I want and maybe ReactJS have a better way built in somewhere.</p>