diff --git a/packages/react-reconciler/src/__tests__/ReactPerformanceTrack-test.js b/packages/react-reconciler/src/__tests__/ReactPerformanceTrack-test.js
index 0f5152e8d47..faaadb9cb61 100644
--- a/packages/react-reconciler/src/__tests__/ReactPerformanceTrack-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactPerformanceTrack-test.js
@@ -231,7 +231,7 @@ describe('ReactPerformanceTracks', () => {
properties: [
['Changed Props', ''],
[' data', ''],
- ['– buffer', 'null'],
+ ['- buffer', 'null'],
['+ buffer', 'Uint8Array'],
['+ 0', '0'],
['+ 1', '0'],
@@ -422,7 +422,7 @@ describe('ReactPerformanceTracks', () => {
color: 'error',
properties: [
['Changed Props', ''],
- ['– value', '1'],
+ ['- value', '1'],
['+ value', '2'],
],
tooltipText: 'Left',
@@ -440,4 +440,87 @@ describe('ReactPerformanceTracks', () => {
]);
performanceMeasureCalls.length = 0;
});
+
+ // @gate __DEV__ && enableComponentPerformanceTrack
+ it('can handle bigint in arrays', async () => {
+ const App = function App({numbers}) {
+ Scheduler.unstable_advanceTime(10);
+ React.useEffect(() => {}, [numbers]);
+ };
+
+ Scheduler.unstable_advanceTime(1);
+ await act(() => {
+ ReactNoop.render(
+ ,
+ );
+ });
+
+ expect(performanceMeasureCalls).toEqual([
+ [
+ 'Mount',
+ {
+ detail: {
+ devtools: {
+ color: 'warning',
+ properties: null,
+ tooltipText: 'Mount',
+ track: 'Components ⚛',
+ },
+ },
+ end: 11,
+ start: 1,
+ },
+ ],
+ ]);
+ performanceMeasureCalls.length = 0;
+
+ Scheduler.unstable_advanceTime(10);
+
+ await act(() => {
+ ReactNoop.render(
+ ,
+ );
+ });
+
+ expect(performanceMeasureCalls).toEqual([
+ [
+ 'App',
+ {
+ detail: {
+ devtools: {
+ color: 'primary-dark',
+ properties: [
+ ['Changed Props', ''],
+ [' data', ''],
+ [' deeply', ''],
+ [' nested', ''],
+ ['- numbers', 'Array'],
+ ['+ numbers', 'Array'],
+ ],
+ tooltipText: 'App',
+ track: 'Components ⚛',
+ },
+ },
+ end: 31,
+ start: 21,
+ },
+ ],
+ ]);
+ });
});
diff --git a/packages/shared/ReactPerformanceTrackProperties.js b/packages/shared/ReactPerformanceTrackProperties.js
index 87231c20c49..a2063584bdf 100644
--- a/packages/shared/ReactPerformanceTrackProperties.js
+++ b/packages/shared/ReactPerformanceTrackProperties.js
@@ -16,7 +16,7 @@ import getComponentNameFromType from './getComponentNameFromType';
const EMPTY_ARRAY = 0;
const COMPLEX_ARRAY = 1;
-const PRIMITIVE_ARRAY = 2; // Primitive values only
+const PRIMITIVE_ARRAY = 2; // Primitive values only that are accepted by JSON.stringify
const ENTRIES_ARRAY = 3; // Tuple arrays of string and value (like Headers, Map, etc)
// Showing wider objects in the devtools is not useful.
@@ -46,6 +46,8 @@ function getArrayKind(array: Object): 0 | 1 | 2 | 3 {
return COMPLEX_ARRAY;
} else if (kind !== EMPTY_ARRAY && kind !== PRIMITIVE_ARRAY) {
return COMPLEX_ARRAY;
+ } else if (typeof value === 'bigint') {
+ return COMPLEX_ARRAY;
} else {
kind = PRIMITIVE_ARRAY;
}
@@ -277,7 +279,7 @@ export function addValueToProperties(
properties.push([prefix + '\xa0\xa0'.repeat(indent) + propertyName, desc]);
}
-const REMOVED = '\u2013\xa0';
+const REMOVED = '-\xa0';
const ADDED = '+\xa0';
const UNCHANGED = '\u2007\xa0';