Using cleanup function in React UseEffect

Question

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.

a.h.g. · Accepted Answer · 2022-04-06 21:24:34Z

1

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.

answered Apr 6, 2022 at 21:24

a.h.g.

1,6646 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using cleanup function in React UseEffect

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related