[Transition Tracing] onMarkerIncomplete - Tracing Marker/Suspense Bou…

…ndary Deletions (#24885) This PR adds the `onMarkerIncomplete` callback for tracing marker name changes. Specifically, this PR: * Adds the `onMarkerIncomplete` callback * When a tracing marker is deleted, call `onMarkerIncomplete` with the `name` of the tracing marker for the tracing marker. * When a tracing marker/suspense boundary is deleted, call `onMarkerIncomplete` for every parent tracing marker with the `name` of the tracing marker that caused the transition to be incomplete. * Don't call `onTransitionComplete` or `onMarkerComplete` when `onMarkerIncomplete` is called for all tracing markers with the same transitions, but continue to call `onTransitionProgress`
facebook · Oct 5, 2022 · 1aaa7d1 · 1aaa7d1
1 parent 04b9fa8
commit 1aaa7d1
Show file tree

Hide file tree

Showing 14 changed files with 1,571 additions and 106 deletions.
diff --git a/packages/react-reconciler/src/ReactFiber.new.js b/packages/react-reconciler/src/ReactFiber.new.js
@@ -774,6 +774,8 @@ export function createFiberFromTracingMarker(
     tag: TransitionTracingMarker,
     transitions: null,
     pendingBoundaries: null,
+    aborts: null,
+    name: pendingProps.name,
   };
   fiber.stateNode = tracingMarkerInstance;
   return fiber;

diff --git a/packages/react-reconciler/src/ReactFiber.old.js b/packages/react-reconciler/src/ReactFiber.old.js
@@ -774,6 +774,8 @@ export function createFiberFromTracingMarker(
     tag: TransitionTracingMarker,
     transitions: null,
     pendingBoundaries: null,
+    aborts: null,
+    name: pendingProps.name,
   };
   fiber.stateNode = tracingMarkerInstance;
   return fiber;

diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -89,6 +89,7 @@ import {
   StaticMask,
   ShouldCapture,
   ForceClientRender,
+  Passive,
 } from './ReactFiberFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {
@@ -979,10 +980,17 @@ function updateTracingMarkerComponent(
       const markerInstance: TracingMarkerInstance = {
         tag: TransitionTracingMarker,
         transitions: new Set(currentTransitions),
-        pendingBoundaries: new Map(),
+        pendingBoundaries: null,
         name: workInProgress.pendingProps.name,
+        aborts: null,
       };
       workInProgress.stateNode = markerInstance;
+
+      // We call the marker complete callback when all child suspense boundaries resolve.
+      // We do this in the commit phase on Offscreen. If the marker has no child suspense
+      // boundaries, we need to schedule a passive effect to make sure we call the marker
+      // complete callback.
+      workInProgress.flags |= Passive;
     }
   } else {
     if (__DEV__) {

diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -89,6 +89,7 @@ import {
   StaticMask,
   ShouldCapture,
   ForceClientRender,
+  Passive,
 } from './ReactFiberFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {
@@ -979,10 +980,17 @@ function updateTracingMarkerComponent(
       const markerInstance: TracingMarkerInstance = {
         tag: TransitionTracingMarker,
         transitions: new Set(currentTransitions),
-        pendingBoundaries: new Map(),
+        pendingBoundaries: null,
         name: workInProgress.pendingProps.name,
+        aborts: null,
       };
       workInProgress.stateNode = markerInstance;
+
+      // We call the marker complete callback when all child suspense boundaries resolve.
+      // We do this in the commit phase on Offscreen. If the marker has no child suspense
+      // boundaries, we need to schedule a passive effect to make sure we call the marker
+      // complete callback.
+      workInProgress.flags |= Passive;
     }
   } else {
     if (__DEV__) {