Always Throw Away Your Event Listeners

May 7, 2019•25 minsTim Ellenberger

Unlike your React components, the event listeners they've created don't magically disappear after their UI unmounts from the DOM. Undisposed event listeners will linger in your browser to haunt future components. Be afraid.

For example, let's say you want to create a simple component that displays the instantaneous window width.

The first step is to create a function for setting some component state we'll call windowWidth, then create a window event listener in the React lifecycle method componentDidMount() with our new setter function as a callback.

1state = {2  windowWidth: null3};4
5componentDidMount() {6  // Measure the initial screen width7  this.updateWindowSize();8
9  // If the screen width changes, update component state10  window.addEventListener('resize', this.updateWindowSize);11}12
13updateWindowSize = () =>14  this.setState({15    windowWidth: window.innerWidth16  });

When the component first mounts, updateWindowSize() is called directly. As the window size changes, the event listener we've created calls the same function as a callback.

Before the current component unmounts, our event listener must be removed from the global Window object by utilizing the React lifecycle method componentWillUnmount().

All together the code is quite simple and can save you from a lot of potential headaches.

🎉 Your window width is px 🎉

componentsWindowSizeReporter.js jsx

1import React from 'react';2
3class WindowSizeReporter extends React.Component {4  state = {5    windowWidth: null6  };7
8  componentDidMount() {9    // Measure the initial screen width10    this.updateWindowSize();11
12    // If the screen width changes, update component state13    window.addEventListener('resize', this.updateWindowSize);14  }15
16  componentWillUnmount() {17    // Remove resize event listener from window18    window.removeEventListener('resize', this.updateWindowSize);19  }20
21  updateWindowSize = () =>22    this.setState({23      windowWidth: window.innerWidth24    });25
26  render() {27    const { windowWidth } = this.state;28
29    return <span>Your window width is {windowWidth}</span>;30  }31}32
33export default WindowSizeReporter;

Tim Ellenberger

React | GraphQL | Consulting

@tim-soft

@gmail

Always Throw Away Your Event Listeners

🎉 Your window width is px 🎉