Using cleanup function in React UseEffect-CodePudding

In my app there is a navbar that pops down after the user scrolled to a certain point. I use two separate navbars and define the current scroll position like this:

 const newNavbar = () => {
      if (window !== undefined) {
        let posHeight_2 = window.scrollY;
        posHeight_2 > 112 ? setNewNav(!newNav) : setNewNav(newNav)
      }
    };

  const stickNavbar = () => {
    if (window !== undefined) {
      let windowHeight = window.scrollY;
      windowHeight > 150 ? setSticky({ position: "fixed", top: "0", marginTop:"0", transition: "top 1s"}) : setSticky({});
    }
  };
  const scrollPos = () => {
    if (window !== undefined) {
      let posHeight = window.scrollY;
      posHeight > 112 ? setScroll(posHeight) : setScroll(0)
    }
  };

Current states are managed by useState and given to a class, which is triggered by the changing scroll position:

 const [scroll, setScroll] = useState(0);
 const [newNav, setNewNav] = useState (false)
 const [sticky, setSticky] = useState({});

 const navClass = newNav ? 'menu-2 show' : 'menu-2'
 <Navbar className={navClass}> 
  //
 </Navbar>

finally UseEffect to make use of the states:

 React.useEffect(() => {
      window.addEventListener('scroll', stickNavbar);
      return () => window.removeEventListener('scroll', stickNavbar);
    }, []);
  
  React.useEffect(() => {
      window.addEventListener('scroll', scrollPos);
      return () => window.removeEventListener('scroll', stickNavbar);
      }, []);
  
  React.useEffect(() => {
      window.addEventListener('scroll', newNavbar);
      return () => window.removeEventListener('scroll', newNavbar);
      }, []);

However my cleanup functions are not working, I get the error Warning: Can't perform a React state update on an unmounted component.

CodePudding user response：

Your second useEffect contains a copy/paste error.
It should remove scrollPos (since that's what you bound), not stickNavbar.

Because of this scrollPos listener is not removed, which causes an error on the next scroll event, as the bound function no longer exists after the component is removed from DOM.