title: Better way to clearTimeout in componentWillUnmount
body: <p>I have a working Loading Component that cancels out when it has been loading for 8 seconds. This code works but it feels off to me and I'm wondering if there is a better way to do this. </p>
  
  <p>Without setting <code>this.mounted</code> I get the error:</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. Please check the code for the Loading component.</p>
  </blockquote>
  
  <p>This make me think that the timer is not getting canceled so it continues with <code>this.seState</code>. Why would that be if I set <code>clearTimeout</code> in <code>componentWillUnmount</code>? Is there a better way to handle this than using a global <code>this.mounted</code>?</p>
  
  <pre><code>class Loading extends Component {
    state = {
      error: false,
    };
  
    componentDidMount = () =&gt; {
      this.mounted = true;
      this.timer();
    };
  
    componentWillUnmount = () =&gt; {
      this.mounted = false;
      clearTimeout(this.timer);
    };
  
    timer = () =&gt;
      setTimeout(() =&gt; {
        (this.mounted &amp;&amp; this.setState({ error: true })) || null;
      }, 8000);
  
    render() {
      const { showHeader = false } = this.props;
      const { error } = this.state;
      return (
        &lt;View style={backgroundStyle}&gt;
          {showHeader &amp;&amp; &lt;HeaderShell /&gt;}
          {!error &amp;&amp;
            &lt;View style={loadingHeight}&gt;
              &lt;PlatformSpinner size="large" /&gt;
            &lt;/View&gt;}
          {error &amp;&amp; &lt;Error code="service" /&gt;}
        &lt;/View&gt;
      );
    }
  }
  
  Loading.propTypes = {
    showHeader: PropTypes.bool,
  };
  
  Loading.defaultProps = {
    showHeader: false,
  };
  
  export default Loading;
  </code></pre>