Skip to content

Commit ee06906

Browse files
eps1loneps1lon
authored
devtools: Display root type for root updates in "what caused this update?" (#22599)
1 parent 54f6ae9 commit ee06906

File tree

3 files changed

+49
-43
lines changed

3 files changed

+49
-43
lines changed

‎packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap

+41-41
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ Object {
4444
"timestamp": 16,
4545
"updaters": Array [
4646
Object {
47-
"displayName": "Anonymous",
47+
"displayName": "render()",
4848
"hocDisplayNames": null,
4949
"id": 1,
5050
"key": null,
@@ -91,7 +91,7 @@ Object {
9191
"timestamp": 15,
9292
"updaters": Array [
9393
Object {
94-
"displayName": "Anonymous",
94+
"displayName": "render()",
9595
"hocDisplayNames": null,
9696
"id": 1,
9797
"key": null,
@@ -127,7 +127,7 @@ Object {
127127
"timestamp": 18,
128128
"updaters": Array [
129129
Object {
130-
"displayName": "Anonymous",
130+
"displayName": "render()",
131131
"hocDisplayNames": null,
132132
"id": 1,
133133
"key": null,
@@ -190,7 +190,7 @@ Object {
190190
"timestamp": 12,
191191
"updaters": Array [
192192
Object {
193-
"displayName": "Anonymous",
193+
"displayName": "render()",
194194
"hocDisplayNames": null,
195195
"id": 1,
196196
"key": null,
@@ -258,7 +258,7 @@ Object {
258258
"timestamp": 25,
259259
"updaters": Array [
260260
Object {
261-
"displayName": "Anonymous",
261+
"displayName": "render()",
262262
"hocDisplayNames": null,
263263
"id": 1,
264264
"key": null,
@@ -307,7 +307,7 @@ Object {
307307
"timestamp": 35,
308308
"updaters": Array [
309309
Object {
310-
"displayName": "Anonymous",
310+
"displayName": "render()",
311311
"hocDisplayNames": null,
312312
"id": 1,
313313
"key": null,
@@ -346,7 +346,7 @@ Object {
346346
"timestamp": 45,
347347
"updaters": Array [
348348
Object {
349-
"displayName": "Anonymous",
349+
"displayName": "render()",
350350
"hocDisplayNames": null,
351351
"id": 1,
352352
"key": null,
@@ -455,7 +455,7 @@ Object {
455455
"timestamp": 12,
456456
"updaters": Array [
457457
Object {
458-
"displayName": "Anonymous",
458+
"displayName": "render()",
459459
"hocDisplayNames": null,
460460
"id": 1,
461461
"key": null,
@@ -562,7 +562,7 @@ Object {
562562
"timestamp": 25,
563563
"updaters": Array [
564564
Object {
565-
"displayName": "Anonymous",
565+
"displayName": "render()",
566566
"hocDisplayNames": null,
567567
"id": 1,
568568
"key": null,
@@ -632,7 +632,7 @@ Object {
632632
"timestamp": 35,
633633
"updaters": Array [
634634
Object {
635-
"displayName": "Anonymous",
635+
"displayName": "render()",
636636
"hocDisplayNames": null,
637637
"id": 1,
638638
"key": null,
@@ -683,7 +683,7 @@ Object {
683683
"timestamp": 45,
684684
"updaters": Array [
685685
Object {
686-
"displayName": "Anonymous",
686+
"displayName": "render()",
687687
"hocDisplayNames": null,
688688
"id": 1,
689689
"key": null,
@@ -954,7 +954,7 @@ Object {
954954
"timestamp": 11,
955955
"updaters": Array [
956956
Object {
957-
"displayName": "Anonymous",
957+
"displayName": "render()",
958958
"hocDisplayNames": null,
959959
"id": 1,
960960
"key": null,
@@ -1042,7 +1042,7 @@ Object {
10421042
"timestamp": 22,
10431043
"updaters": Array [
10441044
Object {
1045-
"displayName": "Anonymous",
1045+
"displayName": "render()",
10461046
"hocDisplayNames": null,
10471047
"id": 1,
10481048
"key": null,
@@ -1149,7 +1149,7 @@ Object {
11491149
"timestamp": 35,
11501150
"updaters": Array [
11511151
Object {
1152-
"displayName": "Anonymous",
1152+
"displayName": "render()",
11531153
"hocDisplayNames": null,
11541154
"id": 1,
11551155
"key": null,
@@ -1359,7 +1359,7 @@ Object {
13591359
"timestamp": 13,
13601360
"updaters": Array [
13611361
Object {
1362-
"displayName": "Anonymous",
1362+
"displayName": "render()",
13631363
"hocDisplayNames": null,
13641364
"id": 1,
13651365
"key": null,
@@ -1405,7 +1405,7 @@ Object {
14051405
"timestamp": 34,
14061406
"updaters": Array [
14071407
Object {
1408-
"displayName": "Anonymous",
1408+
"displayName": "render()",
14091409
"hocDisplayNames": null,
14101410
"id": 1,
14111411
"key": null,
@@ -1441,7 +1441,7 @@ Object {
14411441
"timestamp": 44,
14421442
"updaters": Array [
14431443
Object {
1444-
"displayName": "Anonymous",
1444+
"displayName": "render()",
14451445
"hocDisplayNames": null,
14461446
"id": 1,
14471447
"key": null,
@@ -1624,7 +1624,7 @@ Object {
16241624
"timestamp": 24,
16251625
"updaters": Array [
16261626
Object {
1627-
"displayName": "Anonymous",
1627+
"displayName": "render()",
16281628
"hocDisplayNames": null,
16291629
"id": 13,
16301630
"key": null,
@@ -1714,7 +1714,7 @@ Object {
17141714
"timestamp": 34,
17151715
"updaters": Array [
17161716
Object {
1717-
"displayName": "Anonymous",
1717+
"displayName": "render()",
17181718
"hocDisplayNames": null,
17191719
"id": 7,
17201720
"key": null,
@@ -1892,7 +1892,7 @@ Object {
18921892
"timestamp": 13,
18931893
"updaters": Array [
18941894
Object {
1895-
"displayName": "Anonymous",
1895+
"displayName": "render()",
18961896
"hocDisplayNames": null,
18971897
"id": 1,
18981898
"key": null,
@@ -1962,7 +1962,7 @@ Object {
19621962
"timestamp": 34,
19631963
"updaters": Array [
19641964
Object {
1965-
"displayName": "Anonymous",
1965+
"displayName": "render()",
19661966
"hocDisplayNames": null,
19671967
"id": 1,
19681968
"key": null,
@@ -2013,7 +2013,7 @@ Object {
20132013
"timestamp": 44,
20142014
"updaters": Array [
20152015
Object {
2016-
"displayName": "Anonymous",
2016+
"displayName": "render()",
20172017
"hocDisplayNames": null,
20182018
"id": 1,
20192019
"key": null,
@@ -2256,7 +2256,7 @@ Object {
22562256
"timestamp": 24,
22572257
"updaters": Array [
22582258
Object {
2259-
"displayName": "Anonymous",
2259+
"displayName": "render()",
22602260
"hocDisplayNames": null,
22612261
"id": 13,
22622262
"key": null,
@@ -2343,7 +2343,7 @@ Object {
23432343
"timestamp": 34,
23442344
"updaters": Array [
23452345
Object {
2346-
"displayName": "Anonymous",
2346+
"displayName": "render()",
23472347
"hocDisplayNames": null,
23482348
"id": 7,
23492349
"key": null,
@@ -2464,7 +2464,7 @@ Object {
24642464
"timestamp": 0,
24652465
"updaters": Array [
24662466
Object {
2467-
"displayName": "Anonymous",
2467+
"displayName": "render()",
24682468
"hocDisplayNames": null,
24692469
"id": 1,
24702470
"key": null,
@@ -2541,7 +2541,7 @@ Object {
25412541
"timestamp": 0,
25422542
"updaters": Array [
25432543
Object {
2544-
"displayName": "Anonymous",
2544+
"displayName": "render()",
25452545
"hocDisplayNames": null,
25462546
"id": 1,
25472547
"key": null,
@@ -2584,7 +2584,7 @@ Object {
25842584
"timestamp": 0,
25852585
"updaters": Array [
25862586
Object {
2587-
"displayName": "Anonymous",
2587+
"displayName": "render()",
25882588
"hocDisplayNames": null,
25892589
"id": 1,
25902590
"key": null,
@@ -2699,7 +2699,7 @@ Object {
26992699
"timestamp": 0,
27002700
"updaters": Array [
27012701
Object {
2702-
"displayName": "Anonymous",
2702+
"displayName": "render()",
27032703
"hocDisplayNames": null,
27042704
"id": 1,
27052705
"key": null,
@@ -2740,7 +2740,7 @@ Object {
27402740
"timestamp": 0,
27412741
"updaters": Array [
27422742
Object {
2743-
"displayName": "Anonymous",
2743+
"displayName": "render()",
27442744
"hocDisplayNames": null,
27452745
"id": 1,
27462746
"key": null,
@@ -2811,7 +2811,7 @@ Object {
28112811
"timestamp": 0,
28122812
"updaters": Array [
28132813
Object {
2814-
"displayName": "Anonymous",
2814+
"displayName": "render()",
28152815
"hocDisplayNames": null,
28162816
"id": 1,
28172817
"key": null,
@@ -2878,7 +2878,7 @@ Object {
28782878
"timestamp": 0,
28792879
"updaters": Array [
28802880
Object {
2881-
"displayName": "Anonymous",
2881+
"displayName": "render()",
28822882
"hocDisplayNames": null,
28832883
"id": 1,
28842884
"key": null,
@@ -3029,7 +3029,7 @@ Object {
30293029
"timestamp": 0,
30303030
"updaters": Array [
30313031
Object {
3032-
"displayName": "Anonymous",
3032+
"displayName": "render()",
30333033
"hocDisplayNames": null,
30343034
"id": 1,
30353035
"key": null,
@@ -3094,7 +3094,7 @@ Object {
30943094
"timestamp": 0,
30953095
"updaters": Array [
30963096
Object {
3097-
"displayName": "Anonymous",
3097+
"displayName": "render()",
30983098
"hocDisplayNames": null,
30993099
"id": 1,
31003100
"key": null,
@@ -3271,7 +3271,7 @@ Object {
32713271
"timestamp": 0,
32723272
"updaters": Array [
32733273
Object {
3274-
"displayName": "Anonymous",
3274+
"displayName": "render()",
32753275
"hocDisplayNames": null,
32763276
"id": 1,
32773277
"key": null,
@@ -3441,7 +3441,7 @@ Object {
34413441
"timestamp": 0,
34423442
"updaters": Array [
34433443
Object {
3444-
"displayName": "Anonymous",
3444+
"displayName": "render()",
34453445
"hocDisplayNames": null,
34463446
"id": 1,
34473447
"key": null,
@@ -3523,7 +3523,7 @@ Object {
35233523
"timestamp": 0,
35243524
"updaters": Array [
35253525
Object {
3526-
"displayName": "Anonymous",
3526+
"displayName": "render()",
35273527
"hocDisplayNames": null,
35283528
"id": 1,
35293529
"key": null,
@@ -3604,7 +3604,7 @@ Object {
36043604
"timestamp": 0,
36053605
"updaters": Array [
36063606
Object {
3607-
"displayName": "Anonymous",
3607+
"displayName": "render()",
36083608
"hocDisplayNames": null,
36093609
"id": 1,
36103610
"key": null,
@@ -3739,7 +3739,7 @@ Object {
37393739
"timestamp": 0,
37403740
"updaters": Array [
37413741
Object {
3742-
"displayName": "Anonymous",
3742+
"displayName": "render()",
37433743
"hocDisplayNames": null,
37443744
"id": 1,
37453745
"key": null,
@@ -4011,7 +4011,7 @@ Object {
40114011
"timestamp": 0,
40124012
"updaters": Array [
40134013
Object {
4014-
"displayName": "Anonymous",
4014+
"displayName": "render()",
40154015
"hocDisplayNames": null,
40164016
"id": 1,
40174017
"key": null,
@@ -4147,7 +4147,7 @@ Object {
41474147
"timestamp": 0,
41484148
"updaters": Array [
41494149
Object {
4150-
"displayName": "Anonymous",
4150+
"displayName": "render()",
41514151
"hocDisplayNames": null,
41524152
"id": 1,
41534153
"key": null,
@@ -4282,7 +4282,7 @@ Object {
42824282
"timestamp": 0,
42834283
"updaters": Array [
42844284
Object {
4285-
"displayName": "Anonymous",
4285+
"displayName": "render()",
42864286
"hocDisplayNames": null,
42874287
"id": 1,
42884288
"key": null,

‎packages/react-devtools-shared/src/backend/renderer.js

+4
Original file line numberDiff line numberDiff line change
@@ -425,6 +425,10 @@ export function getInternalReactConstants(
425425
getDisplayName(resolvedType, 'Anonymous')
426426
);
427427
case HostRoot:
428+
const fiberRoot = fiber.stateNode;
429+
if (fiberRoot != null && fiberRoot._debugRootType !== null) {
430+
return fiberRoot._debugRootType;
431+
}
428432
return null;
429433
case HostComponent:
430434
return type;

‎packages/react-devtools-shared/src/devtools/views/Profiler/Updaters.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import * as React from 'react';
1414
import {useContext} from 'react';
1515
import {ProfilerContext} from './ProfilerContext';
1616
import styles from './Updaters.css';
17+
import {ElementTypeRoot} from '../../../types';
1718

1819
export type Props = {|
1920
commitTree: CommitTree,
@@ -26,8 +27,9 @@ export default function Updaters({commitTree, updaters}: Props) {
2627
const children =
2728
updaters.length > 0 ? (
2829
updaters.map<React$Node>((serializedElement: SerializedElement) => {
29-
const {displayName, id, key} = serializedElement;
30-
const isVisibleInTree = commitTree.nodes.has(id);
30+
const {displayName, id, key, type} = serializedElement;
31+
const isVisibleInTree =
32+
commitTree.nodes.has(id) && type !== ElementTypeRoot;
3133
if (isVisibleInTree) {
3234
return (
3335
<button

0 commit comments

Comments
 (0)