Отписаться от обработчика событий

Question

В компоненте реакции на основе класса вы можете просто сделать;

componentWillUnmount() {
  window.removeEventListener('resize', this.resizeHandler);
}

Хотя я не уверен, как это сделать в компоненте на основе функций с React Hooks?

В моем приложении я выполняю приведенную ниже функцию нажатием кнопки в компоненте LoginCard.

const handleLogin = (email, password) => {
  loginService.login(email, password)
    .then((response) => {
      if (!response.error) {
        props.history.push("/");
      }
    });
}

И я обертываю экспорт LoginCard в функцию withRouter из react-router-dom для перенаправления на адрес маршрута.

export default withRouter(LoginCard);

Внутри компонента LoginCard У меня есть компонент Tabs, в котором прослушиватель событий находится в хуке useEffect.

useEffect(() => {
      setUnderLineStyle(getUnderlineStyle());
      window.addEventListener("resize", _.throttle(() => { 
         setUnderLineStyle(getUnderlineStyle())}, 
         300), 
         {passive:true});
   }, [props]);

Однако, когда я нажимаю эту кнопку в LoginCard и перенаправляем на /, а затем изменяю размер окна, вызывается функция внутри списка событий изменения размера setUnderLineStyle(getUnderlineStyle()).

Я попытался добавить следующее в useEffect, но setUnderLineStyle(getUnderlineStyle()) по-прежнему вызывается при изменении размера.

return () => window.removeEventListener("resize", _.throttle(() => { 
                setUnderLineStyle(getUnderlineStyle())}, 
                300), 
                {passive:true});

Есть идеи? Даже вокруг лучшего способа перенаправления, чтобы добраться до / через react-router-dom или как эффективно отписаться от прослушивателей событий?

Answer 1

Сделайте секунду useEffect исключительно для использования размонтирования.Пустые зависимости в useEffect делают его эффективно функционирующим как componentDidMount, а возвращаемое значение эффективно функционирует как componentWillUnmount.

useEffect({
    // Do mounting stuff here

    return () => {
        // Do unmounting stuff here
    }
}, []);