title: Polling not actually happening, React JS (ES6)
body: <p>Consider for a moment the following code:</p>
  
  <pre><code>import React    from 'react';
  import ReactDOM from 'react-dom/dist/react-dom';
  import chunk    from 'lodash/array/chunk';
  
  class Tweets extends React.Component {
    constructor(props) {
      super(props);
  
      this.state = {
        tweets:   null,
        error:    null,
        info:     null,
        source:   null
      }
    }
  
    componentDidMount() {
      this._isMounted = true;
      this.startPolling();
    }
  
    componentDidUpdate() {
      if (this._timer) {
        clearInterval(this._timer);
        this._timer = null;
      }
    }
  
    componentWillUnmount() {
      this._isMounted = false;
  
      if (this._timer) {
        clearInterval(this._timer);
        this._timer = null;
      }
    }
  
    shouldComponentUpdate(nextProps, nextState) {
      for (var key in this.state) {
        for (var nextKey in nextState) {
          if (this.state[key] !== nextState[nextKey]) {
            return true
          }
        }
      }
  
      return false;
    }
  
    startPolling() {
      var self = this;
  
      setTimeout(function() {
        self.poll();
  
        if (!self._isMounted) {
          return;
        }
  
        self._timer = setInterval(self.poll, 10000);
      }, 1000);
    }
  
    poll() {
      console.log('I should be called ....');
      var self   = this;
      var source = null;
  
      if (this.props !== undefined) {
        source = this.props.source
      }
  
      $.get(source, function(result) {
        if (self._isMounted) {
          self.setState({
            error:  null,
            tweets: result.data,
            source: source
          });
        }
      }).fail(function(response) {
        self.setState({
          error: 'Could not fetch tweets. Looks like something went wrong.',
        });
      });
    }
  
    checkIfLoading() {
      if (this.state.tweets === null &amp;&amp;
          this.state.error === null &amp;&amp;
          this.state.info === null) {
  
        return true;
      }
  
      return false;
    }
  
    buildTweets () {
      let rows = [];
      let currRow;
  
      this.state.tweets.forEach((tweet, i) =&gt; {
        if(i % 3 === 0) {
          currRow = i;
          rows[currRow] = [];
        }
  
        rows[currRow].push(
            &lt;div className='col-lg-4 col-md-6 col-sm-6 col-xs-12' key={tweet.id}&gt;
              &lt;div className="white-panel tweet-panel"&gt;
                &lt;span&gt;&lt;strong&gt;{tweet.attributes.user_name}&lt;/strong&gt;&lt;em&gt;Posted: {tweet.attributes.time_ago}&lt;/em&gt;&lt;/span&gt;
                &lt;p&gt;&lt;span dangerouslySetInnerHTML={{__html: tweet.attributes.tweet}} /&gt;&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
        );
      });
  
      return rows;
    }
  
    render() {
      if (this.checkIfLoading()) {
        return (&lt;div&gt;&lt;i className="fa-li fa fa-spinner fa-spin"&gt;&lt;/i&gt; One second please, while I fetch some tweets ....&lt;/div&gt;);
      }
  
      var key = 0;
  
      var tweets = this.buildTweets().map(function(tweetRows){
        key += 1;
        return (
          &lt;div key={key} className="row"&gt;
            {tweetRows}
          &lt;/div&gt;
        )
      });
  
      return  (
        &lt;div id='tweetRowContainer'&gt;
          {tweets}
        &lt;/div&gt;
      );
    }
  }
  
  var tweetsElement = document.getElementById("tweets");
  
  if (tweetsElement !== null) {
      ReactDOM.render(
          &lt;Tweets source={"//" + location.hostname + "/api/v1/fetch-tweets"} /&gt;,
          tweetsElement
      );
  }
  
  module.exports = Tweets;
  </code></pre>
  
  <p>What we care about the most is the:</p>
  
  <p>poll() {
      console.log('I should be called ....');
      ...</p>
  
  <p>This gets console logged the first time when the data gets fetched and then is displayed to the page, but as we can see just before this method:</p>
  
  <pre><code>startPolling() {
      var self = this;
  
      setTimeout(function() {
        self.poll();
  
        if (!self._isMounted) {
          return;
        }
  
        self._timer = setInterval(self.poll, 10000);
      }, 1000);
    }
  </code></pre>
  
  <p><strong>In theory this should be polling .... no?</strong></p>