title: React - setState() on unmounted component
body: <p>In my react component im trying to implement a simple spinner while an ajax request is in progress - im using state to store the loading status. </p>
  
  <p>For some reason this piece of code below in my React component throws this error </p>
  
  <blockquote>
    <p>Can only update a mounted or mounting component. This usually means
    you called setState() on an unmounted component. This is a no-op.
    Please check the code for the undefined component.</p>
  </blockquote>
  
  <p>If I get rid of the first setState call the error goes away.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>constructor(props) {
    super(props);
    this.loadSearches = this.loadSearches.bind(this);
  
    this.state = {
      loading: false
    }
  }
  
  loadSearches() {
  
    this.setState({
      loading: true,
      searches: []
    });
  
    console.log('Loading Searches..');
  
    $.ajax({
      url: this.props.source + '?projectId=' + this.props.projectId,
      dataType: 'json',
      crossDomain: true,
      success: function(data) {
        this.setState({
          loading: false
        });
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
        this.setState({
          loading: false
        });
      }.bind(this)
    });
  }
  
  componentDidMount() {
    setInterval(this.loadSearches, this.props.pollInterval);
  }
  
  render() {
  
      let searches = this.state.searches || [];
  
  
      return (&lt;div&gt;
            &lt;Table striped bordered condensed hover&gt;
            &lt;thead&gt;
              &lt;tr&gt;
                &lt;th&gt;Name&lt;/th&gt;
                &lt;th&gt;Submit Date&lt;/th&gt;
                &lt;th&gt;Dataset &amp;amp; Datatype&lt;/th&gt;
                &lt;th&gt;Results&lt;/th&gt;
                &lt;th&gt;Last Downloaded&lt;/th&gt;
              &lt;/tr&gt;
            &lt;/thead&gt;
            {
            searches.map(function(search) {
  
                  let createdDate = moment(search.createdDate, 'X').format("YYYY-MM-DD");
                  let downloadedDate = moment(search.downloadedDate, 'X').format("YYYY-MM-DD");
                  let records = 0;
                  let status = search.status ? search.status.toLowerCase() : ''
  
                  return (
                  &lt;tbody key={search.id}&gt;
                    &lt;tr&gt;
                      &lt;td&gt;{search.name}&lt;/td&gt;
                      &lt;td&gt;{createdDate}&lt;/td&gt;
                      &lt;td&gt;{search.dataset}&lt;/td&gt;
                      &lt;td&gt;{records}&lt;/td&gt;
                      &lt;td&gt;{downloadedDate}&lt;/td&gt;
                    &lt;/tr&gt;
                  &lt;/tbody&gt;
                );
            }
            &lt;/Table &gt;
            &lt;/div&gt;
        );
    }</code></pre>
  </div>
  </div>
  </p>
  
  <p>The question is why am I getting this error when the component should already be mounted (as its being called from componentDidMount) I thought it was safe to set state once the component is mounted ?</p>