React unlisten doesn't work on componentWillUnmount

Question

I'm using alt with React 0.13.1. In my component below, unlisten doesn't work on componentWillUnmount.

The component unmounts but I can see the polling still happening. Is there something I'm not understanding about how to unlisten? I don't have binds, because React 0.13 includes autobinding. Any help would be greatly appreciated.

'use strict';

import React from 'react';
import SitesList from './SitesList';
import SiteStore from '../stores/SiteStore';
import SiteActions from '../actions/SiteActions';

// Next line is necessary for exposing React to browser for
// the React Developer Tools: http://facebook.github.io/react/blog/2014/01/02/react-chrome-developer-tools.html
// require("expose?React!react");

var SitesBox = React.createClass({
  displayName: 'SitesBox',

  propTypes: {
    url: React.PropTypes.string.isRequired,
    pollInterval: React.PropTypes.number.isRequired
  },

  getStoreState() {
    return {
      sites: SiteStore.getState()
    };
  },

  getInitialState() {
    return this.getStoreState();
  },

  componentDidMount() {
    SiteStore.listen(this.onChange);
    SiteActions.fetchSites(this.props.url, true);
    setInterval(SiteActions.fetchSites,
                this.props.pollInterval,
                this.props.url,
                false);
  },

  componentWillUnmount() {
    SiteStore.unlisten(this.onChange);
  },

  onChange() {
    this.setState(this.getStoreState());
  },

  render() {
    return (
      <div className="siteBox row">
        <div className="col-md-12">
          <div className="panel panel-inverse">
              <div className="panel-body">
                  <SitesList sites={this.state.sites.sites} />
              </div>
          </div>
        </div>
      </div>
    );
  }
});

export default SitesBox;

score 1 · Answer 1 · answered Apr 16 '15 at 21:44

Answering my own question. Unlisten does not handle intervals. You must clear clearInterval() those as shown below. A big thanks to alt creator Josh Perez for his help clearing this React (not Alt) issue.

'use strict';

import React from 'react';
import SitesList from './SitesList';
import SiteStore from '../stores/SiteStore';
import SiteActions from '../actions/SiteActions';

// Next line is necessary for exposing React to browser for
// the React Developer Tools: http://facebook.github.io/react/blog/2014/01/02/react-chrome-developer-tools.html
// require("expose?React!react");

var SitesBox = React.createClass({
  displayName: 'SitesBox',
  sitesInterval: null,

  propTypes: {
    url: React.PropTypes.string.isRequired,
    pollInterval: React.PropTypes.number.isRequired
  },

  getStoreState() {
    return {
      sites: SiteStore.getState()
    };
  },

  getInitialState() {
    return this.getStoreState();
  },

  componentDidMount() {
    SiteStore.listen(this.onChange);
    SiteActions.fetchSites(this.props.url, true);
    this.sitesInterval = setInterval(SiteActions.fetchSites,
                this.props.pollInterval,
                this.props.url,
                false);
  },

  componentWillUnmount() {
    SiteStore.unlisten(this.onChange);
    clearInterval(this.sitesInterval);
  },

  onChange() {
    this.setState(this.getStoreState());
  },

  render() {
    return (
      <div className="siteBox row">
        <div className="col-md-12">
          <div className="panel panel-inverse">
              <div className="panel-body">
                  <SitesList sites={this.state.sites.sites} />
              </div>
          </div>
        </div>
      </div>
    );
  }
});

export default SitesBox;

React unlisten doesn't work on componentWillUnmount

1 Answers1