[Perf Tracks] Handle arrays with bigints in deep objects (#35648)
Sebastian "Sebbie" Silbermann committed
Jan 28, 2026 at 11:54 UTC
ff191f24b5f49252672ac4d3c46ef1e79cf7290d
2 files changed
+86
-1
packages/react-reconciler/src/__tests__/ReactPerformanceTrack-test.js
+83
@@ -440,4 +440,87 @@ describe('ReactPerformanceTracks', () => {
440
]);
441
performanceMeasureCalls.length = 0;
442
});
443
+
444
+ // @gate __DEV__ && enableComponentPerformanceTrack
445
+ it('can handle bigint in arrays', async () => {
446
+ const App = function App({numbers}) {
447
+ Scheduler.unstable_advanceTime(10);
448
+ React.useEffect(() => {}, [numbers]);
449
+ };
450
+
451
+ Scheduler.unstable_advanceTime(1);
452
+ await act(() => {
453
+ ReactNoop.render(
454
+ <App
455
+ data={{
456
+ deeply: {
457
+ nested: {
458
+ numbers: [1n],
459
+ },
460
+ },
461
+ }}
462
+ />,
463
+ );
464
+ });
465
+
466
+ expect(performanceMeasureCalls).toEqual([
467
+ [
468
+ 'Mount',
469
+ {
470
+ detail: {
471
+ devtools: {
472
+ color: 'warning',
473
+ properties: null,
474
+ tooltipText: 'Mount',
475
+ track: 'Components ⚛',
476
+ },
477
+ },
478
+ end: 11,
479
+ start: 1,
480
+ },
481
+ ],
482
+ ]);
483
+ performanceMeasureCalls.length = 0;
484
+
485
+ Scheduler.unstable_advanceTime(10);
486
+
487
+ await act(() => {
488
+ ReactNoop.render(
489
+ <App
490
+ data={{
491
+ deeply: {
492
+ nested: {
493
+ numbers: [2n],
494
+ },
495
+ },
496
+ }}
497
+ />,
498
+ );
499
+ });
500
+
501
+ expect(performanceMeasureCalls).toEqual([
502
+ [
503
+ 'App',
504
+ {
505
+ detail: {
506
+ devtools: {
507
+ color: 'primary-dark',
508
+ properties: [
509
+ ['Changed Props', ''],
510
+ [' data', ''],
511
+ [' deeply', ''],
512
+ [' nested', ''],
513
+ ['– numbers', 'Array'],
514
+ ['+ numbers', 'Array'],
515
+ ],
516
+ tooltipText: 'App',
517
+ track: 'Components ⚛',
518
+ },
519
+ },
520
+ end: 31,
521
+ start: 21,
522
+ },
523
+ ],
524
+ ]);
525
+ });
526
});
packages/shared/ReactPerformanceTrackProperties.js
+3
-1
@@ -16,7 +16,7 @@ import getComponentNameFromType from './getComponentNameFromType';
16
17
const EMPTY_ARRAY = 0;
18
const COMPLEX_ARRAY = 1;
19
-const PRIMITIVE_ARRAY = 2; // Primitive values only
19
+const PRIMITIVE_ARRAY = 2; // Primitive values only that are accepted by JSON.stringify
20
const ENTRIES_ARRAY = 3; // Tuple arrays of string and value (like Headers, Map, etc)
21
22
// Showing wider objects in the devtools is not useful.
@@ -46,6 +46,8 @@ function getArrayKind(array: Object): 0 | 1 | 2 | 3 {
46
return COMPLEX_ARRAY;
47
} else if (kind !== EMPTY_ARRAY && kind !== PRIMITIVE_ARRAY) {
48
return COMPLEX_ARRAY;
49
+ } else if (typeof value === 'bigint') {
50
+ return COMPLEX_ARRAY;
51
} else {
52
kind = PRIMITIVE_ARRAY;
53
}