title: componentWillUnmount with React useEffect hook
body: <p>How can the <code>useEffect</code> hook (or any other hook for that matter) be used to replicate <code>componentWillUnmount</code>?</p>
  
  <p>In a traditional class component I would do something like this:</p>
  
  <pre><code>class Effect extends React.PureComponent {
      componentDidMount() { console.log("MOUNT", this.props); }
      componentWillUnmount() { console.log("UNMOUNT", this.props); }
      render() { return null; }
  }
  </code></pre>
  
  <p>With the <code>useEffect</code> hook:</p>
  
  <pre><code>function Effect(props) {
    React.useEffect(() =&gt; {
      console.log("MOUNT", props);
  
      return () =&gt; console.log("UNMOUNT", props)
    }, []);
  
    return null;
  }
  </code></pre>
  
  <p>(Full example: <a href="https://codesandbox.io/s/2oo7zqzx1n" rel="noreferrer">https://codesandbox.io/s/2oo7zqzx1n</a>)</p>
  
  <p>This does not work, since the "cleanup" function returned in <code>useEffect</code> captures the props as they were during mount and not state of the props during unmount.</p>
  
  <p>How could I get the latest version of the props in <code>useEffect</code> clean up <em>without</em> running the function body (or cleanup) on every prop change?</p>
  
  <p>A similar <a href="https://stackoverflow.com/questions/55020041/react-hooks-useeffect-cleanup-for-only-componentwillunmount">question</a> does not address the part of having access to the latest props.</p>
  
  <p>The <a href="https://reactjs.org/docs/hooks-effect.html" rel="noreferrer">react docs</a> state:</p>
  
  <blockquote>
    <p>If you want to run an effect and clean it up only once (on mount and unmount), you can pass an empty array ([]) as a second argument. This tells React that your effect doesn’t depend on any values from props or state, so it never needs to re-run.</p>
  </blockquote>
  
  <p>In this case however I depend on the props... but only for the cleanup part...</p>