title: Can't perform a React state update on an unmounted component after API fetch
body: <p>I am writing a React component where I fetch data from an API and then I refresh the component with states, but for some reasons I always get this error:</p>
  <blockquote>
  <p>Warning: 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 a useEffect cleanup function.
  at CollectionContainer (http://localhost:3000/static/js/bundle.js:1632:102)</p>
  </blockquote>
  <p>I tried solutions to similar questions but nothing worked, please bear with me, I'm new to React</p>
  <p><strong>Code</strong></p>
  <pre><code>import React from &quot;react&quot;;
  import { useState } from &quot;react&quot;;
  
  function CollectionContainer(props) {
    //STATE
    const [FilesAPIfetched, setFilesAPIfetched] = useState(false);
  
    function RefreshDataDatasets() {
      console.log(&quot;Refreshed collections data&quot;);
      setFilesAPIfetched(true);
    }
  
    const files = [&quot;test&quot;];
    const COLLECTION_ID = props.children.id;
  
    //API CALL
    let API_CALL_FILES = `http://xxx.yyy/${COLLECTION_ID}/files/`;
    fetch(API_CALL_FILES)
      .then((res) =&gt; res.json())
      //.then((data) =&gt; console.log(data));
      .then((data) =&gt; {
        for (let i = 0; i &lt; data.length; i++) {
          files[i] = data[i];
        }
        console.log(files);
  
        RefreshDataDatasets();
      });
  </code></pre>