From 10a8c0a8f6f3e13ec3c67bf53cc11a948b60e6d9 Mon Sep 17 00:00:00 2001
From: Lenz Weber-Tronic <lorenz.weber-tronic@apollographql.com>
Date: Mon, 24 Jun 2024 18:22:05 +0200
Subject: [PATCH] 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  | 5 +++++
 .size-limits.json              | 4 ++--
 src/utilities/common/canUse.ts | 8 ++++----
 3 files changed, 11 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/brave-cups-swim.md

diff --git a/.changeset/brave-cups-swim.md b/.changeset/brave-cups-swim.md
new file mode 100644
index 0000000000..29b06597bd
--- /dev/null
+++ b/.changeset/brave-cups-swim.md
@@ -0,0 +1,5 @@
+---
+"@apollo/client": patch
+---
+
+update `canUseLayoutEffect` check to also allow for layout effects in React Native
diff --git a/.size-limits.json b/.size-limits.json
index 49fc0446c8..7d53db26ea 100644
--- a/.size-limits.json
+++ b/.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
 }
diff --git a/src/utilities/common/canUse.ts b/src/utilities/common/canUse.ts
index 217cc01158..768619290b 100644
--- a/src/utilities/common/canUse.ts
+++ b/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;