Repository: facebook/react
Pull request: [test] Include `uniqueSuspenders` in Suspense tree snapshots

This field is important to show only boundaries that can have their fallback shown so we should include it in tests.

This change doesn't imply the values in the existing tests are correct.

Changed files:
filename: packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js
patch: @@ -124,7 +124,7 @@ describe('commit tree', () => {
           ▾ <App>
               <Suspense>
         [suspense-root]  rects={null}
-          <Suspense name="App" rects={null}>
+          <Suspense name="App" uniqueSuspenders={true} rects={null}>
       `);
       utils.act(() => render(<App renderChildren={true} />));
       expect(store).toMatchInlineSnapshot(`
@@ -133,7 +133,7 @@ describe('commit tree', () => {
             ▾ <Suspense>
                 <LazyInnerComponent>
         [suspense-root]  rects={null}
-          <Suspense name="App" rects={null}>
+          <Suspense name="App" uniqueSuspenders={true} rects={null}>
       `);
       utils.act(() => render(<App renderChildren={false} />));
       expect(store).toMatchInlineSnapshot(`
@@ -167,7 +167,7 @@ describe('commit tree', () => {
           ▾ <App>
               <Suspense>
         [suspense-root]  rects={null}
-          <Suspense name="App" rects={null}>
+          <Suspense name="App" uniqueSuspenders={true} rects={null}>
       `);
       utils.act(() => render(<App renderChildren={false} />));
       expect(store).toMatchInlineSnapshot(`

filename: packages/react-devtools-shared/src/__tests__/store-test.js
patch: @@ -164,7 +164,7 @@ describe('Store', () => {
         ▾ <Parent>
             <Child>
       [suspense-root]  rects={null}
-        <Suspense name="Unknown" rects={null}>
+        <Suspense name="Unknown" uniqueSuspenders={true} rects={null}>
     `);
   });
 
@@ -520,7 +520,7 @@ describe('Store', () => {
             ▾ <Suspense>
                 <Loading>
         [suspense-root]  rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:10,height:1}]}
-          <Suspense name="Wrapper" rects={null}>
+          <Suspense name="Wrapper" uniqueSuspenders={true} rects={null}>
       `);
 
       await act(() => {
@@ -533,7 +533,7 @@ describe('Store', () => {
             ▾ <Suspense>
                 <Component key="Inside">
         [suspense-root]  rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}]}
-          <Suspense name="Wrapper" rects={[{x:1,y:2,width:5,height:1}]}>
+          <Suspense name="Wrapper" uniqueSuspenders={true} rects={[{x:1,y:2,width:5,height:1}]}>
       `);
     });
 
@@ -609,10 +609,10 @@ describe('Store', () => {
                   <Loading key="Suspense 3 Fallback">
                 <Component key="Unrelated at End">
         [suspense-root]  rects={[{x:1,y:2,width:10,height:1}]}
-          <Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}]}>
-            <Suspense name="one" rects={null}>
-            <Suspense name="two" rects={null}>
-            <Suspense name="three" rects={null}>
+          <Suspense name="parent" uniqueSuspenders={false} rects={[{x:1,y:2,width:10,height:1}]}>
+            <Suspense name="one" uniqueSuspenders={false} rects={null}>
+            <Suspense name="two" uniqueSuspenders={false} rects={null}>
+            <Suspense name="three" uniqueSuspenders={true} rects={null}>
       `);
       await act(() =>
         render(
@@ -637,10 +637,10 @@ describe('Store', () => {
                   <Loading key="Suspense 3 Fallback">
                 <Component key="Unrelated at End">
         [suspense-root]  rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}
-          <Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
-            <Suspense name="one" rects={null}>
-            <Suspense name="two" rects={null}>
-            <Suspense name="three" rects={null}>
+          <Suspense name="parent" uniqueSuspenders={false} rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
+            <Suspense name="one" uniqueSuspenders={true} rects={null}>
+            <Suspense name="two" uniqueSuspenders={false} rects={null}>
+            <Suspense name="three" uniqueSuspenders={true} rects={null}>
       `);
       await act(() =>
         render(
@@ -665,10 +665,10 @@ describe('Store', () => {
                   <Loading key="Suspense 3 Fallback">
                 <Component key="Unrelated at End">
         [suspense-root]  rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}
-          <Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
-            <Suspense name="one" rects={null}>
-            <Suspense name="two" rects={null}>
-            <Suspense name="three" rects={null}>
+          <Suspense name="parent" uniqueSuspenders={false} rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
+            <Suspense name="one" uniqueSuspenders={true} rects={null}>
+            <Suspense name="two" uniqueSuspenders={true} rects={null}>
+            <Suspense name="three" uniqueSuspenders={true} rects={null}>
       `);
       await act(() =>
         render(
@@ -693,10 +693,10 @@ describe('Store', () => {
                   <Loading key="Suspense 3 Fallback">
                 <Component key="Unrelated at End">
         [suspense-root]  rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}
-          <Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
-            <Suspense name="one" rects={null}>
-            <Suspense name="two" rects={null}>
-            <Suspense name="three" rects={null}>
+          <Suspense name="parent" uniqueSuspenders={false} rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
+            <Suspense name="one" uniqueSuspenders={true} rects={null}>
+            <Suspense name="two" uniqueSuspenders={true} rects={null}>
+            <Suspense name="three" uniqueSuspenders={true} rects={null}>
       `);
       await act(() =>
         render(
@@ -714,10 +714,10 @@ describe('Store', () => {
             ▾ <Suspense name="parent">
                 <Loading key="Parent Fallback">
         [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}]}
-          <Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
-            <Suspense name="one" rects={null}>
-            <Suspense name="two" rects={null}>
-            <Suspense name="three" rects={null}>
+          <Suspense name="parent" uniqueSuspenders={true} rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
+            <Suspense name="one" uniqueSuspenders={true} rects={null}>
+            <Suspense name="two" uniqueSuspenders={true} rects={null}>
+            <Suspense name="three" uniqueSuspenders={true} rects={null}>
       `);
       await act(() =>
         render(
@@ -742,10 +742,10 @@ describe('Store', () => {
                   <Loading key="Suspense 3 Fallback">
                 <Component key="Unrelated at End">
         [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}]}
-          <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}]}>
-            <Suspense name="one" rects={null}>
-            <Suspense name="two" rects={null}>
-            <Suspense name="three" rects={null}>
+          <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}]}>
+            <Suspense name="one" uniqueSuspenders={true} rects={null}>
+            <Suspense name="two" uniqueSuspenders={true} rects={null}>
+            <Suspense name="three" uniqueSuspenders={true} rects={null}>
       `);
       await act(() =>
         render(
@@ -770,10 +770,10 @@ describe('Store', () => {
                   <Loading key="Suspense 3 Fallback">
                 <Component key="Unrelated at End">
         [suspense-root]  rects={[{x:1,y:2,width:10,height:1}]}
-          <Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}]}>
-            <Suspense name="one" rects={null}>
-            <Suspense name="two" rects={null}>
-            <Suspense name="three" rects={null}>
+          <Suspense name="parent" uniqueSuspenders={true} rects={[{x:1,y:2,width:10,height:1}]}>
+            <Suspense name="one" uniqueSuspenders={true} rects={null}>
+            <Suspense name="two" uniqueSuspenders={true} rects={null}>
+            <Suspense name="three" uniqueSuspenders={true} rects={null}>
       `);
 
       const rendererID = getRendererID();
@@ -798,10 +798,10 @@ describe('Store', () => {
                   <Loading key="Suspense 3 Fallback">
                 <Component key="Unrelated at End">
         [suspense-root]  rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}
-          <Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
-            <Suspense name="one" rects={null}>
-            <Suspense name="two" rects={null}>
-            <Suspense name="three" rects={null}>
+          <Suspense name="parent" uniqueSuspenders={true} rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
+            <Suspense name="one" uniqueSuspenders={true} rects={null}>
+            <Suspense name="two" uniqueSuspenders={true} rects={null}>
+            <Suspense name="three" uniqueSuspenders={true} rects={null}>
       `);
       await act(() =>
         agent.overrideSuspense({
@@ -817,10 +817,10 @@ describe('Store', () => {
             ▾ <Suspense name="parent">
                 <Loading key="Parent Fallback">
         [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}]}
-          <Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
-            <Suspense name="one" rects={null}>
-            <Suspense name="two" rects={null}>
-            <Suspense name="three" rects={null}>
+          <Suspense name="parent" uniqueSuspenders={true} rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
+            <Suspense name="one" uniqueSuspenders={true} rects={null}>
+            <Suspense name="two" uniqueSuspenders={true} rects={null}>
+            <Suspense name="three" uniqueSuspenders={true} rects={null}>
       `);
       await act(() =>
         render(
@@ -838,10 +838,10 @@ describe('Store', () => {
             ▾ <Suspense name="parent">
                 <Loading key="Parent Fallback">
         [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}]}
-          <Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
-            <Suspense name="one" rects={null}>
-            <Suspense name="two" rects={null}>
-            <Suspense name="three" rects={null}>
+          <Suspense name="parent" uniqueSuspenders={true} rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
+            <Suspense name="one" uniqueSuspenders={true} rects={null}>
+            <Suspense name="two" uniqueSuspenders={true} rects={null}>
+            <Suspense name="three" uniqueSuspenders={true} rects={null}>
       `);
       await actAsync(() =>
         agent.overrideSuspense({
@@ -864,10 +864,10 @@ describe('Store', () => {
                   <Loading key="Suspense 3 Fallback">
                 <Component key="Unrelated at End">
         [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}]}
-          <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}]}>
-            <Suspense name="one" rects={null}>
-            <Suspense name="two" rects={null}>
-            <Suspense name="three" rects={null}>
+          <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}]}>
+            <Suspense name="one" uniqueSuspenders={true} rects={null}>
+            <Suspense name="two" uniqueSuspenders={true} rects={null}>
+            <Suspense name="three" uniqueSuspenders={true} rects={null}>
       `);
       await act(() =>
         agent.overrideSuspense({
@@ -890,10 +890,10 @@ describe('Store', () => {
                   <Loading key="Suspense 3 Fallback">
                 <Component key="Unrelated at End">
         [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}]}
-          <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}]}>
-            <Suspense name="one" rects={null}>
-            <Suspense name="two" rects={null}>
-            <Suspense name="three" rects={null}>
+          <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}]}>
+            <Suspense name="one" uniqueSuspenders={true} rects={null}>
+            <Suspense name="two" uniqueSuspenders={true} rects={null}>
+            <Suspense name="three" uniqueSuspenders={true} rects={null}>
       `);
       await act(() =>
         render(
@@ -918,10 +918,10 @@ describe('Store', () => {
                   <Loading key="Suspense 3 Fallback">
                 <Component key="Unrelated at End">
         [suspense-root]  rects={[{x:1,y:2,width:10,height:1}]}
-          <Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}]}>
-            <Suspense name="one" rects={null}>
-            <Suspense name="two" rects={null}>
-            <Suspense name="three" rects={null}>
+          <Suspense name="parent" uniqueSuspenders={true} rects={[{x:1,y:2,width:10,height:1}]}>
+            <Suspense name="one" uniqueSuspenders={true} rects={null}>
+            <Suspense name="two" uniqueSuspenders={true} rects={null}>
+            <Suspense name="three" uniqueSuspenders={true} rects={null}>
       `);
     });
 
@@ -973,10 +973,10 @@ describe('Store', () => {
                   <Component key="Suspense 3 Content">
                 <Component key="Unrelated at End">
         [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}]}
-          <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}]}>
-            <Suspense name="one" rects={[{x:1,y:2,width:5,height:1}]}>
-            <Suspense name="two" rects={[{x:1,y:2,width:5,height:1}]}>
-            <Suspense name="three" rects={[{x:1,y:2,width:5,height:1}]}>
+          <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}]}>
+            <Suspense name="one" uniqueSuspenders={false} rects={[{x:1,y:2,width:5,height:1}]}>
+            <Suspense name="two" uniqueSuspenders={false} rects={[{x:1,y:2,width:5,height:1}]}>
+            <Suspense name="three" uniqueSuspenders={false} rects={[{x:1,y:2,width:5,height:1}]}>
       `);
 
       await actAsync(() => {
@@ -1002,10 +1002,10 @@ describe('Store', () => {
                   <Component key="Suspense 3 Fallback">
                 <Component key="Unrelated at End">
         [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}]}
-          <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}]}>
-            <Suspense name="one" rects={[{x:1,y:2,width:5,height:1}]}>
-            <Suspense name="two" rects={[{x:1,y:2,width:5,height:1}]}>
-            <Suspense name="three" rects={[{x:1,y:2,width:5,height:1}]}>
+          <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}]}>
+            <Suspense name="one" uniqueSuspenders={false} rects={[{x:1,y:2,width:5,height:1}]}>
+            <Suspense name="two" uniqueSuspenders={false} rects={[{x:1,y:2,width:5,height:1}]}>
+            <Suspense name="three" uniqueSuspenders={false} rects={[{x:1,y:2,width:5,height:1}]}>
       `);
 
       await actAsync(() => {
@@ -1028,10 +1028,10 @@ describe('Store', () => {
                   <Component key="Suspense 3 Content">
                 <Component key="Unrelated at End">
         [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}]}
-          <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}]}>
-            <Suspense name="one" rects={[{x:1,y:2,width:5,height:1}]}>
-            <Suspense name="two" rects={[{x:1,y:2,width:5,height:1}]}>
-            <Suspense name="three" rects={[{x:1,y:2,width:5,height:1}]}>
+          <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}]}>
+            <Suspense name="one" uniqueSuspenders={false} rects={[{x:1,y:2,width:5,height:1}]}>
+            <Suspense name="two" uniqueSuspenders={false} rects={[{x:1,y:2,width:5,height:1}]}>
+            <Suspense name="three" uniqueSuspenders={false} rects={[{x:1,y:2,width:5,height:1}]}>
       `);
     });
 
@@ -1069,7 +1069,7 @@ describe('Store', () => {
               ▾ <Suspense>
                   <Loading>
         [suspense-root]  rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:10,height:1}]}
-          <Suspense name="Wrapper" rects={null}>
+          <Suspense name="Wrapper" uniqueSuspenders={true} rects={null}>
       `);
 
       await act(() => {
@@ -1084,7 +1084,7 @@ describe('Store', () => {
                   <Component key="B">
                 <Component key="C">
         [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}]}
-          <Suspense name="Wrapper" rects={[{x:1,y:2,width:5,height:1}]}>
+          <Suspense name="Wrapper" uniqueSuspenders={true} rects={[{x:1,y:2,width:5,height:1}]}>
       `);
     });
 
@@ -1419,7 +1419,7 @@ describe('Store', () => {
         [root]
           ▸ <Wrapper>
         [suspense-root]  rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:10,height:1}]}
-          <Suspense name="Wrapper" rects={null}>
+          <Suspense name="Wrapper" uniqueSuspenders={true} rects={null}>
       `);
 
       // This test isn't meaningful unless we expand the suspended tree
@@ -1436,7 +1436,7 @@ describe('Store', () => {
             ▾ <Suspense>
                 <Loading>
         [suspense-root]  rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:10,height:1}]}
