React EventListeners

Hi All,

First off, I’d like to apologize if this is not the proper channel (tried to review the guidelines, but it kept trying to find a user called guidelines), but I have 2 hopefully quick question.

  1. What exactly happens if I create an event listener with document.addEventListener() & I do not remove it with document.removeEventListener()? I looked through React’s documentation, along with other forums, and basically all I found was that you should remove any event listeners you create.
  2. Also reading through the docs it mentioned using componentDidMount() & componentWillUnmount() were commonly used for subscriptions. Are event listeners a type of subscription?

Thanks in advanced!

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 document.removeEventListener.

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).

Thanks!

To answer your question, The reason I was doing this in React is because one of the FCC challenges needed it. As a follow up, is what I did not the best way to handle synthetic events in React?

Under the hood, React is the same mechanism, but 99.9% of the time you’re going to let React handle them - so for example:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0
    };
  }

  clickHandler() {
    this.setState({counter: this.state.counter + 1});
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleClick}>Click me!</button >
      </div>
    );
  }
}

So what this is doing:

  • the component has some internal state
  • the event handler is defined as a method on the class, and uses the setState method inherited from React.Component, which safely updates the component state.
  • the event listener is defined using that onClick attribute on the button - this is equivalent to addEventListener('click' but React handles the mechanics of it.
  • the listener uses the event handler, so every time that button is clicked, the state updates.
  • the this.state.count value in the paragraph element will rerender automatically.