How can we implement componentWillUnmount using react hooks?

componentWillUnmount can be simulated by returning a function inside the useEffect hook. The returned function will be called just before every rerendering of the component. Strictly speaking, this is the same thing but you should be able to simulate any behaviour you want using this.

useEffect(() => {
  const unsubscribe = api.createSubscription()
  return () => unsubscribe()
})

Update

The above will run every time there is a rerender. However, to simulate the behaviour only on mounting and unmounting (i.e. componentDidMount and componentWillUnmount). useEffect takes a second argument which needs to be an empty array.

useEffect(() => {
  const unsubscribe = api.createSubscription()
  return () => unsubscribe()
}, [])

See a more detailed explanation of the same question here.

The question here is how do you run code with hooks BEFORE unmount? The return function with hooks runs AFTER unmount and whilst that doesn’t make a difference for most use cases, their are some where it is a critical difference.

Having done a bit of investigation on this, I have come to the conclusion that currently hooks simply does not provide a direct alternative to componentWillUnmount. So if you have a use case that needs it, which is mainly for me at least, the integration of non-React libs, you just have to do it the old way and use a component.

Update: see the answer below about UseLayoutEffect() which looks like it may solve this issue.

Since the introduction of the useLayoutEffect hook, you can now do

useLayoutEffect(() => () => {
  // Your code here.
}, [])

to simulate componentWillUnmount. This runs during unmount, but before the element has actually left the page.