[DevTools] Finalize heuristic for naming unnamed `<Suspense>` (#34428)
Sebastian "Sebbie" Silbermann committed
Sep 9, 2025 at 17:56 UTC
6b70072c4f21d6762d914adb42007db68f1e00a9
4 files changed
+27
-28
packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js
+3
-3
@@ -229,7 +229,7 @@ describe('commit tree', () => {
229
▾ <App>
230
<Suspense>
231
[suspense-root] rects={null}
232
- <Suspense name="App>?" rects={null}>
232
+ <Suspense name="App" rects={null}>
233
`);
234
utils.act(() => modernRender(<App renderChildren={true} />));
235
expect(store).toMatchInlineSnapshot(`
@@ -238,7 +238,7 @@ describe('commit tree', () => {
238
▾ <Suspense>
239
<LazyInnerComponent>
240
[suspense-root] rects={null}
241
- <Suspense name="App>?" rects={null}>
241
+ <Suspense name="App" rects={null}>
242
`);
243
utils.act(() => modernRender(<App renderChildren={false} />));
244
expect(store).toMatchInlineSnapshot(`
@@ -304,7 +304,7 @@ describe('commit tree', () => {
304
▾ <App>
305
<Suspense>
306
[suspense-root] rects={null}
307
- <Suspense name="App>?" rects={null}>
307
+ <Suspense name="App" rects={null}>
308
`);
309
utils.act(() => modernRender(<App renderChildren={false} />));
310
expect(store).toMatchInlineSnapshot(`
packages/react-devtools-shared/src/__tests__/store-test.js
+15
-15
@@ -493,7 +493,7 @@ describe('Store', () => {
493
▾ <Suspense>
494
<Loading>
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}>
496
+ <Suspense name="Wrapper" rects={null}>
497
`);
498
499
await act(() => {
@@ -506,7 +506,7 @@ describe('Store', () => {
506
▾ <Suspense>
507
<Component key="Inside">
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}]}>
509
+ <Suspense name="Wrapper" rects={[{x:1,y:2,width:5,height:1}]}>
510
`);
511
});
512
@@ -1054,7 +1054,7 @@ describe('Store', () => {
1054
▾ <Suspense>
1055
<Loading>
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}>
1057
+ <Suspense name="Wrapper" rects={null}>
1058
`);
1059
1060
await act(() => {
@@ -1069,7 +1069,7 @@ describe('Store', () => {
1069
<Component key="B">
1070
<Component key="C">
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}]}>
1072
+ <Suspense name="Wrapper" rects={[{x:1,y:2,width:5,height:1}]}>
1073
`);
1074
});
1075
@@ -1407,7 +1407,7 @@ describe('Store', () => {
1407
[root]
1408
▸ <Wrapper>
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}>
1410
+ <Suspense name="Wrapper" rects={null}>
1411
`);
1412
1413
// This test isn't meaningful unless we expand the suspended tree
@@ -1424,7 +1424,7 @@ describe('Store', () => {
1424
▾ <Suspense>
1425
<Loading>
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}>
1427
+ <Suspense name="Wrapper" rects={null}>
1428
`);
1429
1430
await act(() => {
@@ -1437,7 +1437,7 @@ describe('Store', () => {
1437
▾ <Suspense>
1438
<Component key="Inside">
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}]}>
1440
+ <Suspense name="Wrapper" rects={[{x:1,y:2,width:5,height:1}]}>
1441
`);
1442
});
1443
@@ -1663,7 +1663,7 @@ describe('Store', () => {
1663
[root]
1664
▸ <SuspenseTree>
1665
[suspense-root] rects={null}
1666
- <Suspense name="SuspenseTree>?" rects={null}>
1666
+ <Suspense name="SuspenseTree" rects={null}>
1667
`);
1668
1669
await act(() =>
@@ -1678,7 +1678,7 @@ describe('Store', () => {
1678
▾ <Suspense>
1679
▸ <Parent>
1680
[suspense-root] rects={null}
1681
- <Suspense name="SuspenseTree>?" rects={null}>
1681
+ <Suspense name="SuspenseTree" rects={null}>
1682
`);
1683
1684
const rendererID = getRendererID();
@@ -1697,7 +1697,7 @@ describe('Store', () => {
1697
▾ <Suspense>
1698
<Fallback>
1699
[suspense-root] rects={null}
1700
- <Suspense name="SuspenseTree>?" rects={null}>
1700
+ <Suspense name="SuspenseTree" rects={null}>
1701
`);
1702
1703
await act(() =>
@@ -1713,7 +1713,7 @@ describe('Store', () => {
1713
▾ <Suspense>
1714
▸ <Parent>
1715
[suspense-root] rects={null}
1716
- <Suspense name="SuspenseTree>?" rects={null}>
1716
+ <Suspense name="SuspenseTree" rects={null}>
1717
`);
1718
});
1719
});
@@ -2018,7 +2018,7 @@ describe('Store', () => {
2018
▾ <App>
2019
<Suspense>
2020
[suspense-root] rects={null}
2021
- <Suspense name="App>?" rects={null}>
2021
+ <Suspense name="App" rects={null}>
2022
`);
2023
2024
await Promise.resolve();
@@ -2032,7 +2032,7 @@ describe('Store', () => {
2032
▾ <Suspense>
2033
<LazyInnerComponent>
2034
[suspense-root] rects={null}
2035
- <Suspense name="App>?" rects={null}>
2035
+ <Suspense name="App" rects={null}>
2036
`);
2037
2038
// Render again to unmount it
@@ -2523,7 +2523,7 @@ describe('Store', () => {
2523
▾ <Suspense>
2524
<ChildA>
2525
[suspense-root] rects={null}
2526
- <Suspense name="App>?" rects={null}>
2526
+ <Suspense name="App" rects={null}>
2527
`);
2528
2529
await actAsync(() => render(<App renderA={false} />));
@@ -2534,7 +2534,7 @@ describe('Store', () => {
2534
▾ <Suspense>
2535
<ChildB>
2536
[suspense-root] rects={null}
2537
- <Suspense name="App>?" rects={null}>
2537
+ <Suspense name="App" rects={null}>
2538
`);
2539
});
2540
});
packages/react-devtools-shared/src/__tests__/treeContext-test.js
+4
-4
@@ -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" rects={null}>
1373
+ <Suspense name="Child" 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" rects={null}>
1415
+ <Suspense name="Child" rects={null}>
1416
`);
1417
});
1418
});
packages/react-devtools-shared/src/devtools/store.js
+5
-6
@@ -1950,14 +1950,13 @@ export default class Store extends EventEmitter<{
1950
throw error;
1951
}
1952
1953
- _guessSuspenseName(element: Element): string | null {
1954
- // TODO: Use key
1953
+ _guessSuspenseName(element: Element): string {
1954
const owner = this._idToElement.get(element.ownerID);
1956
- if (owner !== undefined) {
1957
- // TODO: This is clowny
1958
- return `${owner.displayName || 'Unknown'}>?`;
1955
+ let name = 'Unknown';
1956
+ if (owner !== undefined && owner.displayName !== null) {
1957
+ name = owner.displayName;
1958
}
1959
1961
- return null;
1960
+ return name;
1961
}
1962
}