Assorted useSyncExternalStore refinements (#9709)

package.json

@@ -81,7 +81,6 @@
   },
   "dependencies": {
     "@graphql-typed-document-node/core": "^3.1.1",
-    "@types/use-sync-external-store": "^0.0.3",
     "@wry/context": "^0.6.0",
     "@wry/equality": "^0.5.0",
     "@wry/trie": "^0.3.0",
@@ -109,6 +108,7 @@
     "@types/node": "16.11.33",
     "@types/react": "17.0.45",
     "@types/react-dom": "17.0.16",
+    "@types/use-sync-external-store": "^0.0.3",
     "acorn": "8.7.1",
     "bundlesize": "0.18.1",
     "cross-fetch": "3.1.5",

src/react/hooks/useSyncExternalStore.ts

@@ -12,22 +12,21 @@ type RealUseSESHookType =
   // when only React 17 or earlier is installed.
   typeof import("use-sync-external-store").useSyncExternalStore;
 
+// Prevent webpack from complaining about our feature detection of the
+// useSyncExternalStore property of the React namespace, which is expected not
+// to exist when using React 17 and earlier, and that's fine.
+const uSESKey = "useSyncExternalStore" as keyof typeof React;
+const realHook = React[uSESKey] as RealUseSESHookType | undefined;
+
 // Adapted from https://www.npmjs.com/package/use-sync-external-store, with
 // Apollo Client deviations called out by "// DEVIATION ..." comments.
 
-export const useSyncExternalStore: RealUseSESHookType = (
+// When/if React.useSyncExternalStore is defined, delegate fully to it.
+export const useSyncExternalStore: RealUseSESHookType = realHook || ((
   subscribe,
   getSnapshot,
   getServerSnapshot,
 ) => {
-  // When/if React.useSyncExternalStore is defined, delegate fully to it.
-  const realHook = (React as {
-    useSyncExternalStore?: RealUseSESHookType;
-  }).useSyncExternalStore;
-  if (realHook) {
-    return realHook(subscribe, getSnapshot, getServerSnapshot);
-  }
-
   // Read the current snapshot from the store on every render. Again, this
   // breaks the rules of React, and only works here because of specific
   // implementation details, most importantly that updates are
@@ -112,7 +111,7 @@ export const useSyncExternalStore: RealUseSESHookType = (
   }, [subscribe]);
 
   return value;
-}
+});
 
 function checkIfSnapshotChanged<Snapshot>({
   value,