title: Why does my component unmount?
body: <p>I get the below warning in the console.</p>
  <blockquote>
  <p>Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op.</p>
  <p>Please check the code for the ProgressBar component.</p>
  </blockquote>
  <p>It seems to me this is because of the <code>componentWillUnmount</code> that happens after the first <code>componentDidMount</code> (see console output at the bottom). The <code>componentWillUnmount</code> happens before data has arrived from the server. When the data finally arrives, <code>setState</code> is trying to work with something unmounted.</p>
  <p>But why is there an <code>componentWillUnmount</code> there? I would expect the unmount to happen only after <code>setState</code> is called (and data has arrived from the server). So the component would still be there for <code>setState</code> to work with.</p>
  <pre><code>class ProgressBar extends React.Component {
      constructor(props) {
          super(props);
          this.state = { progress: 0 };
      }
  
      loadProgressFromServer() {
          let url = '/progress/' + this.props.topic_name;
          console.log(&quot;LOADING progress FROM SERVER&quot;);
          $.ajax({
              url: url,
              datatype: 'json',
              cache: false,
              success: function(data) {
                  console.log(&quot;finished loading from server&quot;);
                  this.setState({ progress: data['progress'] });
              }.bind(this)           
          })
      }
  
      componentDidMount() {
          console.log(&quot;didmount&quot;);
          this.loadProgressFromServer();
      }
  
      componentWillUnmount() {
          console.log(&quot;willunmount&quot;);
      }
  
      render() {
          let progress = (this.state.progress * 100).toFixed(0);
          return (
              &lt;div className=&quot;progress&quot; ref=&quot;pb&quot;&gt;
                  &lt;div className=&quot;progress-bar&quot; role=&quot;progressbar&quot; aria-valuenow={ progress } aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style={{ width: progress +&quot;%&quot; }}&gt;
                      { progress + &quot;%&quot; }
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }
  </code></pre>
  <p>The console output:</p>
  <pre><code>didmount
  LOADING progress FROM SERVER
  willunmount
  didmount
  LOADING progress FROM SERVER
  finished loading from server
  Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op.
  
  Please check the code for the ProgressBar component.
  finished loading from server
  </code></pre>
  <p>EDIT:
  There is no higher order component.</p>
  <pre><code>ReactDOM.render(
      &lt;ProgressBar topic_name='name of topic' /&gt;,
      document.getElementById('progressbar')
  );
  </code></pre>