{"patch":"diff --git a\/packages\/react-reconciler\/src\/__tests__\/ReactPerformanceTrack-test.js b\/packages\/react-reconciler\/src\/__tests__\/ReactPerformanceTrack-test.js\nnew file mode 100644\nindex 0000000000..7231081248\n--- \/dev\/null\n+++ b\/packages\/react-reconciler\/src\/__tests__\/ReactPerformanceTrack-test.js\n@@ -0,0 +1,327 @@\n+\/**\n+ * Copyright (c) Meta Platforms, Inc. and affiliates.\n+ *\n+ * This source code is licensed under the MIT license found in the\n+ * LICENSE file in the root directory of this source tree.\n+ *\n+ * @emails react-core\n+ * @jest-environment node\n+ *\/\n+\n+let React;\n+let ReactNoop;\n+let Scheduler;\n+let act;\n+let useEffect;\n+\n+describe('ReactPerformanceTracks', () => {\n+ beforeEach(() => {\n+ Object.defineProperty(performance, 'measure', {\n+ value: jest.fn(),\n+ configurable: true,\n+ });\n+ console.timeStamp = () => {};\n+ jest.spyOn(console, 'timeStamp').mockImplementation(() => {});\n+\n+ jest.resetModules();\n+\n+ React = require('react');\n+ ReactNoop = require('react-noop-renderer');\n+ Scheduler = require('scheduler');\n+ act = require('internal-test-utils').act;\n+ useEffect = React.useEffect;\n+ });\n+\n+ \/\/ @gate __DEV__ && enableComponentPerformanceTrack\n+ it('shows a hint if an update is triggered by a deeply equal object', async () => {\n+ const App = function App({items}) {\n+ Scheduler.unstable_advanceTime(10);\n+ useEffect(() => {}, [items]);\n+ };\n+\n+ Scheduler.unstable_advanceTime(1);\n+ const items = ['one', 'two'];\n+ await act(() => {\n+ ReactNoop.render();\n+ });\n+\n+ expect(performance.measure.mock.calls).toEqual([\n+ [\n+ 'Mount',\n+ {\n+ detail: {\n+ devtools: {\n+ color: 'warning',\n+ properties: null,\n+ tooltipText: 'Mount',\n+ track: 'Components ⚛',\n+ },\n+ },\n+ end: 11,\n+ start: 1,\n+ },\n+ ],\n+ ]);\n+ performance.measure.mockClear();\n+\n+ Scheduler.unstable_advanceTime(10);\n+ await act(() => {\n+ ReactNoop.render();\n+ });\n+\n+ expect(performance.measure.mock.calls).toEqual([\n+ [\n+ 'App',\n+ {\n+ detail: {\n+ devtools: {\n+ color: 'primary-dark',\n+ properties: [\n+ ['Changed Props', ''],\n+ [' items', 'Array'],\n+ ['+ 2', '…'],\n+ ],\n+ tooltipText: 'App',\n+ track: 'Components ⚛',\n+ },\n+ },\n+ end: 31,\n+ start: 21,\n+ },\n+ ],\n+ ]);\n+ });\n+\n+ \/\/ @gate __DEV__ && enableComponentPerformanceTrack\n+ it('bails out of diffing wide arrays', async () => {\n+ const App = function App({items}) {\n+ Scheduler.unstable_advanceTime(10);\n+ React.useEffect(() => {}, [items]);\n+ };\n+\n+ Scheduler.unstable_advanceTime(1);\n+ const items = Array.from({length: 1000}, (_, i) => i);\n+ await act(() => {\n+ ReactNoop.render();\n+ });\n+\n+ expect(performance.measure.mock.calls).toEqual([\n+ [\n+ 'Mount',\n+ {\n+ detail: {\n+ devtools: {\n+ color: 'warning',\n+ properties: null,\n+ tooltipText: 'Mount',\n+ track: 'Components ⚛',\n+ },\n+ },\n+ end: 11,\n+ start: 1,\n+ },\n+ ],\n+ ]);\n+ performance.measure.mockClear();\n+\n+ Scheduler.unstable_advanceTime(10);\n+ await act(() => {\n+ ReactNoop.render();\n+ });\n+\n+ expect(performance.measure.mock.calls).toEqual([\n+ [\n+ 'App',\n+ {\n+ detail: {\n+ devtools: {\n+ color: 'primary-dark',\n+ properties: [\n+ ['Changed Props', ''],\n+ [' items', 'Array'],\n+ [\n+ 'Previous object has more than 100 properties. React will not attempt to diff objects with too many properties.',\n+ '',\n+ ],\n+ [\n+ 'Next object has more than 100 properties. React will not attempt to diff objects with too many properties.',\n+ '',\n+ ],\n+ ],\n+ tooltipText: 'App',\n+ track: 'Components ⚛',\n+ },\n+ },\n+ end: 31,\n+ start: 21,\n+ },\n+ ],\n+ ]);\n+ });\n+\n+ \/\/ @gate __DEV__ && enableComponentPerformanceTrack\n+ it('does not show all properties of wide objects', async () => {\n+ const App = function App({items}) {\n+ Scheduler.unstable_advanceTime(10);\n+ React.useEffect(() => {}, [items]);\n+ };\n+\n+ Scheduler.unstable_advanceTime(1);\n+ await act(() => {\n+ ReactNoop.render();\n+ });\n+\n+ expect(performance.measure.mock.calls).toEqual([\n+ [\n+ 'Mount',\n+ {\n+ detail: {\n+ devtools: {\n+ color: 'warning',\n+ properties: null,\n+ tooltipText: 'Mount',\n+ track: 'Components ⚛',\n+ },\n+ },\n+ end: 11,\n+ start: 1,\n+ },\n+ ],\n+ ]);\n+ performance.measure.mockClear();\n+\n+ Scheduler.unstable_advanceTime(10);\n+\n+ const bigData = new Uint8Array(1000);\n+ await act(() => {\n+ ReactNoop.render();\n+ });\n+\n+ expect(performance.measure.mock.calls).toEqual([\n+ [\n+ 'App',\n+ {\n+ detail: {\n+ devtools: {\n+ color: 'primary-dark',\n+ properties: [\n+ ['Changed Props', ''],\n+ [' data', ''],\n+ ['– buffer', 'null'],\n+ ['+ buffer', 'Uint8Array'],\n+ ['+ 0', '0'],\n+ ['+ 1', '0'],\n+ ['+ 2', '0'],\n+ ['+ 3', '0'],\n+ ['+ 4', '0'],\n+ ['+ 5', '0'],\n+ ['+ 6', '0'],\n+ ['+ 7', '0'],\n+ ['+ 8', '0'],\n+ ['+ 9', '0'],\n+ ['+ 10', '0'],\n+ ['+ 11', '0'],\n+ ['+ 12', '0'],\n+ ['+ 13', '0'],\n+ ['+ 14', '0'],\n+ ['+ 15', '0'],\n+ ['+ 16', '0'],\n+ ['+ 17', '0'],\n+ ['+ 18', '0'],\n+ ['+ 19', '0'],\n+ ['+ 20', '0'],\n+ ['+ 21', '0'],\n+ ['+ 22', '0'],\n+ ['+ 23', '0'],\n+ ['+ 24', '0'],\n+ ['+ 25', '0'],\n+ ['+ 26', '0'],\n+ ['+ 27', '0'],\n+ ['+ 28', '0'],\n+ ['+ 29', '0'],\n+ ['+ 30', '0'],\n+ ['+ 31', '0'],\n+ ['+ 32', '0'],\n+ ['+ 33', '0'],\n+ ['+ 34', '0'],\n+ ['+ 35', '0'],\n+ ['+ 36', '0'],\n+ ['+ 37', '0'],\n+ ['+ 38', '0'],\n+ ['+ 39', '0'],\n+ ['+ 40', '0'],\n+ ['+ 41', '0'],\n+ ['+ 42', '0'],\n+ ['+ 43', '0'],\n+ ['+ 44', '0'],\n+ ['+ 45', '0'],\n+ ['+ 46', '0'],\n+ ['+ 47', '0'],\n+ ['+ 48', '0'],\n+ ['+ 49', '0'],\n+ ['+ 50', '0'],\n+ ['+ 51', '0'],\n+ ['+ 52', '0'],\n+ ['+ 53', '0'],\n+ ['+ 54', '0'],\n+ ['+ 55', '0'],\n+ ['+ 56', '0'],\n+ ['+ 57', '0'],\n+ ['+ 58', '0'],\n+ ['+ 59', '0'],\n+ ['+ 60', '0'],\n+ ['+ 61', '0'],\n+ ['+ 62', '0'],\n+ ['+ 63', '0'],\n+ ['+ 64', '0'],\n+ ['+ 65', '0'],\n+ ['+ 66', '0'],\n+ ['+ 67', '0'],\n+ ['+ 68', '0'],\n+ ['+ 69', '0'],\n+ ['+ 70', '0'],\n+ ['+ 71', '0'],\n+ ['+ 72', '0'],\n+ ['+ 73', '0'],\n+ ['+ 74', '0'],\n+ ['+ 75', '0'],\n+ ['+ 76', '0'],\n+ ['+ 77', '0'],\n+ ['+ 78', '0'],\n+ ['+ 79', '0'],\n+ ['+ 80', '0'],\n+ ['+ 81', '0'],\n+ ['+ 82', '0'],\n+ ['+ 83', '0'],\n+ ['+ 84', '0'],\n+ ['+ 85', '0'],\n+ ['+ 86', '0'],\n+ ['+ 87', '0'],\n+ ['+ 88', '0'],\n+ ['+ 89', '0'],\n+ ['+ 90', '0'],\n+ ['+ 91', '0'],\n+ ['+ 92', '0'],\n+ ['+ 93', '0'],\n+ ['+ 94', '0'],\n+ ['+ 95', '0'],\n+ ['+ 96', '0'],\n+ ['+ 97', '0'],\n+ ['+ 98', '0'],\n+ ['+ 99', '0'],\n+ [\n+ '+ Only 100 properties are shown. React will not log more properties of this object.',\n+ '',\n+ ],\n+ ],\n+ tooltipText: 'App',\n+ track: 'Components ⚛',\n+ },\n+ },\n+ end: 31,\n+ start: 21,\n+ },\n+ ],\n+ ]);\n+ });\n+});\ndiff --git a\/packages\/shared\/ReactPerformanceTrackProperties.js b\/packages\/shared\/ReactPerformanceTrackProperties.js\nindex 160c839c3e..87231c20c4 100644\n--- a\/packages\/shared\/ReactPerformanceTrackProperties.js\n+++ b\/packages\/shared\/ReactPerformanceTrackProperties.js\n@@ -18,9 +18,13 @@ const EMPTY_ARRAY = 0;\n const COMPLEX_ARRAY = 1;\n const PRIMITIVE_ARRAY = 2; \/\/ Primitive values only\n const ENTRIES_ARRAY = 3; \/\/ Tuple arrays of string and value (like Headers, Map, etc)\n+\n+\/\/ Showing wider objects in the devtools is not useful.\n+const OBJECT_WIDTH_LIMIT = 100;\n+\n function getArrayKind(array: Object): 0 | 1 | 2 | 3 {\n let kind: 0 | 1 | 2 | 3 = EMPTY_ARRAY;\n- for (let i = 0; i < array.length; i++) {\n+ for (let i = 0; i < array.length && i < OBJECT_WIDTH_LIMIT; i++) {\n const value = array[i];\n if (typeof value === 'object' && value !== null) {\n if (\n@@ -55,10 +59,23 @@ export function addObjectToProperties(\n indent: number,\n prefix: string,\n ): void {\n+ let addedProperties = 0;\n for (const key in object) {\n if (hasOwnProperty.call(object, key) && key[0] !== '_') {\n+ addedProperties++;\n const value = object[key];\n addValueToProperties(key, value, properties, indent, prefix);\n+ if (addedProperties >= OBJECT_WIDTH_LIMIT) {\n+ properties.push([\n+ prefix +\n+ '\\xa0\\xa0'.repeat(indent) +\n+ 'Only ' +\n+ OBJECT_WIDTH_LIMIT +\n+ ' properties are shown. React will not log more properties of this object.',\n+ '',\n+ ]);\n+ break;\n+ }\n }\n }\n }\n@@ -103,7 +120,9 @@ export function addValueToProperties(\n addValueToProperties('key', key, properties, indent + 1, prefix);\n }\n let hasChildren = false;\n+ let addedProperties = 0;\n for (const propKey in props) {\n+ addedProperties++;\n if (propKey === 'children') {\n if (\n props.children != null &&\n@@ -123,6 +142,10 @@ export function addValueToProperties(\n prefix,\n );\n }\n+\n+ if (addedProperties >= OBJECT_WIDTH_LIMIT) {\n+ break;\n+ }\n }\n properties.push([\n '',\n@@ -135,16 +158,21 @@ export function addValueToProperties(\n let objectName = objectToString.slice(8, objectToString.length - 1);\n if (objectName === 'Array') {\n const array: Array = (value: any);\n+ const didTruncate = array.length > OBJECT_WIDTH_LIMIT;\n const kind = getArrayKind(array);\n if (kind === PRIMITIVE_ARRAY || kind === EMPTY_ARRAY) {\n- desc = JSON.stringify(array);\n+ desc = JSON.stringify(\n+ didTruncate\n+ ? array.slice(0, OBJECT_WIDTH_LIMIT).concat('…')\n+ : array,\n+ );\n break;\n } else if (kind === ENTRIES_ARRAY) {\n properties.push([\n prefix + '\\xa0\\xa0'.repeat(indent) + propertyName,\n '',\n ]);\n- for (let i = 0; i < array.length; i++) {\n+ for (let i = 0; i < array.length && i < OBJECT_WIDTH_LIMIT; i++) {\n const entry = array[i];\n addValueToProperties(\n entry[0],\n@@ -154,6 +182,15 @@ export function addValueToProperties(\n prefix,\n );\n }\n+ if (didTruncate) {\n+ addValueToProperties(\n+ OBJECT_WIDTH_LIMIT.toString(),\n+ '…',\n+ properties,\n+ indent + 1,\n+ prefix,\n+ );\n+ }\n return;\n }\n }\n@@ -254,13 +291,39 @@ export function addObjectDiffToProperties(\n \/\/ If a property is added or removed, we just emit the property name and omit the value it had.\n \/\/ Mainly for performance. We need to minimize to only relevant information.\n let isDeeplyEqual = true;\n+ let prevPropertiesChecked = 0;\n for (const key in prev) {\n+ if (prevPropertiesChecked > OBJECT_WIDTH_LIMIT) {\n+ properties.push([\n+ 'Previous object has more than ' +\n+ OBJECT_WIDTH_LIMIT +\n+ ' properties. React will not attempt to diff objects with too many properties.',\n+ '',\n+ ]);\n+ isDeeplyEqual = false;\n+ break;\n+ }\n+\n if (!(key in next)) {\n properties.push([REMOVED + '\\xa0\\xa0'.repeat(indent) + key, '\\u2026']);\n isDeeplyEqual = false;\n }\n+ prevPropertiesChecked++;\n }\n+\n+ let nextPropertiesChecked = 0;\n for (const key in next) {\n+ if (nextPropertiesChecked > OBJECT_WIDTH_LIMIT) {\n+ properties.push([\n+ 'Next object has more than ' +\n+ OBJECT_WIDTH_LIMIT +\n+ ' properties. React will not attempt to diff objects with too many properties.',\n+ '',\n+ ]);\n+ isDeeplyEqual = false;\n+ break;\n+ }\n+\n if (key in prev) {\n const prevValue = prev[key];\n const nextValue = next[key];\n@@ -368,6 +431,8 @@ export function addObjectDiffToProperties(\n properties.push([ADDED + '\\xa0\\xa0'.repeat(indent) + key, '\\u2026']);\n isDeeplyEqual = false;\n }\n+\n+ nextPropertiesChecked++;\n }\n return isDeeplyEqual;\n }\n","commit":{"authoredAt":"2025-10-06T01:13:22+02:00","subject":"[Fiber] Bail out of diffing wide objects and arrays (#34742)","revision":"1be3ce9996f05ceb74fd8c11f08a84a5e57098f3","shortRevision":"1be3ce9996","authorName":"Sebastian \"Sebbie\" Silbermann","authorEmail":"sebastian.silbermann@vercel.com"},"files":[{"path":"packages\/react-reconciler\/src\/__tests__\/ReactPerformanceTrack-test.js","status":"A"},{"path":"packages\/shared\/ReactPerformanceTrackProperties.js","status":"M"}],"parents":["3b2a3981068e0438ca75ae34b2a98616fdaf62ac"],"body":""}

dillon1000/react

Files changed