title: I get Error: Can't perform a React state update on an unmounted component even though i created cleanup
body: <p>An error keeps bothering me on my app says</p>
  <pre><code>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.
  </code></pre>
  <p>I do declare a useEffect in my Context so that I can have a realtime data storing and getting for my app.</p>
  <p>Here is my code in Context;</p>
  <pre><code>const FetchProvider = ({ children }) =&gt; {
      const [userList, setUserList] = useState([]);
      const [teamList, setTeamList] = useState([]);
  
      const authContext = useContext(AuthContext);
      const authAxios = axios.create({
          baseURL: process.env.REACT_APP_API_URL,
      });
  
      useEffect(() =&gt; {
          let isCancelled = false;
          if (
              authContext.isAuthenticated &amp;&amp;
              authContext.authState.userInfo !== null
          ) {
              const getUsers = async () =&gt; {
                  try {
                      const users = await authAxios.get('/admin/get-all-users');
                      if (!isCancelled) {
                          setUserList(users.data);
                      }
                  } catch (error) {
                      if (!isCancelled) {
                          console.log(error);
                      }
                  }
              };
  
              const getTeams = async () =&gt; {
                  try {
                      const teams = await authAxios.get('/get-all-teams');
                      if (!isCancelled) {
                          setTeamList(teams.data);
                      }
                  } catch (error) {
                      if (!isCancelled) {
                          console.log(error);
                      }
                  }
              };
              getUsers();
              getTeams();
          }
          return () =&gt; {
              isCancelled = true;
          };
      }, [authAxios, authContext]);
  
      return (
          &lt;Provider
              value={{
                  authAxios,
                  userList,
                  setUserList,
                  teamList,
                  setTeamList,
              }}
          &gt;
              {children}
          &lt;/Provider&gt;
      );
  };
  </code></pre>
  <p>And I get this error in my Login.jsx and in my  even though I don't declare useEffect in submitting and declaring it in .</p>
  <p>Here is my code;</p>
  <pre><code>const submitCredentials = async (credentials, resetForm) =&gt; {
          try {
              setLoginLoading(true);
              const { data } = await publicFetch.post('signin', credentials);
              authContext.setAuthState(data);
              setSignupSuccess(data.message);
              setSignupError('');
              setOpen(true);
              setTimeout(() =&gt; {
                  setLoginLoading(false);
                  setredirectOnlogin(true);
                  resetForm(true);
              }, 400);
          } catch (error) {
              setLoginLoading(false);
              const { data } = error.response;
              setSignupError(data.message);
              setSignupSuccess('');
              setOpen(true);
          }
          return setLoginLoading(false);
      };
  </code></pre>
  <p>And I have tried many ways the internet has offered to fix this up but unfortunately it does not fix my problem.</p>
  <p>I do have useEffect in my UsersTable.jsx and TeamTables.jsx.</p>
  <p>Here is my code in UsersTable.jsx;</p>
  <pre><code>useEffect(() =&gt; {
          let isCancelled = false;
          const getUsers = async () =&gt; {
              try {
                  const users = await fetchContext.authAxios.get('/admin/get-all-users');
                  setIsLoaded(true);
                  if (isLoaded === true) {
                      if (!isCancelled) {
                          fetchContext.setUserList(users.data);
                      }
                  }
                  return () =&gt; {
                      isCancelled = true;
                  };
              } catch (error) {
                  if (!isCancelled) {
                      console.log(error);
                  }
              }
          };
          getUsers();
          return () =&gt; {
              isCancelled = true;
          };
      }, [fetchContext, isLoaded]);
  </code></pre>
  <p>Here is my useEffect code in my TeamTable.jsx;</p>
  <pre><code>useEffect(() =&gt; {
          let isCancelled = false;
          const getTeams = async () =&gt; {
              try {
                  const teams = await fetchContext.authAxios.get('get-all-teams');
                  setIsLoaded(true);
                  if (isLoaded === true) {
                      if (!isCancelled) {
                          fetchContext.setTeamList(teams.data);
                      }
                  }
              } catch (error) {
                  if (!isCancelled) {
                      console.log(error);
                  }
              }
          };
          getTeams();
          return () =&gt; {
              isCancelled = true;
          };
      }, [fetchContext, isLoaded]);
  </code></pre>
  <p>The isLoaded is used as an AJAX</p>