From 693803a9bb3073b2ff5c99f8ae804f855db9aae2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Thu, 24 Apr 2025 16:53:34 -0400
Subject: [PATCH] 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.
---
 .../src/ReactFiberCommitWork.js               |  6 +-
 .../__tests__/ReactTransitionTracing-test.js  | 72 +++++++++----------
 packages/shared/ReactTypes.js                 |  2 +-
 3 files changed, 36 insertions(+), 44 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.js b/packages/react-reconciler/src/ReactFiberCommitWork.js
index 19be377e10..3fb346d4d2 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.js
@@ -1062,9 +1062,9 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
     if (
       parent !== null &&
       parent.tag === SuspenseComponent &&
-      parent.memoizedProps.unstable_name
+      parent.memoizedProps.name
     ) {
-      name = parent.memoizedProps.unstable_name;
+      name = parent.memoizedProps.name;
     }
 
     if (!wasHidden && isHidden) {
@@ -4952,7 +4952,7 @@ function commitPassiveUnmountInsideDeletedTreeOnFiber(
         if (transitions !== null) {
           const abortReason = {
             reason: 'suspense',
-            name: current.memoizedProps.unstable_name || null,
+            name: current.memoizedProps.name || null,
           };
           if (
             current.memoizedState === null ||
diff --git a/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js b/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
index 64d51a1ff3..772eb98710 100644
--- a/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
@@ -412,7 +412,7 @@ describe('ReactInteractionTracing', () => {
           {navigate ? (
             <Suspense
               fallback={<Text text="Loading..." />}
-              unstable_name="suspense page">
+              name="suspense page">
               <AsyncText text="Page Two" />
             </Suspense>
           ) : (
@@ -498,14 +498,14 @@ describe('ReactInteractionTracing', () => {
             <>
               {showText ? (
                 <Suspense
-                  unstable_name="show text"
+                  name="show text"
                   fallback={<Text text="Show Text Loading..." />}>
                   <AsyncText text="Show Text" />
                 </Suspense>
               ) : null}
               <Suspense
                 fallback={<Text text="Loading..." />}
-                unstable_name="suspense page">
+                name="suspense page">
                 <AsyncText text="Page Two" />
               </Suspense>
             </>
@@ -605,14 +605,14 @@ describe('ReactInteractionTracing', () => {
             <>
               {showText ? (
                 <Suspense
-                  unstable_name="show text"
+                  name="show text"
                   fallback={<Text text="Show Text Loading..." />}>
                   <AsyncText text="Show Text" />
                 </Suspense>
               ) : null}
               <Suspense
                 fallback={<Text text="Loading..." />}
-                unstable_name="suspense page">
+                name="suspense page">
                 <AsyncText text="Page Two" />
               </Suspense>
             </>
@@ -719,16 +719,16 @@ describe('ReactInteractionTracing', () => {
             <>
               <Suspense
                 fallback={<Text text="Loading..." />}
-                unstable_name="suspense page">
+                name="suspense page">
                 <AsyncText text="Page Two" />
                 <Suspense
-                  unstable_name="show text one"
+                  name="show text one"
                   fallback={<Text text="Show Text One Loading..." />}>
                   <AsyncText text="Show Text One" />
                 </Suspense>
                 <div>
                   <Suspense
-                    unstable_name="show text two"
+                    name="show text two"
                     fallback={<Text text="Show Text Two Loading..." />}>
                     <AsyncText text="Show Text Two" />
                   </Suspense>
@@ -848,12 +848,12 @@ describe('ReactInteractionTracing', () => {
             <>
               <Suspense
                 fallback={<Text text="Loading..." />}
-                unstable_name="suspense page">
+                name="suspense page">
                 <AsyncText text="Page Two" />
                 {/* showTextOne is entangled with navigate */}
                 {showTextOne ? (
                   <Suspense
-                    unstable_name="show text one"
+                    name="show text one"
                     fallback={<Text text="Show Text One Loading..." />}>
                     <AsyncText text="Show Text One" />
                   </Suspense>
@@ -865,7 +865,7 @@ describe('ReactInteractionTracing', () => {
                  from completing */}
                 {showTextTwo ? (
                   <Suspense
-                    unstable_name="show text two"
+                    name="show text two"
                     fallback={<Text text="Show Text Two Loading..." />}>
                     <AsyncText text="Show Text Two" />
                   </Suspense>
@@ -1115,13 +1115,13 @@ describe('ReactInteractionTracing', () => {
           {navigate ? (
             <Suspense
               fallback={<Text text="Loading..." />}
-              unstable_name="suspense page">
+              name="suspense page">
               <AsyncText text="Page Two" />
               <React.unstable_TracingMarker name="sync marker" />
               <React.unstable_TracingMarker name="async marker">
                 <Suspense
                   fallback={<Text text="Loading..." />}
-                  unstable_name="marker suspense">
+                  name="marker suspense">
                   <AsyncText text="Marker Text" />
                 </Suspense>
               </React.unstable_TracingMarker>
@@ -1226,20 +1226,18 @@ describe('ReactInteractionTracing', () => {
         <div>
           {navigate ? (
             <React.unstable_TracingMarker name="outer marker">
-              <Suspense
-                fallback={<Text text="Outer..." />}
-                unstable_name="outer">
+              <Suspense fallback={<Text text="Outer..." />} name="outer">
                 <AsyncText text="Outer Text" />
                 <Suspense
                   fallback={<Text text="Inner One..." />}
-                  unstable_name="inner one">
+                  name="inner one">
                   <React.unstable_TracingMarker name="marker one">
                     <AsyncText text="Inner Text One" />
                   </React.unstable_TracingMarker>
                 </Suspense>
                 <Suspense
                   fallback={<Text text="Inner Two..." />}
-                  unstable_name="inner two">
+                  name="inner two">
                   <React.unstable_TracingMarker name="marker two">
                     <AsyncText text="Inner Text Two" />
                   </React.unstable_TracingMarker>
@@ -1488,21 +1486,21 @@ describe('ReactInteractionTracing', () => {
               {showMarker ? (
                 <React.unstable_TracingMarker name="marker one">
                   <Suspense
-                    unstable_name="suspense page"
+                    name="suspense page"
                     fallback={<Text text="Loading..." />}>
                     <AsyncText text="Page Two" />
                   </Suspense>
                 </React.unstable_TracingMarker>
               ) : (
                 <Suspense
-                  unstable_name="suspense page"
+                  name="suspense page"
                   fallback={<Text text="Loading..." />}>
                   <AsyncText text="Page Two" />
                 </Suspense>
               )}
               <React.unstable_TracingMarker name="sibling">
                 <Suspense
-                  unstable_name="suspense sibling"
+                  name="suspense sibling"
                   fallback={<Text text="Sibling Loading..." />}>
                   <AsyncText text="Sibling Text" />
                 </Suspense>
@@ -1652,7 +1650,7 @@ describe('ReactInteractionTracing', () => {
                 <div>
                   <React.unstable_TracingMarker name="one">
                     <Suspense
-                      unstable_name="suspense one"
+                      name="suspense one"
                       fallback={<Text text="Loading One..." />}>
                       <AsyncText text="Page One" />
                     </Suspense>
@@ -1661,7 +1659,7 @@ describe('ReactInteractionTracing', () => {
               ) : null}
               <React.unstable_TracingMarker name="two">
                 <Suspense
-                  unstable_name="suspense two"
+                  name="suspense two"
                   fallback={<Text text="Loading Two..." />}>
                   <AsyncText text="Page Two" />
                 </Suspense>
@@ -1788,12 +1786,12 @@ describe('ReactInteractionTracing', () => {
               <React.unstable_TracingMarker name="one">
                 {!deleteOne ? (
                   <Suspense
-                    unstable_name="suspense one"
+                    name="suspense one"
                     fallback={<Text text="Loading One..." />}>
                     <AsyncText text="Page One" />
                     <React.unstable_TracingMarker name="page one" />
                     <Suspense
-                      unstable_name="suspense child"
+                      name="suspense child"
                       fallback={<Text text="Loading Child..." />}>
                       <React.unstable_TracingMarker name="child" />
                       <AsyncText text="Child" />
@@ -1803,7 +1801,7 @@ describe('ReactInteractionTracing', () => {
               </React.unstable_TracingMarker>
               <React.unstable_TracingMarker name="two">
                 <Suspense
-                  unstable_name="suspense two"
+                  name="suspense two"
                   fallback={<Text text="Loading Two..." />}>
                   <AsyncText text="Page Two" />
                 </Suspense>
@@ -1948,11 +1946,11 @@ describe('ReactInteractionTracing', () => {
       return (
         <React.unstable_TracingMarker name="parent">
           {show ? (
-            <Suspense unstable_name="appended child">
+            <Suspense name="appended child">
               <AsyncText text="Appended child" />
             </Suspense>
           ) : null}
-          <Suspense unstable_name="child">
+          <Suspense name="child">
             <AsyncText text="Child" />
           </Suspense>
         </React.unstable_TracingMarker>
@@ -2068,13 +2066,13 @@ describe('ReactInteractionTracing', () => {
           {show ? (
             <React.unstable_TracingMarker name="appended child">
               {showSuspense ? (
-                <Suspense unstable_name="appended child">
+                <Suspense name="appended child">
                   <AsyncText text="Appended child" />
                 </Suspense>
               ) : null}
             </React.unstable_TracingMarker>
           ) : null}
-          <Suspense unstable_name="child">
+          <Suspense name="child">
             <AsyncText text="Child" />
           </Suspense>
         </React.unstable_TracingMarker>
@@ -2349,9 +2347,7 @@ describe('ReactInteractionTracing', () => {
 
     function App() {
       return (
-        <Suspense
-          fallback={<Text text="Loading..." />}
-          unstable_name="suspense page">
+        <Suspense fallback={<Text text="Loading..." />} name="suspense page">
           <AsyncText text="Page Two" />
         </Suspense>
       );
@@ -2416,12 +2412,10 @@ describe('ReactInteractionTracing', () => {
       });
       return (
         <>
-          <Suspense unstable_name="one" fallback={<Text text="Loading..." />}>
+          <Suspense name="one" fallback={<Text text="Loading..." />}>
             <AsyncText text="Text" />
           </Suspense>
-          <Suspense
-            unstable_name="two"
-            fallback={<Text text="Loading Two..." />}>
+          <Suspense name="two" fallback={<Text text="Loading Two..." />}>
             <AsyncText text="Text Two" />
           </Suspense>
         </>
@@ -2490,9 +2484,7 @@ describe('ReactInteractionTracing', () => {
     function App({name}) {
       return (
         <>
-          <Suspense
-            unstable_name={name}
-            fallback={<Text text={`Loading ${name}...`} />}>
+          <Suspense name={name} fallback={<Text text={`Loading ${name}...`} />}>
             <AsyncText text={`Text ${name}`} />
           </Suspense>
         </>
diff --git a/packages/shared/ReactTypes.js b/packages/shared/ReactTypes.js
index c439f1fb4a..e199fa9e7b 100644
--- a/packages/shared/ReactTypes.js
+++ b/packages/shared/ReactTypes.js
@@ -278,7 +278,7 @@ export type SuspenseProps = {
 
   unstable_avoidThisFallback?: boolean,
   unstable_expectedLoadTime?: number,
-  unstable_name?: string,
+  name?: string,
 };
 
 export type TracingMarkerProps = {