useQuery does not cancel network request on unmounting which results in a warning

[cemalettin-work]

Describe the bug
When we fetch data with a request using useQuery from"@apollo/react-hooks"and update a React component state according to the request, we sometimes update a component state (due to async nature of requests) after the component unmounts. This results in a warning like this:

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 an open issue waiting to be resolved from apollo-client: apollographql/apollo-client#4955 which we encountered here:
#3017 (review)

After that i tried to reproduce the warning (since we use useQuery everywhere), i managed to get the same warning in a different page as well (reports/Form.js):

To Reproduce

Steps to reproduce the behavior (this was by luck, maybe there is a more consistent way to reproduce like slowing network request etc):

1. Go to a page with data request
2. Very quickly click on some link which can unmount the component (which has logic to set some state after request)
3. If you clicked before request finished, look at the console for warning

Expected behavior
No warnings in the console.

Screenshots

Environment (please complete the following information):

• Browser [Chrome v85]

Additional context

[cemalettin-work]

Another one at reports/Show.js (Clicked a read report with LikertScale component + immediately navigating away from that page ).
EDIT: this was cause by react-use-dimensions not useQuery, react-use-dimensions call requestAnimationFrame ( which does the same kind of async state stating)

[cemalettin-work]

These warnings are mainly coming from the libraries and not really critical from users' perspective. I will close this as the only thing we can do about it is to change the libraries which is a major work for such a minuscule problem.