How can the `useEffect` hook (or any other hook for that matter) be used to replicate `componentWillUnmount`?


In a traditional class component I would do something like this:

```jsx
class Effect extends React.PureComponent {
    componentDidMount() { console.log(&quot;MOUNT&quot;, this.props); }
    componentWillUnmount() { console.log(&quot;UNMOUNT&quot;, this.props); }
    render() { return null; }
}
```

With the `useEffect` hook:

```jsx
function Effect(props) {
  React.useEffect(() =&gt; {
    console.log(&quot;MOUNT&quot;, props);

    return () =&gt; console.log(&quot;UNMOUNT&quot;, props)
  }, []);

  return null;
}
```
(Full example: https://codesandbox.io/s/2oo7zqzx1n)

This does not work, since the &quot;cleanup&quot; function returned in `useEffect` captures the props as they were during mount and not state of the props during unmount.

How could I get the latest version of the props in `useEffect` clean up *without* running the function body (or cleanup) on every prop change?


A similar [question][1] does not address the part of having access to the latest props.

The [react docs][2] state:

&gt; 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.


In this case however I depend on the props... but only for the cleanup part...


  [1]: https://stackoverflow.com/questions/55020041/react-hooks-useeffect-cleanup-for-only-componentwillunmount
  [2]: https://reactjs.org/docs/hooks-effect.html

All React Lifecycle Solutions on Gang of Coders

Total of 1 React Lifecycle Solutions

componentWillUnmount with React useEffect hook