-          <Suspense name="Wrapper" rects={null}>
+          <Suspense name="Wrapper" uniqueSuspenders={true} rects={null}>
       `);
 
       await act(() => {
@@ -1449,7 +1449,7 @@ describe('Store', () => {
             ▾ <Suspense>
                 <Component key="Inside">
         [suspense-root]  rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}]}
-          <Suspense name="Wrapper" rects={[{x:1,y:2,width:5,height:1}]}>
+          <Suspense name="Wrapper" uniqueSuspenders={true} rects={[{x:1,y:2,width:5,height:1}]}>
       `);
     });
 
@@ -1675,7 +1675,7 @@ describe('Store', () => {
         [root]
           ▸ <SuspenseTree>
         [suspense-root]  rects={null}
-          <Suspense name="SuspenseTree" rects={null}>
+          <Suspense name="SuspenseTree" uniqueSuspenders={false} rects={null}>
       `);
 
       await act(() =>
@@ -1690,7 +1690,7 @@ describe('Store', () => {
             ▾ <Suspense>
               ▸ <Parent>
         [suspense-root]  rects={null}
-          <Suspense name="SuspenseTree" rects={null}>
+          <Suspense name="SuspenseTree" uniqueSuspenders={false} rects={null}>
       `);
 
       const rendererID = getRendererID();
@@ -1709,7 +1709,7 @@ describe('Store', () => {
             ▾ <Suspense>
                 <Fallback>
         [suspense-root]  rects={null}
-          <Suspense name="SuspenseTree" rects={null}>
+          <Suspense name="SuspenseTree" uniqueSuspenders={false} rects={null}>
       `);
 
       await act(() =>
@@ -1725,7 +1725,7 @@ describe('Store', () => {
             ▾ <Suspense>
               ▸ <Parent>
         [suspense-root]  rects={null}
-          <Suspense name="SuspenseTree" rects={null}>
+          <Suspense name="SuspenseTree" uniqueSuspenders={false} rects={null}>
       `);
     });
   });
