如何在 setState 之后在 React 中强制立即更新 DOM（即提交）？

Question

I have a React component with a button (displaying "Load Data") and several child components that each take an array of data and graph them and are relatively slow to render (Highcharts).

The button, when clicked, needs to do the following:

1. Change the text from 'Load Data' to 'Loading...' (based on this.state.isLoadingData)
2. Pass empty array to the child components (so they clear the last loaded data)
3. Send request to server to get data
4. When response received, pass server data to the child components (so they chart the new data)

This is done as follows:

// Make button show "Loading Data..."
this.setState( { isLoadingData: true } ); // I want DOM to update immediately after this
// Clear charts in child components
this.setState( { data: [] }, this.loadDataFromServer ); // This causes child components to re-render (a bit slow)

this.loadDataFromServer will do the following:

// Chart the new data in child components
this.setState( { data: newData, isLoadingData: false });

What ends up happening is that the button and child components are updated at the same time and this introduces a perceptible UI delay for when the button goes from "Load Data" to "Loading...". It appears to me that although render() is called after each of the setStates (console.log() proves this), React batches the actual DOM commits so that the DOM is only updated after both of the two setStates are done.

Any suggestions?

Note that the batching of the setStates themselves are not the issue as I have even tried this without any effect on the main issue:

this.setState( { isLoadingData: true }, () => {
  this.setState( { data: [] }, this.loadDataFromServer )
}

Answer 1

By experimentation I have found that using a setTimeout (even with 0 delay) results in React committing to the DOM in the way I want. ie

this.setState( { isLoadingData: true } );
setTimeout(() => {
  this.setState( { data: [] }, this.loadDataFromServer )
}, 0);

Answer 2

why not set the data to empty array and set isLoadingData to true simultaneously.Then the next step: this.loadDataFromServer just like this

    this.setState( { isLoadingData: true,data: []  } ); 
    setTimeout(() => {
     this.loadDataFromServer
    }, 0)