Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak

Question

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: '/',
                  })
                }
              }}
            >
    ```

Answer 1

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