@@ -2030,7 +2030,7 @@ describe('Store', () => {
           ▾ <App>
               <Suspense>
         [suspense-root]  rects={null}
-          <Suspense name="App" rects={null}>
+          <Suspense name="App" uniqueSuspenders={true} rects={null}>
       `);
 
       await Promise.resolve();
@@ -2044,7 +2044,7 @@ describe('Store', () => {
             ▾ <Suspense>
                 <LazyInnerComponent>
         [suspense-root]  rects={null}
-          <Suspense name="App" rects={null}>
+          <Suspense name="App" uniqueSuspenders={true} rects={null}>
       `);
 
       // Render again to unmount it
@@ -2537,7 +2537,7 @@ describe('Store', () => {
             ▾ <Suspense>
                 <ChildA>
         [suspense-root]  rects={null}
-          <Suspense name="App" rects={null}>
+          <Suspense name="App" uniqueSuspenders={true} rects={null}>
       `);
 
       await actAsync(() => render(<App renderA={false} />));
@@ -2548,7 +2548,7 @@ describe('Store', () => {
             ▾ <Suspense>
                 <ChildB>
         [suspense-root]  rects={null}
-          <Suspense name="App" rects={null}>
+          <Suspense name="App" uniqueSuspenders={true} rects={null}>
       `);
     });
   });
