title: Why is the cancelledPromise pattern considered better than the isMounted() "antipattern" in React?
body: <p>See here: <a href="https://reactjs.org/blog/2015/12/16/ismounted-antipattern.html" rel="noreferrer">https://reactjs.org/blog/2015/12/16/ismounted-antipattern.html</a>
  And also here: <a href="https://stackoverflow.com/questions/49906437/how-to-cancel-a-fetch-on-componentwillunmount">How to cancel a fetch on componentWillUnmount</a>
  And here: <a href="https://stackoverflow.com/questions/38248037/ismounted-antipattern-track-own-property">ismounted antipattern, track own property</a></p>
  
  <p>In both cases they mention 3 approaches:</p>
  
  <ul>
  <li>In your <code>promise.resolve</code> check <code>this.IsMounted()</code>, which React will return correctly for you, if the `Compounted Has Unmounted</li>
  <li>In your <code>promise.resolve</code> check <code>_isMounted</code>, which you have manually tracked in <code>ComponentWillUnmount()</code> method.</li>
  <li>Use cancellable promises, so that you <code>promise</code> doesn't ever resolve. <em>And this will solve all your problems and make it lovely.</em></li>
  </ul>
  
  <p>Except, in the 3rd case your <code>promise</code> will <code>error()</code>, but might also <code>error()</code> in other cases (e.g. the API is down).</p>
  
  <p>So in reality the 3rd option boils down to:
   - In your <code>promise.error</code> check <code>errorPayload.IsCancelled</code>, which you have manually tracked in the <code>cancellablePromise</code> object, which has in turn been triggered by a manual call in <code>ComponentWillUnmount</code>.</p>
  
  <p>So all three are pretty much identical:</p>
  
  <blockquote>
    <p>When you are handling your <code>promise</code> outcomes, check the value of this variable that is directly tied to whether the component has already <code>unmounted</code>.</p>
  </blockquote>
  
  <p>Why do they assert that the 3rd option is better than the other 2, and that the 1st option is an antipattern.</p>