React-apollo: useQuery causes warning in strict mode

[lensbart]

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.

The React docs state that some lifecycle methods (constructor, render, setState, and getDerivedStateFromProps) are invoked twice in strict mode, but they don’t mention functional components in specific. Maybe this is related?

System:
    OS: macOS 10.15
  Binaries:
    Node: 12.10.0 - /usr/local/bin/node
    Yarn: 1.19.1 - ~/Documents/GitHub.nosync/codebase/node_modules/.bin/yarn
    npm: 6.10.3 - /usr/local/bin/npm
  Browsers:
    Chrome: 77.0.3865.120
    Firefox: 69.0.3
    Safari: 13.0.2
  npmPackages:
    @apollo/react-hooks: ^3.0.0 => 3.1.3 
    @apollo/react-ssr: ^3.0.0 => 3.1.3 
    @apollo/react-testing: ^3.0.0 => 3.1.3 
    apollo: ^2.3.1 => 2.21.0 
    apollo-cache-inmemory: ^1.0.0 => 1.6.3 
    apollo-client: ^2.2.5 => 2.6.4 
    apollo-link: ^1.2.3 => 1.2.13 
    apollo-link-error: ^1.0.5 => 1.1.12 
    apollo-link-http: ^1.3.2 => 1.5.16 
    apollo-link-schema: ^1.2.2 => 1.2.4 
    apollo-link-ws: ^1.0.18 => 1.0.19 
    apollo-server: ^2.0.5 => 2.9.7 
    apollo-server-express: ^2.0.3 => 2.9.7 
    apollo-utilities: ^1.3.2 => 1.3.2 

[didaquis]

Hi @lensbart do you know how to solve?

I opened a question on Stack Overflow asking for help related to that issue. https://stackoverflow.com/questions/59021064/react-apollo-query-renderprop-react-warning-cant-perform-a-react-state-up

These warning disappear outside of Strict Mode

I confirm this!

[lensbart]

Nope, haven’t solved it yet!

[didaquis]

In my case, this warning is only shown the first time you load that component. Is the same thing happening to you?

[lensbart]

Yes

[nateq314]

Seeing this here too, anyone found a real solution yet besides the workaround by @lensbart?

I'm using: "@apollo/client": "^3.0.0-beta.43",

[nathanbirrell]

I suspected what was happening when I see this error is that the query needs to be aborted as the component unmounts or is removed from the DOM.

Does anyone have a neat way to do this?

[juliocabify100]

I have the same issue!

[jordicasesnoves]

I changed to useLazyQuery hook and now it seems to work.

[dgurns]

I did this which removed a couple of the warnings:

  const [getCurrentUser, { data, loading, error }] = useLazyQuery(
    GET_CURRENT_USER
  );

  let isMounted = true;
  useEffect(() => {
    if (isMounted) {
      getCurrentUser();
    }
    return () => {
      isMounted = false;
    };
  }, []);

I'm on "3.0.0-beta.41"

UPDATE: Yep, confirmed, did this elsewhere in my code and it removed all the warnings. I'm assuming this is a bug since it would be pretty annoying to add that boilerplate around every useQuery hook.

[gfpacheco]

I have the same problem when I use fetchPolicy: 'cache-and-network', if I remove that I get no warnings, otherwise I get the Can't perform a React state update on an unmounted component. warning.

[jordicasesnoves]

I have the same problem when I use fetchPolicy: 'cache-and-network', if I remove that I get no warnings, otherwise I get the Can't perform a React state update on an unmounted component. warning.

Try the useLazyQuery hook. You can call this query when the component is mounted through a basic useEffect!

[gfpacheco]

I just tested and upgrading to the new v3.0 beta fixed the warning as well 👍

[thesofakillers]

Are there any plans to patch this in 2.X.X? Or will we _have_ to migrate to 3.0 to get it fixed?

[snasirca]

Was this meant to be fixed in "@apollo/client": "^3.0.0-beta.44"? Because I upgraded to that version and I'm seeing this same warning in StrictMode.

[johnnyoshika]

I'm seeing the same problem in @apollo/react-hooks version 3.1.5.

[Sergioamjr]

I'm having this issue when I use the refetch method on onCompleted property of a mutation, after the page is unmounted.

Using version 3.1.5.

[brodwen83]

I'm seeing the same problem in @apollo/react-hooks version 3.1.5.

did you solve it?

[johnnyoshika]

did you solve it?

@brodwen83 No

[thomas81528262]

I find the same problem.
version:
@apollo/client": "^3.0.0-rc.9

fix by lazyQuery

let isMounted = true;
useEffect(() => {
if (isMounted) {
getPlayer();
}
return () => {
isMounted = false;
};
}, []);

[AndrejGajdos]

I have the same issue in "@apollo/react-hooks": "3.1.5"

[haydenhancock]

I have the same issue in "@apollo/react-hooks": "3.1.5"

As with me.

[lsandoval0000]

I have the same issue in "@apollo/react-hooks": "3.1.5"

Same.
"react-apollo": "^3.1.5"
I am trying to using pollInterval on Class components with strict mode on will cause the same, after onCompleted property of a mutation from another component, but sometimes the message just dissapear and after some interactions, message comes again.