@@ -2909,8 +2909,8 @@ describe('Store', () => {
           ▾ <Suspense name="fallback">
               <Component key="fallback-fallback">
       [suspense-root]  rects={[{x:1,y:2,width:19,height:1}]}
-        <Suspense name="content" rects={null}>
-        <Suspense name="fallback" rects={null}>
+        <Suspense name="content" uniqueSuspenders={true} rects={null}>
+        <Suspense name="fallback" uniqueSuspenders={true} rects={null}>
     `);
 
     await actAsync(() => {
@@ -2923,8 +2923,8 @@ describe('Store', () => {
           ▾ <Suspense name="fallback">
               <Component key="fallback-content">
       [suspense-root]  rects={[{x:1,y:2,width:10,height:1}]}
-        <Suspense name="content" rects={null}>
-        <Suspense name="fallback" rects={[{x:1,y:2,width:10,height:1}]}>
+        <Suspense name="content" uniqueSuspenders={true} rects={null}>
+        <Suspense name="fallback" uniqueSuspenders={true} rects={[{x:1,y:2,width:10,height:1}]}>
     `);
 
     await actAsync(() => {
@@ -2936,7 +2936,7 @@ describe('Store', () => {
         ▾ <Suspense name="content">
             <Component key="content">
       [suspense-root]  rects={[{x:1,y:2,width:4,height:1}]}
-        <Suspense name="content" rects={[{x:1,y:2,width:4,height:1}]}>
+        <Suspense name="content" uniqueSuspenders={true} rects={[{x:1,y:2,width:4,height:1}]}>
     `);
   });
 
@@ -3039,10 +3039,10 @@ describe('Store', () => {
               ▾ <Suspense name="main-fallback">
                   <Component key="main-fallback-fallback">
       [suspense-root]  rects={[{x:1,y:2,width:19,height:1}, {x:1,y:2,width:19,height:1}]}
-        <Suspense name="head" rects={null}>
-        <Suspense name="head-fallback" rects={null}>
-        <Suspense name="main" rects={null}>
-        <Suspense name="main-fallback" rects={null}>
+        <Suspense name="head" uniqueSuspenders={true} rects={null}>
+        <Suspense name="head-fallback" uniqueSuspenders={true} rects={null}>
+        <Suspense name="main" uniqueSuspenders={true} rects={null}>
+        <Suspense name="main-fallback" uniqueSuspenders={true} rects={null}>
     `);
 
     await actAsync(() => {
@@ -3062,8 +3062,8 @@ describe('Store', () => {
             ▾ <Suspense name="main">
                 <Component key="main-content">
       [suspense-root]  rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:4,height:1}]}
-        <Suspense name="head" rects={[{x:1,y:2,width:4,height:1}]}>
-        <Suspense name="main" rects={[{x:1,y:2,width:4,height:1}]}>
+        <Suspense name="head" uniqueSuspenders={true} rects={[{x:1,y:2,width:4,height:1}]}>
+        <Suspense name="main" uniqueSuspenders={true} rects={[{x:1,y:2,width:4,height:1}]}>
     `);
 
     // Resuspend head content
@@ -3092,9 +3092,9 @@ describe('Store', () => {
             ▾ <Suspense name="main">
                 <Component key="main-content">
       [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}]}
-        <Suspense name="head" rects={[{x:1,y:2,width:4,height:1}]}>
-        <Suspense name="head-fallback" rects={[{x:1,y:2,width:10,height:1}]}>
-        <Suspense name="main" rects={[{x:1,y:2,width:4,height:1}]}>
+        <Suspense name="head" uniqueSuspenders={true} rects={[{x:1,y:2,width:4,height:1}]}>
+        <Suspense name="head-fallback" uniqueSuspenders={true} rects={[{x:1,y:2,width:10,height:1}]}>
+        <Suspense name="main" uniqueSuspenders={true} rects={[{x:1,y:2,width:4,height:1}]}>
     `);
 
     // Resuspend head fallback
@@ -3123,9 +3123,9 @@ describe('Store', () => {
             ▾ <Suspense name="main">
                 <Component key="main-content">
       [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}]}
-        <Suspense name="head" rects={[{x:1,y:2,width:4,height:1}]}>
-        <Suspense name="head-fallback" rects={[{x:1,y:2,width:10,height:1}]}>
-        <Suspense name="main" rects={[{x:1,y:2,width:4,height:1}]}>
+        <Suspense name="head" uniqueSuspenders={true} rects={[{x:1,y:2,width:4,height:1}]}>
+        <Suspense name="head-fallback" uniqueSuspenders={true} rects={[{x:1,y:2,width:10,height:1}]}>
+        <Suspense name="main" uniqueSuspenders={true} rects={[{x:1,y:2,width:4,height:1}]}>
     `);
 
     await actAsync(() => render(null));
@@ -3159,7 +3159,7 @@ describe('Store', () => {
         ▾ <Suspense>
             <Component key="A">
       [suspense-root]  rects={[{x:1,y:2,width:1,height:1}]}
-        <Suspense name="Unknown" rects={[{x:1,y:2,width:1,height:1}]}>
+        <Suspense name="Unknown" uniqueSuspenders={true} rects={[{x:1,y:2,width:1,height:1}]}>
     `);
 
     await actAsync(() =>
@@ -3175,7 +3175,7 @@ describe('Store', () => {
         ▾ <Suspense>
             <Component key="not-A">
       [suspense-root]  rects={[{x:1,y:2,width:5,height:1}]}
-        <Suspense name="Unknown" rects={[{x:1,y:2,width:5,height:1}]}>
+        <Suspense name="Unknown" uniqueSuspenders={true} rects={[{x:1,y:2,width:5,height:1}]}>
     `);
 
     await actAsync(() => render(null));
@@ -3223,7 +3223,7 @@ describe('Store', () => {
       [root]
           <Suspense name="main">
       [suspense-root]  rects={null}
-        <Suspense name="main" rects={null}>
+        <Suspense name="main" uniqueSuspenders={true} rects={null}>
     `);
 
     await actAsync(() => resolveContent('content'));
@@ -3232,7 +3232,7 @@ describe('Store', () => {
         ▾ <Suspense name="main">
             <Component>
       [suspense-root]  rects={null}
-        <Suspense name="main" rects={null}>
+        <Suspense name="main" uniqueSuspenders={true} rects={null}>
     `);
   });
 
@@ -3295,7 +3295,7 @@ describe('Store', () => {
           ▾ <Suspense name="root">
               <Component key="root-fallback">
         [suspense-root]  rects={null}
-          <Suspense name="root" rects={null}>
+          <Suspense name="root" uniqueSuspenders={true} rects={null}>
       `);
     }
 
@@ -3305,8 +3305,8 @@ describe('Store', () => {
         ▾ <Suspense name="root">
             <Suspense name="main">
       [suspense-root]  rects={null}
-        <Suspense name="root" rects={null}>
-          <Suspense name="main" rects={null}>
+        <Suspense name="root" uniqueSuspenders={true} rects={null}>
+          <Suspense name="main" uniqueSuspenders={true} rects={null}>
     `);
 
     await actAsync(() => resolveContent('content'));
@@ -3316,8 +3316,8 @@ describe('Store', () => {
           ▾ <Suspense name="main">
               <Component>
       [suspense-root]  rects={null}
-        <Suspense name="root" rects={null}>
-          <Suspense name="main" rects={null}>
+        <Suspense name="root" uniqueSuspenders={true} rects={null}>
+          <Suspense name="main" uniqueSuspenders={true} rects={null}>
     `);
   });
 
@@ -3362,7 +3362,7 @@ describe('Store', () => {
             <Activity>
             <Suspense name="outer-suspense">
       [suspense-root]  rects={[{x:1,y:2,width:15,height:1}]}
-        <Suspense name="outer-suspense" rects={null}>
+        <Suspense name="outer-suspense" uniqueSuspenders={true} rects={null}>
     `);
 
     // mount as visible
@@ -3383,9 +3383,9 @@ describe('Store', () => {
             ▾ <Suspense name="inner-suspense">
                 <Component key="inside-suspense">
       [suspense-root]  rects={[{x:1,y:2,width:15,height:1}, {x:1,y:2,width:15,height:1}]}
-        <Suspense name="inside-activity" rects={[{x:1,y:2,width:15,height:1}]}>
-        <Suspense name="outer-suspense" rects={[{x:1,y:2,width:15,height:1}]}>
-          <Suspense name="inner-suspense" rects={[{x:1,y:2,width:15,height:1}]}>
+        <Suspense name="inside-activity" uniqueSuspenders={false} rects={[{x:1,y:2,width:15,height:1}]}>
+        <Suspense name="outer-suspense" uniqueSuspenders={false} rects={[{x:1,y:2,width:15,height:1}]}>
+          <Suspense name="inner-suspense" uniqueSuspenders={false} rects={[{x:1,y:2,width:15,height:1}]}>
     `);
 
     await actAsync(() => {
@@ -3398,8 +3398,8 @@ describe('Store', () => {
             <Activity>
             <Suspense name="outer-suspense">
       [suspense-root]  rects={[{x:1,y:2,width:15,height:1}, {x:1,y:2,width:15,height:1}]}
-        <Suspense name="outer-suspense" rects={[{x:1,y:2,width:15,height:1}]}>
-          <Suspense name="inner-suspense" rects={[{x:1,y:2,width:15,height:1}]}>
+        <Suspense name="outer-suspense" uniqueSuspenders={true} rects={[{x:1,y:2,width:15,height:1}]}>
+          <Suspense name="inner-suspense" uniqueSuspenders={false} rects={[{x:1,y:2,width:15,height:1}]}>
     `);
 
     await actAsync(() => {
@@ -3416,9 +3416,9 @@ describe('Store', () => {
             ▾ <Suspense name="inner-suspense">
                 <Component key="inside-suspense">
       [suspense-root]  rects={[{x:1,y:2,width:15,height:1}, {x:1,y:2,width:15,height:1}]}
-        <Suspense name="inside-activity" rects={[{x:1,y:2,width:15,height:1}]}>
-        <Suspense name="outer-suspense" rects={[{x:1,y:2,width:15,height:1}]}>
-          <Suspense name="inner-suspense" rects={[{x:1,y:2,width:15,height:1}]}>
+        <Suspense name="inside-activity" uniqueSuspenders={false} rects={[{x:1,y:2,width:15,height:1}]}>
+        <Suspense name="outer-suspense" uniqueSuspenders={true} rects={[{x:1,y:2,width:15,height:1}]}>
+          <Suspense name="inner-suspense" uniqueSuspenders={false} rects={[{x:1,y:2,width:15,height:1}]}>
     `);
   });
 
@@ -3458,7 +3458,7 @@ describe('Store', () => {
         ▾ <Outer>
             <Suspense>
       [suspense-root]  rects={[{x:1,y:2,width:13,height:1}]}
-        <Suspense name="Outer" rects={null}>
+        <Suspense name="Outer" uniqueSuspenders={true} rects={null}>
     `);
 
     await actAsync(() => {
@@ -3472,8 +3472,8 @@ describe('Store', () => {
             ▾ <Inner>
                 <Suspense>
       [suspense-root]  rects={[{x:1,y:2,width:6,height:1}, {x:1,y:2,width:6,height:1}]}
-        <Suspense name="Outer" rects={[{x:1,y:2,width:6,height:1}, {x:1,y:2,width:6,height:1}]}>
-          <Suspense name="Inner" rects={[{x:1,y:2,width:6,height:1}]}>
+        <Suspense name="Outer" uniqueSuspenders={true} rects={[{x:1,y:2,width:6,height:1}, {x:1,y:2,width:6,height:1}]}>
+          <Suspense name="Inner" uniqueSuspenders={false} rects={[{x:1,y:2,width:6,height:1}]}>
     `);
   });
 
@@ -3528,8 +3528,8 @@ describe('Store', () => {
             ▾ <Suspense name="inner">
                 <Component key="inner-content">
       [suspense-root]  rects={[{x:1,y:2,width:13,height:1}, {x:1,y:2,width:13,height:1}]}
-        <Suspense name="outer" rects={[{x:1,y:2,width:13,height:1}, {x:1,y:2,width:13,height:1}]}>
-          <Suspense name="inner" rects={[{x:1,y:2,width:13,height:1}]}>
+        <Suspense name="outer" uniqueSuspenders={false} rects={[{x:1,y:2,width:13,height:1}, {x:1,y:2,width:13,height:1}]}>
+          <Suspense name="inner" uniqueSuspenders={false} rects={[{x:1,y:2,width:13,height:1}]}>
     `);
 
     let outerResolve;
@@ -3551,8 +3551,8 @@ describe('Store', () => {
           ▾ <Suspense name="outer">
               <Component key="outer-fallback">
       [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}]}
-        <Suspense name="outer" rects={[{x:1,y:2,width:13,height:1}, {x:1,y:2,width:13,height:1}]}>
-          <Suspense name="inner" rects={[{x:1,y:2,width:13,height:1}]}>
+        <Suspense name="outer" uniqueSuspenders={true} rects={[{x:1,y:2,width:13,height:1}, {x:1,y:2,width:13,height:1}]}>
+          <Suspense name="inner" uniqueSuspenders={false} rects={[{x:1,y:2,width:13,height:1}]}>
     `);
 
     await actAsync(() => {
@@ -3568,8 +3568,8 @@ describe('Store', () => {
             ▾ <Suspense name="inner">
                 <Component key="inner-content">
       [suspense-root]  rects={[{x:1,y:2,width:15,height:1}, {x:1,y:2,width:14,height:1}]}
-        <Suspense name="outer" rects={[{x:1,y:2,width:15,height:1}, {x:1,y:2,width:14,height:1}]}>
-          <Suspense name="inner" rects={[{x:1,y:2,width:14,height:1}]}>
+        <Suspense name="outer" uniqueSuspenders={true} rects={[{x:1,y:2,width:15,height:1}, {x:1,y:2,width:14,height:1}]}>
+          <Suspense name="inner" uniqueSuspenders={true} rects={[{x:1,y:2,width:14,height:1}]}>
     `);
   });
 

filename: packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js
patch: @@ -169,8 +169,8 @@ describe('Store component filters', () => {
         ▾ <Suspense>
             <div>
       [suspense-root]  rects={[{x:1,y:2,width:7,height:1}, {x:1,y:2,width:6,height:1}]}
-        <Suspense name="Unknown" rects={[{x:1,y:2,width:7,height:1}]}>
-        <Suspense name="Unknown" rects={[{x:1,y:2,width:6,height:1}]}>
+        <Suspense name="Unknown" uniqueSuspenders={false} rects={[{x:1,y:2,width:7,height:1}]}>
+        <Suspense name="Unknown" uniqueSuspenders={false} rects={[{x:1,y:2,width:6,height:1}]}>
     `);
 
     await actAsync(
@@ -187,8 +187,8 @@ describe('Store component filters', () => {
         ▾ <Suspense>
             <div>
       [suspense-root]  rects={[{x:1,y:2,width:7,height:1}, {x:1,y:2,width:6,height:1}]}
-        <Suspense name="Unknown" rects={[{x:1,y:2,width:7,height:1}]}>
-        <Suspense name="Unknown" rects={[{x:1,y:2,width:6,height:1}]}>
+        <Suspense name="Unknown" uniqueSuspenders={false} rects={[{x:1,y:2,width:7,height:1}]}>
+        <Suspense name="Unknown" uniqueSuspenders={false} rects={[{x:1,y:2,width:6,height:1}]}>
     `);
 
     await actAsync(
@@ -205,8 +205,8 @@ describe('Store component filters', () => {
         ▾ <Suspense>
             <div>
       [suspense-root]  rects={[{x:1,y:2,width:7,height:1}, {x:1,y:2,width:6,height:1}]}
-        <Suspense name="Unknown" rects={[{x:1,y:2,width:7,height:1}]}>
-        <Suspense name="Unknown" rects={[{x:1,y:2,width:6,height:1}]}>
+        <Suspense name="Unknown" uniqueSuspenders={false} rects={[{x:1,y:2,width:7,height:1}]}>
+        <Suspense name="Unknown" uniqueSuspenders={false} rects={[{x:1,y:2,width:6,height:1}]}>
     `);
   });
 
@@ -809,7 +809,7 @@ describe('Store component filters', () => {
           ▾ <ErrorBoundary>
               <div key="did-error">
       [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}]}
-        <Suspense name="App" rects={[{x:1,y:2,width:0,height:1}]}>
+        <Suspense name="App" uniqueSuspenders={false} rects={[{x:1,y:2,width:0,height:1}]}>
     `);
 
     await actAsync(() => {
@@ -825,7 +825,7 @@ describe('Store component filters', () => {
         ▾ <ErrorBoundary>
             <div key="error-content">
       [suspense-root]  rects={[{x:1,y:2,width:0,height:1}, {x:1,y:2,width:0,height:1}]}
-        <Suspense name="Unknown" rects={[{x:1,y:2,width:0,height:1}]}>
+        <Suspense name="Unknown" uniqueSuspenders={false} rects={[{x:1,y:2,width:0,height:1}]}>
     `);
   });
 
@@ -883,8 +883,8 @@ describe('Store component filters', () => {
                         ▾ <Suspense>
                             <div>
       [suspense-root]  rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:13,height:1}]}
-        <Suspense name="Root" rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:13,height:1}]}>
-          <Suspense name="Page" rects={[{x:1,y:2,width:9,height:1}]}>
+        <Suspense name="Root" uniqueSuspenders={false} rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:13,height:1}]}>
+          <Suspense name="Page" uniqueSuspenders={true} rects={[{x:1,y:2,width:9,height:1}]}>
     `);
 
     await actAsync(
@@ -903,8 +903,8 @@ describe('Store component filters', () => {
               ▾ <Layout>
                 ▸ <Activity name="/blog">
       [suspense-root]  rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:13,height:1}]}
-        <Suspense name="Unknown" rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:13,height:1}]}>
-          <Suspense name="Page" rects={[{x:1,y:2,width:9,height:1}]}>
+        <Suspense name="Unknown" uniqueSuspenders={false} rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:13,height:1}]}>
+          <Suspense name="Page" uniqueSuspenders={true} rects={[{x:1,y:2,width:9,height:1}]}>
     `);
 
     await actAsync(async () => (store.componentFilters = []));
