Rename Suspense unstable_name to name (#33014)
This was only used by Transition Tracing which isn't really used anywhere. However, we want to start using it for other DevTools.
Sebastian Markbåge committed
Apr 24, 2025 at 16:53 UTC
693803a9bb3073b2ff5c99f8ae804f855db9aae2
3 files changed
+36
-44
packages/react-reconciler/src/ReactFiberCommitWork.js
+3
-3
@@ -1062,9 +1062,9 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
1062
if (
1063
parent !== null &&
1064
parent.tag === SuspenseComponent &&
1065
- parent.memoizedProps.unstable_name
1065
+ parent.memoizedProps.name
1066
) {
1067
- name = parent.memoizedProps.unstable_name;
1067
+ name = parent.memoizedProps.name;
1068
}
1069
1070
if (!wasHidden && isHidden) {
@@ -4952,7 +4952,7 @@ function commitPassiveUnmountInsideDeletedTreeOnFiber(
4952
if (transitions !== null) {
4953
const abortReason = {
4954
reason: 'suspense',
4955
- name: current.memoizedProps.unstable_name || null,
4955
+ name: current.memoizedProps.name || null,
4956
};
4957
if (
4958
current.memoizedState === null ||
packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
+32
-40
@@ -412,7 +412,7 @@ describe('ReactInteractionTracing', () => {
412
{navigate ? (
413
<Suspense
414
fallback={<Text text="Loading..." />}
415
- unstable_name="suspense page">
415
+ name="suspense page">
416
<AsyncText text="Page Two" />
417
</Suspense>
418
) : (
@@ -498,14 +498,14 @@ describe('ReactInteractionTracing', () => {
498
<>
499
{showText ? (
500
<Suspense
501
- unstable_name="show text"
501
+ name="show text"
502
fallback={<Text text="Show Text Loading..." />}>
503
<AsyncText text="Show Text" />
504
</Suspense>
505
) : null}
506
<Suspense
507
fallback={<Text text="Loading..." />}
508
- unstable_name="suspense page">
508
+ name="suspense page">
509
<AsyncText text="Page Two" />
510
</Suspense>
511
</>
@@ -605,14 +605,14 @@ describe('ReactInteractionTracing', () => {
605
<>
606
{showText ? (
607
<Suspense
608
- unstable_name="show text"
608
+ name="show text"
609
fallback={<Text text="Show Text Loading..." />}>
610
<AsyncText text="Show Text" />
611
</Suspense>
612
) : null}
613
<Suspense
614
fallback={<Text text="Loading..." />}
615
- unstable_name="suspense page">
615
+ name="suspense page">
616
<AsyncText text="Page Two" />
617
</Suspense>
618
</>
@@ -719,16 +719,16 @@ describe('ReactInteractionTracing', () => {
719
<>
720
<Suspense
721
fallback={<Text text="Loading..." />}
722
- unstable_name="suspense page">
722
+ name="suspense page">
723
<AsyncText text="Page Two" />
724
<Suspense
725
- unstable_name="show text one"
725
+ name="show text one"
726
fallback={<Text text="Show Text One Loading..." />}>
727
<AsyncText text="Show Text One" />
728
</Suspense>
729
<div>
730
<Suspense
731
- unstable_name="show text two"
731
+ name="show text two"
732
fallback={<Text text="Show Text Two Loading..." />}>
733
<AsyncText text="Show Text Two" />
734
</Suspense>
@@ -848,12 +848,12 @@ describe('ReactInteractionTracing', () => {
848
<>
849
<Suspense
850
fallback={<Text text="Loading..." />}
851
- unstable_name="suspense page">
851
+ name="suspense page">
852
<AsyncText text="Page Two" />
853
{/* showTextOne is entangled with navigate */}
854
{showTextOne ? (
855
<Suspense
856
- unstable_name="show text one"
856
+ name="show text one"
857
fallback={<Text text="Show Text One Loading..." />}>
858
<AsyncText text="Show Text One" />
859
</Suspense>
@@ -865,7 +865,7 @@ describe('ReactInteractionTracing', () => {
865
from completing */}
866
{showTextTwo ? (
867
<Suspense
868
- unstable_name="show text two"
868
+ name="show text two"
869
fallback={<Text text="Show Text Two Loading..." />}>
870
<AsyncText text="Show Text Two" />
871
</Suspense>
@@ -1115,13 +1115,13 @@ describe('ReactInteractionTracing', () => {
1115
{navigate ? (
1116
<Suspense
1117
fallback={<Text text="Loading..." />}
1118
- unstable_name="suspense page">
1118
+ name="suspense page">
1119
<AsyncText text="Page Two" />
1120
<React.unstable_TracingMarker name="sync marker" />
1121
<React.unstable_TracingMarker name="async marker">
1122
<Suspense
1123
fallback={<Text text="Loading..." />}
1124
- unstable_name="marker suspense">
1124
+ name="marker suspense">
1125
<AsyncText text="Marker Text" />
1126
</Suspense>
1127
</React.unstable_TracingMarker>
@@ -1226,20 +1226,18 @@ describe('ReactInteractionTracing', () => {
1226
<div>
1227
{navigate ? (
1228
<React.unstable_TracingMarker name="outer marker">
1229
- <Suspense
1230
- fallback={<Text text="Outer..." />}
1231
- unstable_name="outer">
1229
+ <Suspense fallback={<Text text="Outer..." />} name="outer">
1230
<AsyncText text="Outer Text" />
1231
<Suspense
1232
fallback={<Text text="Inner One..." />}
1235
- unstable_name="inner one">
1233
+ name="inner one">
1234
<React.unstable_TracingMarker name="marker one">
1235
<AsyncText text="Inner Text One" />
1236
</React.unstable_TracingMarker>
1237
</Suspense>
1238
<Suspense
1239
fallback={<Text text="Inner Two..." />}
1242
- unstable_name="inner two">
1240
+ name="inner two">
1241
<React.unstable_TracingMarker name="marker two">
1242
<AsyncText text="Inner Text Two" />
1243
</React.unstable_TracingMarker>
@@ -1488,21 +1486,21 @@ describe('ReactInteractionTracing', () => {
1486
{showMarker ? (
1487
<React.unstable_TracingMarker name="marker one">
1488
<Suspense
1491
- unstable_name="suspense page"
1489
+ name="suspense page"
1490
fallback={<Text text="Loading..." />}>
1491
<AsyncText text="Page Two" />
1492
</Suspense>
1493
</React.unstable_TracingMarker>
1494
) : (
1495
<Suspense
1498
- unstable_name="suspense page"
1496
+ name="suspense page"
1497
fallback={<Text text="Loading..." />}>
1498
<AsyncText text="Page Two" />
1499
</Suspense>
1500
)}
1501
<React.unstable_TracingMarker name="sibling">
1502
<Suspense
1505
- unstable_name="suspense sibling"
1503
+ name="suspense sibling"
1504
fallback={<Text text="Sibling Loading..." />}>
1505
<AsyncText text="Sibling Text" />
1506
</Suspense>
@@ -1652,7 +1650,7 @@ describe('ReactInteractionTracing', () => {
1650
<div>
1651
<React.unstable_TracingMarker name="one">
1652
<Suspense
1655
- unstable_name="suspense one"
1653
+ name="suspense one"
1654
fallback={<Text text="Loading One..." />}>
1655
<AsyncText text="Page One" />
1656
</Suspense>
@@ -1661,7 +1659,7 @@ describe('ReactInteractionTracing', () => {
1659
) : null}
1660
<React.unstable_TracingMarker name="two">
1661
<Suspense
1664
- unstable_name="suspense two"
1662
+ name="suspense two"
1663
fallback={<Text text="Loading Two..." />}>
1664
<AsyncText text="Page Two" />
1665
</Suspense>
@@ -1788,12 +1786,12 @@ describe('ReactInteractionTracing', () => {
1786
<React.unstable_TracingMarker name="one">
1787
{!deleteOne ? (
1788
<Suspense
1791
- unstable_name="suspense one"
1789
+ name="suspense one"
1790
fallback={<Text text="Loading One..." />}>
1791
<AsyncText text="Page One" />
1792
<React.unstable_TracingMarker name="page one" />
1793
<Suspense
1796
- unstable_name="suspense child"
1794
+ name="suspense child"
1795
fallback={<Text text="Loading Child..." />}>
1796
<React.unstable_TracingMarker name="child" />
1797
<AsyncText text="Child" />
@@ -1803,7 +1801,7 @@ describe('ReactInteractionTracing', () => {
1801
</React.unstable_TracingMarker>
1802
<React.unstable_TracingMarker name="two">
1803
<Suspense
1806
- unstable_name="suspense two"
1804
+ name="suspense two"
1805
fallback={<Text text="Loading Two..." />}>
1806
<AsyncText text="Page Two" />
1807
</Suspense>
@@ -1948,11 +1946,11 @@ describe('ReactInteractionTracing', () => {
1946
return (
1947
<React.unstable_TracingMarker name="parent">
1948
{show ? (
1951
- <Suspense unstable_name="appended child">
1949
+ <Suspense name="appended child">
1950
<AsyncText text="Appended child" />
1951
</Suspense>
1952
) : null}
1955
- <Suspense unstable_name="child">
1953
+ <Suspense name="child">
1954
<AsyncText text="Child" />
1955
</Suspense>
1956
</React.unstable_TracingMarker>
@@ -2068,13 +2066,13 @@ describe('ReactInteractionTracing', () => {
2066
{show ? (
2067
<React.unstable_TracingMarker name="appended child">
2068
{showSuspense ? (
2071
- <Suspense unstable_name="appended child">
2069
+ <Suspense name="appended child">
2070
<AsyncText text="Appended child" />
2071
</Suspense>
2072
) : null}
2073
</React.unstable_TracingMarker>
2074
) : null}
2077
- <Suspense unstable_name="child">
2075
+ <Suspense name="child">
2076
<AsyncText text="Child" />
2077
</Suspense>
2078
</React.unstable_TracingMarker>
@@ -2349,9 +2347,7 @@ describe('ReactInteractionTracing', () => {
2347
2348
function App() {
2349
return (
2352
- <Suspense
2353
- fallback={<Text text="Loading..." />}
2354
- unstable_name="suspense page">
2350
+ <Suspense fallback={<Text text="Loading..." />} name="suspense page">
2351
<AsyncText text="Page Two" />
2352
</Suspense>
2353
);
@@ -2416,12 +2412,10 @@ describe('ReactInteractionTracing', () => {
2412
});
2413
return (
2414
<>
2419
- <Suspense unstable_name="one" fallback={<Text text="Loading..." />}>
2415
+ <Suspense name="one" fallback={<Text text="Loading..." />}>
2416
<AsyncText text="Text" />
2417
</Suspense>
2422
- <Suspense
2423
- unstable_name="two"
2424
- fallback={<Text text="Loading Two..." />}>
2418
+ <Suspense name="two" fallback={<Text text="Loading Two..." />}>
2419
<AsyncText text="Text Two" />
2420
</Suspense>
2421
</>
@@ -2490,9 +2484,7 @@ describe('ReactInteractionTracing', () => {
2484
function App({name}) {
2485
return (
2486
<>
2493
- <Suspense
2494
- unstable_name={name}
2495
- fallback={<Text text={`Loading ${name}...`} />}>
2487
+ <Suspense name={name} fallback={<Text text={`Loading ${name}...`} />}>
2488
<AsyncText text={`Text ${name}`} />
2489
</Suspense>
2490
</>
packages/shared/ReactTypes.js
+1
-1
@@ -278,7 +278,7 @@ export type SuspenseProps = {
278
279
unstable_avoidThisFallback?: boolean,
280
unstable_expectedLoadTime?: number,
281
- unstable_name?: string,
281
+ name?: string,
282
};
283
284
export type TracingMarkerProps = {