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