<h3 dir="auto">Problem description</h3>
<p dir="auto">You call setState on a timeout in Popover.js however if the component is already unmounted react gives a warning</p>
<h3 dir="auto">Steps to reproduce</h3>
<h3 dir="auto">Versions</h3>
<ul dir="auto">
<li>Material-UI: 0.15.4</li>
<li>React: 15.3.1</li>
<li>Browser: Chrome</li>
</ul>
<p dir="auto">I've fixed this by setting a property on this in componentWillUnmount</p>
<p dir="auto">might be a bit hacky   see unMounted below</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="
_createClass(Popover, [{
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      var _this2 = this;

      if (nextProps.open !== this.state.open) {
        if (nextProps.open) {
          this.anchorEl = nextProps.anchorEl || this.props.anchorEl;
          this.setState({
            open: true,
            closing: false
          });
        } else {
          if (nextProps.animated) {
            this.setState({ closing: true });
            this.timeout = setTimeout(function () {
              if(!_this2.unMounted) {
                _this2.setState({
                  open: false
                });
              }
            }, 500);
          } else {
            this.setState({
              open: false
            });
          }
        }
      }
    }
  }, {
    key: 'componentDidUpdate',
    value: function componentDidUpdate() {
      this.setPlacement();
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      this.unMounted=true;
      clearTimeout(this.timeout);
    }
  }
"><pre class="notranslate"><span class="pl-s1">_createClass</span><span class="pl-kos">(</span><span class="pl-v">Popover</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-kos">{</span>
    <span class="pl-c1">key</span>: <span class="pl-s">'componentWillReceiveProps'</span><span class="pl-kos">,</span>
    <span class="pl-en">value</span>: <span class="pl-k">function</span> <span class="pl-en">componentWillReceiveProps</span><span class="pl-kos">(</span><span class="pl-s1">nextProps</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-k">var</span> <span class="pl-s1">_this2</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">;</span>

      <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">nextProps</span><span class="pl-kos">.</span><span class="pl-c1">open</span> <span class="pl-c1">!==</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">state</span><span class="pl-kos">.</span><span class="pl-c1">open</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">nextProps</span><span class="pl-kos">.</span><span class="pl-c1">open</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
          <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">anchorEl</span> <span class="pl-c1">=</span> <span class="pl-s1">nextProps</span><span class="pl-kos">.</span><span class="pl-c1">anchorEl</span> <span class="pl-c1">||</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">anchorEl</span><span class="pl-kos">;</span>
          <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">setState</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
            <span class="pl-c1">open</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
            <span class="pl-c1">closing</span>: <span class="pl-c1">false</span>
          <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-kos">}</span> <span class="pl-k">else</span> <span class="pl-kos">{</span>
          <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">nextProps</span><span class="pl-kos">.</span><span class="pl-c1">animated</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
            <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">setState</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">closing</span>: <span class="pl-c1">true</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
            <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">timeout</span> <span class="pl-c1">=</span> <span class="pl-en">setTimeout</span><span class="pl-kos">(</span><span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
              <span class="pl-k">if</span><span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-s1">_this2</span><span class="pl-kos">.</span><span class="pl-c1">unMounted</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
                <span class="pl-s1">_this2</span><span class="pl-kos">.</span><span class="pl-en">setState</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
                  <span class="pl-c1">open</span>: <span class="pl-c1">false</span>
                <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
              <span class="pl-kos">}</span>
            <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-c1">500</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
          <span class="pl-kos">}</span> <span class="pl-k">else</span> <span class="pl-kos">{</span>
            <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">setState</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
              <span class="pl-c1">open</span>: <span class="pl-c1">false</span>
            <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
          <span class="pl-kos">}</span>
        <span class="pl-kos">}</span>
      <span class="pl-kos">}</span>
    <span class="pl-kos">}</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
    <span class="pl-c1">key</span>: <span class="pl-s">'componentDidUpdate'</span><span class="pl-kos">,</span>
    <span class="pl-en">value</span>: <span class="pl-k">function</span> <span class="pl-en">componentDidUpdate</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">setPlacement</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
    <span class="pl-c1">key</span>: <span class="pl-s">'componentWillUnmount'</span><span class="pl-kos">,</span>
    <span class="pl-en">value</span>: <span class="pl-k">function</span> <span class="pl-en">componentWillUnmount</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">unMounted</span><span class="pl-c1">=</span><span class="pl-c1">true</span><span class="pl-kos">;</span>
      <span class="pl-en">clearTimeout</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">timeout</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
  <span class="pl-kos">}</span></pre></div>
<h3 dir="auto">Problem description</h3>
<p dir="auto">When props.animated is true, Popover calls setState from within a setTimeout.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// in componentWillReceiveProps
if (nextProps.animated) {
   this.setState({ closing: true });
   this.timeout = setTimeout(function () {
     _this2.setState({
        open: false
     });
   }, 500);
}"><pre class="notranslate"><span class="pl-c">// in componentWillReceiveProps</span>
<span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">nextProps</span><span class="pl-kos">.</span><span class="pl-c1">animated</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
   <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">setState</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">closing</span>: <span class="pl-c1">true</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
   <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">timeout</span> <span class="pl-c1">=</span> <span class="pl-en">setTimeout</span><span class="pl-kos">(</span><span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
     <span class="pl-s1">_this2</span><span class="pl-kos">.</span><span class="pl-en">setState</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
        <span class="pl-c1">open</span>: <span class="pl-c1">false</span>
     <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
   <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-c1">500</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">Because <a href="https://facebook.github.io/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html" rel="nofollow">componentWillReceiveProps doesn't mean that props changed</a>, Popover has the potential to call setState from within the setTimeout multiple times, when no props have changed.  For me, this is consistently causing an error where setState is called on an unmounted component.</p>
<h3 dir="auto">Steps to reproduce</h3>
<p dir="auto">Rapidly re-render Popover (animated=true) after having changed open to false.</p>
<h3 dir="auto">Versions</h3>
<ul dir="auto">
<li>Material-UI: 0.15.3</li>
<li>React: 15.3.0</li>
<li>Browser:  Chrome Version 52.0.2743.116 (64-bit)</li>
</ul>