In what context are you using
document.addEventListener? Normally you shouldn’t need to do this with React: you need to manually locate the elements using refs, which kinda breaks how React should work. React should be handling this for you, though it is necessary in very specific situations.
The browser will generally clean up any event listeners, unless there is a reference held to an event. Often it is not necessary to clean up - like if you attach a listener for a click event on an element, you may always want the callback to fire if that element is clicked. But it can cause memory leaks, and if you don’t want to that event listener held onto, yes, you would use
In the context of React, you would add the listener in
componentDidMount and remove the listener
componentWillUnmount. However, if the unmount completely removes the element with the listener from the tree, ie it stops existing in the DOM, then that reference does not exist any more so in theory you shouldn’t need to manually clean up (I may be slightly off base there though, I’m not sure if there’ll just be a dead reference that will leak memory).
Regarding 2, yes, event listeners are a subscription. It is a form of pub-sub - with an event listener, you are saying that, when some specific browser event occurs (it is “published”), you are going to subscribe to it (and do something in the callback).