ReactJS - render called, but DOM not updated

Question

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.

Essentially if I have a condition within my render method which specifies the class for my div:

let divClass = this.state.renderCondition ? 'red' : 'blue';

By default I set renderCondition within my state to false.

If I then define an onClick handler on a button (as follows), and click the button, whilst render IS called, the DOM is NOT updated. That is to say the class does not change.

onClickCompile: function() {

   this.setState({renderCondition: true}, function() {

        synchronousSlowFunction();
   });
}

This seems to have something to do with running slow synchronous code in that if the code is quick and simple the DOM IS updated appropriately.

If I wrap the call to synchronousSlowFunction 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.

Answer 1

Can you share the button onClick code? I might be wrong but this looks like an incorrectly set button onClick listener.

Make sure that onClick callback is defined without (), i.e.

<button onClick={this.something} />

instead of:

<button onClick={this.something()} />

Post more code so we can get a better (bigger) picture