title: Why is there a MDL spinner residue after my promise is resolved in react?
body: <p>I'm trying to display a spinner while fetching my API, then replace this spinner by the results I receive from my API call.</p>
  
  <p>Basically I have a <code>isFetching</code> state set to <code>true</code> until my promise is resolved, so my render function looks like this:</p>
  
  <pre><code>render: function() {
    if (this.state.isFetching) {
      return &lt;div className="mdl-spinner mdl-js-spinner is-active" /&gt;;
    } else {
      return &lt;div&gt;This is where I display my results.&lt;/div&gt;;
    }
  }
  </code></pre>
  
  <p>It's working well and seems logic to me but, as the rendered function gets more complex, the spinner is appended to the returned html.</p>
  
  <p><a href="https://i.stack.imgur.com/qXiL3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qXiL3.png" alt="The spinner."></a></p>
  
  <pre><code>&lt;div&gt;This is where I display my results.&lt;/div&gt;
  &lt;!-- The appeneded spinner, each div corresponding to a color (yellow, green, blue, red) --&gt;
  &lt;div class="mdl-spinner__layer mdl-spinner__layer-1"&gt;&lt;/div&gt;
  &lt;div class="mdl-spinner__layer mdl-spinner__layer-2"&gt;&lt;/div&gt;
  &lt;div class="mdl-spinner__layer mdl-spinner__layer-3"&gt;&lt;/div&gt;
  &lt;div class="mdl-spinner__layer mdl-spinner__layer-4"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>Why is this spinner residue appended after my promise is resolved?</strong>
  Am I doing something conceptually wrong? Is it related to <a href="https://facebook.github.io/react/" rel="nofollow noreferrer">React</a> or <a href="http://www.getmdl.io/components/index.html#loading-section" rel="nofollow noreferrer">MDL</a>?</p>
  
  <p>I made a <kbd><a href="http://jsfiddle.net/tcollart/uwkq4svL/" rel="nofollow noreferrer">JS fiddle</a></kbd> where I managed to reproduce the issue.</p>
  
  <p>Note that if you simplify the <code>&lt;SubComponent /&gt;</code>'s render function (such as by removing the <code>img</code> tag, the issue doesn't appear). </p>
  
  <hr>
  
  <h1>Edit</h1>
  
  <p>Thanks to <a href="https://stackoverflow.com/a/34901897/3170948">Garbee's answer</a> I ended up with this solution:</p>
  
  <p>To ensure the node (responsible for creating internal nodes for styling) is properly destroyed after being upgraded, wrap it (in this case the spinner) in another element node.</p>
  
  <pre><code>render: function() {
    if (this.state.isFetching) {
      return (
        &lt;div&gt;
          &lt;div className="mdl-spinner mdl-js-spinner is-active" /&gt;
        &lt;/div&gt;
      );
    } else {
      return &lt;div&gt;This is where I display my results.&lt;/div&gt;;
    }
  }
  </code></pre>
  
  <p>The updated <kbd><a href="http://jsfiddle.net/tcollart/rmscffmo/" rel="nofollow noreferrer">JS fiddle</a></kbd>.</p>