title: React-hooks. Can't perform a React state update on an unmounted component
body: <p>I get this error:</p>
  
  <blockquote>
    <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 a useEffect cleanup
    function.</p>
  </blockquote>
  
  <p>when fetching of data is started and component was unmounted, but function is trying to update state of unmounted component.</p>
  
  <p>What is the best way to solve this?  </p>
  
  <p><a href="https://codesandbox.io/embed/use-local-variable-to-avoid-setstate-on-unmouted-component-ccwc6" rel="noreferrer">CodePen example</a>.               </p>
  
  <pre><code>default function Test() {
      const [notSeenAmount, setNotSeenAmount] = useState(false)
  
      useEffect(() =&gt; {
          let timer = setInterval(updateNotSeenAmount, 2000) 
  
          return () =&gt; clearInterval(timer)
      }, [])
  
      async function updateNotSeenAmount() {
          let data // here i fetch data
  
          setNotSeenAmount(data) // here is problem. If component was unmounted, i get error.
      }
  
      async function anotherFunction() {
         updateNotSeenAmount() //it can trigger update too
      }
  
      return &lt;button onClick={updateNotSeenAmount}&gt;Push me&lt;/button&gt; //update can be triggered manually
  }
  </code></pre>