title: how to trigger an event after component did mount with react hooks
body: <p>When a user clicks a button, a component is supposed to be mounted, once the component is mounted, <code>window.print()</code> is supposed to be run and then the component is supposed to be unmounted again.</p>
  <p>With component lifecycles this was easy but with hooks I am not sure how to solve this.</p>
  <pre><code>export default function App() {
    const [showCmp, setShowCmp] = useState(false);
  
    const handleClick = () =&gt; {
      setShowCmp(true);
  
      window.print();
  
      setShowCmp(false);
    };
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;h1&gt;Hello CodeSandbox&lt;/h1&gt;
        &lt;h2&gt;Start editing to see some magic happen!&lt;/h2&gt;
        {showCmp &amp;&amp; &lt;Cmp1 /&gt;}
        &lt;button onClick={handleClick}&gt;Click me&lt;/button&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>I tried using <code>useEffect</code> but it didn't work:</p>
  <pre><code>useEffect(() =&gt; {
          if (showCmp) window.print();
  }, [showCmp]);
  </code></pre>
  <p>here is a <a href="https://codesandbox.io/s/cool-shape-t9l0f?file=/src/App.js" rel="nofollow noreferrer">sandbox</a></p>
  <p>how do I determine when the component is mounted correctly?</p>