How to remove event listener on component unmount react js?

Question

I'm console logging every 2 seconds in handleSlide function and I want it to run everytime the component mounts .

    const handleSlide = () => {
        setInterval(() => {
            console.log('runs');
        }, 2000);
    };

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

The problem is the handleSlide function still runs after unmount and I see the console log on other pages and components as well .

How can I remove an event listener in reactjs when a component unmounts ?

Ehsan · Accepted Answer · 2021-02-17 08:50:32Z

1

you are using setInterval and it runs every 2 seconds when it is mounting. you need a callback function to clear it at certain condition. either your interval runs every 2 seconds.

answered Feb 17, 2021 at 8:50

Ehsan

19515 bronze badges

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

Comments

Murat Karagöz · Accepted Answer · 2021-02-17 08:47:56Z

0

You are not really removing the interval. Your handleSlide function registers an anonymous setInterval. You can clear it by calling clearInterval. However you need to pass an ID for that which is conveniently returned by setInterval.

Your code could look like this

yourID = setInterval(() => {
            console.log('runs');
        }, 2000);

and then in your callback

clearInterval(yourID)

answered Feb 17, 2021 at 8:47

Murat Karagöz

37.8k16 gold badges82 silver badges114 bronze badges

Collectives™ on Stack Overflow

How to remove event listener on component unmount react js?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related