title: Issue with MERN stack when data is coming back from Node
body: <p>I am using the Fetch API to post data to my Node server. There is behaviour that I am seeing which I am unable to understand and need some help in resolving. When the user clicks a button a modal opens up with a form with a few fields. On hitting submit, the data is passed to a node server. First it creates a new record for Mongo and saves the data in the collection. After saving I want to fetch some data from a few other collections and then send the information back to my react app.</p>
  <p>Here is what I am seeing.</p>
  <ol>
  <li><p>If i only save the data and don't do the fetching part and send back a message like this</p>
  <p>res.status(201).json({&quot;message&quot;:&quot;data received&quot;})
  Then after the modal closes in my console I see the message &quot;Data Received&quot;.</p>
  </li>
  <li><p>However if I do the fetch part, which basically means a few more milli seconds of delay, then once the modal closes, this message flashes in the react console.</p>
  <p>Warning: 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.
  DOMException: The user aborted a request.</p>
  </li>
  </ol>
  <p>Here is my submit handler in react</p>
  <pre><code>const submitHandler = async(event) =&gt; {
          event.preventDefault()
          try {
              const responseData = await sendRequest('http://localhost:5000/challenge/createChallenge', 'POST',
                  JSON.stringify({
                      location: selectedOption,
                      format: selectedOption1,
                      date: selectedDate.toString(),
                      opponent: props.initialValues,
                      month: cMonth,
                      year: cYear,
                      player: auth.profile.MemberName
                  }),
                {
                  'Content-Type': 'application/json',
                  Authorization: 'Bearer ' + auth.token
                })    
                console.log(responseData)
          } catch (err){
              console.log(err)
          }
      }
  </code></pre>
  <p>And here is my http-hook, which is a custom hook I am using</p>
  <pre><code>import { useState, useCallback, useRef, useEffect } from 'react'
  
  export const useHttpClient = () =&gt; {
      const [isLoading, setIsLoading] = useState(false)
      const [error, setError] = useState(false)
  
      const activeHttpRequests = useRef([])
  
      const sendRequest = useCallback(async (url, method = 'GET', body = null, headers = {}) =&gt; {
  
          setIsLoading(true)
          const httpAbortCtrl = new AbortController()
          activeHttpRequests.current.push(httpAbortCtrl)
         try {
          const response =  await fetch(url, {
              method,
              body,
              headers,
              signal: httpAbortCtrl.signal
          })
  
          const responseData = await response.json()
          activeHttpRequests.current = activeHttpRequests.current.filter(reqCtrl =&gt; reqCtrl !== httpAbortCtrl)
          if(!response.ok){
              throw new Error(responseData.message)
          }
          setIsLoading(false)
          return responseData
  
         } catch (err){
             setError(err.message)
             setIsLoading(false)
             throw err
         }
      }, [])
  
      const clearError = () =&gt; {
          setError(null)
      }
  
      useEffect(() =&gt; {
          return () =&gt; {
              activeHttpRequests.current.forEach(abortCtrl =&gt; abortCtrl.abort())
          }
      }, [])
  
      return { isLoading, error, sendRequest, clearError}
  }
  </code></pre>
  <p>Can some one please help. I am not sure how to go about resolving this. I checked the reasons for this error, while some of the content on the internet gave me some clue. But I am not clear enough to resolve this.</p>