React.js 16 event listeners leak (increase)

[serbanghita]

Do you want to request a feature or report a bug?

bug

What is the current behavior?

1. Create a classic counter component (use setInterval or requestAnimationFrame).

class Loading extends React.Component {

  constructor() {
    super();
    this.timer = null;
    this.state = {
      counter: 0
    };
  }

  componentDidMount() {
    this.timer = setInterval(this.tick.bind(this), 1000);
  }
  
  componentWillUnmount() {
    this.clearInterval(this.timer);
  }
  
  tick() {
    this.setState((prevState) => { 
      prevState.counter = prevState.counter + 1;
      return prevState;
    });
  }
  
  render() {
    return <div>Counter: {this.state.counter}</div>;
  }
}

https://jsfiddle.net/serbang/3kaab17d/1/

2. Open Chrome Developer Tools and the Performance Drawer (CTRL + SHIFT + P).
3. Check the JS event listeners info. You will see it increasing by 6.

I have also fiddled with different possibilities of setting the state but I got the same result.
If you return a null state, the JS event listeners remain stable.
It all started with me implementing a timer in canvas (see https://jsbin.com/cupuqoz/3/edit?js,output) - i'll leave the example here for reference of what I was trying to achieve.

What is the expected behavior?

JS event listeners don't increase.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

• Chrome (Windows 10) latest
• React 16 latest
• Tested in React 16.3.5 as well

[gaearon]

Are you measuring production version?

In development, it's a known issue (although it's not clear it's a leak per se—rather, it seems like it takes a while before browser collects those listeners: #12141).

[serbanghita]

@gaearon I'm measuring a development version.

Yes the listeners take a while on Windows:

I'll do more tests tomorrow as well on a production build and on Mac.

Thanks for the details!