React why should I remove event listeners?

Question

I see a lot of code like this:

componentDidMount() {
  // add event listener
}

componentWillUnmount() {
  // remove event listener
}

I understand if the listener is set on something global like window, but if it's just on an HTML element within the component that's about to be unmounted, won't the listener disappear with the component anyway?

Answer 1

The event listeners need to be removed due to following reason.

• Avoid memory leaks, if the browser is not handled it properly.Modern browsers will garbage collect event handlers of removed DOM elements but it is not true in cases of legacy browses like IE which will create memory leaks.
• Avoid collisions of events of components.
• Remove the side effects when the reference of event listeners are stored in some persistence such as local storage or some thing like this

Here is a good article to get an insights on event listners

Answer 2

Modern browsers do remove event listeners on components when they are unmounted, however for some reason if you store the reference of this node in any other component that is not mounted or in localStorage, Garbage collector will not be able process this and it can potentially cause memory leaks.

Hence, the safest way to handle such scenarios is to manually remove event listeners in componentWillUnmount.

P.S. With hooks, react provides way to return a function which can be used to remove listeners in the useEffect hook.