Как очищать таймер при демонтировании компонента?

Question

[J. Snow]

Привет всем!

У меня есть компонент, написанный с использованием React Hooks.
При клике на него он запускает таймер.
Я хочу останавливать этот таймер при демонтировании компонента.
Использую для этого useEffect.

Код примерно такой:

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

Разумеется, код не работает, потому что в функции, возвращаемой из useEffect, заключена переменная timer, равная undefined.

Вопрос:
Как останавливать таймер при демонтировании компонента?

Answer 1

[0xD34F]

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

Comments

[J. Snow]

Действительно :)