Throw a better error when Lazy/Promise is used in React.Children (#28280

) We could in theory actually support this case by throwing a Promise when it's used inside a render. Allowing it to be synchronously unwrapped. However, it's a bit sketchy because we officially only support this in the render's child position or in `use()`. Another alternative could be to actually pass the Promise/Lazy to the callback so that you can reason about it and just return it again or even unwrapping with `use()` - at least for the forEach case maybe. DiffTrain build for commit e41ee9e.
facebook · Feb 8, 2024 · f47b316 · f47b316
1 parent f655b67
commit f47b316
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 32 deletions.
diff --git a/...ook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-dev.js b/...ook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-dev.js
@@ -25670,7 +25670,7 @@ if (__DEV__) {
       return root;
     }
 
-    var ReactVersion = "18.3.0-canary-cd63ef792-20240208";
+    var ReactVersion = "18.3.0-canary-e41ee9ea7-20240208";
 
     // Might add PROFILE later.
 

diff --git a/...ok-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-prod.js b/...ok-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-prod.js
@@ -9152,7 +9152,7 @@ var devToolsConfig$jscomp$inline_1011 = {
     throw Error("TestRenderer does not support findFiberByHostInstance()");
   },
   bundleType: 0,
-  version: "18.3.0-canary-cd63ef792-20240208",
+  version: "18.3.0-canary-e41ee9ea7-20240208",
   rendererPackageName: "react-test-renderer"
 };
 var internals$jscomp$inline_1189 = {
@@ -9183,7 +9183,7 @@ var internals$jscomp$inline_1189 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-canary-cd63ef792-20240208"
+  reconcilerVersion: "18.3.0-canary-e41ee9ea7-20240208"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_1190 = __REACT_DEVTOOLS_GLOBAL_HOOK__;

diff --git a/...source/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-profiling.js b/...source/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-profiling.js
@@ -9580,7 +9580,7 @@ var devToolsConfig$jscomp$inline_1053 = {
     throw Error("TestRenderer does not support findFiberByHostInstance()");
   },
   bundleType: 0,
-  version: "18.3.0-canary-cd63ef792-20240208",
+  version: "18.3.0-canary-e41ee9ea7-20240208",
   rendererPackageName: "react-test-renderer"
 };
 var internals$jscomp$inline_1230 = {
@@ -9611,7 +9611,7 @@ var internals$jscomp$inline_1230 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-canary-cd63ef792-20240208"
+  reconcilerVersion: "18.3.0-canary-e41ee9ea7-20240208"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_1231 = __REACT_DEVTOOLS_GLOBAL_HOOK__;

diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-dev.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-dev.js
@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<0dd9a827f64fd255297b65cbaecd6c33>>
+ * @generated SignedSource<<46e4507c5c03b4e9b651f29123272054>>
  */
 
 "use strict";
@@ -24,7 +24,7 @@ if (__DEV__) {
     ) {
       __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
     }
-    var ReactVersion = "18.3.0-canary-cd63ef792-20240208";
+    var ReactVersion = "18.3.0-canary-e41ee9ea7-20240208";
 
     // ATTENTION
     // When adding new symbols to this file,
@@ -1791,6 +1791,13 @@ if (__DEV__) {
               case REACT_ELEMENT_TYPE:
               case REACT_PORTAL_TYPE:
                 invokeCallback = true;
+                break;
+
+              case REACT_LAZY_TYPE:
+                throw new Error(
+                  "Cannot render an Async Component, Promise or React.Lazy inside React.Children. " +
+                    "We recommend not iterating over children and just rendering them plain."
+                );
             }
         }
       }
