useQuery causes warning in strict mode

[vdineva]

When I wrap my app in <React.StrictMode />, some of my components cause 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.

These warning disappear outside of Strict Mode and in production builds (which turn off the StrictMode behavior). The components in question don’t set state or use useEffect. They all use useQuery however.

The warnings disappear when I remove useQuery, i.e. by replacing this:

const { data: { preference = {} } = {} } = useQuery(PREFERENCE)
with an example response, like this:

const { data: { preference = {} } = {} } = {
  data: {
    preference: {
      id: 'dc1d27d7-c5fe-4de6-97c5-9db2bfaa7cd8',
      toc: false
    }
  }
}

and leaving the rest of the component unchanged.

I am using "@apollo/client": "^3.3.2"
This issue was originally reposted in react-apollo repo: apollographql/react-apollo#3635

[jjalonso]

+1 same here.

[graniczny]

+1 and here

[BuntyBru]

same here

[Nightbr]

Hey, I still have this issue with 3.3.7.

I though it was fixed here: #6216

Any leads on this issue or a workaround? Thanks 👍

[stevejay]

@Nightbr #6216 had to be reverted because the fix broke SSR.

[MelodicsGreg]

From what I can tell by inspecting the cache state, useQuery watches are not being cleaned up when components unmount - it would make sense to me that resolving this would stop the broadcast of cache modifications throwing this error?

In my case, navigating back and forth between the same two pages using react router results in an ever growing list of watches for the same two queries.

This looks like a memory leak, though I haven't checked to see if there is some other mechanism for gc that happens based on some trigger other than components unmounting.

[shreyashc]

+1

[f4z3k4s]

+1, the same

[jcreighton]

The warnings should be silenced with the recent change in #7655. I do want to note though that this doesn't solve the actual issue: useQuery creates duplicate queries in React.StrictMode. A solution for this problem will take longer but in the meanwhile, you should see less warnings in the console.

[macrael]

@jcreighton is there an issue tracking fixing useQuery to be torn down correctly under StrictMode? I hit some unexpected behavior with refetchQueries that was different in dev and prod.

[dchenk]

I'm still seeing this warning sometimes in strict mode at version 3.3.20

[brainkim]

@dchenk Can you try the beta release (npm i @apollo/client@beta)? It might be fixed on there.

[bstro]

The beta release cleared those warnings for me.

[DennieMello]

Installing the beta really helped. When to wait for the release?

[brainkim]

@DennieMello This week!

[yogesnsamy]

@DennieMello This week!

@brainkim I'm on version 3.3.20. Should I be installing @apollo/client@beta to fix this issue?

[brainkim]

@yogesnsamy Try 3.4.5!