{"body":"I fully enabled this flag internally now and unless I see complications,\r\nwe should be able to clean this up in the code.","parents":["48b687fc95a172cec8f305312a27d105e5719581"],"files":[{"status":"M","path":"packages\/react\/src\/ReactElementValidator.js"},{"status":"M","path":"packages\/react\/src\/__tests__\/ReactElementJSX-test.js"},{"status":"M","path":"packages\/react\/src\/jsx\/ReactJSXElementValidator.js"},{"status":"M","path":"packages\/shared\/ReactFeatureFlags.js"},{"status":"M","path":"packages\/shared\/forks\/ReactFeatureFlags.native-fb.js"},{"status":"M","path":"packages\/shared\/forks\/ReactFeatureFlags.native-oss.js"},{"status":"M","path":"packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js"},{"status":"M","path":"packages\/shared\/forks\/ReactFeatureFlags.test-renderer.native.js"},{"status":"M","path":"packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js"},{"status":"M","path":"packages\/shared\/forks\/ReactFeatureFlags.testing.js"},{"status":"M","path":"packages\/shared\/forks\/ReactFeatureFlags.testing.www.js"},{"status":"M","path":"packages\/shared\/forks\/ReactFeatureFlags.www-dynamic.js"},{"status":"M","path":"packages\/shared\/forks\/ReactFeatureFlags.www.js"}],"patch":"diff --git a\/packages\/react\/src\/ReactElementValidator.js b\/packages\/react\/src\/ReactElementValidator.js\nindex b67f52fe9f..1cc7bcf475 100644\n--- a\/packages\/react\/src\/ReactElementValidator.js\n+++ b\/packages\/react\/src\/ReactElementValidator.js\n@@ -21,7 +21,6 @@ import {\n REACT_FRAGMENT_TYPE,\n REACT_ELEMENT_TYPE,\n } from 'shared\/ReactSymbols';\n-import {warnAboutSpreadingKeyToJSX} from 'shared\/ReactFeatureFlags';\n import checkPropTypes from 'shared\/checkPropTypes';\n import isArray from 'shared\/isArray';\n \n@@ -365,13 +364,11 @@ export function jsxWithValidation(\n Object.freeze(children);\n }\n } else {\n- if (__DEV__) {\n- console.error(\n- 'React.jsx: Static children should always be an array. ' +\n- 'You are likely explicitly calling React.jsxs or React.jsxDEV. ' +\n- 'Use the Babel transform instead.',\n- );\n- }\n+ console.error(\n+ 'React.jsx: Static children should always be an array. ' +\n+ 'You are likely explicitly calling React.jsxs or React.jsxDEV. ' +\n+ 'Use the Babel transform instead.',\n+ );\n }\n } else {\n validateChildKeys(children, type);\n@@ -379,31 +376,29 @@ export function jsxWithValidation(\n }\n }\n \n- if (warnAboutSpreadingKeyToJSX) {\n- if (hasOwnProperty.call(props, 'key')) {\n- const componentName = getComponentNameFromType(type);\n- const keys = Object.keys(props).filter(k => k !== 'key');\n- const beforeExample =\n- keys.length > 0\n- ? '{key: someKey, ' + keys.join(': ..., ') + ': ...}'\n- : '{key: someKey}';\n- if (!didWarnAboutKeySpread[componentName + beforeExample]) {\n- const afterExample =\n- keys.length > 0 ? '{' + keys.join(': ..., ') + ': ...}' : '{}';\n- console.error(\n- 'A props object containing a \"key\" prop is being spread into JSX:\\n' +\n- ' let props = %s;\\n' +\n- ' <%s {...props} \/>\\n' +\n- 'React keys must be passed directly to JSX without using spread:\\n' +\n- ' let props = %s;\\n' +\n- ' <%s key={someKey} {...props} \/>',\n- beforeExample,\n- componentName,\n- afterExample,\n- componentName,\n- );\n- didWarnAboutKeySpread[componentName + beforeExample] = true;\n- }\n+ if (hasOwnProperty.call(props, 'key')) {\n+ const componentName = getComponentNameFromType(type);\n+ const keys = Object.keys(props).filter(k => k !== 'key');\n+ const beforeExample =\n+ keys.length > 0\n+ ? '{key: someKey, ' + keys.join(': ..., ') + ': ...}'\n+ : '{key: someKey}';\n+ if (!didWarnAboutKeySpread[componentName + beforeExample]) {\n+ const afterExample =\n+ keys.length > 0 ? '{' + keys.join(': ..., ') + ': ...}' : '{}';\n+ console.error(\n+ 'A props object containing a \"key\" prop is being spread into JSX:\\n' +\n+ ' let props = %s;\\n' +\n+ ' <%s {...props} \/>\\n' +\n+ 'React keys must be passed directly to JSX without using spread:\\n' +\n+ ' let props = %s;\\n' +\n+ ' <%s key={someKey} {...props} \/>',\n+ beforeExample,\n+ componentName,\n+ afterExample,\n+ componentName,\n+ );\n+ didWarnAboutKeySpread[componentName + beforeExample] = true;\n }\n }\n \ndiff --git a\/packages\/react\/src\/__tests__\/ReactElementJSX-test.js b\/packages\/react\/src\/__tests__\/ReactElementJSX-test.js\nindex ad42046087..4b7e70a073 100644\n--- a\/packages\/react\/src\/__tests__\/ReactElementJSX-test.js\n+++ b\/packages\/react\/src\/__tests__\/ReactElementJSX-test.js\n@@ -264,33 +264,31 @@ describe('ReactElement.jsx', () => {\n );\n });\n \n- if (require('shared\/ReactFeatureFlags').warnAboutSpreadingKeyToJSX) {\n- it('should warn when keys are passed as part of props', () => {\n- const container = document.createElement('div');\n- class Child extends React.Component {\n- render() {\n- return JSXRuntime.jsx('div', {});\n- }\n+ it('should warn when keys are passed as part of props', () => {\n+ const container = document.createElement('div');\n+ class Child extends React.Component {\n+ render() {\n+ return JSXRuntime.jsx('div', {});\n }\n- class Parent extends React.Component {\n- render() {\n- return JSXRuntime.jsx('div', {\n- children: [JSXRuntime.jsx(Child, {key: '0', prop: 'hi'})],\n- });\n- }\n+ }\n+ class Parent extends React.Component {\n+ render() {\n+ return JSXRuntime.jsx('div', {\n+ children: [JSXRuntime.jsx(Child, {key: '0', prop: 'hi'})],\n+ });\n }\n- expect(() =>\n- ReactDOM.render(JSXRuntime.jsx(Parent, {}), container),\n- ).toErrorDev(\n- 'Warning: A props object containing a \"key\" prop is being spread into JSX:\\n' +\n- ' let props = {key: someKey, prop: ...};\\n' +\n- ' \\n' +\n- 'React keys must be passed directly to JSX without using spread:\\n' +\n- ' let props = {prop: ...};\\n' +\n- ' ',\n- );\n- });\n- }\n+ }\n+ expect(() =>\n+ ReactDOM.render(JSXRuntime.jsx(Parent, {}), container),\n+ ).toErrorDev(\n+ 'Warning: A props object containing a \"key\" prop is being spread into JSX:\\n' +\n+ ' let props = {key: someKey, prop: ...};\\n' +\n+ ' \\n' +\n+ 'React keys must be passed directly to JSX without using spread:\\n' +\n+ ' let props = {prop: ...};\\n' +\n+ ' ',\n+ );\n+ });\n \n it('should not warn when unkeyed children are passed to jsxs', () => {\n const container = document.createElement('div');\ndiff --git a\/packages\/react\/src\/jsx\/ReactJSXElementValidator.js b\/packages\/react\/src\/jsx\/ReactJSXElementValidator.js\nindex 044f9a2b05..947d806058 100644\n--- a\/packages\/react\/src\/jsx\/ReactJSXElementValidator.js\n+++ b\/packages\/react\/src\/jsx\/ReactJSXElementValidator.js\n@@ -21,7 +21,6 @@ import {\n REACT_FRAGMENT_TYPE,\n REACT_ELEMENT_TYPE,\n } from 'shared\/ReactSymbols';\n-import {warnAboutSpreadingKeyToJSX} from 'shared\/ReactFeatureFlags';\n import hasOwnProperty from 'shared\/hasOwnProperty';\n import isArray from 'shared\/isArray';\n import {jsxDEV} from '.\/ReactJSXElement';\n@@ -390,31 +389,29 @@ export function jsxWithValidation(\n }\n }\n \n- if (warnAboutSpreadingKeyToJSX) {\n- if (hasOwnProperty.call(props, 'key')) {\n- const componentName = getComponentNameFromType(type);\n- const keys = Object.keys(props).filter(k => k !== 'key');\n- const beforeExample =\n- keys.length > 0\n- ? '{key: someKey, ' + keys.join(': ..., ') + ': ...}'\n- : '{key: someKey}';\n- if (!didWarnAboutKeySpread[componentName + beforeExample]) {\n- const afterExample =\n- keys.length > 0 ? '{' + keys.join(': ..., ') + ': ...}' : '{}';\n- console.error(\n- 'A props object containing a \"key\" prop is being spread into JSX:\\n' +\n- ' let props = %s;\\n' +\n- ' <%s {...props} \/>\\n' +\n- 'React keys must be passed directly to JSX without using spread:\\n' +\n- ' let props = %s;\\n' +\n- ' <%s key={someKey} {...props} \/>',\n- beforeExample,\n- componentName,\n- afterExample,\n- componentName,\n- );\n- didWarnAboutKeySpread[componentName + beforeExample] = true;\n- }\n+ if (hasOwnProperty.call(props, 'key')) {\n+ const componentName = getComponentNameFromType(type);\n+ const keys = Object.keys(props).filter(k => k !== 'key');\n+ const beforeExample =\n+ keys.length > 0\n+ ? '{key: someKey, ' + keys.join(': ..., ') + ': ...}'\n+ : '{key: someKey}';\n+ if (!didWarnAboutKeySpread[componentName + beforeExample]) {\n+ const afterExample =\n+ keys.length > 0 ? '{' + keys.join(': ..., ') + ': ...}' : '{}';\n+ console.error(\n+ 'A props object containing a \"key\" prop is being spread into JSX:\\n' +\n+ ' let props = %s;\\n' +\n+ ' <%s {...props} \/>\\n' +\n+ 'React keys must be passed directly to JSX without using spread:\\n' +\n+ ' let props = %s;\\n' +\n+ ' <%s key={someKey} {...props} \/>',\n+ beforeExample,\n+ componentName,\n+ afterExample,\n+ componentName,\n+ );\n+ didWarnAboutKeySpread[componentName + beforeExample] = true;\n }\n }\n \ndiff --git a\/packages\/shared\/ReactFeatureFlags.js b\/packages\/shared\/ReactFeatureFlags.js\nindex 63d1aae161..7a9a02262e 100644\n--- a\/packages\/shared\/ReactFeatureFlags.js\n+++ b\/packages\/shared\/ReactFeatureFlags.js\n@@ -185,19 +185,6 @@ export const enableCustomElementPropertySupport = __EXPERIMENTAL__;\n \/\/ Disables children for

elements\n export const disableTextareaChildren = false;\n \n-\/\/ -----------------------------------------------------------------------------\n-\/\/ JSX Chopping Block\n-\/\/\n-\/\/ Similar to main Chopping Block but only flags related to JSX. These are\n-\/\/ grouped because we will likely batch all of them into a single major release.\n-\/\/ -----------------------------------------------------------------------------\n-\n-\/\/ New API for JSX transforms to target - https:\/\/github.com\/reactjs\/rfcs\/pull\/107\n-\n-\/\/ Enables a warning when trying to spread a 'key' to an element;\n-\/\/ a deprecated pattern we want to get rid of in the future\n-export const warnAboutSpreadingKeyToJSX = true;\n-\n \/\/ -----------------------------------------------------------------------------\n \/\/ Debugging and DevTools\n \/\/ -----------------------------------------------------------------------------\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.native-fb.js b\/packages\/shared\/forks\/ReactFeatureFlags.native-fb.js\nindex 95a330b576..136a920faf 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.native-fb.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.native-fb.js\n@@ -45,7 +45,6 @@ export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;\n export const enableTrustedTypesIntegration = false;\n export const disableTextareaChildren = false;\n export const disableModulePatternComponents = false;\n-export const warnAboutSpreadingKeyToJSX = true;\n export const enableSuspenseAvoidThisFallback = false;\n export const enableSuspenseAvoidThisFallbackFizz = false;\n export const enableCPUSuspense = true;\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.native-oss.js b\/packages\/shared\/forks\/ReactFeatureFlags.native-oss.js\nindex d8a1d8c5d7..8441d94768 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.native-oss.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.native-oss.js\n@@ -35,7 +35,6 @@ export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;\n export const enableTrustedTypesIntegration = false;\n export const disableTextareaChildren = false;\n export const disableModulePatternComponents = false;\n-export const warnAboutSpreadingKeyToJSX = true;\n export const enableSuspenseAvoidThisFallback = false;\n export const enableSuspenseAvoidThisFallbackFizz = false;\n export const enableCPUSuspense = false;\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js\nindex 92a4ecaf5d..ffb690e6d2 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js\n@@ -35,7 +35,6 @@ export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;\n export const enableTrustedTypesIntegration = false;\n export const disableTextareaChildren = false;\n export const disableModulePatternComponents = false;\n-export const warnAboutSpreadingKeyToJSX = true;\n export const enableSuspenseAvoidThisFallback = false;\n export const enableSuspenseAvoidThisFallbackFizz = false;\n export const enableCPUSuspense = false;\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.native.js b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.native.js\nindex dd2c58d33f..79cb7c6de7 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.native.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.native.js\n@@ -35,7 +35,6 @@ export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;\n export const enableTrustedTypesIntegration = false;\n export const disableTextareaChildren = false;\n export const disableModulePatternComponents = false;\n-export const warnAboutSpreadingKeyToJSX = true;\n export const enableComponentStackLocations = false;\n export const enableLegacyFBSupport = false;\n export const enableFilterEmptyStringAttributesDOM = false;\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js\nindex 78652d8835..42c2d95c88 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js\n@@ -35,7 +35,6 @@ export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;\n export const enableTrustedTypesIntegration = false;\n export const disableTextareaChildren = false;\n export const disableModulePatternComponents = true;\n-export const warnAboutSpreadingKeyToJSX = true;\n export const enableSuspenseAvoidThisFallback = true;\n export const enableSuspenseAvoidThisFallbackFizz = false;\n export const enableCPUSuspense = false;\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.testing.js b\/packages\/shared\/forks\/ReactFeatureFlags.testing.js\nindex 72a1a74523..29185c1286 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.testing.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.testing.js\n@@ -35,7 +35,6 @@ export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;\n export const enableTrustedTypesIntegration = false;\n export const disableTextareaChildren = false;\n export const disableModulePatternComponents = false;\n-export const warnAboutSpreadingKeyToJSX = true;\n export const enableSuspenseAvoidThisFallback = false;\n export const enableSuspenseAvoidThisFallbackFizz = false;\n export const enableCPUSuspense = false;\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.testing.www.js b\/packages\/shared\/forks\/ReactFeatureFlags.testing.www.js\nindex d5bc91306d..f1e39456d7 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.testing.www.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.testing.www.js\n@@ -35,7 +35,6 @@ export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;\n export const enableTrustedTypesIntegration = false;\n export const disableTextareaChildren = __EXPERIMENTAL__;\n export const disableModulePatternComponents = true;\n-export const warnAboutSpreadingKeyToJSX = true;\n export const enableSuspenseAvoidThisFallback = true;\n export const enableSuspenseAvoidThisFallbackFizz = false;\n export const enableCPUSuspense = true;\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.www-dynamic.js b\/packages\/shared\/forks\/ReactFeatureFlags.www-dynamic.js\nindex b2882118be..b0a4261362 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.www-dynamic.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.www-dynamic.js\n@@ -13,7 +13,6 @@\n \/\/ Use __VARIANT__ to simulate a GK. The tests will be run twice: once\n \/\/ with the __VARIANT__ set to `true`, and once set to `false`.\n \n-export const warnAboutSpreadingKeyToJSX = __VARIANT__;\n export const disableInputAttributeSyncing = __VARIANT__;\n export const enableFilterEmptyStringAttributesDOM = __VARIANT__;\n export const enableLegacyFBSupport = __VARIANT__;\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.www.js b\/packages\/shared\/forks\/ReactFeatureFlags.www.js\nindex 6cc8f83172..83e3f877c7 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.www.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.www.js\n@@ -18,7 +18,6 @@ export const {\n   disableInputAttributeSyncing,\n   enableTrustedTypesIntegration,\n   disableSchedulerTimeoutBasedOnReactExpirationTime,\n-  warnAboutSpreadingKeyToJSX,\n   replayFailedUnitOfWorkWithInvokeGuardedCallback,\n   enableFilterEmptyStringAttributesDOM,\n   enableLegacyFBSupport,\n","commit":{"authorEmail":"jkassens@meta.com","authoredAt":"2023-01-30T15:25:24-05:00","subject":"[cleanup] fully roll out warnAboutSpreadingKeyToJSX (#26080)","shortRevision":"1f5ce59dd7","authorName":"Jan Kassens","revision":"1f5ce59dd7b6869b1a17ede65aa301002ef31d4b"}}</article></body></html>

dillon1000/react

Files changed