@@ -1904,6 +1911,14 @@ if (__DEV__) {
         } else if (type === "object") {
           // eslint-disable-next-line react-internal/safe-string-coercion
           var childrenString = String(children);
+
+          if (typeof children.then === "function") {
+            throw new Error(
+              "Cannot render an Async Component, Promise or React.Lazy inside React.Children. " +
+                "We recommend not iterating over children and just rendering them plain."
+            );
+          }
+
           throw new Error(
             "Objects are not valid as a React child (found: " +
               (childrenString === "[object Object]"

diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-prod.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-prod.js
@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<bfea370d77b8a2763632472a0306ca34>>
+ * @generated SignedSource<<16d58eb8536d00d4c5865c8269806ef1>>
  */
 
 "use strict";
@@ -177,6 +177,11 @@ function mapIntoArray(children, array, escapedPrefix, nameSoFar, callback) {
           case REACT_ELEMENT_TYPE:
           case REACT_PORTAL_TYPE:
             invokeCallback = !0;
+            break;
+          case REACT_LAZY_TYPE:
+            throw Error(
+              "Cannot render an Async Component, Promise or React.Lazy inside React.Children. We recommend not iterating over children and just rendering them plain."
+            );
         }
     }
   if (invokeCallback)
@@ -241,17 +246,20 @@ function mapIntoArray(children, array, escapedPrefix, nameSoFar, callback) {
           nextName,
           callback
         ));
-  else if ("object" === type)
-    throw (
-      ((array = String(children)),
-      Error(
-        "Objects are not valid as a React child (found: " +
-          ("[object Object]" === array
-            ? "object with keys {" + Object.keys(children).join(", ") + "}"
-            : array) +
-          "). If you meant to render a collection of children, use an array instead."
-      ))
+  else if ("object" === type) {
+    array = String(children);
+    if ("function" === typeof children.then)
+      throw Error(
+        "Cannot render an Async Component, Promise or React.Lazy inside React.Children. We recommend not iterating over children and just rendering them plain."
+      );
+    throw Error(
+      "Objects are not valid as a React child (found: " +
+        ("[object Object]" === array
+          ? "object with keys {" + Object.keys(children).join(", ") + "}"
+          : array) +
+        "). If you meant to render a collection of children, use an array instead."
     );
+  }
   return invokeCallback;
 }
 function mapChildren(children, func, context) {
@@ -543,4 +551,4 @@ exports.useSyncExternalStore = function (
 exports.useTransition = function () {
   return ReactCurrentDispatcher.current.useTransition();
 };
-exports.version = "18.3.0-canary-cd63ef792-20240208";
+exports.version = "18.3.0-canary-e41ee9ea7-20240208";
diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-profiling.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-profiling.js
@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<ed24a17f92681cf29d086121949cb6ee>>
+ * @generated SignedSource<<b8b76608b94e652bed210d7cb704af18>>
  */
 
 "use strict";
@@ -152,6 +152,11 @@ function mapIntoArray(children, array, escapedPrefix, nameSoFar, callback) {
           case REACT_ELEMENT_TYPE:
           case REACT_PORTAL_TYPE:
             invokeCallback = !0;
+            break;
+          case REACT_LAZY_TYPE:
+            throw Error(
+              "Cannot render an Async Component, Promise or React.Lazy inside React.Children. We recommend not iterating over children and just rendering them plain."
+            );
         }
     }
   if (invokeCallback)
@@ -216,17 +221,20 @@ function mapIntoArray(children, array, escapedPrefix, nameSoFar, callback) {
           nextName,
           callback
         ));
-  else if ("object" === type)
-    throw (
-      ((array = String(children)),
-      Error(
-        "Objects are not valid as a React child (found: " +
-          ("[object Object]" === array
-            ? "object with keys {" + Object.keys(children).join(", ") + "}"
-            : array) +
-          "). If you meant to render a collection of children, use an array instead."
-      ))
+  else if ("object" === type) {
+    array = String(children);
+    if ("function" === typeof children.then)
+      throw Error(
+        "Cannot render an Async Component, Promise or React.Lazy inside React.Children. We recommend not iterating over children and just rendering them plain."
+      );
+    throw Error(
+      "Objects are not valid as a React child (found: " +
+        ("[object Object]" === array
+          ? "object with keys {" + Object.keys(children).join(", ") + "}"
+          : array) +
+        "). If you meant to render a collection of children, use an array instead."
     );
+  }
   return invokeCallback;
 }
 function mapChildren(children, func, context) {
@@ -539,7 +547,7 @@ exports.useSyncExternalStore = function (
 exports.useTransition = function () {
   return ReactCurrentDispatcher.current.useTransition();
 };
-exports.version = "18.3.0-canary-cd63ef792-20240208";
+exports.version = "18.3.0-canary-e41ee9ea7-20240208";
 "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
   "function" ===
     typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

diff --git a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/REVISION b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/REVISION
@@ -1 +1 @@
-cd63ef79218a1d53c8739da75b154014f3b7cc73
+e41ee9ea70f8998144fdd959ac11fd7a40e4ee20