diff --git a/src/react/hooks/utils/useBaseQuery.ts b/src/react/hooks/utils/useBaseQuery.ts
index 30823c25698..a2d913403a5 100644
--- a/src/react/hooks/utils/useBaseQuery.ts
+++ b/src/react/hooks/utils/useBaseQuery.ts
@@ -29,12 +29,14 @@ export function useBaseQuery<TData = any, TVariables = OperationVariables>(
       options: updatedOptions as QueryDataOptions<TData, TVariables>,
       context,
       onNewData() {
-        if (!queryData.ssrInitiated() && queryDataRef.current) {
+        if (!queryData.ssrInitiated()) {
           // When new data is received from the `QueryData` object, we want to
           // force a re-render to make sure the new data is displayed. We can't
           // force that re-render if we're already rendering however so to be
-          // safe we'll trigger the re-render in a microtask.
-          Promise.resolve().then(forceUpdate);
+          // safe we'll trigger the re-render in a microtask. In case the
+          // component gets unmounted before this callback fires, we re-check
+          // queryDataRef.current before calling forceUpdate().
+          Promise.resolve().then(() => queryDataRef.current && forceUpdate());
         } else {
           // If we're rendering on the server side we can force an update at
           // any point.