title: Update state in react - big change in DOM works with delay
body: <p>I render in my app transcription lines, 100 on average.
  There is an option to translate the transcription lines.
  Clinking a button toggles between show translation and not showing translation.
  When I click on it, there is a delay of 1-2 seconds that the site gets stuck, then the change happens...</p>
  <p>Anyone knows a better way to update a big change of state in react (with mobx)?</p>
  <p>Somehow I managed to control the stuckness with setTimeout, but I don't believe this is the way...</p>
  <p>Thanks!</p>
  <pre><code>const updateStateWithTimeout = async (time: number, requestForTranscript?: boolean) =&gt; {
  requestForTranscript &amp;&amp; await getTranscriptionsTranslations(sessionId!);
  
  setTimeout(async () =&gt; {
    requestForTranscript &amp;&amp; await loadCallLogDataForTranslation(sessionId!);
    setShowTranslation(!showTranslations);
    setIsLoadingTranslations(false);
  }, time)}
  
  const handleTranslateButton = async () =&gt; {
      setIsLoadingTranslations(true);
      if (language?.includes(&quot;en&quot;)) {
        ToastUtil.error(&quot;The language of the call is English&quot;);
        return;
      }
  
      if (online) await showTranslationOnlineCall();
      else {
        if (hasTranslations) await updateStateWithTimeout(1000);
        else await updateStateWithTimeout(3000, true);
      }
  }
  </code></pre>