Avoid excessive cache.watch / unsubscribe on every render in useFragment

.changeset/great-badgers-jog.md

@@ -0,0 +1,5 @@
+---
+'@apollo/client': patch
+---
+
+Prevent `useFragment` from excessively unsubscribing and resubscribing the fragment with the cache on every render.

.size-limits.json

@@ -1,4 +1,4 @@
 {
-  "dist/apollo-client.min.cjs": 37901,
+  "dist/apollo-client.min.cjs": 37932,
   "import { ApolloClient, InMemoryCache, HttpLink } from \"dist/index.js\" (production)": 31976
 }

src/react/hooks/__tests__/useFragment.test.tsx

@@ -1513,12 +1513,6 @@ describe("has the same timing as `useQuery`", () => {
 
     cache.writeQuery({ query, data: { item: updatedItem } });
 
-    if (React.version.startsWith("17.")) {
-      const { snapshot } = await ProfiledComponent.takeRender();
-      expect(snapshot.queryData).toStrictEqual({ item: initialItem });
-      expect(snapshot.fragmentData).toStrictEqual(updatedItem);
-    }
-
     {
       const { snapshot } = await ProfiledComponent.takeRender();
       expect(snapshot.queryData).toStrictEqual({ item: updatedItem });

src/react/hooks/internal/index.ts

@@ -1,4 +1,5 @@
 // These hooks are used internally and are not exported publicly by the library
 export { useDeepMemo } from "./useDeepMemo.js";
 export { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect.js";
+export { useLazyRef } from "./useLazyRef.js";
 export { __use } from "./__use.js";

src/react/hooks/internal/useLazyRef.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+
+const INIT = {};
+
+export function useLazyRef<T>(getInitialValue: () => T) {
+  const ref = React.useRef<T>(INIT as unknown as T);
+
+  if (ref.current === INIT) {
+    ref.current = getInitialValue();
+  }
+
+  return ref;
+}

src/react/hooks/useFragment.ts

@@ -14,6 +14,7 @@ import { useApolloClient } from "./useApolloClient.js";
 import { useSyncExternalStore } from "./useSyncExternalStore.js";
 import type { OperationVariables } from "../../core/index.js";
 import type { NoInfer } from "../types/types.js";
+import { useDeepMemo, useLazyRef } from "./internal/index.js";
 
 export interface UseFragmentOptions<TData, TVars>
   extends Omit<
@@ -46,48 +47,57 @@ export function useFragment<TData = any, TVars = OperationVariables>(
 ): UseFragmentResult<TData> {
   const { cache } = useApolloClient();
 
-  const { fragment, fragmentName, from, optimistic = true, ...rest } = options;
+  const diffOptions = useDeepMemo<Cache.DiffOptions<TData, TVars>>(() => {
+    const {
+      fragment,
+      fragmentName,
+      from,
+      optimistic = true,
+      ...rest
+    } = options;
 
-  const diffOptions: Cache.DiffOptions<TData, TVars> = {
-    ...rest,
-    returnPartialData: true,
-    id: typeof from === "string" ? from : cache.identify(from),
-    query: cache["getFragmentDoc"](fragment, fragmentName),
-    optimistic,
-  };
+    return {
+      ...rest,
+      returnPartialData: true,
+      id: typeof from === "string" ? from : cache.identify(from),
+      query: cache["getFragmentDoc"](fragment, fragmentName),
+      optimistic,
+    };
+  }, [options]);
 
-  const resultRef = React.useRef<UseFragmentResult<TData>>();
-  let latestDiff = cache.diff<TData>(diffOptions);
+  const resultRef = useLazyRef<UseFragmentResult<TData>>(() =>
+    diffToResult(cache.diff<TData>(diffOptions))
+  );
 
   // Used for both getSnapshot and getServerSnapshot
-  const getSnapshot = () => {
-    const latestDiffToResult = diffToResult(latestDiff);
-    return (
-        resultRef.current &&
-          equal(resultRef.current.data, latestDiffToResult.data)
-      ) ?
-        resultRef.current
-      : (resultRef.current = latestDiffToResult);
-  };
+  const getSnapshot = React.useCallback(() => resultRef.current, []);
 
   return useSyncExternalStore(
-    (forceUpdate) => {
-      let lastTimeout = 0;
-      const unsubcribe = cache.watch({
-        ...diffOptions,
-        immediate: true,
-        callback(diff) {
-          if (!equal(diff, latestDiff)) {
-            resultRef.current = diffToResult((latestDiff = diff));
-            lastTimeout = setTimeout(forceUpdate) as any;
-          }
-        },
-      });
-      return () => {
-        unsubcribe();
-        clearTimeout(lastTimeout);
-      };
-    },
+    React.useCallback(
+      (forceUpdate) => {
+        let lastTimeout = 0;
+        const unsubscribe = cache.watch({
+          ...diffOptions,
+          immediate: true,
+          callback(diff) {
+            if (!equal(diff.result, resultRef.current.data)) {
+              resultRef.current = diffToResult(diff);
+              // If we get another update before we've re-rendered, bail out of
+              // the update and try again. This ensures that the relative timing
+              // between useQuery and useFragment stays roughly the same as
+              // fixed in https://github.com/apollographql/apollo-client/pull/11083
+              clearTimeout(lastTimeout);
+              lastTimeout = setTimeout(forceUpdate) as any;
+            }
+          },
+        });
+        return () => {
+          unsubscribe();
+          clearTimeout(lastTimeout);
+        };
+      },
+      [cache, diffOptions]
+    ),
     getSnapshot,
     getSnapshot
   );