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.


Show source
| javascript   | reactjs   | dom   2017-01-05 18:01 0 Answers

Answers to ReactJS - render called, but DOM not updated ( 0 )

Leave a reply to - ReactJS - render called, but DOM not updated

◀ Go back