I want to show message "calculating..." during a heavy synchronous calculation in the React Component's method.
Here is my code.
But it doesn't works.
I want React to call render() both after first setState and second setState.
But React call it only after second setState.
How can I switch this.state.calculating properly?
// note: this is not async function
function myHeavyFunc() {...}
class Foo extends React.Components {
constructor(props) {
super(props);
this.state = {calculating: false}
this.handleXX = this.handleXX.bind(this);
}
handleXX() {
this.setState({calculating: true}, () => { // first setState
new Promise((resolve, reject) => {
const x = myHeavyFunc();
resolve(x);
}).then(x => {
this.setState({calculating: false}); // second setState
});
});
}
render() {
const y = this.state.calculating? <p>calculating...</p> : '';
return (
<div>
{y}
<button onClick={this.handleXX}>start calc</button>
</div>
);
}
}
After finishing your calculation, you should set the "calculating" state variable back to "false" instead of "true":
handleXX() {
this.setState({calculating: true}, () => { // first setState
new Promise((resolve, reject) => {
const x = myHeavyFunc();
resolve(x);
}).then(x => {
this.setState({calculating: false}); // second setState
});
});
}
This is because js is single thread.
Only in such case, you can use setTimeout to give a time to update UI to show "calculating..." and then call myHeavyFunc.
More general solution is using startTrantision which is available in React 18.
Webworker may olso solve this.