при использовании реагировать useEffect мое приложение падает

Question

Я изменяю компонент класса на функциональный компонент и использую перехватчики и useEffect, так что мое приложение становится действительно медленным и разрушается без ошибок

import React, { useState, useEffect } from 'react';
import Toolbar from '@material-ui/core/Toolbar';

const FancyToolBar = ({ children }) => {
  const [backGround, togglebackGround] = useState('white');
  const listenScrollEvent = () => {
    if (window.scrollY > 80) {
      togglebackGround('black');
    } else {
      togglebackGround('white');
    }
  };
  useEffect(() => {
    window.addEventListener('scroll', listenScrollEvent);
  });
  const logo = backGround === 'white'
    ? <img src="/images/1.jpg" alt="" style={{ width: '50px !important', height: '50px' }} />
    : <img src="/images/2.png" alt="" style={{ width: '50px !important', height: '50px' }} />;
  return (
    <Toolbar style={{ backgroundColor: backGround }}>
      {logo}
      {children}
    </Toolbar>
  );
};


export default FancyToolBar;

Answer 1

Есть две вещи, к которым вам нужно обратиться.

Первое: вам нужно очистить eventListener.

Второе: только добавьте прослушиватель событий при первоначальном монтировании, добавив [] в качестве второго параметра для использованияEffect

useEffect(() => {
    window.addEventListener('scroll', listenScrollEvent);
    return () => {
      window.removeEventListener('scroll', listenScrollEvent);
    }
  }, []);

Answer 2

Извините, ребята, я просто забыл добавить очистку в мой эффект