apollo-client: useQuery causes warning in strict mode

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: https://github.com/apollographql/react-apollo/issues/3635

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 23
  • Comments: 17 (4 by maintainers)

Most upvoted comments

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

@DennieMello This week!

The beta release cleared those warnings for me.

Hey, I still have this issue with 3.3.7.

I though it was fixed here: https://github.com/apollographql/apollo-client/pull/6216

Any leads on this issue or a workaround? Thanks 👍

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