How can I wait a heavy function in method of React component with showing spinner?

Question

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>
    );
  }
}

Answer 1

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
        });
    });
}