@samitouri / QOS-React-2 / commits / 7a72ee5ac0

Added context changes to sidebar; fixed a initial-mount detection bug

Brian Vaughn committed Jun 8, 2019 at 17:01 UTC 7a72ee5ac04ddbac0d3bab738df5978ec7274da5
5 files changed +556 -546
src/__tests__/__snapshots__/profilingCache-test.js.snap
+493 -523
@@ -2,7 +2,29 @@
2
3 exports[`ProfilingCache should calculate a self duration based on actual children (not filtered children): CommitDetails with filtered self durations 1`] = `
4 Object {
5 - "changeDescriptions": Map {},
5 + "changeDescriptions": Map {
6 + 2 => Object {
7 + "context": null,
8 + "didHooksChange": false,
9 + "isFirstMount": true,
10 + "props": null,
11 + "state": null,
12 + },
13 + 3 => Object {
14 + "context": null,
15 + "didHooksChange": false,
16 + "isFirstMount": true,
17 + "props": null,
18 + "state": null,
19 + },
20 + 5 => Object {
21 + "context": null,
22 + "didHooksChange": false,
23 + "isFirstMount": true,
24 + "props": null,
25 + "state": null,
26 + },
27 + },
28 "duration": 16,
29 "fiberActualDurations": Map {
30 1 => 16,
@@ -25,7 +47,22 @@ Object {
47
48 exports[`ProfilingCache should calculate self duration correctly for suspended views: CommitDetails with filtered self durations 1`] = `
49 Object {
28 - "changeDescriptions": Map {},
50 + "changeDescriptions": Map {
51 + 2 => Object {
52 + "context": null,
53 + "didHooksChange": false,
54 + "isFirstMount": true,
55 + "props": null,
56 + "state": null,
57 + },
58 + 4 => Object {
59 + "context": null,
60 + "didHooksChange": false,
61 + "isFirstMount": true,
62 + "props": null,
63 + "state": null,
64 + },
65 + },
66 "duration": 15,
67 "fiberActualDurations": Map {
68 1 => 15,
@@ -48,7 +85,15 @@ Object {
85
86 exports[`ProfilingCache should calculate self duration correctly for suspended views: CommitDetails with filtered self durations 2`] = `
87 Object {
51 - "changeDescriptions": Map {},
88 + "changeDescriptions": Map {
89 + 5 => Object {
90 + "context": null,
91 + "didHooksChange": false,
92 + "isFirstMount": true,
93 + "props": null,
94 + "state": null,
95 + },
96 + },
97 "duration": 3,
98 "fiberActualDurations": Map {
99 5 => 3,
@@ -67,7 +112,36 @@ Object {
112
113 exports[`ProfilingCache should collect data for each commit: CommitDetails commitIndex: 0 1`] = `
114 Object {
70 - "changeDescriptions": Map {},
115 + "changeDescriptions": Map {
116 + 2 => Object {
117 + "context": null,
118 + "didHooksChange": false,
119 + "isFirstMount": true,
120 + "props": null,
121 + "state": null,
122 + },
123 + 3 => Object {
124 + "context": null,
125 + "didHooksChange": false,
126 + "isFirstMount": true,
127 + "props": null,
128 + "state": null,
129 + },
130 + 4 => Object {
131 + "context": null,
132 + "didHooksChange": false,
133 + "isFirstMount": true,
134 + "props": null,
135 + "state": null,
136 + },
137 + 5 => Object {
138 + "context": null,
139 + "didHooksChange": false,
140 + "isFirstMount": true,
141 + "props": null,
142 + "state": null,
143 + },
144 + },
145 "duration": 12,
146 "fiberActualDurations": Map {
147 1 => 12,
@@ -96,18 +170,28 @@ Object {
170 3 => Object {
171 "context": null,
172 "didHooksChange": false,
173 + "isFirstMount": false,
174 "props": Array [],
175 "state": null,
176 },
177 4 => Object {
178 "context": null,
179 "didHooksChange": false,
180 + "isFirstMount": false,
181 "props": Array [],
182 "state": null,
183 },
184 + 6 => Object {
185 + "context": null,
186 + "didHooksChange": false,
187 + "isFirstMount": true,
188 + "props": null,
189 + "state": null,
190 + },
191 2 => Object {
192 "context": null,
193 "didHooksChange": false,
194 + "isFirstMount": false,
195 "props": Array [
196 "count",
197 ],
@@ -142,12 +226,14 @@ Object {
226 3 => Object {
227 "context": null,
228 "didHooksChange": false,
229 + "isFirstMount": false,
230 "props": Array [],
231 "state": null,
232 },
233 2 => Object {
234 "context": null,
235 "didHooksChange": false,
236 + "isFirstMount": false,
237 "props": Array [
238 "count",
239 ],
@@ -178,6 +264,7 @@ Object {
264 2 => Object {
265 "context": null,
266 "didHooksChange": false,
267 + "isFirstMount": false,
268 "props": Array [
269 "count",
270 ],
@@ -206,7 +293,48 @@ Object {
293 Object {
294 "commitData": Array [
295 Object {
209 - "changeDescriptions": Array [],
296 + "changeDescriptions": Array [
297 + Array [
298 + 2,
299 + Object {
300 + "context": null,
301 + "didHooksChange": false,
302 + "isFirstMount": true,
303 + "props": null,
304 + "state": null,
305 + },
306 + ],
307 + Array [
308 + 3,
309 + Object {
310 + "context": null,
311 + "didHooksChange": false,
312 + "isFirstMount": true,
313 + "props": null,
314 + "state": null,
315 + },
316 + ],
317 + Array [
318 + 4,
319 + Object {
320 + "context": null,
321 + "didHooksChange": false,
322 + "isFirstMount": true,
323 + "props": null,
324 + "state": null,
325 + },
326 + ],
327 + Array [
328 + 5,
329 + Object {
330 + "context": null,
331 + "didHooksChange": false,
332 + "isFirstMount": true,
333 + "props": null,
334 + "state": null,
335 + },
336 + ],
337 + ],
338 "duration": 12,
339 "fiberActualDurations": Array [
340 Array [
@@ -264,6 +392,7 @@ Object {
392 Object {
393 "context": null,
394 "didHooksChange": false,
395 + "isFirstMount": false,
396 "props": Array [],
397 "state": null,
398 },
@@ -273,15 +402,27 @@ Object {
402 Object {
403 "context": null,
404 "didHooksChange": false,
405 + "isFirstMount": false,
406 "props": Array [],
407 "state": null,
408 },
409 ],
410 + Array [
411 + 6,
412 + Object {
413 + "context": null,
414 + "didHooksChange": false,
415 + "isFirstMount": true,
416 + "props": null,
417 + "state": null,
418 + },
419 + ],
420 Array [
421 2,
422 Object {
423 "context": null,
424 "didHooksChange": false,
425 + "isFirstMount": false,
426 "props": Array [
427 "count",
428 ],
@@ -346,6 +487,7 @@ Object {
487 Object {
488 "context": null,
489 "didHooksChange": false,
490 + "isFirstMount": false,
491 "props": Array [],
492 "state": null,
493 },
@@ -355,6 +497,7 @@ Object {
497 Object {
498 "context": null,
499 "didHooksChange": false,
500 + "isFirstMount": false,
501 "props": Array [
502 "count",
503 ],
@@ -403,6 +546,7 @@ Object {
546 Object {
547 "context": null,
548 "didHooksChange": false,
549 + "isFirstMount": false,
550 "props": Array [
551 "count",
552 ],
@@ -626,7 +770,38 @@ Object {
770 Object {
771 "commitData": Array [
772 Object {
629 - "changeDescriptions": Array [],
773 + "changeDescriptions": Array [
774 + Array [
775 + 2,
776 + Object {
777 + "context": null,
778 + "didHooksChange": false,
779 + "isFirstMount": true,
780 + "props": null,
781 + "state": null,
782 + },
783 + ],
784 + Array [
785 + 3,
786 + Object {
787 + "context": null,
788 + "didHooksChange": false,
789 + "isFirstMount": true,
790 + "props": null,
791 + "state": null,
792 + },
793 + ],
794 + Array [
795 + 4,
796 + Object {
797 + "context": null,
798 + "didHooksChange": false,
799 + "isFirstMount": true,
800 + "props": null,
801 + "state": null,
802 + },
803 + ],
804 + ],
805 "duration": 11,
806 "fiberActualDurations": Array [
807 Array [
@@ -676,15 +851,27 @@ Object {
851 Object {
852 "context": null,
853 "didHooksChange": false,
854 + "isFirstMount": false,
855 "props": Array [],
856 "state": null,
857 },
858 ],
859 + Array [
860 + 5,
861 + Object {
862 + "context": null,
863 + "didHooksChange": false,
864 + "isFirstMount": true,
865 + "props": null,
866 + "state": null,
867 + },
868 + ],
869 Array [
870 2,
871 Object {
872 "context": null,
873 "didHooksChange": false,
874 + "isFirstMount": false,
875 "props": Array [
876 "count",
877 ],
@@ -741,6 +928,7 @@ Object {
928 Object {
929 "context": null,
930 "didHooksChange": false,
931 + "isFirstMount": false,
932 "props": Array [],
933 "state": null,
934 },
@@ -750,15 +938,27 @@ Object {
938 Object {
939 "context": null,
940 "didHooksChange": false,
941 + "isFirstMount": false,
942 "props": Array [],
943 "state": null,
944 },
945 ],
946 + Array [
947 + 6,
948 + Object {
949 + "context": null,
950 + "didHooksChange": false,
951 + "isFirstMount": true,
952 + "props": null,
953 + "state": null,
954 + },
955 + ],
956 Array [
957 2,
958 Object {
959 "context": null,
960 "didHooksChange": false,
961 + "isFirstMount": false,
962 "props": Array [
963 "count",
964 ],
@@ -968,18 +1168,28 @@ Object {
1168 3 => Object {
1169 "context": null,
1170 "didHooksChange": false,
1171 + "isFirstMount": false,
1172 "props": Array [],
1173 "state": null,
1174 },
1175 4 => Object {
1176 "context": null,
1177 "didHooksChange": false,
1178 + "isFirstMount": false,
1179 "props": Array [],
1180 "state": null,
1181 },
1182 + 10 => Object {
1183 + "context": null,
1184 + "didHooksChange": false,
1185 + "isFirstMount": true,
1186 + "props": null,
1187 + "state": null,
1188 + },
1189 2 => Object {
1190 "context": null,
1191 "didHooksChange": false,
1192 + "isFirstMount": false,
1193 "props": Array [
1194 "count",
1195 ],
@@ -1011,12 +1221,14 @@ Object {
1221 3 => Object {
1222 "context": null,
1223 "didHooksChange": false,
1224 + "isFirstMount": false,
1225 "props": Array [],
1226 "state": null,
1227 },
1228 2 => Object {
1229 "context": null,
1230 "didHooksChange": false,
1231 + "isFirstMount": false,
1232 "props": Array [
1233 "count",
1234 ],
@@ -1044,6 +1256,7 @@ Object {
1256 2 => Object {
1257 "context": null,
1258 "didHooksChange": false,
1259 + "isFirstMount": false,
1260 "props": Array [
1261 "count",
1262 ],
@@ -1192,7 +1405,29 @@ exports[`ProfilingCache should collect data for each root (including ones added
1405 Object {
1406 "commitData": Array [
1407 Object {
1195 - "changeDescriptions": Map {},
1408 + "changeDescriptions": Map {
1409 + 12 => Object {
1410 + "context": null,
1411 + "didHooksChange": false,
1412 + "isFirstMount": true,
1413 + "props": null,
1414 + "state": null,
1415 + },
1416 + 13 => Object {
1417 + "context": null,
1418 + "didHooksChange": false,
1419 + "isFirstMount": true,
1420 + "props": null,
1421 + "state": null,
1422 + },
1423 + 14 => Object {
1424 + "context": null,
1425 + "didHooksChange": false,
1426 + "isFirstMount": true,
1427 + "props": null,
1428 + "state": null,
1429 + },
1430 + },
1431 "duration": 11,
1432 "fiberActualDurations": Map {
1433 11 => 11,
@@ -1368,6 +1603,7 @@ Object {
1603 Object {
1604 "context": null,
1605 "didHooksChange": false,
1606 + "isFirstMount": false,
1607 "props": Array [],
1608 "state": null,
1609 },
@@ -1377,15 +1613,27 @@ Object {
1613 Object {
1614 "context": null,
1615 "didHooksChange": false,
1616 + "isFirstMount": false,
1617 "props": Array [],
1618 "state": null,
1619 },
1620 ],
1621 + Array [
1622 + 10,
1623 + Object {
1624 + "context": null,
1625 + "didHooksChange": false,
1626 + "isFirstMount": true,
1627 + "props": null,
1628 + "state": null,
1629 + },
1630 + ],
1631 Array [
1632 2,
1633 Object {
1634 "context": null,
1635 "didHooksChange": false,
1636 + "isFirstMount": false,
1637 "props": Array [
1638 "count",
1639 ],
@@ -1450,6 +1698,7 @@ Object {
1698 Object {
1699 "context": null,
1700 "didHooksChange": false,
1701 + "isFirstMount": false,
1702 "props": Array [],
1703 "state": null,
1704 },
@@ -1459,6 +1708,7 @@ Object {
1708 Object {
1709 "context": null,
1710 "didHooksChange": false,
1711 + "isFirstMount": false,
1712 "props": Array [
1713 "count",
1714 ],
@@ -1507,6 +1757,7 @@ Object {
1757 Object {
1758 "context": null,
1759 "didHooksChange": false,
1760 + "isFirstMount": false,
1761 "props": Array [
1762 "count",
1763 ],
@@ -1695,7 +1946,38 @@ Object {
1946 Object {
1947 "commitData": Array [
1948 Object {
1698 - "changeDescriptions": Array [],
1949 + "changeDescriptions": Array [
1950 + Array [
1951 + 12,
1952 + Object {
1953 + "context": null,
1954 + "didHooksChange": false,
1955 + "isFirstMount": true,
1956 + "props": null,
1957 + "state": null,
1958 + },
1959 + ],
1960 + Array [
1961 + 13,
1962 + Object {
1963 + "context": null,
1964 + "didHooksChange": false,
1965 + "isFirstMount": true,
1966 + "props": null,
1967 + "state": null,
1968 + },
1969 + ],
1970 + Array [
1971 + 14,
1972 + Object {
1973 + "context": null,
1974 + "didHooksChange": false,
1975 + "isFirstMount": true,
1976 + "props": null,
1977 + "state": null,
1978 + },
1979 + ],
1980 + ],
1981 "duration": 11,
1982 "fiberActualDurations": Array [
1983 Array [
@@ -1909,7 +2191,43 @@ Object {
2191
2192 exports[`ProfilingCache should record changed props/state/context/hooks: CommitDetails commitIndex: 0 1`] = `
2193 Object {
1912 - "changeDescriptions": Map {},
2194 + "changeDescriptions": Map {
2195 + 2 => Object {
2196 + "context": null,
2197 + "didHooksChange": false,
2198 + "isFirstMount": true,
2199 + "props": null,
2200 + "state": null,
2201 + },
2202 + 4 => Object {
2203 + "context": null,
2204 + "didHooksChange": false,
2205 + "isFirstMount": true,
2206 + "props": null,
2207 + "state": null,
2208 + },
2209 + 5 => Object {
2210 + "context": null,
2211 + "didHooksChange": false,
2212 + "isFirstMount": true,
2213 + "props": null,
2214 + "state": null,
2215 + },
2216 + 6 => Object {
2217 + "context": null,
2218 + "didHooksChange": false,
2219 + "isFirstMount": true,
2220 + "props": null,
2221 + "state": null,
2222 + },
2223 + 7 => Object {
2224 + "context": null,
2225 + "didHooksChange": false,
2226 + "isFirstMount": true,
2227 + "props": null,
2228 + "state": null,
2229 + },
2230 + },
2231 "duration": 0,
2232 "fiberActualDurations": Map {
2233 1 => 0,
@@ -1942,6 +2260,7 @@ Object {
2260 5 => Object {
2261 "context": null,
2262 "didHooksChange": true,
2263 + "isFirstMount": false,
2264 "props": Array [
2265 "count",
2266 ],
@@ -1950,12 +2269,14 @@ Object {
2269 4 => Object {
2270 "context": true,
2271 "didHooksChange": false,
2272 + "isFirstMount": false,
2273 "props": Array [],
2274 "state": null,
2275 },
2276 7 => Object {
2277 "context": null,
2278 "didHooksChange": true,
2279 + "isFirstMount": false,
2280 "props": Array [
2281 "count",
2282 ],
@@ -1966,12 +2287,14 @@ Object {
2287 "count",
2288 ],
2289 "didHooksChange": false,
2290 + "isFirstMount": false,
2291 "props": Array [],
2292 "state": null,
2293 },
2294 2 => Object {
2295 "context": null,
2296 "didHooksChange": false,
2297 + "isFirstMount": false,
2298 "props": Array [],
2299 "state": Array [
2300 "count",
@@ -2008,30 +2331,35 @@ Object {
2331 5 => Object {
2332 "context": null,
2333 "didHooksChange": false,
2334 + "isFirstMount": false,
2335 "props": Array [],
2336 "state": null,
2337 },
2338 4 => Object {
2339 "context": false,
2340 "didHooksChange": false,
2341 + "isFirstMount": false,
2342 "props": Array [],
2343 "state": null,
2344 },
2345 7 => Object {
2346 "context": null,
2347 "didHooksChange": false,
2348 + "isFirstMount": false,
2349 "props": Array [],
2350 "state": null,
2351 },
2352 6 => Object {
2353 "context": Array [],
2354 "didHooksChange": false,
2355 + "isFirstMount": false,
2356 "props": Array [],
2357 "state": null,
2358 },
2359 2 => Object {
2360 "context": null,
2361 "didHooksChange": false,
2362 + "isFirstMount": false,
2363 "props": Array [
2364 "foo",
2365 ],
@@ -2070,30 +2398,35 @@ Object {
2398 5 => Object {
2399 "context": null,
2400 "didHooksChange": false,
2401 + "isFirstMount": false,
2402 "props": Array [],
2403 "state": null,
2404 },
2405 4 => Object {
2406 "context": false,
2407 "didHooksChange": false,
2408 + "isFirstMount": false,
2409 "props": Array [],
2410 "state": null,
2411 },
2412 7 => Object {
2413 "context": null,
2414 "didHooksChange": false,
2415 + "isFirstMount": false,
2416 "props": Array [],
2417 "state": null,
2418 },
2419 6 => Object {
2420 "context": Array [],
2421 "didHooksChange": false,
2422 + "isFirstMount": false,
2423 "props": Array [],
2424 "state": null,
2425 },
2426 2 => Object {
2427 "context": null,
2428 "didHooksChange": false,
2429 + "isFirstMount": false,
2430 "props": Array [
2431 "foo",
2432 "bar",
@@ -2133,30 +2466,35 @@ Object {
2466 5 => Object {
2467 "context": null,
2468 "didHooksChange": false,
2469 + "isFirstMount": false,
2470 "props": Array [],
2471 "state": null,
2472 },
2473 4 => Object {
2474 "context": false,
2475 "didHooksChange": false,
2476 + "isFirstMount": false,
2477 "props": Array [],
2478 "state": null,
2479 },
2480 7 => Object {
2481 "context": null,
2482 "didHooksChange": false,
2483 + "isFirstMount": false,
2484 "props": Array [],
2485 "state": null,
2486 },
2487 6 => Object {
2488 "context": Array [],
2489 "didHooksChange": false,
2490 + "isFirstMount": false,
2491 "props": Array [],
2492 "state": null,
2493 },
2494 2 => Object {
2495 "context": null,
2496 "didHooksChange": false,
2497 + "isFirstMount": false,
2498 "props": Array [
2499 "bar",
2500 ],
@@ -2195,29 +2533,80 @@ Object {
2533 Object {
2534 "commitData": Array [
2535 Object {
2198 - "changeDescriptions": Array [],
2199 - "duration": 0,
2200 - "fiberActualDurations": Array [
2201 - Array [
2202 - 1,
2203 - 0,
2204 - ],
2536 + "changeDescriptions": Array [
2537 Array [
2538 2,
2207 - 0,
2208 - ],
2209 - Array [
2210 - 3,
2211 - 0,
2539 + Object {
2540 + "context": null,
2541 + "didHooksChange": false,
2542 + "isFirstMount": true,
2543 + "props": null,
2544 + "state": null,
2545 + },
2546 ],
2547 Array [
2548 4,
2215 - 0,
2549 + Object {
2550 + "context": null,
2551 + "didHooksChange": false,
2552 + "isFirstMount": true,
2553 + "props": null,
2554 + "state": null,
2555 + },
2556 ],
2557 Array [
2558 5,
2219 - 0,
2220 - ],
2559 + Object {
2560 + "context": null,
2561 + "didHooksChange": false,
2562 + "isFirstMount": true,
2563 + "props": null,
2564 + "state": null,
2565 + },
2566 + ],
2567 + Array [
2568 + 6,
2569 + Object {
2570 + "context": null,
2571 + "didHooksChange": false,
2572 + "isFirstMount": true,
2573 + "props": null,
2574 + "state": null,
2575 + },
2576 + ],
2577 + Array [
2578 + 7,
2579 + Object {
2580 + "context": null,
2581 + "didHooksChange": false,
2582 + "isFirstMount": true,
2583 + "props": null,
2584 + "state": null,
2585 + },
2586 + ],
2587 + ],
2588 + "duration": 0,
2589 + "fiberActualDurations": Array [
2590 + Array [
2591 + 1,
2592 + 0,
2593 + ],
2594 + Array [
2595 + 2,
2596 + 0,
2597 + ],
2598 + Array [
2599 + 3,
2600 + 0,
2601 + ],
2602 + Array [
2603 + 4,
2604 + 0,
2605 + ],
2606 + Array [
2607 + 5,
2608 + 0,
2609 + ],
2610 Array [
2611 6,
2612 0,
@@ -2269,6 +2658,7 @@ Object {
2658 Object {
2659 "context": null,
2660 "didHooksChange": true,
2661 + "isFirstMount": false,
2662 "props": Array [
2663 "count",
2664 ],
@@ -2280,6 +2670,7 @@ Object {
2670 Object {
2671 "context": true,
2672 "didHooksChange": false,
2673 + "isFirstMount": false,
2674 "props": Array [],
2675 "state": null,
2676 },
@@ -2289,6 +2680,7 @@ Object {
2680 Object {
2681 "context": null,
2682 "didHooksChange": true,
2683 + "isFirstMount": false,
2684 "props": Array [
2685 "count",
2686 ],
@@ -2302,6 +2694,7 @@ Object {
2694 "count",
2695 ],
2696 "didHooksChange": false,
2697 + "isFirstMount": false,
2698 "props": Array [],
2699 "state": null,
2700 },
@@ -2311,6 +2704,7 @@ Object {
2704 Object {
2705 "context": null,
2706 "didHooksChange": false,
2707 + "isFirstMount": false,
2708 "props": Array [],
2709 "state": Array [
2710 "count",
@@ -2383,6 +2777,7 @@ Object {
2777 Object {
2778 "context": null,
2779 "didHooksChange": false,
2780 + "isFirstMount": false,
2781 "props": Array [],
2782 "state": null,
2783 },
@@ -2392,6 +2787,7 @@ Object {
2787 Object {
2788 "context": false,
2789 "didHooksChange": false,
2790 + "isFirstMount": false,
2791 "props": Array [],
2792 "state": null,
2793 },
@@ -2401,6 +2797,7 @@ Object {
2797 Object {
2798 "context": null,
2799 "didHooksChange": false,
2800 + "isFirstMount": false,
2801 "props": Array [],
2802 "state": null,
2803 },
@@ -2410,6 +2807,7 @@ Object {
2807 Object {
2808 "context": Array [],
2809 "didHooksChange": false,
2810 + "isFirstMount": false,
2811 "props": Array [],
2812 "state": null,
2813 },
@@ -2419,6 +2817,7 @@ Object {
2817 Object {
2818 "context": null,
2819 "didHooksChange": false,
2820 + "isFirstMount": false,
2821 "props": Array [
2822 "foo",
2823 ],
@@ -2499,6 +2898,7 @@ Object {
2898 Object {
2899 "context": null,
2900 "didHooksChange": false,
2901 + "isFirstMount": false,
2902 "props": Array [],
2903 "state": null,
2904 },
@@ -2508,6 +2908,7 @@ Object {
2908 Object {
2909 "context": false,
2910 "didHooksChange": false,
2911 + "isFirstMount": false,
2912 "props": Array [],
2913 "state": null,
2914 },
@@ -2517,6 +2918,7 @@ Object {
2918 Object {
2919 "context": null,
2920 "didHooksChange": false,
2921 + "isFirstMount": false,
2922 "props": Array [],
2923 "state": null,
2924 },
@@ -2526,6 +2928,7 @@ Object {
2928 Object {
2929 "context": Array [],
2930 "didHooksChange": false,
2931 + "isFirstMount": false,
2932 "props": Array [],
2933 "state": null,
2934 },
@@ -2535,6 +2938,7 @@ Object {
2938 Object {
2939 "context": null,
2940 "didHooksChange": false,
2941 + "isFirstMount": false,
2942 "props": Array [
2943 "foo",
2944 "bar",
@@ -2616,6 +3020,7 @@ Object {
3020 Object {
3021 "context": null,
3022 "didHooksChange": false,
3023 + "isFirstMount": false,
3024 "props": Array [],
3025 "state": null,
3026 },
@@ -2625,6 +3030,7 @@ Object {
3030 Object {
3031 "context": false,
3032 "didHooksChange": false,
3033 + "isFirstMount": false,
3034 "props": Array [],
3035 "state": null,
3036 },
@@ -2634,6 +3040,7 @@ Object {
3040 Object {
3041 "context": null,
3042 "didHooksChange": false,
3043 + "isFirstMount": false,
3044 "props": Array [],
3045 "state": null,
3046 },
@@ -2643,6 +3050,7 @@ Object {
3050 Object {
3051 "context": Array [],
3052 "didHooksChange": false,
3053 + "isFirstMount": false,
3054 "props": Array [],
3055 "state": null,
3056 },
@@ -2652,6 +3060,7 @@ Object {
3060 Object {
3061 "context": null,
3062 "didHooksChange": false,
3063 + "isFirstMount": false,
3064 "props": Array [
3065 "bar",
3066 ],
@@ -2940,137 +3349,78 @@ Object {
3349 }
3350 `;
3351
2943 -exports[`ProfilingCache should record when props/state/hooks change: CommitDetails commitIndex: 0 1`] = `
2944 -Object {
2945 - "changeDescriptions": Map {},
2946 - "duration": 0,
2947 - "fiberActualDurations": Map {
2948 - 1 => 0,
2949 - 2 => 0,
2950 - 3 => 0,
2951 - 4 => 0,
2952 - 5 => 0,
2953 - 6 => 0,
2954 - 7 => 0,
2955 - },
2956 - "fiberSelfDurations": Map {
2957 - 1 => 0,
2958 - 2 => 0,
2959 - 3 => 0,
2960 - 4 => 0,
2961 - 5 => 0,
2962 - 6 => 0,
2963 - 7 => 0,
2964 - },
2965 - "interactionIDs": Array [],
2966 - "priorityLevel": "Immediate",
2967 - "screenshot": null,
2968 - "timestamp": 0,
2969 -}
2970 -`;
2971 -
2972 -exports[`ProfilingCache should record when props/state/hooks change: CommitDetails commitIndex: 1 1`] = `
2973 -Object {
2974 - "changeDescriptions": Map {
2975 - 5 => Object {
2976 - "context": null,
2977 - "didHooksChange": true,
2978 - "props": Array [
2979 - "count",
2980 - ],
2981 - "state": null,
2982 - },
2983 - 4 => Object {
2984 - "context": true,
2985 - "didHooksChange": false,
2986 - "props": Array [],
2987 - "state": null,
2988 - },
2989 - 7 => Object {
2990 - "context": null,
2991 - "didHooksChange": true,
2992 - "props": Array [
2993 - "count",
2994 - ],
2995 - "state": null,
2996 - },
2997 - 6 => Object {
2998 - "context": Array [
2999 - "count",
3000 - ],
3001 - "didHooksChange": false,
3002 - "props": Array [],
3003 - "state": null,
3004 - },
3005 - 2 => Object {
3006 - "context": null,
3007 - "didHooksChange": false,
3008 - "props": Array [],
3009 - "state": Array [
3010 - "count",
3011 - ],
3012 - },
3013 - },
3014 - "duration": 0,
3015 - "fiberActualDurations": Map {
3016 - 5 => 0,
3017 - 4 => 0,
3018 - 7 => 0,
3019 - 6 => 0,
3020 - 3 => 0,
3021 - 2 => 0,
3352 +exports[`ProfilingCache should report every traced interaction: Interactions 1`] = `
3353 +Array [
3354 + Object {
3355 + "__count": 1,
3356 + "id": 0,
3357 + "name": "mount: one child",
3358 + "timestamp": 0,
3359 },
3023 - "fiberSelfDurations": Map {
3024 - 5 => 0,
3025 - 4 => 0,
3026 - 7 => 0,
3027 - 6 => 0,
3028 - 3 => 0,
3029 - 2 => 0,
3360 + Object {
3361 + "__count": 0,
3362 + "id": 1,
3363 + "name": "update: two children",
3364 + "timestamp": 11,
3365 },
3031 - "interactionIDs": Array [],
3032 - "priorityLevel": "Immediate",
3033 - "screenshot": null,
3034 - "timestamp": 0,
3035 -}
3366 +]
3367 `;
3368
3038 -exports[`ProfilingCache should record when props/state/hooks change: imported data 1`] = `
3369 +exports[`ProfilingCache should report every traced interaction: imported data 1`] = `
3370 Object {
3371 "dataForRoots": Array [
3372 Object {
3373 "commitData": Array [
3374 Object {
3044 - "changeDescriptions": Array [],
3045 - "duration": 0,
3046 - "fiberActualDurations": Array [
3047 - Array [
3048 - 1,
3049 - 0,
3050 - ],
3375 + "changeDescriptions": Array [
3376 Array [
3377 2,
3053 - 0,
3378 + Object {
3379 + "context": null,
3380 + "didHooksChange": false,
3381 + "isFirstMount": true,
3382 + "props": null,
3383 + "state": null,
3384 + },
3385 ],
3386 Array [
3387 3,
3057 - 0,
3388 + Object {
3389 + "context": null,
3390 + "didHooksChange": false,
3391 + "isFirstMount": true,
3392 + "props": null,
3393 + "state": null,
3394 + },
3395 ],
3396 Array [
3397 4,
3061 - 0,
3398 + Object {
3399 + "context": null,
3400 + "didHooksChange": false,
3401 + "isFirstMount": true,
3402 + "props": null,
3403 + "state": null,
3404 + },
3405 + ],
3406 + ],
3407 + "duration": 11,
3408 + "fiberActualDurations": Array [
3409 + Array [
3410 + 1,
3411 + 11,
3412 ],
3413 Array [
3064 - 5,
3065 - 0,
3414 + 2,
3415 + 11,
3416 ],
3417 Array [
3068 - 6,
3418 + 3,
3419 0,
3420 ],
3421 Array [
3072 - 7,
3073 - 0,
3422 + 4,
3423 + 1,
3424 ],
3425 ],
3426 "fiberSelfDurations": Array [
@@ -3080,7 +3430,7 @@ Object {
3430 ],
3431 Array [
3432 2,
3083 - 0,
3433 + 10,
3434 ],
3435 Array [
3436 3,
@@ -3088,416 +3438,35 @@ Object {
3438 ],
3439 Array [
3440 4,
3091 - 0,
3092 - ],
3093 - Array [
3094 - 5,
3095 - 0,
3096 - ],
3097 - Array [
3098 - 6,
3099 - 0,
3100 - ],
3101 - Array [
3102 - 7,
3103 - 0,
3441 + 1,
3442 ],
3443 ],
3106 - "interactionIDs": Array [],
3444 + "interactionIDs": Array [
3445 + 0,
3446 + ],
3447 "priorityLevel": "Immediate",
3448 "screenshot": null,
3109 - "timestamp": 0,
3449 + "timestamp": 11,
3450 },
3451 Object {
3452 "changeDescriptions": Array [
3453 Array [
3114 - 5,
3115 - Object {
3116 - "context": null,
3117 - "didHooksChange": true,
3118 - "props": Array [
3119 - "count",
3120 - ],
3121 - "state": null,
3122 - },
3123 - ],
3124 - Array [
3125 - 4,
3126 - Object {
3127 - "context": true,
3128 - "didHooksChange": false,
3129 - "props": Array [],
3130 - "state": null,
3131 - },
3132 - ],
3133 - Array [
3134 - 7,
3454 + 3,
3455 Object {
3456 "context": null,
3137 - "didHooksChange": true,
3138 - "props": Array [
3139 - "count",
3140 - ],
3141 - "state": null,
3142 - },
3143 - ],
3144 - Array [
3145 - 6,
3146 - Object {
3147 - "context": Array [
3148 - "count",
3149 - ],
3457 "didHooksChange": false,
3458 + "isFirstMount": false,
3459 "props": Array [],
3460 "state": null,
3461 },
3462 ],
3463 Array [
3156 - 2,
3464 + 5,
3465 Object {
3466 "context": null,
3467 "didHooksChange": false,
3160 - "props": Array [],
3161 - "state": Array [
3162 - "count",
3163 - ],
3164 - },
3165 - ],
3166 - ],
3167 - "duration": 0,
3168 - "fiberActualDurations": Array [
3169 - Array [
3170 - 5,
3171 - 0,
3172 - ],
3173 - Array [
3174 - 4,
3175 - 0,
3176 - ],
3177 - Array [
3178 - 7,
3179 - 0,
3180 - ],
3181 - Array [
3182 - 6,
3183 - 0,
3184 - ],
3185 - Array [
3186 - 3,
3187 - 0,
3188 - ],
3189 - Array [
3190 - 2,
3191 - 0,
3192 - ],
3193 - ],
3194 - "fiberSelfDurations": Array [
3195 - Array [
3196 - 5,
3197 - 0,
3198 - ],
3199 - Array [
3200 - 4,
3201 - 0,
3202 - ],
3203 - Array [
3204 - 7,
3205 - 0,
3206 - ],
3207 - Array [
3208 - 6,
3209 - 0,
3210 - ],
3211 - Array [
3212 - 3,
3213 - 0,
3214 - ],
3215 - Array [
3216 - 2,
3217 - 0,
3218 - ],
3219 - ],
3220 - "interactionIDs": Array [],
3221 - "priorityLevel": "Immediate",
3222 - "screenshot": null,
3223 - "timestamp": 0,
3224 - },
3225 - ],
3226 - "displayName": "LegacyContextProvider",
3227 - "initialTreeBaseDurations": Array [],
3228 - "interactionCommits": Array [],
3229 - "interactions": Array [],
3230 - "operations": Array [
3231 - Array [
3232 - 1,
3233 - 1,
3234 - 110,
3235 - 21,
3236 - 76,
3237 - 101,
3238 - 103,
3239 - 97,
3240 - 99,
3241 - 121,
3242 - 67,
3243 - 111,
3244 - 110,
3245 - 116,
3246 - 101,
3247 - 120,
3248 - 116,
3249 - 80,
3250 - 114,
3251 - 111,
3252 - 118,
3253 - 105,
3254 - 100,
3255 - 101,
3256 - 114,
3257 - 16,
3258 - 67,
3259 - 111,
3260 - 110,
3261 - 116,
3262 - 101,
3263 - 120,
3264 - 116,
3265 - 46,
3266 - 80,
3267 - 114,
3268 - 111,
3269 - 118,
3270 - 105,
3271 - 100,
3272 - 101,
3273 - 114,
3274 - 21,
3275 - 77,
3276 - 111,
3277 - 100,
3278 - 101,
3279 - 114,
3280 - 110,
3281 - 67,
3282 - 111,
3283 - 110,
3284 - 116,
3285 - 101,
3286 - 120,
3287 - 116,
3288 - 67,
3289 - 111,
3290 - 110,
3291 - 115,
3292 - 117,
3293 - 109,
3294 - 101,
3295 - 114,
3296 - 26,
3297 - 70,
3298 - 117,
3299 - 110,
3300 - 99,
3301 - 116,
3302 - 105,
3303 - 111,
3304 - 110,
3305 - 67,
3306 - 111,
3307 - 109,
3308 - 112,
3309 - 111,
3310 - 110,
3311 - 101,
3312 - 110,
3313 - 116,
3314 - 87,
3315 - 105,
3316 - 116,
3317 - 104,
3318 - 72,
3319 - 111,
3320 - 111,
3321 - 107,
3322 - 115,
3323 - 21,
3324 - 76,
3325 - 101,
3326 - 103,
3327 - 97,
3328 - 99,
3329 - 121,
3330 - 67,
3331 - 111,
3332 - 110,
3333 - 116,
3334 - 101,
3335 - 120,
3336 - 116,
3337 - 67,
3338 - 111,
3339 - 110,
3340 - 115,
3341 - 117,
3342 - 109,
3343 - 101,
3344 - 114,
3345 - 1,
3346 - 1,
3347 - 11,
3348 - 1,
3349 - 1,
3350 - 1,
3351 - 2,
3352 - 1,
3353 - 1,
3354 - 0,
3355 - 1,
3356 - 0,
3357 - 4,
3358 - 2,
3359 - 0,
3360 - 1,
3361 - 3,
3362 - 2,
3363 - 2,
3364 - 2,
3365 - 2,
3366 - 0,
3367 - 4,
3368 - 3,
3369 - 0,
3370 - 1,
3371 - 4,
3372 - 1,
3373 - 3,
3374 - 2,
3375 - 3,
3376 - 0,
3377 - 4,
3378 - 4,
3379 - 0,
3380 - 1,
3381 - 5,
3382 - 5,
3383 - 4,
3384 - 4,
3385 - 4,
3386 - 0,
3387 - 4,
3388 - 5,
3389 - 0,
3390 - 1,
3391 - 6,
3392 - 1,
3393 - 3,
3394 - 2,
3395 - 5,
3396 - 0,
3397 - 4,
3398 - 6,
3399 - 0,
3400 - 1,
3401 - 7,
3402 - 5,
3403 - 6,
3404 - 6,
3405 - 4,
3406 - 0,
3407 - 4,
3408 - 7,
3409 - 0,
3410 - ],
3411 - Array [
3412 - 1,
3413 - 1,
3414 - 0,
3415 - ],
3416 - ],
3417 - "rootID": 1,
3418 - "snapshots": Array [],
3419 - },
3420 - ],
3421 - "version": 4,
3422 -}
3423 -`;
3424 -
3425 -exports[`ProfilingCache should report every traced interaction: Interactions 1`] = `
3426 -Array [
3427 - Object {
3428 - "__count": 1,
3429 - "id": 0,
3430 - "name": "mount: one child",
3431 - "timestamp": 0,
3432 - },
3433 - Object {
3434 - "__count": 0,
3435 - "id": 1,
3436 - "name": "update: two children",
3437 - "timestamp": 11,
3438 - },
3439 -]
3440 -`;
3441 -
3442 -exports[`ProfilingCache should report every traced interaction: imported data 1`] = `
3443 -Object {
3444 - "dataForRoots": Array [
3445 - Object {
3446 - "commitData": Array [
3447 - Object {
3448 - "changeDescriptions": Array [],
3449 - "duration": 11,
3450 - "fiberActualDurations": Array [
3451 - Array [
3452 - 1,
3453 - 11,
3454 - ],
3455 - Array [
3456 - 2,
3457 - 11,
3458 - ],
3459 - Array [
3460 - 3,
3461 - 0,
3462 - ],
3463 - Array [
3464 - 4,
3465 - 1,
3466 - ],
3467 - ],
3468 - "fiberSelfDurations": Array [
3469 - Array [
3470 - 1,
3471 - 0,
3472 - ],
3473 - Array [
3474 - 2,
3475 - 10,
3476 - ],
3477 - Array [
3478 - 3,
3479 - 0,
3480 - ],
3481 - Array [
3482 - 4,
3483 - 1,
3484 - ],
3485 - ],
3486 - "interactionIDs": Array [
3487 - 0,
3488 - ],
3489 - "priorityLevel": "Immediate",
3490 - "screenshot": null,
3491 - "timestamp": 11,
3492 - },
3493 - Object {
3494 - "changeDescriptions": Array [
3495 - Array [
3496 - 3,
3497 - Object {
3498 - "context": null,
3499 - "didHooksChange": false,
3500 - "props": Array [],
3468 + "isFirstMount": true,
3469 + "props": null,
3470 "state": null,
3471 },
3472 ],
@@ -3506,6 +3475,7 @@ Object {
3475 Object {
3476 "context": null,
3477 "didHooksChange": false,
3478 + "isFirstMount": false,
3479 "props": Array [
3480 "count",
3481 ],
src/backend/renderer.js
+32 -22
@@ -649,7 +649,7 @@ export function attach(
649 }
650
651 function getChangeDescription(
652 - prevFiber: Fiber,
652 + prevFiber: Fiber | null,
653 nextFiber: Fiber
654 ): ChangeDescription | null {
655 switch (getElementTypeForFiber(nextFiber)) {
@@ -657,21 +657,32 @@ export function attach(
657 case ElementTypeFunction:
658 case ElementTypeMemo:
659 case ElementTypeForwardRef:
660 - return {
661 - didHooksChange: didHooksChange(
662 - prevFiber.memoizedState,
663 - nextFiber.memoizedState
664 - ),
665 - context: getContextChangedKeys(nextFiber),
666 - props: getChangedKeys(
667 - prevFiber.memoizedProps,
668 - nextFiber.memoizedProps
669 - ),
670 - state: getChangedKeys(
671 - prevFiber.memoizedState,
672 - nextFiber.memoizedState
673 - ),
674 - };
660 + if (prevFiber === null) {
661 + return {
662 + context: null,
663 + didHooksChange: false,
664 + isFirstMount: true,
665 + props: null,
666 + state: null,
667 + };
668 + } else {
669 + return {
670 + context: getContextChangedKeys(nextFiber),
671 + didHooksChange: didHooksChange(
672 + prevFiber.memoizedState,
673 + nextFiber.memoizedState
674 + ),
675 + isFirstMount: false,
676 + props: getChangedKeys(
677 + prevFiber.memoizedProps,
678 + nextFiber.memoizedProps
679 + ),
680 + state: getChangedKeys(
681 + prevFiber.memoizedState,
682 + nextFiber.memoizedState
683 + ),
684 + };
685 + }
686 default:
687 return null;
688 }
@@ -1214,13 +1225,12 @@ export function attach(
1225 actualDuration
1226 );
1227
1217 - if (recordChangeDescriptions && metadata.changeDescriptions) {
1218 - const changeDescription =
1219 - alternate === null
1220 - ? null
1221 - : getChangeDescription(alternate, fiber);
1228 + if (recordChangeDescriptions) {
1229 + const changeDescription = getChangeDescription(alternate, fiber);
1230 if (changeDescription !== null) {
1223 - metadata.changeDescriptions.set(id, changeDescription);
1231 + if (metadata.changeDescriptions !== null) {
1232 + metadata.changeDescriptions.set(id, changeDescription);
1233 + }
1234 }
1235
1236 updateContextsForFiber(fiber);
src/backend/types.js
+1
@@ -116,6 +116,7 @@ export type ReactRenderer = {
116 export type ChangeDescription = {|
117 context: Array<string> | boolean | null,
118 didHooksChange: boolean,
119 + isFirstMount: boolean,
120 props: Array<string> | null,
121 state: Array<string> | null,
122 |};
src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
+29 -1
@@ -104,7 +104,10 @@ function WhatChanged({
104
105 const changeDescription = changeDescriptions.get(fiberID);
106 if (changeDescription == null) {
107 - // This indicates that the component mounted during this commit
107 + return null;
108 + }
109 +
110 + if (changeDescription.isFirstMount) {
111 return (
112 <div className={styles.Content}>
113 <label className={styles.Label}>Why did this render?</label>
@@ -117,6 +120,29 @@ function WhatChanged({
120
121 const changes = [];
122
123 + if (changeDescription.context === true) {
124 + changes.push(
125 + <div key="context" className={styles.WhatChangedItem}>
126 + • Context changed
127 + </div>
128 + );
129 + } else if (
130 + typeof changeDescription.context === 'object' &&
131 + changeDescription.context !== null &&
132 + changeDescription.context.length !== 0
133 + ) {
134 + changes.push(
135 + <div key="context" className={styles.WhatChangedItem}>
136 + • Context changed:
137 + {changeDescription.context.map(key => (
138 + <span key={key} className={styles.WhatChangedKey}>
139 + {key}
140 + </span>
141 + ))}
142 + </div>
143 + );
144 + }
145 +
146 if (changeDescription.didHooksChange) {
147 changes.push(
148 <div key="hooks" className={styles.WhatChangedItem}>
@@ -124,6 +150,7 @@ function WhatChanged({
150 </div>
151 );
152 }
153 +
154 if (
155 changeDescription.props !== null &&
156 changeDescription.props.length !== 0
@@ -139,6 +166,7 @@ function WhatChanged({
166 </div>
167 );
168 }
169 +
170 if (
171 changeDescription.state !== null &&
172 changeDescription.state.length !== 0
src/devtools/views/Profiler/types.js
+1
@@ -35,6 +35,7 @@ export type SnapshotNode = {|
35 export type ChangeDescription = {|
36 context: Array<string> | boolean | null,
37 didHooksChange: boolean,
38 + isFirstMount: boolean,
39 props: Array<string> | null,
40 state: Array<string> | null,
41 |};