Skip to content

Commit 693803a

Browse files
sebmarkbagesebmarkbage
authored
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.
1 parent 24dfad3 commit 693803a

File tree

3 files changed

+36
-44
lines changed

3 files changed

+36
-44
lines changed

‎packages/react-reconciler/src/ReactFiberCommitWork.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1062,9 +1062,9 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
10621062
if (
10631063
parent !== null &&
10641064
parent.tag === SuspenseComponent &&
1065-
parent.memoizedProps.unstable_name
1065+
parent.memoizedProps.name
10661066
) {
1067-
name = parent.memoizedProps.unstable_name;
1067+
name = parent.memoizedProps.name;
10681068
}
10691069

10701070
if (!wasHidden && isHidden) {
@@ -4952,7 +4952,7 @@ function commitPassiveUnmountInsideDeletedTreeOnFiber(
49524952
if (transitions !== null) {
49534953
const abortReason = {
49544954
reason: 'suspense',
4955-
name: current.memoizedProps.unstable_name || null,
4955+
name: current.memoizedProps.name || null,
49564956
};
49574957
if (
49584958
current.memoizedState === null ||

‎packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js‎

Lines changed: 32 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -412,7 +412,7 @@ describe('ReactInteractionTracing', () => {
412412
{navigate ? (
413413
<Suspense
414414
fallback={<Text text="Loading..." />}
415-
unstable_name="suspense page">
415+
name="suspense page">
416416
<AsyncText text="Page Two" />
417417
</Suspense>
418418
) : (
@@ -498,14 +498,14 @@ describe('ReactInteractionTracing', () => {
498498
<>
499499
{showText ? (
500500
<Suspense
501-
unstable_name="show text"
501+
name="show text"
502502
fallback={<Text text="Show Text Loading..." />}>
503503
<AsyncText text="Show Text" />
504504
</Suspense>
505505
) : null}
506506
<Suspense
507507
fallback={<Text text="Loading..." />}
508-
unstable_name="suspense page">
508+
name="suspense page">
509509
<AsyncText text="Page Two" />
510510
</Suspense>
511511
</>
@@ -605,14 +605,14 @@ describe('ReactInteractionTracing', () => {
605605
<>
606606
{showText ? (
607607
<Suspense
608-
unstable_name="show text"
608+
name="show text"
609609
fallback={<Text text="Show Text Loading..." />}>
610610
<AsyncText text="Show Text" />
611611
</Suspense>
612612
) : null}
613613
<Suspense
614614
fallback={<Text text="Loading..." />}
615-
unstable_name="suspense page">
615+
name="suspense page">
616616
<AsyncText text="Page Two" />
617617
</Suspense>
618618
</>
@@ -719,16 +719,16 @@ describe('ReactInteractionTracing', () => {
719719
<>
720720
<Suspense
721721
fallback={<Text text="Loading..." />}
722-
unstable_name="suspense page">
722+
name="suspense page">
723723
<AsyncText text="Page Two" />
724724
<Suspense
725-
unstable_name="show text one"
725+
name="show text one"
726726
fallback={<Text text="Show Text One Loading..." />}>
727727
<AsyncText text="Show Text One" />
728728
</Suspense>
729729
<div>
730730
<Suspense
731-
unstable_name="show text two"
731+
name="show text two"
732732
fallback={<Text text="Show Text Two Loading..." />}>
733733
<AsyncText text="Show Text Two" />
734734
</Suspense>
@@ -848,12 +848,12 @@ describe('ReactInteractionTracing', () => {
848848
<>
849849
<Suspense
850850
fallback={<Text text="Loading..." />}
851-
unstable_name="suspense page">
851+
name="suspense page">
852852
<AsyncText text="Page Two" />
853853
{/* showTextOne is entangled with navigate */}
854854
{showTextOne ? (
855855
<Suspense
856-
unstable_name="show text one"
856+
name="show text one"
857857
fallback={<Text text="Show Text One Loading..." />}>
858858
<AsyncText text="Show Text One" />
859859
</Suspense>
@@ -865,7 +865,7 @@ describe('ReactInteractionTracing', () => {
865865
from completing */}
866866
{showTextTwo ? (
867867
<Suspense
868-
unstable_name="show text two"
868+
name="show text two"
869869
fallback={<Text text="Show Text Two Loading..." />}>
870870
<AsyncText text="Show Text Two" />
871871
</Suspense>
@@ -1115,13 +1115,13 @@ describe('ReactInteractionTracing', () => {
11151115
{navigate ? (
11161116
<Suspense
11171117
fallback={<Text text="Loading..." />}
1118-
unstable_name="suspense page">
1118+
name="suspense page">
11191119
<AsyncText text="Page Two" />
11201120
<React.unstable_TracingMarker name="sync marker" />
11211121
<React.unstable_TracingMarker name="async marker">
11221122
<Suspense
11231123
fallback={<Text text="Loading..." />}
1124-
unstable_name="marker suspense">
1124+
name="marker suspense">
11251125
<AsyncText text="Marker Text" />
11261126
</Suspense>
11271127
</React.unstable_TracingMarker>
@@ -1226,20 +1226,18 @@ describe('ReactInteractionTracing', () => {
12261226
<div>
12271227
{navigate ? (
12281228
<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">
12321230
<AsyncText text="Outer Text" />
12331231
<Suspense
12341232
fallback={<Text text="Inner One..." />}
1235-
unstable_name="inner one">
1233+
name="inner one">
12361234
<React.unstable_TracingMarker name="marker one">
12371235
<AsyncText text="Inner Text One" />
12381236
</React.unstable_TracingMarker>
12391237
</Suspense>
12401238
<Suspense
12411239
fallback={<Text text="Inner Two..." />}
1242-
unstable_name="inner two">
1240+
name="inner two">
12431241
<React.unstable_TracingMarker name="marker two">
12441242
<AsyncText text="Inner Text Two" />
12451243
</React.unstable_TracingMarker>
@@ -1488,21 +1486,21 @@ describe('ReactInteractionTracing', () => {
14881486
{showMarker ? (
14891487
<React.unstable_TracingMarker name="marker one">
14901488
<Suspense
1491-
unstable_name="suspense page"
1489+
name="suspense page"
14921490
fallback={<Text text="Loading..." />}>
14931491
<AsyncText text="Page Two" />
14941492
</Suspense>
14951493
</React.unstable_TracingMarker>
14961494
) : (
14971495
<Suspense
1498-
unstable_name="suspense page"
1496+
name="suspense page"
14991497
fallback={<Text text="Loading..." />}>
15001498
<AsyncText text="Page Two" />
15011499
</Suspense>
15021500
)}
15031501
<React.unstable_TracingMarker name="sibling">
15041502
<Suspense
1505-
unstable_name="suspense sibling"
1503+
name="suspense sibling"
15061504
fallback={<Text text="Sibling Loading..." />}>
15071505
<AsyncText text="Sibling Text" />
15081506
</Suspense>
@@ -1652,7 +1650,7 @@ describe('ReactInteractionTracing', () => {
16521650
<div>
16531651
<React.unstable_TracingMarker name="one">
16541652
<Suspense
1655-
unstable_name="suspense one"
1653+
name="suspense one"
16561654
fallback={<Text text="Loading One..." />}>
16571655
<AsyncText text="Page One" />
16581656
</Suspense>
@@ -1661,7 +1659,7 @@ describe('ReactInteractionTracing', () => {
16611659
) : null}
16621660
<React.unstable_TracingMarker name="two">
16631661
<Suspense
1664-
unstable_name="suspense two"
1662+
name="suspense two"
16651663
fallback={<Text text="Loading Two..." />}>
16661664
<AsyncText text="Page Two" />
16671665
</Suspense>
@@ -1788,12 +1786,12 @@ describe('ReactInteractionTracing', () => {
17881786
<React.unstable_TracingMarker name="one">
17891787
{!deleteOne ? (
17901788
<Suspense
1791-
unstable_name="suspense one"
1789+
name="suspense one"
17921790
fallback={<Text text="Loading One..." />}>
17931791
<AsyncText text="Page One" />
17941792
<React.unstable_TracingMarker name="page one" />
17951793
<Suspense
1796-
unstable_name="suspense child"
1794+
name="suspense child"
17971795
fallback={<Text text="Loading Child..." />}>
17981796
<React.unstable_TracingMarker name="child" />
17991797
<AsyncText text="Child" />
@@ -1803,7 +1801,7 @@ describe('ReactInteractionTracing', () => {
18031801
</React.unstable_TracingMarker>
18041802
<React.unstable_TracingMarker name="two">
18051803
<Suspense
1806-
unstable_name="suspense two"
1804+
name="suspense two"
18071805
fallback={<Text text="Loading Two..." />}>
18081806
<AsyncText text="Page Two" />
18091807
</Suspense>
@@ -1948,11 +1946,11 @@ describe('ReactInteractionTracing', () => {
19481946
return (
19491947
<React.unstable_TracingMarker name="parent">
19501948
{show ? (
1951-
<Suspense unstable_name="appended child">
1949+
<Suspense name="appended child">
19521950
<AsyncText text="Appended child" />
19531951
</Suspense>
19541952
) : null}
1955-
<Suspense unstable_name="child">
1953+
<Suspense name="child">
19561954
<AsyncText text="Child" />
19571955
</Suspense>
19581956
</React.unstable_TracingMarker>
@@ -2068,13 +2066,13 @@ describe('ReactInteractionTracing', () => {
20682066
{show ? (
20692067
<React.unstable_TracingMarker name="appended child">
20702068
{showSuspense ? (
2071-
<Suspense unstable_name="appended child">
2069+
<Suspense name="appended child">
20722070
<AsyncText text="Appended child" />
20732071
</Suspense>
20742072
) : null}
20752073
</React.unstable_TracingMarker>
20762074
) : null}
2077-
<Suspense unstable_name="child">
2075+
<Suspense name="child">
20782076
<AsyncText text="Child" />
20792077
</Suspense>
20802078
</React.unstable_TracingMarker>
@@ -2349,9 +2347,7 @@ describe('ReactInteractionTracing', () => {
23492347

23502348
function App() {
23512349
return (
2352-
<Suspense
2353-
fallback={<Text text="Loading..." />}
2354-
unstable_name="suspense page">
2350+
<Suspense fallback={<Text text="Loading..." />} name="suspense page">
23552351
<AsyncText text="Page Two" />
23562352
</Suspense>
23572353
);
@@ -2416,12 +2412,10 @@ describe('ReactInteractionTracing', () => {
24162412
});
24172413
return (
24182414
<>
2419-
<Suspense unstable_name="one" fallback={<Text text="Loading..." />}>
2415+
<Suspense name="one" fallback={<Text text="Loading..." />}>
24202416
<AsyncText text="Text" />
24212417
</Suspense>
2422-
<Suspense
2423-
unstable_name="two"
2424-
fallback={<Text text="Loading Two..." />}>
2418+
<Suspense name="two" fallback={<Text text="Loading Two..." />}>
24252419
<AsyncText text="Text Two" />
24262420
</Suspense>
24272421
</>
@@ -2490,9 +2484,7 @@ describe('ReactInteractionTracing', () => {
24902484
function App({name}) {
24912485
return (
24922486
<>
2493-
<Suspense
2494-
unstable_name={name}
2495-
fallback={<Text text={`Loading ${name}...`} />}>
2487+
<Suspense name={name} fallback={<Text text={`Loading ${name}...`} />}>
24962488
<AsyncText text={`Text ${name}`} />
24972489
</Suspense>
24982490
</>

‎packages/shared/ReactTypes.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -278,7 +278,7 @@ export type SuspenseProps = {
278278

279279
unstable_avoidThisFallback?: boolean,
280280
unstable_expectedLoadTime?: number,
281-
unstable_name?: string,
281+
name?: string,
282282
};
283283

284284
export type TracingMarkerProps = {

0 commit comments

Comments
 (0)