title: ReactJS - render called, but DOM not updated
body: <p>This has happened to me a few times. I have always managed to work around the issue, yet I am still intrigued to understand why this happens, and what I have missed.</p>
  
  <p>Essentially if I have a condition within my <code>render</code> method which specifies the class for my <code>div</code>:</p>
  
  <pre><code>let divClass = this.state.renderCondition ? 'red' : 'blue';
  </code></pre>
  
  <p>By default I set <code>renderCondition</code> within my state to false.</p>
  
  <p>If I then define an <code>onClick</code> handler on a button (as follows), and click the button, whilst render <strong>IS</strong> called, the DOM is <strong>NOT</strong> updated. That is to say the class does not change. </p>
  
  <pre><code>onClickCompile: function() {
  
     this.setState({renderCondition: true}, function() {
  
          synchronousSlowFunction();
     });
  }
  </code></pre>
  
  <p>This seems to have something to do with running slow synchronous code in that if the code is quick and simple the DOM <strong>IS</strong> updated appropriately.</p>
  
  <p>If I wrap the call to <code>synchronousSlowFunction</code> in a 500 millisecond timeout, everything works as expected. I would however like to understand what I have misunderstood such that I do not need this hack.</p>