Cleanup when unmounting component

[mnebuerquo]

I'm getting the following console error:

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.

I'm using this form in a component that is unmounted after the form submits successfully.

Main app component uses a hook to hold login state (access token). It shows either 1) a component containing the login form if the user has no token, or 2) the rest of the app if the user has a token.

The main component passes a setState prop down to the login component. The login form gets username, password, then submits and POSTs the values to the server. When the token is returned it calls a setState passed down from the parent component. When the setState is called, it updates the parent component state, so the login form is no longer rendered. Then I see the console error after it is unmounted.

Is there a way to do cleanup before unmount, like the useEffect hook? https://reactjs.org/docs/hooks-effect.html What do I need to do to unmount the form after submit?

I couldn't find anything about that in the docs.

[yousoumar]

Hi @mnebuerquo ! Can you make it a minimal reporductible example, with the the help of a CodeSandbox, for example?