title: Can I use React useEffect for an async POST submit request?
body: <p>I'm pretty new to React Hooks and I need some guidance with the following issue.</p>
  
  <p>I'm submitting a form asynchronously. I do use a Promise that can be canceled for that. </p>
  
  <p>Now, imagine that something happens until the promise resolves and the Component gets unmounted. When the promise resolves I get an 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.</p>
  </blockquote>
  
  <p>Basically I must cancel the Promise if the component gets unmounted. The return function of the <code>useEffect</code> would be exactly what I need, but the problem is that I cannot start the Promise request inside <code>useEffect</code> function since the request must be performed when the submit button is pressed and not when the component is mounted or updated.</p>
  
  <p>How can the Promise be canceled when the component unmounts? </p>
  
  <p><strong>Note:</strong> I'm looking for a solution that doesn't involve <code>isMounted</code> that has been declared an anti-pattern according to [react doc] [react doc]: <a href="https://reactjs.org/blog/2015/12/16/ismounted-antipattern.html" rel="nofollow noreferrer">https://reactjs.org/blog/2015/12/16/ismounted-antipattern.html</a></p>
  
  <hr>
  
  <p><strong>Minimal Code Example:</strong> </p>
  
  <pre><code>const AccountDetails = ({ props }) =&gt; {
  
  /* functions and variable declarations go here */
  const [accountDetails, setAccountDetails] = useState({}); //initialize state variables 
  
  const handleSubmit = () =&gt; {
    const data = { /* computed data */ }; 
    dataService.get(
      submitUrl,
      data, 
    ).then(
      result =&gt; {
       setAccountDetails(result); //here is where the error is thrown when the component is unmounted
      }
    );  
  };
  
  return (
    &lt;div&gt;
     &lt;!-- form fields --&gt; 
     &lt;button onClick={handleSubmit} .../&gt;
  
    &lt;/div&gt;
  );
  
  };
  </code></pre>
  
  <p><strong>I've tried the following solution, that oddly enough doesn't work .</strong> </p>
  
  <pre><code> const AccountDetails = ({ props }) =&gt; {
  
      /* functions and variable declarations go here */
      const [accountDetails, setAccountDetails] = useState({}); //initialize state variables 
      let submitAccountDetailsPromise = null;
  
      useEffect(() =&gt; {
          return () =&gt; {
           /*DON'T UNDERSTAND HOW COME submitAccountDetailsPromise == NULL WHEN this code is executed after the submit button was pressed. */
           submitAccountDetailsPromise &amp;&amp; submitAccountDetailsPromise.cancel();
          };
      }, []);
  
      const handleSubmit = () =&gt; {
        const data = { /* computed data */ }; 
        submitAccountDetailsPromise  = dataService.get(
          submitUrl,
          data, 
        ).then(
          result =&gt; {
           setAccountDetails(result); //here is where the error is thrown when the component is unmounted
          }
        );  
      };
  
      return (
        &lt;div&gt;
         &lt;!-- form fields --&gt; 
         &lt;button onClick={handleSubmit} .../&gt;
  
        &lt;/div&gt;
      );
  
      };
  </code></pre>