title: How to Cancel subscription in async promise to avoid memory leak in Reactjs
body: <p>Within my React component, I have an <code>async</code> request which dispatches an action to my Redux store which is called within the <code>useEffect</code> hook:</p>
  
  <pre><code>    const loadFields = async () =&gt; {
          setIsLoading(true);
          try {
              await dispatch(fieldsActions.fetchFields(user.client.id));
          } catch (error) {
              setHasError(true);
          }
          setIsLoading(false);
      }
      useEffect(() =&gt; { if(isOnline) { loadFields() } }, [dispatch, isOnline]);
  </code></pre>
  
  <p>The action requests data via a fetch request:</p>
  
  <pre><code>    export const fetchFields = clientId =&gt; {
          return async dispatch =&gt; {
              try {
                  const response = await fetch(
                      Api.baseUrl + clientId + '/fields',
                      { headers: { 'Apiauthorization': Api.token } }
                  );
  
                  if (!response.ok) {
                      throw new Error('Something went wrong!');
                  }
  
                  const resData = await response.json();
                  dispatch({ type: SET_FIELDS, payload: resData.data });
              } catch (error) {
                  throw error;
              }
          }
      };
  
      export const setFields = fields =&gt; ({
          type    : SET_FIELDS,
          payload : fields
      });
  </code></pre>
  
  <p>When this is rendered within the React app it results in the following warning:</p>
  
  <p><code>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 %s.%s, a useEffect cleanup function</code></p>
  
  <p>I believe this occurs because the promise doesn't have a "clean-up" function. But I am unsure where to place this? Should I have some logic within <code>LoadFields()</code>? Or must this be done within the <code>useEffect</code> hook?</p>