Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

useQuery calls onCompleted on unmounted components

See original GitHub issue

Intended outcome: Make a query with useQuery and have it not call onCompleted on a component that isn’t mounted

Actual outcome: onCompleted was called, which resulted in us calling setState in an un-mounted component

How to reproduce the issue: We don’t have a firm reproduction, but we notice errors like this sporadically when upgrading from 3.6.2 to 3.6.9:

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.
    in CandidatePullOut (at CandidatePullOut.tsx:41) [index.js:1](http://localhost:3001/Users/basher/code/ashby/frontend/node_modules/react-error-overlay/lib/index.js)
    e index.js:1
    get <ourlogger>.tsx:81
    onCompleted <call to setState in onCompleted in component using useQuery>.tsx:68
    handleErrorOrCompleted useQuery.ts:510
    setResult useQuery.ts:502
    onNext useQuery.ts:159
    notifySubscription module.js:132
    onNotify module.js:176
    next module.js:225
    iterateObserversSafely iteration.ts:13
    iterateObserversSafely iteration.ts:13
    reportResult ObservableQuery.ts:879
    next ObservableQuery.ts:830
    iterateObserversSafely iteration.ts:13
    iterateObserversSafely iteration.ts:13
    next Concast.ts:172
    notifySubscription module.js:132
    onNotify module.js:176
    next module.js:225
    promiseQueue asyncMap.ts:34

Versions @apollo/client 3.6.9

Issue Analytics

State:
Created a year ago
Comments:9 (9 by maintainers)

Top GitHub Comments

1reaction

benasher44commented, Jul 28, 2022

No we’re running 3.6.2. We couldn’t upgrade due to other (seemingly) internal changes that impacted number (or timing) of react renders, so we’re stuck on 3.6.2

0reactions

alessbellcommented, Aug 9, 2022

After looking at this some more, I’m going to go ahead and close this ticket out.

Absent a reproduction, the existing behavior of onComplete as a callback that executes when a query finishes executing behaves as described. Don’t hesitate to re-open with more information or a reproduction in the future. Thanks!

Top Results From Across the Web

Refetching queries in Apollo Client - Apollo GraphQL Docs

To refetch all queries managed by Apollo Client (even those with no observers, or whose components are currently unmounted), pass "all" for include...

Apollo client (react) - Cant update state on unmounted ...

I assume mutation hook updates client state on its own, .then() block resolved before client update and unmounted component.

GraphQL query causes "Can't perform a React state update on ...

The form submits and works but causes the "Can't perform a React state update on an unmounted component" memory leak error and asks...

Query Cancellation | TanStack Query Docs

By default, queries that unmount or become unused before their promises are resolved are not cancelled. This means that after the promise has...

open-source-community/apollographql-react-apollo

Prevent duplicate onCompleted calls during the same query execution cycle. Make sure polling is stopped when a component is unmounted. Documentation fixes.