title: React : Run async function after component unmounted but before another component mounts
body: <p>hoping someone can help lead me in the right direction with this or point to me to any docs/learnings that might be helpful.</p>
  <p>I have two React components:<br/>
  <code>&lt;Widget/&gt;</code><br>
  <code>&lt;Modal/&gt;</code></p>
  <p>When <code>&lt;Widget/&gt;</code> mounted, <code>&lt;Modal/&gt;</code> is hidden (and vice-versa) using conditional rendering and the same boolean in my <code>ShowModal</code> state value (this boolean gets switched by a button). I made a simplified CodeSandbox for this example <a href="https://codesandbox.io/s/angry-bash-3iuey?file=/src/App.js" rel="nofollow noreferrer">here</a></p>
  <p>Where I am getting stuck is I have an async function <code>takeScreenShot()</code> which needs to run  <strong>after</strong> <code>&lt;Widget/&gt;</code> is unmounted <strong>completely</strong> and <strong>before</strong> <code>&lt;Modal/&gt;</code>  is mounted. Neither <code>&lt;Widget/&gt;</code> (just unmounted) nor <code>&lt;Modal/&gt;</code> (about to mount) should be visible in the DOM when <code>takeScreenShot()</code> is called. I need to make sure this is the case because I am taking a screenshot of the underlying page where I do not want to include either of the components in this. In my CodeSandbox example the output of my screenshot function would render a the gray background without showing the blue or red box <br></p>
  <p><strong>What I have tried</strong> <br/>
  I have tried running a cleanup function in the <code>useEffect</code> hook in the <code>&lt;Widget/&gt;</code> component like so.</p>
  <pre class="lang-js prettyprint-override"><code> useEffect(() =&gt; {
      return () =&gt; takeScreenShot();
    }, []);
  </code></pre>
  <p>However it doesn't work because the cleanup function, similar to <code>componentWillUnmount()</code> runs right as the component is about to unmount, not <strong>fully</strong> unmounted from the DOM. This causes my screenshot to capture the un-mounting component in the image. Does anyone have an ideas to point me in the right direction on this?</p>