Feature Flag for React.jsx` "spreading a key to jsx" warning (#18074)

Adds a feature flag for when React.jsx warns you about spreading a key into jsx. It's false for all builds, except as a dynamic flag for fb/www.

I also included the component name in the warning.

Author: threepointone

packages/react/src/ReactElementValidator.js

@@ -21,6 +21,7 @@ import {
   REACT_FRAGMENT_TYPE,
   REACT_ELEMENT_TYPE,
 } from 'shared/ReactSymbols';
+import {warnAboutSpreadingKeyToJSX} from 'shared/ReactFeatureFlags';
 import checkPropTypes from 'prop-types/checkPropTypes';
 
 import ReactCurrentOwner from './ReactCurrentOwner';
@@ -365,13 +366,16 @@ export function jsxWithValidation(
     }
   }
 
-  if (hasOwnProperty.call(props, 'key')) {
-    if (__DEV__) {
-      console.error(
-        'React.jsx: Spreading a key to JSX is a deprecated pattern. ' +
-          'Explicitly pass a key after spreading props in your JSX call. ' +
-          'E.g. <ComponentName {...props} key={key} />',
-      );
+  if (__DEV__) {
+    if (warnAboutSpreadingKeyToJSX) {
+      if (hasOwnProperty.call(props, 'key')) {
+        console.error(
+          'React.jsx: Spreading a key to JSX is a deprecated pattern. ' +
+            'Explicitly pass a key after spreading props in your JSX call. ' +
+            'E.g. <%s {...props} key={key} />',
+          getComponentName(type) || 'ComponentName',
+        );
+      }
     }
   }
 

packages/react/src/__tests__/ReactElementJSX-test.internal.js

@@ -32,6 +32,7 @@ describe('ReactElement.jsx', () => {
 
     ReactFeatureFlags = require('shared/ReactFeatureFlags');
     ReactFeatureFlags.enableJSXTransformAPI = true;
+    ReactFeatureFlags.warnAboutSpreadingKeyToJSX = true;
 
     React = require('react');
     ReactDOM = require('react-dom');
@@ -371,7 +372,7 @@ describe('ReactElement.jsx', () => {
     expect(() => ReactDOM.render(React.jsx(Parent, {}), container)).toErrorDev(
       'Warning: React.jsx: Spreading a key to JSX is a deprecated pattern. ' +
         'Explicitly pass a key after spreading props in your JSX call. ' +
-        'E.g. <ComponentName {...props} key={key} />',
+        'E.g. <Child {...props} key={key} />',
     );
   });
 

packages/shared/ReactFeatureFlags.js

@@ -48,6 +48,8 @@ export const disableJavaScriptURLs = false;
 // Control this behavior with a flag to support 16.6 minor releases in the meanwhile.
 export const exposeConcurrentModeAPIs = __EXPERIMENTAL__;
 
+// Warns when a combination of updates on a dom can cause a style declaration
+// that clashes with a previous one https://github.com/facebook/react/pull/14181
 export const warnAboutShorthandPropertyCollision = true;
 
 // Experimental React Flare event system and event components support.
@@ -106,8 +108,14 @@ export const runAllPassiveEffectDestroysBeforeCreates = false;
 // WARNING This flag only has an affect if used with runAllPassiveEffectDestroysBeforeCreates.
 export const deferPassiveEffectCleanupDuringUnmount = false;
 
+// Use this flag to generate "testing" builds, that include APIs like act()
+// and extra warnings/errors
 export const isTestEnvironment = false;
 
+// Enables a warning when trying to spread a 'key' to an element;
+// a deprecated pattern we want to get rid of in the future
+export const warnAboutSpreadingKeyToJSX = false;
+
 // --------------------------
 // Future APIs to be deprecated
 // --------------------------

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

@@ -56,6 +56,7 @@ export const deferPassiveEffectCleanupDuringUnmount = false;
 export const runAllPassiveEffectDestroysBeforeCreates = false;
 export const isTestEnvironment = false;
 export const enableModernEventSystem = false;
+export const warnAboutSpreadingKeyToJSX = false;
 
 // Only used in www builds.
 export function addUserTimingListener() {

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

@@ -51,6 +51,7 @@ export const deferPassiveEffectCleanupDuringUnmount = false;
 export const runAllPassiveEffectDestroysBeforeCreates = false;
 export const isTestEnvironment = false;
 export const enableModernEventSystem = false;
+export const warnAboutSpreadingKeyToJSX = false;
 
 // Only used in www builds.
 export function addUserTimingListener() {

packages/shared/forks/ReactFeatureFlags.persistent.js

@@ -51,6 +51,7 @@ export const deferPassiveEffectCleanupDuringUnmount = false;
 export const runAllPassiveEffectDestroysBeforeCreates = false;
 export const isTestEnvironment = false;
 export const enableModernEventSystem = false;
+export const warnAboutSpreadingKeyToJSX = false;
 
 // Only used in www builds.
 export function addUserTimingListener() {

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

@@ -51,6 +51,7 @@ export const deferPassiveEffectCleanupDuringUnmount = false;
 export const runAllPassiveEffectDestroysBeforeCreates = false;
 export const isTestEnvironment = true; // this should probably *never* change
 export const enableModernEventSystem = false;
+export const warnAboutSpreadingKeyToJSX = false;
 
 // Only used in www builds.
 export function addUserTimingListener() {

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

@@ -51,6 +51,7 @@ export const deferPassiveEffectCleanupDuringUnmount = false;
 export const runAllPassiveEffectDestroysBeforeCreates = false;
 export const isTestEnvironment = true; // this should probably *never* change
 export const enableModernEventSystem = false;
+export const warnAboutSpreadingKeyToJSX = false;
 
 // Only used in www builds.
 export function addUserTimingListener() {

packages/shared/forks/ReactFeatureFlags.testing.js

@@ -51,6 +51,7 @@ export const deferPassiveEffectCleanupDuringUnmount = false;
 export const runAllPassiveEffectDestroysBeforeCreates = false;
 export const isTestEnvironment = true;
 export const enableModernEventSystem = false;
+export const warnAboutSpreadingKeyToJSX = false;
 
 // Only used in www builds.
 export function addUserTimingListener() {

packages/shared/forks/ReactFeatureFlags.testing.www.js

@@ -51,6 +51,7 @@ export const deferPassiveEffectCleanupDuringUnmount = false;
 export const runAllPassiveEffectDestroysBeforeCreates = false;
 export const isTestEnvironment = true;
 export const enableModernEventSystem = false;
+export const warnAboutSpreadingKeyToJSX = false;
 
 // Only used in www builds.
 export function addUserTimingListener() {

packages/shared/forks/ReactFeatureFlags.www.js

@@ -19,6 +19,7 @@ export const {
   runAllPassiveEffectDestroysBeforeCreates,
   warnAboutShorthandPropertyCollision,
   disableSchedulerTimeoutBasedOnReactExpirationTime,
+  warnAboutSpreadingKeyToJSX,
 } = require('ReactFeatureFlags');
 
 // On WWW, __EXPERIMENTAL__ is used for a new modern build.