Skip to content
This repository has been archived by the owner on Apr 13, 2023. It is now read-only.

Can't perform state update on an unmounted component #4026

Open
mfasanya opened this issue Jun 19, 2020 · 0 comments
Open

Can't perform state update on an unmounted component #4026

mfasanya opened this issue Jun 19, 2020 · 0 comments

Comments

@mfasanya
Copy link

I am in a situation where I have a getCurrentUser query which is called from a few different protected routes. Based on this I will then redirect the user if they don't have the relevant permissions

const { data, loading } = useGetCurrentUserQuery()

  const user = data?.getCurrentUser

  return (
    <Route
      {...rest}
      render={(props) =>
        loading ? (
          <LoadingScreen />
        ) : user && !user.signupComplete ? (
          <Redirect to="/complete_signup" />
        ) : user?.signupComplete ? (
          children
        ) : (
          <Redirect to="/login" />
        )
      }
    />
  )

This is all great. However, I also need to call getCurrentUser from other components within the children. If for some reason the currentUser object is updated and this protected route redirects you the browser throws a warning:

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 assume this is because the currentUser changes propagate through the app and apollo doesn't know it have unmounted.

"@apollo/client": "3.0.0-rc.6",
"@apollo/link-error": "^2.0.0-beta.3",

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant