[test] Include `uniqueSuspenders` in Suspense tree snapshots (#35736)
Sebastian "Sebbie" Silbermann committed
Feb 10, 2026 at 12:51 UTC
49c3b270f9991fbecbe2b9c29c27e19a54fb4466
5 files changed
+153
-152
packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js
+3
-3
@@ -124,7 +124,7 @@ describe('commit tree', () => {
124
▾ <App>
125
<Suspense>
126
[suspense-root] rects={null}
127
- <Suspense name="App" rects={null}>
127
+ <Suspense name="App" uniqueSuspenders={true} rects={null}>
128
`);
129
utils.act(() => render(<App renderChildren={true} />));
130
expect(store).toMatchInlineSnapshot(`
@@ -133,7 +133,7 @@ describe('commit tree', () => {
133
▾ <Suspense>
134
<LazyInnerComponent>
135
[suspense-root] rects={null}
136
- <Suspense name="App" rects={null}>
136
+ <Suspense name="App" uniqueSuspenders={true} rects={null}>
137
`);
138
utils.act(() => render(<App renderChildren={false} />));
139
expect(store).toMatchInlineSnapshot(`
@@ -167,7 +167,7 @@ describe('commit tree', () => {
167
▾ <App>
168
<Suspense>
169
[suspense-root] rects={null}
170
- <Suspense name="App" rects={null}>
170
+ <Suspense name="App" uniqueSuspenders={true} rects={null}>
171
`);
172
utils.act(() => render(<App renderChildren={false} />));
173
expect(store).toMatchInlineSnapshot(`
packages/react-devtools-shared/src/__tests__/store-test.js
+124
-124
@@ -164,7 +164,7 @@ describe('Store', () => {
164
▾ <Parent>
165
<Child>
166
[suspense-root] rects={null}
167
- <Suspense name="Unknown" rects={null}>
167
+ <Suspense name="Unknown" uniqueSuspenders={true} rects={null}>
168
`);
169
});
170
@@ -520,7 +520,7 @@ describe('Store', () => {
520
▾ <Suspense>
521
<Loading>
522
[suspense-root] rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:10,height:1}]}
523
- <Suspense name="Wrapper" rects={null}>
523
+ <Suspense name="Wrapper" uniqueSuspenders={true} rects={null}>
524
`);
525
526
await act(() => {
@@ -533,7 +533,7 @@ describe('Store', () => {
533
▾ <Suspense>
534
<Component key="Inside">
535
[suspense-root] rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}]}
536
- <Suspense name="Wrapper" rects={[{x:1,y:2,width:5,height:1}]}>
536
+ <Suspense name="Wrapper" uniqueSuspenders={true} rects={[{x:1,y:2,width:5,height:1}]}>
537
`);
538
});
539
@@ -609,10 +609,10 @@ describe('Store', () => {
609
<Loading key="Suspense 3 Fallback">
610
<Component key="Unrelated at End">
611
[suspense-root] rects={[{x:1,y:2,width:10,height:1}]}
612
- <Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}]}>
613
- <Suspense name="one" rects={null}>
614
- <Suspense name="two" rects={null}>
615
- <Suspense name="three" rects={null}>
612
+ <Suspense name="parent" uniqueSuspenders={false} rects={[{x:1,y:2,width:10,height:1}]}>
613
+ <Suspense name="one" uniqueSuspenders={false} rects={null}>
614
+ <Suspense name="two" uniqueSuspenders={false} rects={null}>
615
+ <Suspense name="three" uniqueSuspenders={true} rects={null}>
616
`);
617
await act(() =>
618
render(
@@ -637,10 +637,10 @@ describe('Store', () => {
637
<Loading key="Suspense 3 Fallback">
638
<Component key="Unrelated at End">
639
[suspense-root] rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}
640
- <Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
641
- <Suspense name="one" rects={null}>
642
- <Suspense name="two" rects={null}>
643
- <Suspense name="three" rects={null}>
640
+ <Suspense name="parent" uniqueSuspenders={false} rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
641
+ <Suspense name="one" uniqueSuspenders={true} rects={null}>
642
+ <Suspense name="two" uniqueSuspenders={false} rects={null}>
643
+ <Suspense name="three" uniqueSuspenders={true} rects={null}>
644
`);
645
await act(() =>
646
render(
@@ -665,10 +665,10 @@ describe('Store', () => {
665
<Loading key="Suspense 3 Fallback">
666
<Component key="Unrelated at End">
667
[suspense-root] rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}
668
- <Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
669
- <Suspense name="one" rects={null}>
670
- <Suspense name="two" rects={null}>
671
- <Suspense name="three" rects={null}>
668
+ <Suspense name="parent" uniqueSuspenders={false} rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
669
+ <Suspense name="one" uniqueSuspenders={true} rects={null}>
670
+ <Suspense name="two" uniqueSuspenders={true} rects={null}>
671
+ <Suspense name="three" uniqueSuspenders={true} rects={null}>
672
`);
673
await act(() =>
674
render(
@@ -693,10 +693,10 @@ describe('Store', () => {
693
<Loading key="Suspense 3 Fallback">
694
<Component key="Unrelated at End">
695
[suspense-root] rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}
696
- <Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
697
- <Suspense name="one" rects={null}>
698
- <Suspense name="two" rects={null}>
699
- <Suspense name="three" rects={null}>
696
+ <Suspense name="parent" uniqueSuspenders={false} rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
697
+ <Suspense name="one" uniqueSuspenders={true} rects={null}>
698
+ <Suspense name="two" uniqueSuspenders={true} rects={null}>
699
+ <Suspense name="three" uniqueSuspenders={true} rects={null}>
700
`);
701
await act(() =>
702
render(
@@ -714,10 +714,10 @@ describe('Store', () => {
714
▾ <Suspense name="parent">
715
<Loading key="Parent Fallback">
716
[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}]}
717
- <Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
718
- <Suspense name="one" rects={null}>
719
- <Suspense name="two" rects={null}>
720
- <Suspense name="three" rects={null}>
717
+ <Suspense name="parent" uniqueSuspenders={true} rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
718
+ <Suspense name="one" uniqueSuspenders={true} rects={null}>
719
+ <Suspense name="two" uniqueSuspenders={true} rects={null}>
720
+ <Suspense name="three" uniqueSuspenders={true} rects={null}>
721
`);
722
await act(() =>
723
render(
@@ -742,10 +742,10 @@ describe('Store', () => {
742
<Loading key="Suspense 3 Fallback">
743
<Component key="Unrelated at End">
744
[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}]}
745
- <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}]}>
746
- <Suspense name="one" rects={null}>
747
- <Suspense name="two" rects={null}>
748
- <Suspense name="three" rects={null}>
745
+ <Suspense name="parent" uniqueSuspenders={true} 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}]}>
746
+ <Suspense name="one" uniqueSuspenders={true} rects={null}>
747
+ <Suspense name="two" uniqueSuspenders={true} rects={null}>
748
+ <Suspense name="three" uniqueSuspenders={true} rects={null}>
749
`);
750
await act(() =>
751
render(
@@ -770,10 +770,10 @@ describe('Store', () => {
770
<Loading key="Suspense 3 Fallback">
771
<Component key="Unrelated at End">
772
[suspense-root] rects={[{x:1,y:2,width:10,height:1}]}
773
- <Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}]}>
774
- <Suspense name="one" rects={null}>
775
- <Suspense name="two" rects={null}>
776
- <Suspense name="three" rects={null}>
773
+ <Suspense name="parent" uniqueSuspenders={true} rects={[{x:1,y:2,width:10,height:1}]}>
774
+ <Suspense name="one" uniqueSuspenders={true} rects={null}>
775
+ <Suspense name="two" uniqueSuspenders={true} rects={null}>
776
+ <Suspense name="three" uniqueSuspenders={true} rects={null}>
777
`);
778
779
const rendererID = getRendererID();
@@ -798,10 +798,10 @@ describe('Store', () => {
798
<Loading key="Suspense 3 Fallback">
799
<Component key="Unrelated at End">
800
[suspense-root] rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}
801
- <Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
802
- <Suspense name="one" rects={null}>
803
- <Suspense name="two" rects={null}>
804
- <Suspense name="three" rects={null}>
801
+ <Suspense name="parent" uniqueSuspenders={true} rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
802
+ <Suspense name="one" uniqueSuspenders={true} rects={null}>
803
+ <Suspense name="two" uniqueSuspenders={true} rects={null}>
804
+ <Suspense name="three" uniqueSuspenders={true} rects={null}>
805
`);
806
await act(() =>
807
agent.overrideSuspense({
@@ -817,10 +817,10 @@ describe('Store', () => {
817
▾ <Suspense name="parent">
818
<Loading key="Parent Fallback">
819
[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}]}
820
- <Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
821
- <Suspense name="one" rects={null}>
822
- <Suspense name="two" rects={null}>
823
- <Suspense name="three" rects={null}>
820
+ <Suspense name="parent" uniqueSuspenders={true} rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
821
+ <Suspense name="one" uniqueSuspenders={true} rects={null}>
822
+ <Suspense name="two" uniqueSuspenders={true} rects={null}>
823
+ <Suspense name="three" uniqueSuspenders={true} rects={null}>
824
`);
825
await act(() =>
826
render(
@@ -838,10 +838,10 @@ describe('Store', () => {
838
▾ <Suspense name="parent">
839
<Loading key="Parent Fallback">
840
[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}]}
841
- <Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
842
- <Suspense name="one" rects={null}>
843
- <Suspense name="two" rects={null}>
844
- <Suspense name="three" rects={null}>
841
+ <Suspense name="parent" uniqueSuspenders={true} rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
842
+ <Suspense name="one" uniqueSuspenders={true} rects={null}>
843
+ <Suspense name="two" uniqueSuspenders={true} rects={null}>
844
+ <Suspense name="three" uniqueSuspenders={true} rects={null}>
845
`);
846
await actAsync(() =>
847
agent.overrideSuspense({
@@ -864,10 +864,10 @@ describe('Store', () => {
864
<Loading key="Suspense 3 Fallback">
865
<Component key="Unrelated at End">
866
[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}]}
867
- <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}]}>
868
- <Suspense name="one" rects={null}>
869
- <Suspense name="two" rects={null}>
870
- <Suspense name="three" rects={null}>
867
+ <Suspense name="parent" uniqueSuspenders={true} 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}]}>
868
+ <Suspense name="one" uniqueSuspenders={true} rects={null}>
869
+ <Suspense name="two" uniqueSuspenders={true} rects={null}>
870
+ <Suspense name="three" uniqueSuspenders={true} rects={null}>
871
`);
872
await act(() =>
873
agent.overrideSuspense({
@@ -890,10 +890,10 @@ describe('Store', () => {
890
<Loading key="Suspense 3 Fallback">
891
<Component key="Unrelated at End">
892
[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}]}
893
- <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}]}>
894
- <Suspense name="one" rects={null}>
895
- <Suspense name="two" rects={null}>
896
- <Suspense name="three" rects={null}>
893
+ <Suspense name="parent" uniqueSuspenders={true} 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}]}>
894
+ <Suspense name="one" uniqueSuspenders={true} rects={null}>
895
+ <Suspense name="two" uniqueSuspenders={true} rects={null}>
896
+ <Suspense name="three" uniqueSuspenders={true} rects={null}>
897
`);
898
await act(() =>
899
render(
@@ -918,10 +918,10 @@ describe('Store', () => {
918
<Loading key="Suspense 3 Fallback">
919
<Component key="Unrelated at End">
920
[suspense-root] rects={[{x:1,y:2,width:10,height:1}]}
921
- <Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}]}>
922
- <Suspense name="one" rects={null}>
923
- <Suspense name="two" rects={null}>
924
- <Suspense name="three" rects={null}>
921
+ <Suspense name="parent" uniqueSuspenders={true} rects={[{x:1,y:2,width:10,height:1}]}>
922
+ <Suspense name="one" uniqueSuspenders={true} rects={null}>
923
+ <Suspense name="two" uniqueSuspenders={true} rects={null}>
924
+ <Suspense name="three" uniqueSuspenders={true} rects={null}>
925
`);
926
});
927
@@ -973,10 +973,10 @@ describe('Store', () => {
973
<Component key="Suspense 3 Content">
974
<Component key="Unrelated at End">
975
[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}]}
976
- <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}]}>
977
- <Suspense name="one" rects={[{x:1,y:2,width:5,height:1}]}>
978
- <Suspense name="two" rects={[{x:1,y:2,width:5,height:1}]}>
979
- <Suspense name="three" rects={[{x:1,y:2,width:5,height:1}]}>
976
+ <Suspense name="parent" uniqueSuspenders={false} 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}]}>
977
+ <Suspense name="one" uniqueSuspenders={false} rects={[{x:1,y:2,width:5,height:1}]}>
978
+ <Suspense name="two" uniqueSuspenders={false} rects={[{x:1,y:2,width:5,height:1}]}>
979
+ <Suspense name="three" uniqueSuspenders={false} rects={[{x:1,y:2,width:5,height:1}]}>
980
`);
981
982
await actAsync(() => {
@@ -1002,10 +1002,10 @@ describe('Store', () => {
1002
<Component key="Suspense 3 Fallback">
1003
<Component key="Unrelated at End">
1004
[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}]}
1005
- <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}]}>
1006
- <Suspense name="one" rects={[{x:1,y:2,width:5,height:1}]}>
1007
- <Suspense name="two" rects={[{x:1,y:2,width:5,height:1}]}>
1008
- <Suspense name="three" rects={[{x:1,y:2,width:5,height:1}]}>
1005
+ <Suspense name="parent" uniqueSuspenders={false} 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}]}>
1006
+ <Suspense name="one" uniqueSuspenders={false} rects={[{x:1,y:2,width:5,height:1}]}>
1007
+ <Suspense name="two" uniqueSuspenders={false} rects={[{x:1,y:2,width:5,height:1}]}>
1008
+ <Suspense name="three" uniqueSuspenders={false} rects={[{x:1,y:2,width:5,height:1}]}>
1009
`);
1010
1011
await actAsync(() => {
@@ -1028,10 +1028,10 @@ describe('Store', () => {
1028
<Component key="Suspense 3 Content">
1029
<Component key="Unrelated at End">
1030
[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}]}
1031
- <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}]}>
1032
- <Suspense name="one" rects={[{x:1,y:2,width:5,height:1}]}>
1033
- <Suspense name="two" rects={[{x:1,y:2,width:5,height:1}]}>
1034
- <Suspense name="three" rects={[{x:1,y:2,width:5,height:1}]}>
1031
+ <Suspense name="parent" uniqueSuspenders={false} 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}]}>
1032
+ <Suspense name="one" uniqueSuspenders={false} rects={[{x:1,y:2,width:5,height:1}]}>
1033
+ <Suspense name="two" uniqueSuspenders={false} rects={[{x:1,y:2,width:5,height:1}]}>
1034
+ <Suspense name="three" uniqueSuspenders={false} rects={[{x:1,y:2,width:5,height:1}]}>
1035
`);
1036
});
1037
@@ -1069,7 +1069,7 @@ describe('Store', () => {
1069
▾ <Suspense>
1070
<Loading>
1071
[suspense-root] rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:10,height:1}]}
1072
- <Suspense name="Wrapper" rects={null}>
1072
+ <Suspense name="Wrapper" uniqueSuspenders={true} rects={null}>
1073
`);
1074
1075
await act(() => {
@@ -1084,7 +1084,7 @@ describe('Store', () => {
1084
<Component key="B">
1085
<Component key="C">
1086
[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}]}
1087
- <Suspense name="Wrapper" rects={[{x:1,y:2,width:5,height:1}]}>
1087
+ <Suspense name="Wrapper" uniqueSuspenders={true} rects={[{x:1,y:2,width:5,height:1}]}>
1088
`);
1089
});
1090
@@ -1419,7 +1419,7 @@ describe('Store', () => {
1419
[root]
1420
▸ <Wrapper>
1421
[suspense-root] rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:10,height:1}]}
1422
- <Suspense name="Wrapper" rects={null}>
1422
+ <Suspense name="Wrapper" uniqueSuspenders={true} rects={null}>
1423
`);
1424
1425
// This test isn't meaningful unless we expand the suspended tree
@@ -1436,7 +1436,7 @@ describe('Store', () => {
1436
▾ <Suspense>
1437
<Loading>
1438
[suspense-root] rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:10,height:1}]}
1439
- <Suspense name="Wrapper" rects={null}>
1439
+ <Suspense name="Wrapper" uniqueSuspenders={true} rects={null}>
1440
`);
1441
1442
await act(() => {
@@ -1449,7 +1449,7 @@ describe('Store', () => {
1449
▾ <Suspense>
1450
<Component key="Inside">
1451
[suspense-root] rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}]}
1452
- <Suspense name="Wrapper" rects={[{x:1,y:2,width:5,height:1}]}>
1452
+ <Suspense name="Wrapper" uniqueSuspenders={true} rects={[{x:1,y:2,width:5,height:1}]}>
1453
`);
1454
});
1455
@@ -1675,7 +1675,7 @@ describe('Store', () => {
1675
[root]
1676
▸ <SuspenseTree>
1677
[suspense-root] rects={null}
1678
- <Suspense name="SuspenseTree" rects={null}>
1678
+ <Suspense name="SuspenseTree" uniqueSuspenders={false} rects={null}>
1679
`);
1680
1681
await act(() =>
@@ -1690,7 +1690,7 @@ describe('Store', () => {
1690
▾ <Suspense>
1691
▸ <Parent>
1692
[suspense-root] rects={null}
1693
- <Suspense name="SuspenseTree" rects={null}>
1693
+ <Suspense name="SuspenseTree" uniqueSuspenders={false} rects={null}>
1694
`);
1695
1696
const rendererID = getRendererID();
@@ -1709,7 +1709,7 @@ describe('Store', () => {
1709
▾ <Suspense>
1710
<Fallback>
1711
[suspense-root] rects={null}
1712
- <Suspense name="SuspenseTree" rects={null}>
1712
+ <Suspense name="SuspenseTree" uniqueSuspenders={false} rects={null}>
1713
`);
1714
1715
await act(() =>
@@ -1725,7 +1725,7 @@ describe('Store', () => {
1725
▾ <Suspense>
1726
▸ <Parent>
1727
[suspense-root] rects={null}
1728
- <Suspense name="SuspenseTree" rects={null}>
1728
+ <Suspense name="SuspenseTree" uniqueSuspenders={false} rects={null}>
1729
`);
1730
});
1731
});
@@ -2030,7 +2030,7 @@ describe('Store', () => {
2030
▾ <App>
2031
<Suspense>
2032
[suspense-root] rects={null}
2033
- <Suspense name="App" rects={null}>
2033
+ <Suspense name="App" uniqueSuspenders={true} rects={null}>
2034
`);
2035
2036
await Promise.resolve();
@@ -2044,7 +2044,7 @@ describe('Store', () => {
2044
▾ <Suspense>
2045
<LazyInnerComponent>
2046
[suspense-root] rects={null}
2047
- <Suspense name="App" rects={null}>
2047
+ <Suspense name="App" uniqueSuspenders={true} rects={null}>
2048
`);
2049
2050
// Render again to unmount it
@@ -2537,7 +2537,7 @@ describe('Store', () => {
2537
▾ <Suspense>
2538
<ChildA>
2539
[suspense-root] rects={null}
2540
- <Suspense name="App" rects={null}>
2540
+ <Suspense name="App" uniqueSuspenders={true} rects={null}>
2541
`);
2542
2543
await actAsync(() => render(<App renderA={false} />));
@@ -2548,7 +2548,7 @@ describe('Store', () => {
2548
▾ <Suspense>
2549
<ChildB>
2550
[suspense-root] rects={null}
2551
- <Suspense name="App" rects={null}>
2551
+ <Suspense name="App" uniqueSuspenders={true} rects={null}>
2552
`);
2553
});
2554
});
@@ -2909,8 +2909,8 @@ describe('Store', () => {
2909
▾ <Suspense name="fallback">
2910
<Component key="fallback-fallback">
2911
[suspense-root] rects={[{x:1,y:2,width:19,height:1}]}
2912
- <Suspense name="content" rects={null}>
2913
- <Suspense name="fallback" rects={null}>
2912
+ <Suspense name="content" uniqueSuspenders={true} rects={null}>
2913
+ <Suspense name="fallback" uniqueSuspenders={true} rects={null}>
2914
`);
2915
2916
await actAsync(() => {
@@ -2923,8 +2923,8 @@ describe('Store', () => {
2923
▾ <Suspense name="fallback">
2924
<Component key="fallback-content">
2925
[suspense-root] rects={[{x:1,y:2,width:10,height:1}]}
2926
- <Suspense name="content" rects={null}>
2927
- <Suspense name="fallback" rects={[{x:1,y:2,width:10,height:1}]}>
2926
+ <Suspense name="content" uniqueSuspenders={true} rects={null}>
2927
+ <Suspense name="fallback" uniqueSuspenders={true} rects={[{x:1,y:2,width:10,height:1}]}>
2928
`);
2929
2930
await actAsync(() => {
@@ -2936,7 +2936,7 @@ describe('Store', () => {
2936
▾ <Suspense name="content">
2937
<Component key="content">
2938
[suspense-root] rects={[{x:1,y:2,width:4,height:1}]}
2939
- <Suspense name="content" rects={[{x:1,y:2,width:4,height:1}]}>
2939
+ <Suspense name="content" uniqueSuspenders={true} rects={[{x:1,y:2,width:4,height:1}]}>
2940
`);
2941
});
2942
@@ -3039,10 +3039,10 @@ describe('Store', () => {
3039
▾ <Suspense name="main-fallback">
3040
<Component key="main-fallback-fallback">
3041
[suspense-root] rects={[{x:1,y:2,width:19,height:1}, {x:1,y:2,width:19,height:1}]}
3042
- <Suspense name="head" rects={null}>
3043
- <Suspense name="head-fallback" rects={null}>
3044
- <Suspense name="main" rects={null}>
3045
- <Suspense name="main-fallback" rects={null}>
3042
+ <Suspense name="head" uniqueSuspenders={true} rects={null}>
3043
+ <Suspense name="head-fallback" uniqueSuspenders={true} rects={null}>
3044
+ <Suspense name="main" uniqueSuspenders={true} rects={null}>
3045
+ <Suspense name="main-fallback" uniqueSuspenders={true} rects={null}>
3046
`);
3047
3048
await actAsync(() => {
@@ -3062,8 +3062,8 @@ describe('Store', () => {
3062
▾ <Suspense name="main">
3063
<Component key="main-content">
3064
[suspense-root] rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:4,height:1}]}
3065
- <Suspense name="head" rects={[{x:1,y:2,width:4,height:1}]}>
3066
- <Suspense name="main" rects={[{x:1,y:2,width:4,height:1}]}>
3065
+ <Suspense name="head" uniqueSuspenders={true} rects={[{x:1,y:2,width:4,height:1}]}>
3066
+ <Suspense name="main" uniqueSuspenders={true} rects={[{x:1,y:2,width:4,height:1}]}>
3067
`);
3068
3069
// Resuspend head content
@@ -3092,9 +3092,9 @@ describe('Store', () => {
3092
▾ <Suspense name="main">
3093
<Component key="main-content">
3094
[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}]}
3095
- <Suspense name="head" rects={[{x:1,y:2,width:4,height:1}]}>
3096
- <Suspense name="head-fallback" rects={[{x:1,y:2,width:10,height:1}]}>
3097
- <Suspense name="main" rects={[{x:1,y:2,width:4,height:1}]}>
3095
+ <Suspense name="head" uniqueSuspenders={true} rects={[{x:1,y:2,width:4,height:1}]}>
3096
+ <Suspense name="head-fallback" uniqueSuspenders={true} rects={[{x:1,y:2,width:10,height:1}]}>
3097
+ <Suspense name="main" uniqueSuspenders={true} rects={[{x:1,y:2,width:4,height:1}]}>
3098
`);
3099
3100
// Resuspend head fallback
@@ -3123,9 +3123,9 @@ describe('Store', () => {
3123
▾ <Suspense name="main">
3124
<Component key="main-content">
3125
[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}]}
3126
- <Suspense name="head" rects={[{x:1,y:2,width:4,height:1}]}>
3127
- <Suspense name="head-fallback" rects={[{x:1,y:2,width:10,height:1}]}>
3128
- <Suspense name="main" rects={[{x:1,y:2,width:4,height:1}]}>
3126
+ <Suspense name="head" uniqueSuspenders={true} rects={[{x:1,y:2,width:4,height:1}]}>
3127
+ <Suspense name="head-fallback" uniqueSuspenders={true} rects={[{x:1,y:2,width:10,height:1}]}>
3128
+ <Suspense name="main" uniqueSuspenders={true} rects={[{x:1,y:2,width:4,height:1}]}>
3129
`);
3130
3131
await actAsync(() => render(null));
@@ -3159,7 +3159,7 @@ describe('Store', () => {
3159
▾ <Suspense>
3160
<Component key="A">
3161
[suspense-root] rects={[{x:1,y:2,width:1,height:1}]}
3162
- <Suspense name="Unknown" rects={[{x:1,y:2,width:1,height:1}]}>
3162
+ <Suspense name="Unknown" uniqueSuspenders={true} rects={[{x:1,y:2,width:1,height:1}]}>
3163
`);
3164
3165
await actAsync(() =>
@@ -3175,7 +3175,7 @@ describe('Store', () => {
3175
▾ <Suspense>
3176
<Component key="not-A">
3177
[suspense-root] rects={[{x:1,y:2,width:5,height:1}]}
3178
- <Suspense name="Unknown" rects={[{x:1,y:2,width:5,height:1}]}>
3178
+ <Suspense name="Unknown" uniqueSuspenders={true} rects={[{x:1,y:2,width:5,height:1}]}>
3179
`);
3180
3181
await actAsync(() => render(null));
@@ -3223,7 +3223,7 @@ describe('Store', () => {
3223
[root]
3224
<Suspense name="main">
3225
[suspense-root] rects={null}
3226
- <Suspense name="main" rects={null}>
3226
+ <Suspense name="main" uniqueSuspenders={true} rects={null}>
3227
`);
3228
3229
await actAsync(() => resolveContent('content'));
@@ -3232,7 +3232,7 @@ describe('Store', () => {
3232
▾ <Suspense name="main">
3233
<Component>
3234
[suspense-root] rects={null}
3235
- <Suspense name="main" rects={null}>
3235
+ <Suspense name="main" uniqueSuspenders={true} rects={null}>
3236
`);
3237
});
3238
@@ -3295,7 +3295,7 @@ describe('Store', () => {
3295
▾ <Suspense name="root">
3296
<Component key="root-fallback">
3297
[suspense-root] rects={null}
3298
- <Suspense name="root" rects={null}>
3298
+ <Suspense name="root" uniqueSuspenders={true} rects={null}>
3299
`);
3300
}
3301
@@ -3305,8 +3305,8 @@ describe('Store', () => {
3305
▾ <Suspense name="root">
3306
<Suspense name="main">
3307
[suspense-root] rects={null}
3308
- <Suspense name="root" rects={null}>
3309
- <Suspense name="main" rects={null}>
3308
+ <Suspense name="root" uniqueSuspenders={true} rects={null}>
3309
+ <Suspense name="main" uniqueSuspenders={true} rects={null}>
3310
`);
3311
3312
await actAsync(() => resolveContent('content'));
@@ -3316,8 +3316,8 @@ describe('Store', () => {
3316
▾ <Suspense name="main">
3317
<Component>
3318
[suspense-root] rects={null}
3319
- <Suspense name="root" rects={null}>
3320
- <Suspense name="main" rects={null}>
3319
+ <Suspense name="root" uniqueSuspenders={true} rects={null}>
3320
+ <Suspense name="main" uniqueSuspenders={true} rects={null}>
3321
`);
3322
});
3323
@@ -3362,7 +3362,7 @@ describe('Store', () => {
3362
<Activity>
3363
<Suspense name="outer-suspense">
3364
[suspense-root] rects={[{x:1,y:2,width:15,height:1}]}
3365
- <Suspense name="outer-suspense" rects={null}>
3365
+ <Suspense name="outer-suspense" uniqueSuspenders={true} rects={null}>
3366
`);
3367
3368
// mount as visible
@@ -3383,9 +3383,9 @@ describe('Store', () => {
3383
▾ <Suspense name="inner-suspense">
3384
<Component key="inside-suspense">
3385
[suspense-root] rects={[{x:1,y:2,width:15,height:1}, {x:1,y:2,width:15,height:1}]}
3386
- <Suspense name="inside-activity" rects={[{x:1,y:2,width:15,height:1}]}>
3387
- <Suspense name="outer-suspense" rects={[{x:1,y:2,width:15,height:1}]}>
3388
- <Suspense name="inner-suspense" rects={[{x:1,y:2,width:15,height:1}]}>
3386
+ <Suspense name="inside-activity" uniqueSuspenders={false} rects={[{x:1,y:2,width:15,height:1}]}>
3387
+ <Suspense name="outer-suspense" uniqueSuspenders={false} rects={[{x:1,y:2,width:15,height:1}]}>
3388
+ <Suspense name="inner-suspense" uniqueSuspenders={false} rects={[{x:1,y:2,width:15,height:1}]}>
3389
`);
3390
3391
await actAsync(() => {
@@ -3398,8 +3398,8 @@ describe('Store', () => {
3398
<Activity>
3399
<Suspense name="outer-suspense">
3400
[suspense-root] rects={[{x:1,y:2,width:15,height:1}, {x:1,y:2,width:15,height:1}]}
3401
- <Suspense name="outer-suspense" rects={[{x:1,y:2,width:15,height:1}]}>
3402
- <Suspense name="inner-suspense" rects={[{x:1,y:2,width:15,height:1}]}>
3401
+ <Suspense name="outer-suspense" uniqueSuspenders={true} rects={[{x:1,y:2,width:15,height:1}]}>
3402
+ <Suspense name="inner-suspense" uniqueSuspenders={false} rects={[{x:1,y:2,width:15,height:1}]}>
3403
`);
3404
3405
await actAsync(() => {
@@ -3416,9 +3416,9 @@ describe('Store', () => {
3416
▾ <Suspense name="inner-suspense">
3417
<Component key="inside-suspense">
3418
[suspense-root] rects={[{x:1,y:2,width:15,height:1}, {x:1,y:2,width:15,height:1}]}
3419
- <Suspense name="inside-activity" rects={[{x:1,y:2,width:15,height:1}]}>
3420
- <Suspense name="outer-suspense" rects={[{x:1,y:2,width:15,height:1}]}>
3421
- <Suspense name="inner-suspense" rects={[{x:1,y:2,width:15,height:1}]}>
3419
+ <Suspense name="inside-activity" uniqueSuspenders={false} rects={[{x:1,y:2,width:15,height:1}]}>
3420
+ <Suspense name="outer-suspense" uniqueSuspenders={true} rects={[{x:1,y:2,width:15,height:1}]}>
3421
+ <Suspense name="inner-suspense" uniqueSuspenders={false} rects={[{x:1,y:2,width:15,height:1}]}>
3422
`);
3423
});
3424
@@ -3458,7 +3458,7 @@ describe('Store', () => {
3458
▾ <Outer>
3459
<Suspense>
3460
[suspense-root] rects={[{x:1,y:2,width:13,height:1}]}
3461
- <Suspense name="Outer" rects={null}>
3461
+ <Suspense name="Outer" uniqueSuspenders={true} rects={null}>
3462
`);
3463
3464
await actAsync(() => {
@@ -3472,8 +3472,8 @@ describe('Store', () => {
3472
▾ <Inner>
3473
<Suspense>
3474
[suspense-root] rects={[{x:1,y:2,width:6,height:1}, {x:1,y:2,width:6,height:1}]}
3475
- <Suspense name="Outer" rects={[{x:1,y:2,width:6,height:1}, {x:1,y:2,width:6,height:1}]}>
3476
- <Suspense name="Inner" rects={[{x:1,y:2,width:6,height:1}]}>
3475
+ <Suspense name="Outer" uniqueSuspenders={true} rects={[{x:1,y:2,width:6,height:1}, {x:1,y:2,width:6,height:1}]}>
3476
+ <Suspense name="Inner" uniqueSuspenders={false} rects={[{x:1,y:2,width:6,height:1}]}>
3477
`);
3478
});
3479
@@ -3528,8 +3528,8 @@ describe('Store', () => {
3528
▾ <Suspense name="inner">
3529
<Component key="inner-content">
3530
[suspense-root] rects={[{x:1,y:2,width:13,height:1}, {x:1,y:2,width:13,height:1}]}
3531
- <Suspense name="outer" rects={[{x:1,y:2,width:13,height:1}, {x:1,y:2,width:13,height:1}]}>
3532
- <Suspense name="inner" rects={[{x:1,y:2,width:13,height:1}]}>
3531
+ <Suspense name="outer" uniqueSuspenders={false} rects={[{x:1,y:2,width:13,height:1}, {x:1,y:2,width:13,height:1}]}>
3532
+ <Suspense name="inner" uniqueSuspenders={false} rects={[{x:1,y:2,width:13,height:1}]}>
3533
`);
3534
3535
let outerResolve;
@@ -3551,8 +3551,8 @@ describe('Store', () => {
3551
▾ <Suspense name="outer">
3552
<Component key="outer-fallback">
3553
[suspense-root] rects={[{x:1,y:2,width:13,height:1}, {x:1,y:2,width:13,height:1}, {x:1,y:2,width:13,height:1}]}
3554
- <Suspense name="outer" rects={[{x:1,y:2,width:13,height:1}, {x:1,y:2,width:13,height:1}]}>
3555
- <Suspense name="inner" rects={[{x:1,y:2,width:13,height:1}]}>
3554
+ <Suspense name="outer" uniqueSuspenders={true} rects={[{x:1,y:2,width:13,height:1}, {x:1,y:2,width:13,height:1}]}>
3555
+ <Suspense name="inner" uniqueSuspenders={false} rects={[{x:1,y:2,width:13,height:1}]}>
3556
`);
3557
3558
await actAsync(() => {
@@ -3568,8 +3568,8 @@ describe('Store', () => {
3568
▾ <Suspense name="inner">
3569
<Component key="inner-content">
3570
[suspense-root] rects={[{x:1,y:2,width:15,height:1}, {x:1,y:2,width:14,height:1}]}
3571
- <Suspense name="outer" rects={[{x:1,y:2,width:15,height:1}, {x:1,y:2,width:14,height:1}]}>
3572
- <Suspense name="inner" rects={[{x:1,y:2,width:14,height:1}]}>
3571
+ <Suspense name="outer" uniqueSuspenders={true} rects={[{x:1,y:2,width:15,height:1}, {x:1,y:2,width:14,height:1}]}>
3572
+ <Suspense name="inner" uniqueSuspenders={true} rects={[{x:1,y:2,width:14,height:1}]}>
3573
`);
3574
});
3575
packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js
+14
-14
@@ -169,8 +169,8 @@ describe('Store component filters', () => {
169
▾ <Suspense>
170
<div>
171
[suspense-root] rects={[{x:1,y:2,width:7,height:1}, {x:1,y:2,width:6,height:1}]}
172
- <Suspense name="Unknown" rects={[{x:1,y:2,width:7,height:1}]}>
173
- <Suspense name="Unknown" rects={[{x:1,y:2,width:6,height:1}]}>
172
+ <Suspense name="Unknown" uniqueSuspenders={false} rects={[{x:1,y:2,width:7,height:1}]}>
173
+ <Suspense name="Unknown" uniqueSuspenders={false} rects={[{x:1,y:2,width:6,height:1}]}>
174
`);
175
176
await actAsync(
@@ -187,8 +187,8 @@ describe('Store component filters', () => {
187
▾ <Suspense>
188
<div>
189
[suspense-root] rects={[{x:1,y:2,width:7,height:1}, {x:1,y:2,width:6,height:1}]}
190
- <Suspense name="Unknown" rects={[{x:1,y:2,width:7,height:1}]}>
191
- <Suspense name="Unknown" rects={[{x:1,y:2,width:6,height:1}]}>
190
+ <Suspense name="Unknown" uniqueSuspenders={false} rects={[{x:1,y:2,width:7,height:1}]}>
191
+ <Suspense name="Unknown" uniqueSuspenders={false} rects={[{x:1,y:2,width:6,height:1}]}>
192
`);
193
194
await actAsync(
@@ -205,8 +205,8 @@ describe('Store component filters', () => {
205
▾ <Suspense>
206
<div>
207
[suspense-root] rects={[{x:1,y:2,width:7,height:1}, {x:1,y:2,width:6,height:1}]}
208
- <Suspense name="Unknown" rects={[{x:1,y:2,width:7,height:1}]}>
209
- <Suspense name="Unknown" rects={[{x:1,y:2,width:6,height:1}]}>
208
+ <Suspense name="Unknown" uniqueSuspenders={false} rects={[{x:1,y:2,width:7,height:1}]}>
209
+ <Suspense name="Unknown" uniqueSuspenders={false} rects={[{x:1,y:2,width:6,height:1}]}>
210
`);
211
});
212
@@ -809,7 +809,7 @@ describe('Store component filters', () => {
809
▾ <ErrorBoundary>
810
<div key="did-error">
811
[suspense-root] rects={[{x:1,y:2,width:0,height:1}, {x:1,y:2,width:0,height:1}, {x:1,y:2,width:0,height:1}]}
812
- <Suspense name="App" rects={[{x:1,y:2,width:0,height:1}]}>
812
+ <Suspense name="App" uniqueSuspenders={false} rects={[{x:1,y:2,width:0,height:1}]}>
813
`);
814
815
await actAsync(() => {
@@ -825,7 +825,7 @@ describe('Store component filters', () => {
825
▾ <ErrorBoundary>
826
<div key="error-content">
827
[suspense-root] rects={[{x:1,y:2,width:0,height:1}, {x:1,y:2,width:0,height:1}]}
828
- <Suspense name="Unknown" rects={[{x:1,y:2,width:0,height:1}]}>
828
+ <Suspense name="Unknown" uniqueSuspenders={false} rects={[{x:1,y:2,width:0,height:1}]}>
829
`);
830
});
831
@@ -883,8 +883,8 @@ describe('Store component filters', () => {
883
▾ <Suspense>
884
<div>
885
[suspense-root] rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:13,height:1}]}
886
- <Suspense name="Root" rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:13,height:1}]}>
887
- <Suspense name="Page" rects={[{x:1,y:2,width:9,height:1}]}>
886
+ <Suspense name="Root" uniqueSuspenders={false} rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:13,height:1}]}>
887
+ <Suspense name="Page" uniqueSuspenders={true} rects={[{x:1,y:2,width:9,height:1}]}>
888
`);
889
890
await actAsync(
@@ -903,8 +903,8 @@ describe('Store component filters', () => {
903
▾ <Layout>
904
▸ <Activity name="/blog">
905
[suspense-root] rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:13,height:1}]}
906
- <Suspense name="Unknown" rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:13,height:1}]}>
907
- <Suspense name="Page" rects={[{x:1,y:2,width:9,height:1}]}>
906
+ <Suspense name="Unknown" uniqueSuspenders={false} rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:13,height:1}]}>
907
+ <Suspense name="Page" uniqueSuspenders={true} rects={[{x:1,y:2,width:9,height:1}]}>
908
`);
909
910
await actAsync(async () => (store.componentFilters = []));
@@ -924,8 +924,8 @@ describe('Store component filters', () => {
924
▾ <Suspense>
925
<div>
926
[suspense-root] rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:13,height:1}]}
927
- <Suspense name="Root" rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:13,height:1}]}>
928
- <Suspense name="Page" rects={[{x:1,y:2,width:9,height:1}]}>
927
+ <Suspense name="Root" uniqueSuspenders={false} rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:13,height:1}]}>
928
+ <Suspense name="Page" uniqueSuspenders={true} rects={[{x:1,y:2,width:9,height:1}]}>
929
`);
930
});
931
});
packages/react-devtools-shared/src/__tests__/treeContext-test.js
+10
-10
@@ -1369,8 +1369,8 @@ describe('TreeListContext', () => {
1369
▾ <Suspense>
1370
<Grandchild>
1371
[suspense-root] rects={null}
1372
- <Suspense name="Parent" rects={null}>
1373
- <Suspense name="Child" rects={null}>
1372
+ <Suspense name="Parent" uniqueSuspenders={false} rects={null}>
1373
+ <Suspense name="Child" uniqueSuspenders={false} rects={null}>
1374
`);
1375
1376
const outerSuspenseID = ((store.getElementIDAtIndex(1): any): number);
@@ -1411,8 +1411,8 @@ describe('TreeListContext', () => {
1411
▾ <Suspense>
1412
<Grandchild>
1413
[suspense-root] rects={null}
1414
- <Suspense name="Parent" rects={null}>
1415
- <Suspense name="Child" rects={null}>
1414
+ <Suspense name="Parent" uniqueSuspenders={false} rects={null}>
1415
+ <Suspense name="Child" uniqueSuspenders={false} rects={null}>
1416
`);
1417
});
1418
});
@@ -2370,7 +2370,7 @@ describe('TreeListContext', () => {
2370
[root]
2371
<Suspense>
2372
[suspense-root] rects={null}
2373
- <Suspense name="Unknown" rects={null}>
2373
+ <Suspense name="Unknown" uniqueSuspenders={true} rects={null}>
2374
`);
2375
2376
selectNextErrorOrWarning();
@@ -2379,7 +2379,7 @@ describe('TreeListContext', () => {
2379
[root]
2380
<Suspense>
2381
[suspense-root] rects={null}
2382
- <Suspense name="Unknown" rects={null}>
2382
+ <Suspense name="Unknown" uniqueSuspenders={true} rects={null}>
2383
`);
2384
});
2385
@@ -2405,7 +2405,7 @@ describe('TreeListContext', () => {
2405
[root]
2406
<Suspense>
2407
[suspense-root] rects={null}
2408
- <Suspense name="Unknown" rects={null}>
2408
+ <Suspense name="Unknown" uniqueSuspenders={true} rects={null}>
2409
`);
2410
2411
await Promise.resolve();
@@ -2427,7 +2427,7 @@ describe('TreeListContext', () => {
2427
<Child> ⚠
2428
<Child>
2429
[suspense-root] rects={null}
2430
- <Suspense name="Unknown" rects={null}>
2430
+ <Suspense name="Unknown" uniqueSuspenders={true} rects={null}>
2431
`);
2432
});
2433
@@ -2457,7 +2457,7 @@ describe('TreeListContext', () => {
2457
▾ <Fallback>
2458
<Child> ✕
2459
[suspense-root] rects={null}
2460
- <Suspense name="Unknown" rects={null}>
2460
+ <Suspense name="Unknown" uniqueSuspenders={true} rects={null}>
2461
`);
2462
2463
await Promise.resolve();
@@ -2476,7 +2476,7 @@ describe('TreeListContext', () => {
2476
▾ <Suspense>
2477
<Child>
2478
[suspense-root] rects={null}
2479
- <Suspense name="Unknown" rects={null}>
2479
+ <Suspense name="Unknown" uniqueSuspenders={true} rects={null}>
2480
`);
2481
});
2482
});
packages/react-devtools-shared/src/devtools/utils.js
+2
-1
@@ -64,9 +64,10 @@ function printRects(rects: SuspenseNode['rects']): string {
64
65
function printSuspense(suspense: SuspenseNode): string {
66
const name = ` name="${suspense.name || 'Unknown'}"`;
67
+ const hasUniqueSuspenders = ` uniqueSuspenders={${suspense.hasUniqueSuspenders ? 'true' : 'false'}}`;
68
const printedRects = printRects(suspense.rects);
69
69
- return `<Suspense${name}${printedRects}>`;
70
+ return `<Suspense${name}${hasUniqueSuspenders}${printedRects}>`;
71
}
72
73
function printSuspenseWithChildren(