Removing Event Listener - Do I need to pass the exact same anonymous function?

Question

 componentDidMount() {
    window.addEventListener("scroll", (e) => {console.log("Hello"});
  }

 componentWillUnmount() {
    window.removeEventListener("scroll", (e) => {console.log("Hello"});
  }

...do I really need to do window.removeEventListener("scroll", (e) => {console.log("Hello")});?

Or can I just do window.removeEventListener("scroll", ()=> {}); (with an empty function)? I don't understand why, when removing the eventListener, I need to pass it the exact same anonymous function?

what if I do window.removeEventListener("scroll", ()=> {console.log("Hello2")}); - is this considered a new function now? So will this not remove the original event listener (which has console.log("Hello");) ?

Gena Moroz · Accepted Answer · 2020-05-19 11:52:06Z

2

Yes, you have to pass exact same reference, since function is an object and variable holding a reference and function(){} is not equals function(){}

function stuff(){/* your stuff;*/}
window.addEventListener("event",stuff);
window.removeEventListener("event",stuff);

answered May 19, 2020 at 11:52

Gena Moroz

9545 silver badges9 bronze badges

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

Comments

Guru Hadadi · Accepted Answer · 2020-05-19 12:26:59Z

1

Your componentWillUnmount function will not remove event listener because the function reference of the event listener which was attached in componentDidMount is not the same as the one it(compWillUnmount) is trying to remove.

You can check it out by creating and comparing 2 functions in chrome console.

In general, define the eventListener function in your class and attach it in componentDidMount and remove it in componentWillUnmount. Since they are executed once, the function reference remains same.

class MyComponent extends React.Component {
 ...
 myEventFun = (e) => {console.log("Hello")};

 componentDidMount() {

    window.addEventListener("scroll", this.myEventFun);
  }

 componentWillUnmount() {
    window.removeEventListener("scroll", this.myEventFun);
  }
...

If you want to deal with adding/removing event listeners in functional component, see this and this

edited May 19, 2020 at 12:26

answered May 19, 2020 at 12:20

Guru Hadadi

13.8k2 gold badges18 silver badges29 bronze badges

1 Comment

Guru Hadadi Over a year ago

hi - hope the answer was useful... do you have any follow up question on this.?

Collectives™ on Stack Overflow

Removing Event Listener - Do I need to pass the exact same anonymous function?

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related