I think I understand the concept of this problem, but I'm not sure how I need to "clean up" since there is no useEffect in the component:

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.
    in Formik (at LoginForm.js:19)
    in LoginForm (created by Context.Consumer)
    in withRouter(LoginForm) (at LandingPage.js:17)
    in div (at LandingPage.js:16)
    in div (at LandingPage.js:15)
    in div (at LandingPage.js:9)
    in div (at LandingPage.js:8)
    in LandingPage (created by Context.Consumer)
    in Route (at App.js:33)

The form looks something like this:

// imports...

const LoginForm = (props) => {
  const { setAuthStatus } = useContext(AuthContext);
  const { setUserData } = useContext(UserContext);

  return (
    <Formik
      initialValues={...}
      validate={...}
      onSubmit={(values, actions) => {
        const config = {
          baseURL: '/api/auth/login',
          method: 'post',
          withCredentials: true,
          headers: {
            'Content-Type': 'application/json',
          },
          data: values,
        };

        axios(config).then((res) => {
          setAuthStatus('verified');
          localStorage.setItem('authstatus', 'verified');
          props.history.push('/users/dashboard');
        }).catch((error) => {
          actions.setStatus({
            server: error,
          });
          localStorage.setItem('authstatus', 'unverified');
        }).finally(() => actions.setSubmitting(false));
      }}
    >
      {({ isSubmitting, errors }) => (
        <Form id="loginform">
          ...
        </Form>
      )}
    </Formik>
  );
};

export default withRouter(LoginForm);

So the issue seems to be that when this LoginForm is mounted on a page, and then the page change or is "unmounted" while the api call is still active, that may create a memory leak.

I understand that you can return a function in a useEffect for a cleanup, but in my case which does not have a useEffect, what is the way to fix this?

0

There are 0 answers