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?