update canUseLayoutEffect check to also allow for layout effects in…

… React Native (#11901)

* update `canUseLayoutEffect` check to also allow for layout effects in React Native

for comparison: https://github.com/reduxjs/react-redux/blob/e05ed6840075c9cb75564cb072aa1932f46ce11f/src/utils/useIsomorphicLayoutEffect.ts

* size-limits

.changeset/brave-cups-swim.md

@@ -0,0 +1,5 @@
+---
+"@apollo/client": patch
+---
+
+update `canUseLayoutEffect` check to also allow for layout effects in React Native

.size-limits.json

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

src/utilities/common/canUse.ts

@@ -1,10 +1,10 @@
 import { maybe } from "../globals/index.js";
 
+const isReactNative = maybe(() => navigator.product) == "ReactNative";
+
 export const canUseWeakMap =
   typeof WeakMap === "function" &&
-  !maybe(
-    () => navigator.product == "ReactNative" && !(global as any).HermesInternal
-  );
+  !(isReactNative && !(global as any).HermesInternal);
 
 export const canUseWeakSet = typeof WeakSet === "function";
 
@@ -33,4 +33,4 @@ const usingJSDOM: boolean =
 // warnings about useLayoutEffect doing nothing on the server. While these
 // warnings are harmless, this !usingJSDOM condition seems to be the best way to
 // prevent them (i.e. skipping useLayoutEffect when using jsdom).
-export const canUseLayoutEffect = canUseDOM && !usingJSDOM;
+export const canUseLayoutEffect = (canUseDOM || isReactNative) && !usingJSDOM;