Warning: Can't perform a React state update on an unmounted component.

[amiyatulu]

This is the code for useMuation

  const [tokenAuthCall, { loading: mutationLoading, error: mutationError }] = useMutation(LOGIN_MUTATION, {
    refetchQueries: [ { query: ME_QUERY }], awaitRefetchQueries: true,
  })

But on using refetchQueries it gives the following 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.

This is my nav code:

function NavContents(props) {
  let me
  let data = MeQuery()
  try {
    me = data.me
  } catch {
    me = false
  }
return (
    <React.Fragment>
{me && (
              <li className="nav-item">
                <NavLink to="/profile" className="nav-link">
                  {me.name}
                </NavLink>
              </li>
            )}
            {me && (
              <li className="nav-item">
                <NavLink to="/signout" className="nav-link">
                  (SignOut)
                </NavLink>
              </li>
            )}
<React.Fragment>
)

And the is MeQuery()

import React, { Component } from "react"
import { gql, useQuery } from "@apollo/client"

const ME_QUERY = gql`
  query {
    me {
      email
      name
    }
  }
`

function MeQuery() {
  const { loading, error, data } = useQuery(ME_QUERY)
  let value
  if (loading) return "Loading..."
  if (error) {
    value = false
  }
  value = data
  return value
}

export default MeQuery
export {ME_QUERY}

[amiyatulu]

I found the cause. The issue is because of <React.StrictMode> apollographql/react-apollo#3635

[hwillson]

@amiyatulu is this still happening when you use the latest @apollo/client@beta (3.0.0-beta.50)?

[amiyatulu]

Yes, it's still given the error after upgrade to 3.0.0-beta.50

[nodabladam]

Is this the fix and if so can it get merged?
#6216

[Banou26]

Still happening for me with useQuery on 3.0.0-rc.2

Edit: Oh well, just saw #6395 (comment) that talks about #6216's revert

[Banou26]

Error seems to be gone for me on 3.0.0-rc.3

[devinowen]

I'm still seeing this error when using useQuery with a basic query and the follow params:

{
  fetchPolicy: "no-cache",
  errorPolicy: "all"
}

My useEffect dependency array includes the data, loading, and error vars returned from useQuery, if that makes a difference.

I'm using StrictMode and on "@apollo/client": "3.0.0-rc.5".

Happy to provide more details if needed!

[ablbol]

I have been tracking this warning for a while and I can confirm that useQuery is the source of the warning. The warning says 'Warning: Can't perform a React state update on an unmounted component'. I am using:

"@apollo/client": "^3.0.1",
"aws-appsync": "^4.0.0",
"graphql": "^15.3.0",
"react": "16.13.1",
"react-native": "0.63.1",

It is happening mostly in a page where the component is un-mounting . useQuery is reading from cache. Hope this help fix the problem.
Thanks

[csandanov]

I wasn't sure if my similar issue (more like #6248) is a bug or not so I posted it with more details on SO https://stackoverflow.com/questions/62938649/react-apollo-client-arning-cant-perform-a-react-state-update-on-an-unmounted

[Felix-Indoing]

Happened also when route changes while current route has a useQuery

[figurluk]

@Felix-Indoing same for me 😕

[daltonmenezes]

Same here

[nodabladam]

Every time I get "state update on an unmounted component" in the console, this issue makes it hard to tell if it is really due to state in my code or not and if I have actually fixed legitimate issues because this issue causes so many errors. If there is a way to fix this without breaking SSR, it would really help.

[an-tran-eda]

same here

[trieu-le-eda]

I got the same issue when the route changes with "@apollo/react-hooks": "^3.1.5"

[jalho]

I was struggling with a similar issue an solved it by using useLazyQuery on mount instead of useQuery on each render, as inspired by jordicasesnoves:

import { useEffect } from "react";
import { useLazyQuery } from "@apollo/client";

  // ...
  const [myQueryExecutor, { data }] = useLazyQuery(MY_QUERY);

  // execute query on component mount
  useEffect(
    () => { myQueryExecutor(); },
    [myQueryExecutor]
  );

[axelvaindal]

I got the same issue as well with @apollo/client version 3.1.1 on route change when the current route is using useQuery.

[rediska1114]

same here

[azinit]

Still actual!!

[jjalonso]

still failing.

[manzoorwanijk]

Still the same warnings :(

[kelseyway]

Same.

[suhanw]

That seemed to do the trick, thanks @davidgilbertson!

[eden-lane]

@suhanw do you have your <RouterProvider> outside your <ApolloProvider> in your component hierarchy? Does reversing them make a difference?

unfortunately it changed nothing for me, still getting this error

[ndeamador]

I also tried wrapping ApolloProvider inside BrowserRouter in index.ts (before I had BrowserRouter wrapping my routes in App.js) and I am still getting the error:

` ReactDOM.render(

  <ApolloProvider client={client}>

    <React.StrictMode>

      <App />

    </React.StrictMode>

  </ApolloProvider>

</Router>,

document.getElementById('root')

);
`

I have also tried swapping Router and ApolloProvider in the code above and I still get the warning.

I can confirm though that using useLazyQuery + useEffect gets rid of the warning. Not sure if this is intended or ideal.

[PierreAndreis]

It might be related to #8011

[mvaivre]

Is there any update regarding this? Still the same warning when using useQuery and changing route. And it seems to me that using useLazyQuery and useEffect is a workaround, not an actual solution?

[jgwiazdowski]

it's still an issue

so only solution now is lazy query and useEffect?

[Jojocaster]

@jgwiazdowski The best workaround so far (in my opinion) is to use a hook telling you whether a component is mounted or not and to pass that Boolean to the skip parameter of your query.
It is a bit cleaner than useLazyQuery.

[maxdbarton97]

useLazyQuery and useEffect does not work for me sadly.

Any movement on this?

[ibrahimhist]

i have encountered same problem. I tried every possibility. This is the solution that help me with. Using skip { skip:true } after getting data solves

const [skip, setSkip] = useState(false)
const [securities, isLoading] = useQueryGetMinifiedSecurities(skip)
const [datasource, setDatasource] = useState([])

 useEffect(() => {
    if (securities && !isLoading) {
      setDatasource(securities)
      setSkip(true)
    }
  }, [isLoading, securities])

[PierreAndreis]

This issue is related to StrictMode, and I have a working reproduction on #8011

[mishasyrbu]

useEffect(() => {
    if (data) {
      // here call navigate action
    }
  }, [onClose, data]);

[hwillson]

This should be fixed with @apollo/client >= 3.4 - thanks!