How to clear the timer when the component is dismantled?

Question

React

Hi all!

I have a component written using React Hooks .
When you click on it, it starts a timer.
I want to stop this timer when the component is dismantled. I use useEffect
for this . The code is something like this:

function MyComponent() {
  const [timer, setTimer] = useState()
  
  useEffect(() => {
    return () => clearTimeout(timer) // timer всегда undefined
  }, [])
  
  return <a onClick={() => {
    setTimer(setTimeout(() => alert("Hi"), 5000))
  }}>Link</a>
}

Of course, the code doesn't work, because the function returned from useEffect has timer , which is undefined .

Question:
How to stop the timer when the component is dismantled?

Answer 1

useEffect(() => () => clearTimeout(timer), [ timer ]);