title: ReactJS concurrent SetState race condition
body: <p>I have a component structure like this</p>
  
  <pre><code>&lt;A&gt;
      &lt;B&gt;
          &lt;C/&gt;
          &lt;C/&gt;
      &lt;/B&gt;
      &lt;D&gt;
         &lt;E/&gt;
         &lt;E/&gt;
      &lt;/D&gt;
  &lt;/A&gt;
  </code></pre>
  
  <p>Idea is that actions on components in block E are processed by a function of component A to state of A and than passed down to B and C as props. I know, that better way was to use Flux, pubsub-js or other Store-message system, but hope if someone can explain why correct to the best of my understanding solution doesn't work.</p>
  
  <p>Calling this function of component A simalteneously from multiple instances of component E leads to race condition with only one change in state (instead of each function call providing a change)</p>
  
  <pre><code>updateState(value,index){
     this.setState(update(this.state, {
          a: {
            [index]: {
              b: {
               $set: value
              }
            }
          }
      })
  );
  }
  </code></pre>
  
  <p>Function update here comes from</p>
  
  <pre><code>import update from 'react/lib/update';
  </code></pre>
  
  <p>Bad solution that goes against ReactJS reccomended practices, but works well:</p>
  
  <pre><code>updateState(value,index){
     this.state.a[index].b=value;
     this.forceUpdate();
  );
  }
  </code></pre>
  
  <p>My question is:</p>
  
  <p>Is it a bug, that multiple simalteneous setState invokes a race condition, or I'm doing something wrong without understnding it?</p>