Add feature flag for removing children Map support (#17990)

Author: trueadm

packages/react/src/ReactChildren.js

@@ -11,6 +11,7 @@ import {
   REACT_ELEMENT_TYPE,
   REACT_PORTAL_TYPE,
 } from 'shared/ReactSymbols';
+import {disableMapsAsChildren} from 'shared/ReactFeatureFlags';
 
 import {isValidElement, cloneAndReplaceKey} from './ReactElement';
 import ReactDebugCurrentFrame from './ReactDebugCurrentFrame';
@@ -158,14 +159,22 @@ function traverseAllChildrenImpl(
   } else {
     const iteratorFn = getIteratorFn(children);
     if (typeof iteratorFn === 'function') {
-      if (__DEV__) {
+      if (iteratorFn === children.entries) {
+        if (disableMapsAsChildren) {
+          invariant(
+            false,
+            'Maps are not valid as a React child (found: %s). Consider converting ' +
+              'children to an array of keyed ReactElements instead.',
+            children,
+          );
+        }
         // Warn about using Maps as children
-        if (iteratorFn === children.entries) {
+        if (__DEV__) {
           if (!didWarnAboutMaps) {
-            console.error(
-              'Using Maps as children is unsupported and will likely yield ' +
-                'unexpected results. Convert it to a sequence/iterable of keyed ' +
-                'ReactElements instead.',
+            console.warn(
+              'Using Maps as children is deprecated and will be removed in ' +
+                'a future major release. Consider converting children to ' +
+                'an array of keyed ReactElements instead.',
             );
           }
           didWarnAboutMaps = true;

packages/shared/ReactFeatureFlags.js

@@ -97,6 +97,8 @@ export const enableNativeTargetAsInstance = false;
 // This flag provides a killswitch if that proves to break existing code somehow.
 export const deferPassiveEffectCleanupDuringUnmount = false;
 
+export const isTestEnvironment = false;
+
 // --------------------------
 // Future APIs to be deprecated
 // --------------------------
@@ -115,12 +117,13 @@ export const disableCreateFactory = false;
 // Disables children for <textarea> elements
 export const disableTextareaChildren = false;
 
+// Disables Maps as ReactElement children
+export const disableMapsAsChildren = false;
+
 // Disables ReactDOM.unstable_renderSubtreeIntoContainer
 export const disableUnstableRenderSubtreeIntoContainer = false;
 // We should remove this flag once the above flag becomes enabled
 export const warnUnstableRenderSubtreeIntoContainer = false;
 
 // Disables ReactDOM.unstable_createPortal
 export const disableUnstableCreatePortal = false;
-
-export const isTestEnvironment = false;

packages/shared/forks/ReactFeatureFlags.native-fb.js

@@ -47,6 +47,7 @@ export const enableTrainModelFix = true;
 export const enableTrustedTypesIntegration = false;
 export const disableCreateFactory = false;
 export const disableTextareaChildren = false;
+export const disableMapsAsChildren = false;
 export const disableUnstableRenderSubtreeIntoContainer = false;
 export const warnUnstableRenderSubtreeIntoContainer = false;
 export const disableUnstableCreatePortal = false;

packages/shared/forks/ReactFeatureFlags.native-oss.js

@@ -42,6 +42,7 @@ export const enableTrustedTypesIntegration = false;
 export const enableNativeTargetAsInstance = false;
 export const disableCreateFactory = false;
 export const disableTextareaChildren = false;
+export const disableMapsAsChildren = false;
 export const disableUnstableRenderSubtreeIntoContainer = false;
 export const warnUnstableRenderSubtreeIntoContainer = false;
 export const disableUnstableCreatePortal = false;

packages/shared/forks/ReactFeatureFlags.persistent.js

@@ -42,6 +42,7 @@ export const enableTrustedTypesIntegration = false;
 export const enableNativeTargetAsInstance = false;
 export const disableCreateFactory = false;
 export const disableTextareaChildren = false;
+export const disableMapsAsChildren = false;
 export const disableUnstableRenderSubtreeIntoContainer = false;
 export const warnUnstableRenderSubtreeIntoContainer = false;
 export const disableUnstableCreatePortal = false;

packages/shared/forks/ReactFeatureFlags.test-renderer.js

@@ -42,6 +42,7 @@ export const enableTrustedTypesIntegration = false;
 export const enableNativeTargetAsInstance = false;
 export const disableCreateFactory = false;
 export const disableTextareaChildren = false;
+export const disableMapsAsChildren = false;
 export const disableUnstableRenderSubtreeIntoContainer = false;
 export const warnUnstableRenderSubtreeIntoContainer = false;
 export const disableUnstableCreatePortal = false;

packages/shared/forks/ReactFeatureFlags.test-renderer.www.js

@@ -40,6 +40,7 @@ export const enableTrustedTypesIntegration = false;
 export const enableNativeTargetAsInstance = false;
 export const disableCreateFactory = false;
 export const disableTextareaChildren = false;
+export const disableMapsAsChildren = false;
 export const disableUnstableRenderSubtreeIntoContainer = false;
 export const warnUnstableRenderSubtreeIntoContainer = false;
 export const disableUnstableCreatePortal = false;

packages/shared/forks/ReactFeatureFlags.testing.js

@@ -42,6 +42,7 @@ export const enableTrustedTypesIntegration = false;
 export const enableNativeTargetAsInstance = false;
 export const disableCreateFactory = false;
 export const disableTextareaChildren = false;
+export const disableMapsAsChildren = false;
 export const disableUnstableRenderSubtreeIntoContainer = false;
 export const warnUnstableRenderSubtreeIntoContainer = false;
 export const disableUnstableCreatePortal = false;

packages/shared/forks/ReactFeatureFlags.www.js

@@ -96,6 +96,8 @@ export const disableCreateFactory = false;
 
 export const disableTextareaChildren = false;
 
+export const disableMapsAsChildren = false;
+
 export const disableUnstableRenderSubtreeIntoContainer = false;
 
 export const warnUnstableRenderSubtreeIntoContainer = false;

scripts/error-codes/codes.json

@@ -344,5 +344,6 @@
   "343": "ReactDOMServer does not yet support scope components.",
   "344": "Expected prepareToHydrateHostSuspenseInstance() to never be called. This error is likely caused by a bug in React. Please file an issue.",
   "345": "Root did not complete. This is a bug in React.",
-  "346": "An event responder context was used outside of an event cycle."
+  "346": "An event responder context was used outside of an event cycle.",
+  "347": "Maps are not valid as a React child (found: %s). Consider converting children to an array of keyed ReactElements instead."
 }