Reputation: 1046
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
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