[DevTools] Fix handling of host roots on mount (#34400)
Sebastian "Sebbie" Silbermann committed
Sep 8, 2025 at 22:53 UTC
8943025358da2e4e615629077b78ce5bd1b1fbb5
6 files changed
+97
-89
packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js
+3
-3
@@ -228,7 +228,7 @@ describe('commit tree', () => {
228
[root]
229
▾ <App>
230
<Suspense>
231
- [shell]
231
+ [suspense-root] rects={null}
232
<Suspense name="App>?" rects={null}>
233
`);
234
utils.act(() => modernRender(<App renderChildren={true} />));
@@ -237,7 +237,7 @@ describe('commit tree', () => {
237
▾ <App>
238
▾ <Suspense>
239
<LazyInnerComponent>
240
- [shell]
240
+ [suspense-root] rects={null}
241
<Suspense name="App>?" rects={null}>
242
`);
243
utils.act(() => modernRender(<App renderChildren={false} />));
@@ -303,7 +303,7 @@ describe('commit tree', () => {
303
[root]
304
▾ <App>
305
<Suspense>
306
- [shell]
306
+ [suspense-root] rects={null}
307
<Suspense name="App>?" rects={null}>
308
`);
309
utils.act(() => modernRender(<App renderChildren={false} />));
packages/react-devtools-shared/src/__tests__/store-test.js
+44
-39
@@ -133,7 +133,7 @@ describe('Store', () => {
133
<Suspense>
134
▾ <Parent>
135
<Child>
136
- [shell]
136
+ [suspense-root] rects={null}
137
<Suspense name="Unknown" rects={null}>
138
`);
139
});
@@ -492,7 +492,7 @@ describe('Store', () => {
492
<Component key="Outside">
493
▾ <Suspense>
494
<Loading>
495
- [shell]
495
+ [suspense-root] rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:10,height:1}]}
496
<Suspense name="Wrapper>?" rects={null}>
497
`);
498
@@ -505,7 +505,7 @@ describe('Store', () => {
505
<Component key="Outside">
506
▾ <Suspense>
507
<Component key="Inside">
508
- [shell]
508
+ [suspense-root] rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}]}
509
<Suspense name="Wrapper>?" rects={[{x:1,y:2,width:5,height:1}]}>
510
`);
511
});
@@ -584,7 +584,7 @@ describe('Store', () => {
584
▾ <Suspense name="three">
585
<Loading key="Suspense 3 Fallback">
586
<Component key="Unrelated at End">
587
- [shell]
587
+ [suspense-root] rects={[{x:1,y:2,width:10,height:1}]}
588
<Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}]}>
589
<Suspense name="one" rects={null}>
590
<Suspense name="two" rects={null}>
@@ -612,7 +612,7 @@ describe('Store', () => {
612
▾ <Suspense name="three">
613
<Loading key="Suspense 3 Fallback">
614
<Component key="Unrelated at End">
615
- [shell]
615
+ [suspense-root] rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}
616
<Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
617
<Suspense name="one" rects={null}>
618
<Suspense name="two" rects={null}>
@@ -640,7 +640,7 @@ describe('Store', () => {
640
▾ <Suspense name="three">
641
<Loading key="Suspense 3 Fallback">
642
<Component key="Unrelated at End">
643
- [shell]
643
+ [suspense-root] rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}
644
<Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
645
<Suspense name="one" rects={null}>
646
<Suspense name="two" rects={null}>
@@ -668,7 +668,7 @@ describe('Store', () => {
668
▾ <Suspense name="three">
669
<Loading key="Suspense 3 Fallback">
670
<Component key="Unrelated at End">
671
- [shell]
671
+ [suspense-root] rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}
672
<Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
673
<Suspense name="one" rects={null}>
674
<Suspense name="two" rects={null}>
@@ -689,7 +689,7 @@ describe('Store', () => {
689
<Component key="Outside">
690
▾ <Suspense name="parent">
691
<Loading key="Parent Fallback">
692
- [shell]
692
+ [suspense-root] rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}
693
<Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
694
<Suspense name="one" rects={null}>
695
<Suspense name="two" rects={null}>
@@ -717,7 +717,7 @@ describe('Store', () => {
717
▾ <Suspense name="three">
718
<Loading key="Suspense 3 Fallback">
719
<Component key="Unrelated at End">
720
- [shell]
720
+ [suspense-root] rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}
721
<Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
722
<Suspense name="one" rects={null}>
723
<Suspense name="two" rects={null}>
@@ -745,7 +745,7 @@ describe('Store', () => {
745
▾ <Suspense name="three">
746
<Loading key="Suspense 3 Fallback">
747
<Component key="Unrelated at End">
748
- [shell]
748
+ [suspense-root] rects={[{x:1,y:2,width:10,height:1}]}
749
<Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}]}>
750
<Suspense name="one" rects={null}>
751
<Suspense name="two" rects={null}>
@@ -773,7 +773,7 @@ describe('Store', () => {
773
▾ <Suspense name="three">
774
<Loading key="Suspense 3 Fallback">
775
<Component key="Unrelated at End">
776
- [shell]
776
+ [suspense-root] rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}
777
<Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
778
<Suspense name="one" rects={null}>
779
<Suspense name="two" rects={null}>
@@ -792,7 +792,7 @@ describe('Store', () => {
792
<Component key="Outside">
793
▾ <Suspense name="parent">
794
<Loading key="Parent Fallback">
795
- [shell]
795
+ [suspense-root] rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}
796
<Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
797
<Suspense name="one" rects={null}>
798
<Suspense name="two" rects={null}>
@@ -813,7 +813,7 @@ describe('Store', () => {
813
<Component key="Outside">
814
▾ <Suspense name="parent">
815
<Loading key="Parent Fallback">
816
- [shell]
816
+ [suspense-root] rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}
817
<Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
818
<Suspense name="one" rects={null}>
819
<Suspense name="two" rects={null}>
@@ -839,7 +839,7 @@ describe('Store', () => {
839
▾ <Suspense name="three">
840
<Loading key="Suspense 3 Fallback">
841
<Component key="Unrelated at End">
842
- [shell]
842
+ [suspense-root] rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}
843
<Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
844
<Suspense name="one" rects={null}>
845
<Suspense name="two" rects={null}>
@@ -865,7 +865,7 @@ describe('Store', () => {
865
▾ <Suspense name="three">
866
<Loading key="Suspense 3 Fallback">
867
<Component key="Unrelated at End">
868
- [shell]
868
+ [suspense-root] rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}
869
<Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
870
<Suspense name="one" rects={null}>
871
<Suspense name="two" rects={null}>
@@ -893,7 +893,7 @@ describe('Store', () => {
893
▾ <Suspense name="three">
894
<Loading key="Suspense 3 Fallback">
895
<Component key="Unrelated at End">
896
- [shell]
896
+ [suspense-root] rects={[{x:1,y:2,width:10,height:1}]}
897
<Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}]}>
898
<Suspense name="one" rects={null}>
899
<Suspense name="two" rects={null}>
@@ -948,7 +948,7 @@ describe('Store', () => {
948
▾ <Suspense name="three">
949
<Component key="Suspense 3 Content">
950
<Component key="Unrelated at End">
951
- [shell]
951
+ [suspense-root] rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}]}
952
<Suspense name="parent" rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}]}>
953
<Suspense name="one" rects={[{x:1,y:2,width:5,height:1}]}>
954
<Suspense name="two" rects={[{x:1,y:2,width:5,height:1}]}>
@@ -981,7 +981,7 @@ describe('Store', () => {
981
▾ <Suspense name="three">
982
<Component key="Suspense 3 Fallback">
983
<Component key="Unrelated at End">
984
- [shell]
984
+ [suspense-root] rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}]}
985
<Suspense name="parent" rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}]}>
986
<Suspense name="one" rects={[{x:1,y:2,width:5,height:1}]}>
987
<Suspense name="two" rects={[{x:1,y:2,width:5,height:1}]}>
@@ -1009,7 +1009,7 @@ describe('Store', () => {
1009
▾ <Suspense name="three">
1010
<Component key="Suspense 3 Content">
1011
<Component key="Unrelated at End">
1012
- [shell]
1012
+ [suspense-root] rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}]}
1013
<Suspense name="parent" rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}]}>
1014
<Suspense name="one" rects={[{x:1,y:2,width:5,height:1}]}>
1015
<Suspense name="two" rects={[{x:1,y:2,width:5,height:1}]}>
@@ -1053,7 +1053,7 @@ describe('Store', () => {
1053
<Component key="A">
1054
▾ <Suspense>
1055
<Loading>
1056
- [shell]
1056
+ [suspense-root] rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:10,height:1}]}
1057
<Suspense name="Wrapper>?" rects={null}>
1058
`);
1059
@@ -1068,7 +1068,7 @@ describe('Store', () => {
1068
▾ <Suspense>
1069
<Component key="B">
1070
<Component key="C">
1071
- [shell]
1071
+ [suspense-root] rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}]}
1072
<Suspense name="Wrapper>?" rects={[{x:1,y:2,width:5,height:1}]}>
1073
`);
1074
});
@@ -1406,7 +1406,7 @@ describe('Store', () => {
1406
expect(store).toMatchInlineSnapshot(`
1407
[root]
1408
▸ <Wrapper>
1409
- [shell]
1409
+ [suspense-root] rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:10,height:1}]}
1410
<Suspense name="Wrapper>?" rects={null}>
1411
`);
1412
@@ -1423,7 +1423,7 @@ describe('Store', () => {
1423
<Component key="Outside">
1424
▾ <Suspense>
1425
<Loading>
1426
- [shell]
1426
+ [suspense-root] rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:10,height:1}]}
1427
<Suspense name="Wrapper>?" rects={null}>
1428
`);
1429
@@ -1436,7 +1436,7 @@ describe('Store', () => {
1436
<Component key="Outside">
1437
▾ <Suspense>
1438
<Component key="Inside">
1439
- [shell]
1439
+ [suspense-root] rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}]}
1440
<Suspense name="Wrapper>?" rects={[{x:1,y:2,width:5,height:1}]}>
1441
`);
1442
});
@@ -1662,7 +1662,7 @@ describe('Store', () => {
1662
expect(store).toMatchInlineSnapshot(`
1663
[root]
1664
▸ <SuspenseTree>
1665
- [shell]
1665
+ [suspense-root] rects={null}
1666
<Suspense name="SuspenseTree>?" rects={null}>
1667
`);
1668
@@ -1677,7 +1677,7 @@ describe('Store', () => {
1677
▾ <SuspenseTree>
1678
▾ <Suspense>
1679
▸ <Parent>
1680
- [shell]
1680
+ [suspense-root] rects={null}
1681
<Suspense name="SuspenseTree>?" rects={null}>
1682
`);
1683
@@ -1696,7 +1696,7 @@ describe('Store', () => {
1696
▾ <SuspenseTree>
1697
▾ <Suspense>
1698
<Fallback>
1699
- [shell]
1699
+ [suspense-root] rects={null}
1700
<Suspense name="SuspenseTree>?" rects={null}>
1701
`);
1702
@@ -1712,7 +1712,7 @@ describe('Store', () => {
1712
▾ <SuspenseTree>
1713
▾ <Suspense>
1714
▸ <Parent>
1715
- [shell]
1715
+ [suspense-root] rects={null}
1716
<Suspense name="SuspenseTree>?" rects={null}>
1717
`);
1718
});
@@ -2017,7 +2017,7 @@ describe('Store', () => {
2017
[root]
2018
▾ <App>
2019
<Suspense>
2020
- [shell]
2020
+ [suspense-root] rects={null}
2021
<Suspense name="App>?" rects={null}>
2022
`);
2023
@@ -2031,7 +2031,7 @@ describe('Store', () => {
2031
▾ <App>
2032
▾ <Suspense>
2033
<LazyInnerComponent>
2034
- [shell]
2034
+ [suspense-root] rects={null}
2035
<Suspense name="App>?" rects={null}>
2036
`);
2037
@@ -2522,7 +2522,7 @@ describe('Store', () => {
2522
▾ <App>
2523
▾ <Suspense>
2524
<ChildA>
2525
- [shell]
2525
+ [suspense-root] rects={null}
2526
<Suspense name="App>?" rects={null}>
2527
`);
2528
@@ -2533,7 +2533,7 @@ describe('Store', () => {
2533
▾ <App>
2534
▾ <Suspense>
2535
<ChildB>
2536
- [shell]
2536
+ [suspense-root] rects={null}
2537
<Suspense name="App>?" rects={null}>
2538
`);
2539
});
@@ -2860,7 +2860,7 @@ describe('Store', () => {
2860
▾ <Suspense name="content">
2861
▾ <Suspense name="fallback">
2862
<Component key="fallback-fallback">
2863
- [shell]
2863
+ [suspense-root] rects={[{x:1,y:2,width:19,height:1}]}
2864
<Suspense name="content" rects={null}>
2865
<Suspense name="fallback" rects={null}>
2866
`);
@@ -2874,7 +2874,7 @@ describe('Store', () => {
2874
▾ <Suspense name="content">
2875
▾ <Suspense name="fallback">
2876
<Component key="fallback-content">
2877
- [shell]
2877
+ [suspense-root] rects={[{x:1,y:2,width:10,height:1}]}
2878
<Suspense name="content" rects={null}>
2879
<Suspense name="fallback" rects={[{x:1,y:2,width:10,height:1}]}>
2880
`);
@@ -2887,7 +2887,7 @@ describe('Store', () => {
2887
[root]
2888
▾ <Suspense name="content">
2889
<Component key="content">
2890
- [shell]
2890
+ [suspense-root] rects={[{x:1,y:2,width:4,height:1}]}
2891
<Suspense name="content" rects={[{x:1,y:2,width:4,height:1}]}>
2892
`);
2893
});
@@ -2990,7 +2990,7 @@ describe('Store', () => {
2990
▾ <Suspense name="main">
2991
▾ <Suspense name="main-fallback">
2992
<Component key="main-fallback-fallback">
2993
- [shell]
2993
+ [suspense-root] rects={[{x:1,y:2,width:19,height:1}, {x:1,y:2,width:19,height:1}]}
2994
<Suspense name="head" rects={null}>
2995
<Suspense name="head-fallback" rects={null}>
2996
<Suspense name="main" rects={null}>
@@ -3013,7 +3013,7 @@ describe('Store', () => {
3013
▾ <WithSuspenseInFallback>
3014
▾ <Suspense name="main">
3015
<Component key="main-content">
3016
- [shell]
3016
+ [suspense-root] rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:4,height:1}]}
3017
<Suspense name="head" rects={[{x:1,y:2,width:4,height:1}]}>
3018
<Suspense name="main" rects={[{x:1,y:2,width:4,height:1}]}>
3019
`);
@@ -3043,7 +3043,7 @@ describe('Store', () => {
3043
▾ <WithSuspenseInFallback>
3044
▾ <Suspense name="main">
3045
<Component key="main-content">
3046
- [shell]
3046
+ [suspense-root] rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:10,height:1}, {x:1,y:2,width:4,height:1}]}
3047
<Suspense name="head" rects={[{x:1,y:2,width:4,height:1}]}>
3048
<Suspense name="head-fallback" rects={[{x:1,y:2,width:10,height:1}]}>
3049
<Suspense name="main" rects={[{x:1,y:2,width:4,height:1}]}>
@@ -3074,10 +3074,15 @@ describe('Store', () => {
3074
▾ <WithSuspenseInFallback>
3075
▾ <Suspense name="main">
3076
<Component key="main-content">
3077
- [shell]
3077
+ [suspense-root] rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:10,height:1}, {x:1,y:2,width:19,height:1}, {x:1,y:2,width:4,height:1}]}
3078
<Suspense name="head" rects={[{x:1,y:2,width:4,height:1}]}>
3079
<Suspense name="head-fallback" rects={[{x:1,y:2,width:10,height:1}]}>
3080
<Suspense name="main" rects={[{x:1,y:2,width:4,height:1}]}>
3081
`);
3082
});
3083
+
3084
+ it('should handle an empty root', async () => {
3085
+ await actAsync(() => render(null));
3086
+ expect(store).toMatchInlineSnapshot(`[root]`);
3087
+ });
3088
});
packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js
+3
-3
@@ -156,7 +156,7 @@ describe('Store component filters', () => {
156
<div>
157
▾ <Suspense>
158
<div>
159
- [shell]
159
+ [suspense-root] rects={[]}
160
<Suspense name="Unknown" rects={[]}>
161
<Suspense name="Unknown" rects={[]}>
162
`);
@@ -174,7 +174,7 @@ describe('Store component filters', () => {
174
<div>
175
▾ <Suspense>
176
<div>
177
- [shell]
177
+ [suspense-root] rects={[]}
178
<Suspense name="Unknown" rects={[]}>
179
<Suspense name="Unknown" rects={[]}>
180
`);
@@ -192,7 +192,7 @@ describe('Store component filters', () => {
192
<div>
193
▾ <Suspense>
194
<div>
195
- [shell]
195
+ [suspense-root] rects={[]}
196
<Suspense name="Unknown" rects={[]}>
197
<Suspense name="Unknown" rects={[]}>
198
`);
packages/react-devtools-shared/src/__tests__/treeContext-test.js
+8
-8
@@ -1368,7 +1368,7 @@ describe('TreeListContext', () => {
1368
▾ <Child>
1369
▾ <Suspense>
1370
<Grandchild>
1371
- [shell]
1371
+ [suspense-root] rects={null}
1372
<Suspense name="Parent>?" rects={null}>
1373
<Suspense name="Child>?" rects={null}>
1374
`);
@@ -1410,7 +1410,7 @@ describe('TreeListContext', () => {
1410
▾ <Child>
1411
▾ <Suspense>
1412
<Grandchild>
1413
- [shell]
1413
+ [suspense-root] rects={null}
1414
<Suspense name="Parent>?" rects={null}>
1415
<Suspense name="Child>?" rects={null}>
1416
`);
@@ -2369,7 +2369,7 @@ describe('TreeListContext', () => {
2369
expect(state).toMatchInlineSnapshot(`
2370
[root]
2371
<Suspense>
2372
- [shell]
2372
+ [suspense-root] rects={null}
2373
<Suspense name="Unknown" rects={null}>
2374
`);
2375
@@ -2378,7 +2378,7 @@ describe('TreeListContext', () => {
2378
expect(state).toMatchInlineSnapshot(`
2379
[root]
2380
<Suspense>
2381
- [shell]
2381
+ [suspense-root] rects={null}
2382
<Suspense name="Unknown" rects={null}>
2383
`);
2384
});
@@ -2404,7 +2404,7 @@ describe('TreeListContext', () => {
2404
expect(state).toMatchInlineSnapshot(`
2405
[root]
2406
<Suspense>
2407
- [shell]
2407
+ [suspense-root] rects={null}
2408
<Suspense name="Unknown" rects={null}>
2409
`);
2410
@@ -2426,7 +2426,7 @@ describe('TreeListContext', () => {
2426
▾ <Suspense>
2427
<Child> ⚠
2428
<Child>
2429
- [shell]
2429
+ [suspense-root] rects={null}
2430
<Suspense name="Unknown" rects={null}>
2431
`);
2432
});
@@ -2456,7 +2456,7 @@ describe('TreeListContext', () => {
2456
▾ <Suspense>
2457
▾ <Fallback>
2458
<Child> ✕
2459
- [shell]
2459
+ [suspense-root] rects={null}
2460
<Suspense name="Unknown" rects={null}>
2461
`);
2462
@@ -2475,7 +2475,7 @@ describe('TreeListContext', () => {
2475
[root]
2476
▾ <Suspense>
2477
<Child>
2478
- [shell]
2478
+ [suspense-root] rects={null}
2479
<Suspense name="Unknown" rects={null}>
2480
`);
2481
});
packages/react-devtools-shared/src/backend/fiber/renderer.js
+23
-19
@@ -3700,28 +3700,32 @@ export function attach(
3700
// just use the Fiber anyway.
3701
// Fallbacks get attributed to the parent so we only measure if we're
3702
// showing primary content.
3703
- if (OffscreenComponent === -1) {
3704
- const isTimedOut = fiber.memoizedState !== null;
3705
- if (!isTimedOut) {
3706
- newSuspenseNode.rects = measureInstance(newInstance);
3707
- }
3708
- } else {
3709
- const hydrated = isFiberHydrated(fiber);
3710
- if (hydrated) {
3711
- const contentFiber = fiber.child;
3712
- if (contentFiber === null) {
3713
- throw new Error(
3714
- 'There should always be an Offscreen Fiber child in a hydrated Suspense boundary.',
3715
- );
3703
+ if (fiber.tag === SuspenseComponent) {
3704
+ if (OffscreenComponent === -1) {
3705
+ const isTimedOut = fiber.memoizedState !== null;
3706
+ if (!isTimedOut) {
3707
+ newSuspenseNode.rects = measureInstance(newInstance);
3708
}
3709
} else {
3718
- // This Suspense Fiber is still dehydrated. It won't have any children
3719
- // until hydration.
3720
- }
3721
- const isTimedOut = fiber.memoizedState !== null;
3722
- if (!isTimedOut) {
3723
- newSuspenseNode.rects = measureInstance(newInstance);
3710
+ const hydrated = isFiberHydrated(fiber);
3711
+ if (hydrated) {
3712
+ const contentFiber = fiber.child;
3713
+ if (contentFiber === null) {
3714
+ throw new Error(
3715
+ 'There should always be an Offscreen Fiber child in a hydrated Suspense boundary.',
3716
+ );
3717
+ }
3718
+ } else {
3719
+ // This Suspense Fiber is still dehydrated. It won't have any children
3720
+ // until hydration.
3721
+ }
3722
+ const isTimedOut = fiber.memoizedState !== null;
3723
+ if (!isTimedOut) {
3724
+ newSuspenseNode.rects = measureInstance(newInstance);
3725
+ }
3726
}
3727
+ } else {
3728
+ newSuspenseNode.rects = measureInstance(newInstance);
3729
}
3730
recordSuspenseMount(newSuspenseNode, reconcilingParentSuspenseNode);
3731
}
packages/react-devtools-shared/src/devtools/utils.js
+16
-17
@@ -54,22 +54,21 @@ export function printElement(
54
}${key}${name}>${hocs}${suffix}`;
55
}
56
57
-function printSuspense(
58
- suspense: SuspenseNode,
59
- includeWeight: boolean = false,
60
-): string {
57
+function printRects(rects: SuspenseNode['rects']): string {
58
+ if (rects === null) {
59
+ return ' rects={null}';
60
+ } else {
61
+ return ` rects={[${rects.map(rect => `{x:${rect.x},y:${rect.y},width:${rect.width},height:${rect.height}}`).join(', ')}]}`;
62
+ }
63
+}
64
+
65
+function printSuspense(suspense: SuspenseNode): string {
66
let name = '';
67
if (suspense.name !== null) {
68
name = ` name="${suspense.name}"`;
69
}
70
66
- let printedRects = '';
67
- const rects = suspense.rects;
68
- if (rects === null) {
69
- printedRects = ' rects={null}';
70
- } else {
71
- printedRects = ` rects={[${rects.map(rect => `{x:${rect.x},y:${rect.y},width:${rect.width},height:${rect.height}}`).join(', ')}]}`;
72
- }
71
+ const printedRects = printRects(suspense.rects);
72
73
return `<Suspense${name}${printedRects}>`;
74
}
@@ -178,13 +177,13 @@ export function printStore(
177
rootWeight += weight;
178
179
if (includeSuspense) {
181
- const shell = store.getSuspenseByID(rootID);
180
+ const root = store.getSuspenseByID(rootID);
181
// Roots from legacy renderers don't have a separate Suspense tree
183
- if (shell !== null) {
184
- if (shell.children.length > 0) {
185
- snapshotLines.push('[shell]');
186
- for (let i = 0; i < shell.children.length; i++) {
187
- const childID = shell.children[i];
182
+ if (root !== null) {
183
+ if (root.children.length > 0) {
184
+ snapshotLines.push('[suspense-root] ' + printRects(root.rects));
185
+ for (let i = 0; i < root.children.length; i++) {
186
+ const childID = root.children[i];
187
const child = store.getSuspenseByID(childID);
188
if (child === null) {
189
throw new Error(