title: Data fetching with React hooks cleanup the async callback
body: <p>I was starting to build some of my new components with the new and shiny React Hooks. But I was using a lot of async api calls in my components where I also show a loading spinner while the data is fetching. So as far as I understood the concept this should be correct: </p>
  
  <pre><code>const InsideCompontent = props =&gt; {
     const [loading, setLoading] = useState(false);
  
     useEffect(() =&gt; {
       ...
       fetchData()
       ...
     },[])
  
     function fetchData() {
       setFetching(true);
       apiCall().then(() =&gt; {
         setFetching(false)
       })
     }
  }
  </code></pre>
  
  <p>So this is just my initial idea of how this might work. Just a small example. 
  But what happens if the parent component has now a condition changed that this component gets unmounted before the async call is finished. </p>
  
  <p>Is there somehow a check where I can check if the component is still mounted before I call the <code>setFetching(false)</code> in the api callback? </p>
  
  <p>Or am I missing something here ? </p>
  
  <p>Here is working example : 
  <a href="https://codesandbox.io/s/1o0pm2j5yq" rel="nofollow noreferrer">https://codesandbox.io/s/1o0pm2j5yq</a></p>
  
  <p>EDIT: 
  There was no really issue here. You can try it out here: 
  <a href="https://codesandbox.io/s/1o0pm2j5yq" rel="nofollow noreferrer">https://codesandbox.io/s/1o0pm2j5yq</a></p>
  
  <p>The error was from something else, so with hooks you don't need to check if the component is mounted or not before doing a state change.</p>
  
  <p>Another reason why to use it :)</p>