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

My page / page level query is rendered SSR. I have a below the fold component on my page that is not SSR (has a component level useQuery hook with the ssr: false option). It accepts an itemId prop that is handed down from the page level query’s results. The itemId prop is used as a variable in the component level query.

When a mutation is triggered on click from another part of the page, I update an attribute on the Item shape (with cache ID Item:[id]) via an update function passed to the useMutation API. This causes the above error in the not SSR component. It looks like onNewData is triggering a re-render and it’s bubbling down to the component, which is evidently unmounted. This is causing my page to momentarily 404.

Any idea on how to fix? It looks like I want the non-SSR component to ignore the onNewData re-render when my component is unmounted. This is actually happening in a couple below the fold, non-SSR components so I’m hoping there is a reusable solution out there. Thanks in advance!

Full stack trace

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 NotSSRComponent (at Container.tsx:78)
    in div (at Container.tsx:74)
    in Container (at SSRSection.tsx:57)
    in div (at SSRSection.tsx:56)
    in div (created by On) react-dom.development.js:88
    React 5
    onNewData useBaseQuery.js:18
    next QueryData.js:224
    notifySubscription Observable.js:135
    onNotify Observable.js:179
    next Observable.js:235
    iterateObserversSafely iteration.js:4
    iterateObserversSafely iteration.js:4
    next ObservableQuery.js:21
    observe ObservableQuery.js:320
    oqListener QueryInfo.js:100
    notify QueryInfo.js:115
    notify QueryInfo.js:115
    broadcastQueries QueryManager.js:447
    broadcastQueries QueryManager.js:447
    mutate QueryManager.js:80
    step tslib.es6.js:100
    verb tslib.es6.js:81
    __awaiter tslib.es6.js:74
    __awaiter tslib.es6.js:70
    mutate QueryManager.js:47
    mutate ApolloClient.js:131
    mutate MutationData.js:48
    runMutation MutationData.js:16
    onClick MyMutationHelper.tsx:64
    jn index.js:1
    onClick index.js:1
    onClick index.js:1
    React 17
    unstable_runWithPriority scheduler.development.js:653
    React 24
    renderReactElement index.tsx:499
    doRender index.tsx:754
    _callee2$ index.tsx:394
    Babel 8
    render index.js:484
    <anonymous> next-dev.js:85
    displayContent fouc.js:14
    (Async: FrameRequestCallback)
    displayContent fouc.js:5
    <anonymous> next-dev.js:84
    (Async: promise callback)
    <anonymous> next-dev.js:31
    <anonymous> next-dev.js:155
    NextJS 6

This might be relevant: apollo-client/useBaseQuery.ts at b0da267d24d8713987e9ff8d2240c5c7ed94eb94 · apollographql/apollo-client · GitHub

I might try doing this in the child: reactjs - how to unsubscribe with useQuery and subscribeToMore - Stack Overflow

Fixed by making sure all page data is cached correctly so the re-render doesn’t need to trigger another query / network call.