Reputation: 1558
So even though I'm using clearInterval in a useEffect hook to disable a setTimeOut, although I need the timeout to complete, I'm still getting the following error message:
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 the componentWillUnmount method.
I suppose another question would be, as it's a setTimeOut that lasts for no more than a second, do I really need to be concerned about this? My code is as follows:
useEffect(() => {
return () => {
clearInterval(_isMounted);
};
},[urlReferer]);
return (
<User>
{({ data: { me }, error }) => {
if (error) return <Error error={error} />;
const userID = me && me.id;
const userType = (me && me.permissions.some(permission => ['GUEST_USER'].includes(permission))) ? 'GUEST_USER' : 'USER';
return (
...
<Form
method="post"
onSubmit={async e => {
e.preventDefault();
await signin();
setState({
...state,
name: '',
email: '',
password: '',
});
/* Now redirect user to previous page */
if (fromCart) {
Router.back();
_isMounted = setTimeout(() => { toggleCartOpen().catch(err => console.log(err.message)) }, 1000); // 1 second 1000
} else {
Router.push({
pathname: '/',
})
}
}}
>
```
Upvotes: 0
Views: 713
Reputation: 961
You should probably use clearTimeout
instead of clearInterval
. As setTimeout
creates a Timeout
object, which is what you are using. Versus using setInterval
, which then you would use clearInterval
Upvotes: 2