CODEWITHSUNDEEP
javascriptreactjseventsremoveeventlistener
Eric Nguyen
Eric Nguyen

Reputation: 1046

Remove Scroll EventListener After Firing Once

In my React project, I have a scroll event listener that checks when the user scrolls passed 590, setting state to true. This seems to work fine however I only want the function associated with the to run once so I'm adding removeEventListener as seen below, however the event continues to fire.

How do I appropriately remove this event listener?

useEffect(() => {
    const handleNavSlide = () => {
      if (window.scrollY > 590) {
        setIsOpen(String(true))

        setTimeout(() => {
          setIsOpen(String(false))
        }, 2000)
      }
    }

    window.addEventListener("scroll", handleNavSlide)
    return () => window.removeEventListener("scroll", handleNavSlide)
  }, [])

Upvotes: 1

Views: 544

Answers (1)

Lakshya Thakur
Lakshya Thakur

Reputation: 8316

This will happen because as per your dependency array which is [] here, your listener will only get removed when the component unmounts. For the once behaviour, change your implementation like so :-

useEffect(() => {
    const handleNavSlide = () => {
      if (window.scrollY > 590) {
        setIsOpen(String(true))

        setTimeout(() => {
          setIsOpen(String(false))
        }, 2000)
        window.removeEventListener("scroll", handleNavSlide)
      }
    }

    window.addEventListener("scroll", handleNavSlide)
  }, [])

Upvotes: 1

Related Questions