title: React.js having state based on other state
body: <p>I'm running into some problems with React.js and the state not being immediately set when calling setState().  I'm not sure if there are better ways to approach this, or if it really is just a shortcoming of React.  I have two state variables, one of which is based on the other. (Fiddle of original problem: <a href="http://jsfiddle.net/kb3gN/4415/">http://jsfiddle.net/kb3gN/4415/</a> you can see in the logs that it's not set right away when you click the button)</p>
  
  <pre><code>setAlarmTime: function(time) {
    this.setState({ alarmTime: time });
    this.checkAlarm();
  },
  checkAlarm: function() {
    this.setState({
      alarmSet: this.state.alarmTime &gt; 0 &amp;&amp; this.state.elapsedTime &lt; this.state.alarmTime
    });
  }, ...
  </code></pre>
  
  <p>When calling <code>setAlarmTime</code>, since <code>this.state.alarmTime</code> isn't updated immediately, the following call to <code>checkAlarm</code> sets <code>alarmSet</code> based on the previous value of <code>this.state.alarmTime</code> and is therefore incorrect.</p>
  
  <p>I solved this by moving the call to <code>checkAlarm</code> into the callback of <code>setState</code> in <code>setAlarmTime</code>, but having to keep track of what state is actually 'correct' and try to fit everything into callbacks seems ridiculous:</p>
  
  <pre><code>setAlarmTime: function(time) {
    this.setState({ alarmTime: time }, this.checkAlarm);
  }
  </code></pre>
  
  <p>Is there a better way to go about this?  There are a few other places in my code which I reference state I just set and now I'm unsure as to when I can actually trust the state!</p>
  
  <p>Thanks</p>