title: Loading the component on react js
body: <p>I was working with Single-Page App on React, and I got a problem with function so it takes some time to return the results and render it. With that I want to ask if I can change it as asynchronous function to get the result after it returns, but other components would not stuck as well.</p>
  <p>I may misunderstand how it should work but here is the basic example of my problem:</p>
  <pre><code>class Example extends React.Component {
  
    state = {
      data: &quot;whatever&quot;
    }
  
    myHeavyFunction(data){
      //while this function works whole page on browser freezes for 3-5 second
      return (&lt;div&gt;{result}&lt;/div&gt;);
    }
  
    buttonClicked(){
      this.setState({data: &quot;new whatever&quot;});
    }
  
    render(){
      return(
        &lt;div&gt;{this.myHeavyFunction(this.state.data)}&lt;/div&gt;
      );
    }
  
  }
  </code></pre>
  <p>I didn't use any API request, it's just a function which works with big data.
  In my case &quot;myHeavyFunction&quot; is a different component and I've tried to use React.lazy/Suspense but unfortunately it loads only when you refresh the page.</p>
  <p>So I want the function which renders asynchronously with loading spinner after I click the button so the page doesn't refreshes and other components wouldn't freeze.</p>