suspense boundary deleted

facebook · Aug 9, 2022 · 1fc184d · 1fc184d
1 parent a4647fa
commit 1fc184d
Show file tree

Hide file tree

Showing 4 changed files with 445 additions and 13 deletions.
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -2087,13 +2087,26 @@ function commitDeletionEffectsOnFiber(
         if (enableTransitionTracing) {
           // We need to mark this fiber's parents as deleted
           const instance: OffscreenInstance = deletedFiber.stateNode;
-          const markers = instance.pendingMarkers;
-          if (markers !== null) {
-            markers.forEach(marker => {
-              if (marker.pendingBoundaries.has(instance)) {
-                marker.pendingBoundaries.delete(instance);
-              }
-            });
+          const transitions = instance.transitions;
+          if (transitions !== null) {
+            let name = null;
+            const parent = deletedFiber.return;
+            if (
+              parent !== null &&
+              parent.tag === SuspenseComponent &&
+              parent.memoizedProps.unstable_name
+            ) {
+              name = parent.memoizedProps.unstable_name;
+            }
+
+            recursivelyAbortParentMarkerTransitions(
+              deletedFiber,
+              nearestMountedAncestor,
+              {
+                type: 'suspense',
+                name,
+              },
+            );
           }
         }
 

diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
@@ -169,6 +169,13 @@ function getFilteredDeletion(deletion: TransitionDeletion, endTime: number) {
         endTime,
       };
     }
+    case 'suspense': {
+      return {
+        type: deletion.type,
+        name: deletion.name,
+        endTime,
+      };
+    }
     default: {
       return null;
     }

diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -291,7 +291,7 @@ export type TransitionTracingCallbacks = {
     startTime: number,
     deletions: Array<{
       type: string,
-      name?: string,
+      name?: string | null,
       endTime: number,
     }>,
   ) => void,
@@ -313,7 +313,7 @@ export type TransitionTracingCallbacks = {
     startTime: number,
     deletions: Array<{
       type: string,
-      name?: string,
+      name?: string | null,
       endTime: number,
     }>,
   ) => void,