title: To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function
body: <p>I have this code</p>
  <pre><code>import ReactDOM from &quot;react-dom&quot;;
  import React, { useState, useEffect } from &quot;react&quot;;
  import { BrowserRouter as Router, Route, Link } from &quot;react-router-dom&quot;;
  
  function ParamsExample() {
    return (
      &lt;Router&gt;
        &lt;div&gt;
          &lt;h2&gt;Accounts&lt;/h2&gt;
          &lt;Link to=&quot;/&quot;&gt;Netflix&lt;/Link&gt;
          &lt;Route path=&quot;/&quot; component={Miliko} /&gt;
        &lt;/div&gt;
      &lt;/Router&gt;
    );
  }
  
  const Miliko = ({ match }) =&gt; {
    const [data, setData] = useState([]);
    const [isLoading, setIsLoading] = useState(false);
    const [isError, setIsError] = useState(false);
  
    useEffect(() =&gt; {
      (async function() {
        setIsError(false);
        setIsLoading(true);
        try {
          const Res = await fetch(&quot;https://foo0022.firebaseio.com/New.json&quot;);
          const ResObj = await Res.json();
          const ResArr = await Object.values(ResObj).flat();
          setData(ResArr);
        } catch (error) {
          setIsError(true);
        }
        setIsLoading(false);
      })();
      console.log(data);
    }, [match]);
    return &lt;div&gt;{`${isLoading}${isError}`}&lt;/div&gt;;
  };
  
  function App() {
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;ParamsExample /&gt;
      &lt;/div&gt;
    );
  }
  
  const rootElement = document.getElementById(&quot;root&quot;);
  ReactDOM.render(&lt;App /&gt;, rootElement);
  </code></pre>
  <p>I created three links that open the <code>Miliko</code> component. but when I quickly click on the links I get this error:</p>
  <blockquote>
  <p>To fix, cancel all subscriptions and asynchronous tasks in a useEffect
  cleanup function.</p>
  </blockquote>