@@ -924,8 +924,8 @@ describe('Store component filters', () => {
                         ▾ <Suspense>
                             <div>
       [suspense-root]  rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:13,height:1}]}
-        <Suspense name="Root" rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:13,height:1}]}>
-          <Suspense name="Page" rects={[{x:1,y:2,width:9,height:1}]}>
+        <Suspense name="Root" uniqueSuspenders={false} rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:13,height:1}]}>
+          <Suspense name="Page" uniqueSuspenders={true} rects={[{x:1,y:2,width:9,height:1}]}>
     `);
   });
 });

filename: packages/react-devtools-shared/src/__tests__/treeContext-test.js
patch: @@ -1369,8 +1369,8 @@ describe('TreeListContext', () => {
                  ▾ <Suspense>
                      <Grandchild>
         [suspense-root]  rects={null}
-          <Suspense name="Parent" rects={null}>
-            <Suspense name="Child" rects={null}>
+          <Suspense name="Parent" uniqueSuspenders={false} rects={null}>
+            <Suspense name="Child" uniqueSuspenders={false} rects={null}>
       `);
 
       const outerSuspenseID = ((store.getElementIDAtIndex(1): any): number);
@@ -1411,8 +1411,8 @@ describe('TreeListContext', () => {
                  ▾ <Suspense>
                      <Grandchild>
         [suspense-root]  rects={null}
-          <Suspense name="Parent" rects={null}>
-            <Suspense name="Child" rects={null}>
+          <Suspense name="Parent" uniqueSuspenders={false} rects={null}>
+            <Suspense name="Child" uniqueSuspenders={false} rects={null}>
       `);
     });
   });
@@ -2370,7 +2370,7 @@ describe('TreeListContext', () => {
           [root]
                <Suspense>
           [suspense-root]  rects={null}
-            <Suspense name="Unknown" rects={null}>
+            <Suspense name="Unknown" uniqueSuspenders={true} rects={null}>
         `);
 
         selectNextErrorOrWarning();
@@ -2379,7 +2379,7 @@ describe('TreeListContext', () => {
           [root]
                <Suspense>
           [suspense-root]  rects={null}
-            <Suspense name="Unknown" rects={null}>
+            <Suspense name="Unknown" uniqueSuspenders={true} rects={null}>
         `);
       });
 
@@ -2405,7 +2405,7 @@ describe('TreeListContext', () => {
           [root]
                <Suspense>
           [suspense-root]  rects={null}
-            <Suspense name="Unknown" rects={null}>
+            <Suspense name="Unknown" uniqueSuspenders={true} rects={null}>
         `);
 
         await Promise.resolve();
@@ -2427,7 +2427,7 @@ describe('TreeListContext', () => {
                  <Child> ⚠
                  <Child>
           [suspense-root]  rects={null}
-            <Suspense name="Unknown" rects={null}>
+            <Suspense name="Unknown" uniqueSuspenders={true} rects={null}>
         `);
       });
 
@@ -2457,7 +2457,7 @@ describe('TreeListContext', () => {
                ▾ <Fallback>
                    <Child> ✕
           [suspense-root]  rects={null}
-            <Suspense name="Unknown" rects={null}>
+            <Suspense name="Unknown" uniqueSuspenders={true} rects={null}>
         `);
 
         await Promise.resolve();
@@ -2476,7 +2476,7 @@ describe('TreeListContext', () => {
              ▾ <Suspense>
                  <Child>
           [suspense-root]  rects={null}
-            <Suspense name="Unknown" rects={null}>
+            <Suspense name="Unknown" uniqueSuspenders={true} rects={null}>
         `);
       });
     });

filename: packages/react-devtools-shared/src/devtools/utils.js
patch: @@ -64,9 +64,10 @@ function printRects(rects: SuspenseNode['rects']): string {
 
 function printSuspense(suspense: SuspenseNode): string {
   const name = ` name="${suspense.name || 'Unknown'}"`;
+  const hasUniqueSuspenders = ` uniqueSuspenders={${suspense.hasUniqueSuspenders ? 'true' : 'false'}}`;
   const printedRects = printRects(suspense.rects);
 
-  return `<Suspense${name}${printedRects}>`;
+  return `<Suspense${name}${hasUniqueSuspenders}${printedRects}>`;
 }
 
 function printSuspenseWithChildren(