title: React memory leak, componentDidUnmount not working
body: <p>I have reviewed many posts attempting to resolve this issue and have tried numerous ways to take care of this error, but the answer stills eludes me.  It is a common problem, I know, but my understanding of React appears to be inadequate to achieve resolution.  I'm trying to eliminate this error: </p>
  
  <p>Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the <strong>componentWillUnmount</strong> method.</p>
  
  <p>I am unable to understand why <strong>componentWillUnmount</strong> does not resolve it.  Here is the code:</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  
  export class PracticeData extends React.Component{
    constructor(props){
      super(props);
      this.state = {
        data: [],
        isLoaded: false,
      }
  }
  componentDidMount() {
    this.mounted=true;
    fetch('https://jsonplaceholder.typicode.com/users')
    .then(res =&gt; res.json())
    .then(json =&gt; {
      this.setState({   //triggers a rendering cycle
        isLoaded: true,
        data: json,
      })
    });
  } 
  componentWillUnmount(){
    this.isLoaded=false;
  }
    render(){
      var { isLoaded, data } = this.state;
        if(!isLoaded) {
          return &lt;div&gt;Loading...&lt;/div&gt;
        } else {
         return (
           &lt;div className="container-fluid"&gt;
             &lt;div className="row"&gt;{
               data.map(data =&gt; &lt;div key={data.id}&gt;
                 &lt;div className="list"&gt;
                   &lt;li className="header"&gt;{data.name}&lt;/li&gt;
                 &lt;div className="body"&gt;  
                   &lt;li&gt;&lt;strong&gt;Company:&lt;/strong&gt; {data.company.name}&lt;/li&gt;
                   &lt;li&gt;&lt;strong&gt;User Name: &lt;/strong&gt; {data.username}&lt;/li&gt;
                   &lt;li&gt;&lt;strong&gt;Email: &lt;/strong&gt; {data.email}&lt;/li&gt;
                   &lt;li&gt;&lt;strong&gt;Phone: &lt;/strong&gt;{data.phone}&lt;/li&gt;
                 &lt;/div&gt;
                   &lt;li className="address"&gt;&lt;strong&gt;Address: &lt;/strong&gt;&lt;/li&gt;
                 &lt;div className="body"&gt;
                   &lt;li&gt;&lt;strong&gt;Street:&lt;/strong&gt; {data.address.street}&lt;/li&gt;
                   &lt;li&gt;&lt;strong&gt;Suite: &lt;/strong&gt; {data.address.suite}&lt;/li&gt;
                   &lt;li&gt;&lt;strong&gt;City: &lt;/strong&gt; {data.address.city}&lt;br/&gt;&lt;/li&gt;
                   &lt;li&gt;&lt;strong&gt;Zip Code:&lt;/strong&gt; {data.address.zipcode}&lt;/li&gt;
                 &lt;/div&gt;   
                 &lt;/div&gt;
                 &lt;/div&gt;
                )}
             &lt;/div&gt;
            &lt;/div&gt;
          );
        }
      }
    }
  ReactDOM.render(&lt;PracticeData/&gt;, document.getElementById('root'));
  </code></pre>