@samitouri / QOS-React-2 / commits / ee069065db

devtools: Display root type for root updates in "what caused this update?" (#22599)

Sebastian Silbermann committed Nov 5, 2021 at 15:58 UTC ee069065db449194a62a5c0dc2f8f6b61fa5e1b8
3 files changed +49 -43
packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
+41 -41
@@ -44,7 +44,7 @@ Object {
44 "timestamp": 16,
45 "updaters": Array [
46 Object {
47 - "displayName": "Anonymous",
47 + "displayName": "render()",
48 "hocDisplayNames": null,
49 "id": 1,
50 "key": null,
@@ -91,7 +91,7 @@ Object {
91 "timestamp": 15,
92 "updaters": Array [
93 Object {
94 - "displayName": "Anonymous",
94 + "displayName": "render()",
95 "hocDisplayNames": null,
96 "id": 1,
97 "key": null,
@@ -127,7 +127,7 @@ Object {
127 "timestamp": 18,
128 "updaters": Array [
129 Object {
130 - "displayName": "Anonymous",
130 + "displayName": "render()",
131 "hocDisplayNames": null,
132 "id": 1,
133 "key": null,
@@ -190,7 +190,7 @@ Object {
190 "timestamp": 12,
191 "updaters": Array [
192 Object {
193 - "displayName": "Anonymous",
193 + "displayName": "render()",
194 "hocDisplayNames": null,
195 "id": 1,
196 "key": null,
@@ -258,7 +258,7 @@ Object {
258 "timestamp": 25,
259 "updaters": Array [
260 Object {
261 - "displayName": "Anonymous",
261 + "displayName": "render()",
262 "hocDisplayNames": null,
263 "id": 1,
264 "key": null,
@@ -307,7 +307,7 @@ Object {
307 "timestamp": 35,
308 "updaters": Array [
309 Object {
310 - "displayName": "Anonymous",
310 + "displayName": "render()",
311 "hocDisplayNames": null,
312 "id": 1,
313 "key": null,
@@ -346,7 +346,7 @@ Object {
346 "timestamp": 45,
347 "updaters": Array [
348 Object {
349 - "displayName": "Anonymous",
349 + "displayName": "render()",
350 "hocDisplayNames": null,
351 "id": 1,
352 "key": null,
@@ -455,7 +455,7 @@ Object {
455 "timestamp": 12,
456 "updaters": Array [
457 Object {
458 - "displayName": "Anonymous",
458 + "displayName": "render()",
459 "hocDisplayNames": null,
460 "id": 1,
461 "key": null,
@@ -562,7 +562,7 @@ Object {
562 "timestamp": 25,
563 "updaters": Array [
564 Object {
565 - "displayName": "Anonymous",
565 + "displayName": "render()",
566 "hocDisplayNames": null,
567 "id": 1,
568 "key": null,
@@ -632,7 +632,7 @@ Object {
632 "timestamp": 35,
633 "updaters": Array [
634 Object {
635 - "displayName": "Anonymous",
635 + "displayName": "render()",
636 "hocDisplayNames": null,
637 "id": 1,
638 "key": null,
@@ -683,7 +683,7 @@ Object {
683 "timestamp": 45,
684 "updaters": Array [
685 Object {
686 - "displayName": "Anonymous",
686 + "displayName": "render()",
687 "hocDisplayNames": null,
688 "id": 1,
689 "key": null,
@@ -954,7 +954,7 @@ Object {
954 "timestamp": 11,
955 "updaters": Array [
956 Object {
957 - "displayName": "Anonymous",
957 + "displayName": "render()",
958 "hocDisplayNames": null,
959 "id": 1,
960 "key": null,
@@ -1042,7 +1042,7 @@ Object {
1042 "timestamp": 22,
1043 "updaters": Array [
1044 Object {
1045 - "displayName": "Anonymous",
1045 + "displayName": "render()",
1046 "hocDisplayNames": null,
1047 "id": 1,
1048 "key": null,
@@ -1149,7 +1149,7 @@ Object {
1149 "timestamp": 35,
1150 "updaters": Array [
1151 Object {
1152 - "displayName": "Anonymous",
1152 + "displayName": "render()",
1153 "hocDisplayNames": null,
1154 "id": 1,
1155 "key": null,
@@ -1359,7 +1359,7 @@ Object {
1359 "timestamp": 13,
1360 "updaters": Array [
1361 Object {
1362 - "displayName": "Anonymous",
1362 + "displayName": "render()",
1363 "hocDisplayNames": null,
1364 "id": 1,
1365 "key": null,
@@ -1405,7 +1405,7 @@ Object {
1405 "timestamp": 34,
1406 "updaters": Array [
1407 Object {
1408 - "displayName": "Anonymous",
1408 + "displayName": "render()",
1409 "hocDisplayNames": null,
1410 "id": 1,
1411 "key": null,
@@ -1441,7 +1441,7 @@ Object {
1441 "timestamp": 44,
1442 "updaters": Array [
1443 Object {
1444 - "displayName": "Anonymous",
1444 + "displayName": "render()",
1445 "hocDisplayNames": null,
1446 "id": 1,
1447 "key": null,
@@ -1624,7 +1624,7 @@ Object {
1624 "timestamp": 24,
1625 "updaters": Array [
1626 Object {
1627 - "displayName": "Anonymous",
1627 + "displayName": "render()",
1628 "hocDisplayNames": null,
1629 "id": 13,
1630 "key": null,
@@ -1714,7 +1714,7 @@ Object {
1714 "timestamp": 34,
1715 "updaters": Array [
1716 Object {
1717 - "displayName": "Anonymous",
1717 + "displayName": "render()",
1718 "hocDisplayNames": null,
1719 "id": 7,
1720 "key": null,
@@ -1892,7 +1892,7 @@ Object {
1892 "timestamp": 13,
1893 "updaters": Array [
1894 Object {
1895 - "displayName": "Anonymous",
1895 + "displayName": "render()",
1896 "hocDisplayNames": null,
1897 "id": 1,
1898 "key": null,
@@ -1962,7 +1962,7 @@ Object {
1962 "timestamp": 34,
1963 "updaters": Array [
1964 Object {
1965 - "displayName": "Anonymous",
1965 + "displayName": "render()",
1966 "hocDisplayNames": null,
1967 "id": 1,
1968 "key": null,
@@ -2013,7 +2013,7 @@ Object {
2013 "timestamp": 44,
2014 "updaters": Array [
2015 Object {
2016 - "displayName": "Anonymous",
2016 + "displayName": "render()",
2017 "hocDisplayNames": null,
2018 "id": 1,
2019 "key": null,
@@ -2256,7 +2256,7 @@ Object {
2256 "timestamp": 24,
2257 "updaters": Array [
2258 Object {
2259 - "displayName": "Anonymous",
2259 + "displayName": "render()",
2260 "hocDisplayNames": null,
2261 "id": 13,
2262 "key": null,
@@ -2343,7 +2343,7 @@ Object {
2343 "timestamp": 34,
2344 "updaters": Array [
2345 Object {
2346 - "displayName": "Anonymous",
2346 + "displayName": "render()",
2347 "hocDisplayNames": null,
2348 "id": 7,
2349 "key": null,
@@ -2464,7 +2464,7 @@ Object {
2464 "timestamp": 0,
2465 "updaters": Array [
2466 Object {
2467 - "displayName": "Anonymous",
2467 + "displayName": "render()",
2468 "hocDisplayNames": null,
2469 "id": 1,
2470 "key": null,
@@ -2541,7 +2541,7 @@ Object {
2541 "timestamp": 0,
2542 "updaters": Array [
2543 Object {
2544 - "displayName": "Anonymous",
2544 + "displayName": "render()",
2545 "hocDisplayNames": null,
2546 "id": 1,
2547 "key": null,
@@ -2584,7 +2584,7 @@ Object {
2584 "timestamp": 0,
2585 "updaters": Array [
2586 Object {
2587 - "displayName": "Anonymous",
2587 + "displayName": "render()",
2588 "hocDisplayNames": null,
2589 "id": 1,
2590 "key": null,
@@ -2699,7 +2699,7 @@ Object {
2699 "timestamp": 0,
2700 "updaters": Array [
2701 Object {
2702 - "displayName": "Anonymous",
2702 + "displayName": "render()",
2703 "hocDisplayNames": null,
2704 "id": 1,
2705 "key": null,
@@ -2740,7 +2740,7 @@ Object {
2740 "timestamp": 0,
2741 "updaters": Array [
2742 Object {
2743 - "displayName": "Anonymous",
2743 + "displayName": "render()",
2744 "hocDisplayNames": null,
2745 "id": 1,
2746 "key": null,
@@ -2811,7 +2811,7 @@ Object {
2811 "timestamp": 0,
2812 "updaters": Array [
2813 Object {
2814 - "displayName": "Anonymous",
2814 + "displayName": "render()",
2815 "hocDisplayNames": null,
2816 "id": 1,
2817 "key": null,
@@ -2878,7 +2878,7 @@ Object {
2878 "timestamp": 0,
2879 "updaters": Array [
2880 Object {
2881 - "displayName": "Anonymous",
2881 + "displayName": "render()",
2882 "hocDisplayNames": null,
2883 "id": 1,
2884 "key": null,
@@ -3029,7 +3029,7 @@ Object {
3029 "timestamp": 0,
3030 "updaters": Array [
3031 Object {
3032 - "displayName": "Anonymous",
3032 + "displayName": "render()",
3033 "hocDisplayNames": null,
3034 "id": 1,
3035 "key": null,
@@ -3094,7 +3094,7 @@ Object {
3094 "timestamp": 0,
3095 "updaters": Array [
3096 Object {
3097 - "displayName": "Anonymous",
3097 + "displayName": "render()",
3098 "hocDisplayNames": null,
3099 "id": 1,
3100 "key": null,
@@ -3271,7 +3271,7 @@ Object {
3271 "timestamp": 0,
3272 "updaters": Array [
3273 Object {
3274 - "displayName": "Anonymous",
3274 + "displayName": "render()",
3275 "hocDisplayNames": null,
3276 "id": 1,
3277 "key": null,
@@ -3441,7 +3441,7 @@ Object {
3441 "timestamp": 0,
3442 "updaters": Array [
3443 Object {
3444 - "displayName": "Anonymous",
3444 + "displayName": "render()",
3445 "hocDisplayNames": null,
3446 "id": 1,
3447 "key": null,
@@ -3523,7 +3523,7 @@ Object {
3523 "timestamp": 0,
3524 "updaters": Array [
3525 Object {
3526 - "displayName": "Anonymous",
3526 + "displayName": "render()",
3527 "hocDisplayNames": null,
3528 "id": 1,
3529 "key": null,
@@ -3604,7 +3604,7 @@ Object {
3604 "timestamp": 0,
3605 "updaters": Array [
3606 Object {
3607 - "displayName": "Anonymous",
3607 + "displayName": "render()",
3608 "hocDisplayNames": null,
3609 "id": 1,
3610 "key": null,
@@ -3739,7 +3739,7 @@ Object {
3739 "timestamp": 0,
3740 "updaters": Array [
3741 Object {
3742 - "displayName": "Anonymous",
3742 + "displayName": "render()",
3743 "hocDisplayNames": null,
3744 "id": 1,
3745 "key": null,
@@ -4011,7 +4011,7 @@ Object {
4011 "timestamp": 0,
4012 "updaters": Array [
4013 Object {
4014 - "displayName": "Anonymous",
4014 + "displayName": "render()",
4015 "hocDisplayNames": null,
4016 "id": 1,
4017 "key": null,
@@ -4147,7 +4147,7 @@ Object {
4147 "timestamp": 0,
4148 "updaters": Array [
4149 Object {
4150 - "displayName": "Anonymous",
4150 + "displayName": "render()",
4151 "hocDisplayNames": null,
4152 "id": 1,
4153 "key": null,
@@ -4282,7 +4282,7 @@ Object {
4282 "timestamp": 0,
4283 "updaters": Array [
4284 Object {
4285 - "displayName": "Anonymous",
4285 + "displayName": "render()",
4286 "hocDisplayNames": null,
4287 "id": 1,
4288 "key": null,
packages/react-devtools-shared/src/backend/renderer.js
+4
@@ -425,6 +425,10 @@ export function getInternalReactConstants(
425 getDisplayName(resolvedType, 'Anonymous')
426 );
427 case HostRoot:
428 + const fiberRoot = fiber.stateNode;
429 + if (fiberRoot != null && fiberRoot._debugRootType !== null) {
430 + return fiberRoot._debugRootType;
431 + }
432 return null;
433 case HostComponent:
434 return type;
packages/react-devtools-shared/src/devtools/views/Profiler/Updaters.js
+4 -2
@@ -14,6 +14,7 @@ import * as React from 'react';
14 import {useContext} from 'react';
15 import {ProfilerContext} from './ProfilerContext';
16 import styles from './Updaters.css';
17 +import {ElementTypeRoot} from '../../../types';
18
19 export type Props = {|
20 commitTree: CommitTree,
@@ -26,8 +27,9 @@ export default function Updaters({commitTree, updaters}: Props) {
27 const children =
28 updaters.length > 0 ? (
29 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;
33 if (isVisibleInTree) {
34 return (
35 <button