From eb544767b9e3f42febeaefbe0a820151ec1340f6 Mon Sep 17 00:00:00 2001
From: Luna <lunaris.ruan@gmail.com>
Date: Fri, 5 Aug 2022 13:10:11 -0400
Subject: [PATCH 1/5] transition tracing delete tracing marker

---
 .../react-reconciler/src/ReactFiber.new.js    |   2 +
 .../src/ReactFiberBeginWork.new.js            |   1 +
 .../src/ReactFiberCommitWork.new.js           | 155 ++++++-
 .../ReactFiberTracingMarkerComponent.new.js   |  62 ++-
 .../src/ReactFiberWorkLoop.new.js             |  36 +-
 .../src/ReactInternalTypes.js                 |   2 -
 .../__tests__/ReactTransitionTracing-test.js  | 427 ++++++++++++++++++
 7 files changed, 675 insertions(+), 10 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiber.new.js b/packages/react-reconciler/src/ReactFiber.new.js
index fc2d03109fd2b..d6a6c8f7adc19 100644
--- 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/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 61edb46d32f2a..b62c3b042174e 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -981,6 +981,7 @@ function updateTracingMarkerComponent(
         transitions: new Set(currentTransitions),
         pendingBoundaries: new Map(),
         name: workInProgress.pendingProps.name,
+        aborts: null,
       };
       workInProgress.stateNode = markerInstance;
     }
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index eb696d06eb4af..190c4719aa18d 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -30,7 +30,11 @@ import type {
 import type {HookFlags} from './ReactHookEffectTags';
 import type {Cache} from './ReactFiberCacheComponent.new';
 import type {RootState} from './ReactFiberRoot.new';
-import type {Transition} from './ReactFiberTracingMarkerComponent.new';
+import type {
+  Transition,
+  TracingMarkerInstance,
+  TransitionAbort,
+} from './ReactFiberTracingMarkerComponent.new';
 
 import {
   enableCreateEventHandleAPI,
@@ -146,6 +150,7 @@ import {
   addTransitionProgressCallbackToPendingTransition,
   addTransitionCompleteCallbackToPendingTransition,
   addMarkerProgressCallbackToPendingTransition,
+  addMarkerIncompleteCallbackToPendingTransition,
   addMarkerCompleteCallbackToPendingTransition,
   setIsRunningInsertionEffect,
 } from './ReactFiberWorkLoop.new';
@@ -1135,6 +1140,101 @@ function commitLayoutEffectOnFiber(
   }
 }
 
+function abortParentMarkerTransitions(
+  deletedFiber: Fiber,
+  nearestMountedAncestor: Fiber,
+  abort: TransitionAbort,
+) {
+  const deletedFiberInstance: OffscreenInstance = deletedFiber.stateNode;
+
+  let fiber = deletedFiber;
+  let isInDeletedTree = true;
+  while (fiber !== null) {
+    switch (fiber.tag) {
+      case TracingMarkerComponent:
+        const transitions = deletedFiberInstance.transitions;
+
+        const markerInstance = fiber.stateNode;
+        const markerTransitions = markerInstance.transitions;
+        if (markerTransitions !== null && transitions !== null) {
+          let abortMarker = false;
+          transitions.forEach(transition => {
+            if (markerTransitions.has(transition)) {
+              abortMarker = true;
+            }
+          });
+
+          if (abortMarker) {
+            if (markerInstance.aborts === null) {
+              markerInstance.aborts = new Set();
+            }
+
+            markerInstance.aborts.add(abort);
+            addMarkerIncompleteCallbackToPendingTransition(
+              fiber.memoizedProps.name,
+              transitions,
+              markerInstance.aborts,
+            );
+
+            // We only want to call onTransitionProgress when the marker hasn't been
+            // deleted
+            if (
+              !isInDeletedTree &&
+              markerInstance.pendingBoundaries !== null &&
+              markerInstance.pendingBoundaries.has(deletedFiberInstance)
+            ) {
+              markerInstance.pendingBoundaries.delete(deletedFiberInstance);
+
+              addMarkerProgressCallbackToPendingTransition(
+                fiber.memoizedProps.name,
+                transitions,
+                markerInstance.pendingBoundaries,
+              );
+            }
+          }
+        }
+        break;
+      case HostRoot:
+        const root = fiber.stateNode;
+        const incompleteTransitions = root.incompleteTransitions;
+
+        if (deletedFiberInstance.transitions !== null) {
+          deletedFiberInstance.transitions.forEach(transition => {
+            if (incompleteTransitions.has(transition)) {
+              const transitionInstance = incompleteTransitions.get(transition);
+              if (transitionInstance.aborts === null) {
+                transitionInstance.aborts = [];
+              }
+              transitionInstance.aborts.push(abort);
+
+              if (
+                transitionInstance.pendingBoundaries !== null &&
+                transitionInstance.pendingBoundaries.has(deletedFiberInstance)
+              ) {
+                transitionInstance.pendingBoundaries.delete(
+                  deletedFiberInstance,
+                );
+              }
+            }
+          });
+        }
+        break;
+      default:
+        break;
+    }
+
+    if (
+      nearestMountedAncestor.deletions !== null &&
+      nearestMountedAncestor.deletions.includes(fiber)
+    ) {
+      isInDeletedTree = false;
+      fiber = nearestMountedAncestor;
+    } else {
+      fiber = fiber.return;
+    }
+  }
+}
+
 function commitTransitionProgress(offscreenFiber: Fiber) {
   if (enableTransitionTracing) {
     // This function adds suspense boundaries to the root
@@ -1996,6 +2096,20 @@ function commitDeletionEffectsOnFiber(
         const prevOffscreenSubtreeWasHidden = offscreenSubtreeWasHidden;
         offscreenSubtreeWasHidden =
           prevOffscreenSubtreeWasHidden || deletedFiber.memoizedState !== null;
+
+        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);
+              }
+            });
+          }
+        }
+
         recursivelyTraverseDeletionEffects(
           finishedRoot,
           nearestMountedAncestor,
@@ -2011,6 +2125,30 @@ function commitDeletionEffectsOnFiber(
       }
       break;
     }
+    case TracingMarkerComponent: {
+      if (enableTransitionTracing) {
+        // We need to mark this fiber's parents as deleted
+        const instance: TracingMarkerInstance = deletedFiber.stateNode;
+        const transitions = instance.transitions;
+        if (transitions !== null) {
+          const abort = {
+            reason: 'marker',
+            name: deletedFiber.memoizedProps.name,
+          };
+          abortParentMarkerTransitions(
+            deletedFiber,
+            nearestMountedAncestor,
+            abort,
+          );
+        }
+      }
+      recursivelyTraverseDeletionEffects(
+        finishedRoot,
+        nearestMountedAncestor,
+        deletedFiber,
+      );
+      return;
+    }
     default: {
       recursivelyTraverseDeletionEffects(
         finishedRoot,
@@ -2986,6 +3124,11 @@ function commitOffscreenPassiveMountEffects(
     }
 
     commitTransitionProgress(finishedWork);
+
+    if (!isHidden) {
+      instance.transitions = null;
+      instance.pendingMarkers = null;
+    }
   }
 }
 
@@ -3022,14 +3165,16 @@ function commitTracingMarkerPassiveMountEffect(finishedWork: Fiber) {
     (instance.pendingBoundaries === null ||
       instance.pendingBoundaries.size === 0)
   ) {
-    instance.transitions.forEach(transition => {
+    if (instance.aborts === null) {
       addMarkerCompleteCallbackToPendingTransition(
         finishedWork.memoizedProps.name,
         instance.transitions,
       );
-    });
+    }
     instance.transitions = null;
     instance.pendingBoundaries = null;
+    instance.aborts = null;
+    instance.name = null;
   }
 }
 
@@ -3145,7 +3290,9 @@ function commitPassiveMountOnFiber(
           incompleteTransitions.forEach((markerInstance, transition) => {
             const pendingBoundaries = markerInstance.pendingBoundaries;
             if (pendingBoundaries === null || pendingBoundaries.size === 0) {
-              addTransitionCompleteCallbackToPendingTransition(transition);
+              if (markerInstance.aborts === null) {
+                addTransitionCompleteCallbackToPendingTransition(transition);
+              }
               incompleteTransitions.delete(transition);
             }
           });
diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
index 31cc4c06841a4..13c366db050b1 100644
--- a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
@@ -21,7 +21,14 @@ export type PendingTransitionCallbacks = {
   transitionStart: Array<Transition> | null,
   transitionProgress: Map<Transition, PendingBoundaries> | null,
   transitionComplete: Array<Transition> | null,
-  markerProgress: Map<string, TracingMarkerInstance> | null,
+  markerProgress: Map<
+    string,
+    {pendingBoundaries: PendingBoundaries, transitions: Set<Transition>},
+  > | null,
+  markerIncomplete: Map<
+    string,
+    {aborts: Array<TransitionAbort>, transitions: Set<Transition>},
+  > | null,
   markerComplete: Map<string, Set<Transition>> | null,
 };
 
@@ -38,9 +45,15 @@ export type BatchConfigTransition = {
 
 export type TracingMarkerInstance = {|
   tag?: TracingMarkerTag,
-  pendingBoundaries: PendingBoundaries | null,
   transitions: Set<Transition> | null,
-  name?: string,
+  pendingBoundaries: PendingBoundaries | null,
+  aborts: Array<TransitionAbort> | null,
+  name: string | null,
+|};
+
+export type TransitionAbort = {|
+  reason: 'error' | 'unknown' | 'marker' | 'suspense',
+  name?: string | null,
 |};
 
 export const TransitionRoot = 0;
@@ -69,6 +82,7 @@ export function processTransitionCallbacks(
       if (onMarkerProgress != null && markerProgress !== null) {
         markerProgress.forEach((markerInstance, markerName) => {
           if (markerInstance.transitions !== null) {
+            // TODO: Clone the suspense object so users can't modify it
             const pending =
               markerInstance.pendingBoundaries !== null
                 ? Array.from(markerInstance.pendingBoundaries.values())
@@ -101,6 +115,31 @@ export function processTransitionCallbacks(
         });
       }
 
+      const markerIncomplete = pendingTransitions.markerIncomplete;
+      const onMarkerIncomplete = callbacks.onMarkerIncomplete;
+      if (onMarkerIncomplete != null && markerIncomplete !== null) {
+        markerIncomplete.forEach(({transitions, aborts}, markerName) => {
+          transitions.forEach(transition => {
+            const filteredAborts = [];
+            aborts.forEach(deletion => {
+              const filteredDeletion = getFilteredDeletion(deletion, endTime);
+              if (filteredDeletion !== null) {
+                filteredAborts.push(filteredDeletion);
+              }
+            });
+
+            if (filteredAborts.length > 0) {
+              onMarkerIncomplete(
+                transition.name,
+                markerName,
+                transition.startTime,
+                filteredAborts,
+              );
+            }
+          });
+        });
+      }
+
       const transitionProgress = pendingTransitions.transitionProgress;
       const onTransitionProgress = callbacks.onTransitionProgress;
       if (onTransitionProgress != null && transitionProgress !== null) {
@@ -125,6 +164,21 @@ export function processTransitionCallbacks(
   }
 }
 
+function getFilteredDeletion(abort: TransitionAbort, endTime: number) {
+  switch (abort.reason) {
+    case 'marker': {
+      return {
+        type: 'marker',
+        name: abort.name,
+        endTime,
+      };
+    }
+    default: {
+      return null;
+    }
+  }
+}
+
 // For every tracing marker, store a pointer to it. We will later access it
 // to get the set of suspense boundaries that need to resolve before the
 // tracing marker can be logged as complete
@@ -154,6 +208,8 @@ export function pushRootMarkerInstance(workInProgress: Fiber): void {
             tag: TransitionRoot,
             transitions: new Set([transition]),
             pendingBoundaries: null,
+            aborts: null,
+            name: null,
           };
           root.incompleteTransitions.set(transition, markerInstance);
         }
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index a8844d2c1a411..bb36740821066 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -18,6 +18,7 @@ import type {
   PendingTransitionCallbacks,
   PendingBoundaries,
   Transition,
+  TransitionAbort,
 } from './ReactFiberTracingMarkerComponent.new';
 import type {OffscreenInstance} from './ReactFiberOffscreenComponent';
 
@@ -355,6 +356,7 @@ export function addTransitionStartCallbackToPendingTransition(
         transitionProgress: null,
         transitionComplete: null,
         markerProgress: null,
+        markerIncomplete: null,
         markerComplete: null,
       };
     }
@@ -370,7 +372,7 @@ export function addTransitionStartCallbackToPendingTransition(
 export function addMarkerProgressCallbackToPendingTransition(
   markerName: string,
   transitions: Set<Transition>,
-  pendingBoundaries: PendingBoundaries | null,
+  pendingBoundaries: PendingBoundaries,
 ) {
   if (enableTransitionTracing) {
     if (currentPendingTransitionCallbacks === null) {
@@ -379,6 +381,7 @@ export function addMarkerProgressCallbackToPendingTransition(
         transitionProgress: null,
         transitionComplete: null,
         markerProgress: new Map(),
+        markerIncomplete: null,
         markerComplete: null,
       };
     }
@@ -394,6 +397,34 @@ export function addMarkerProgressCallbackToPendingTransition(
   }
 }
 
+export function addMarkerIncompleteCallbackToPendingTransition(
+  markerName: string,
+  transitions: Set<Transition>,
+  aborts: Array<TransitionAbort>,
+) {
+  if (enableTransitionTracing) {
+    if (currentPendingTransitionCallbacks === null) {
+      currentPendingTransitionCallbacks = {
+        transitionStart: null,
+        transitionProgress: null,
+        transitionComplete: null,
+        markerProgress: null,
+        markerIncomplete: new Map(),
+        markerComplete: null,
+      };
+    }
+
+    if (currentPendingTransitionCallbacks.markerIncomplete === null) {
+      currentPendingTransitionCallbacks.markerIncomplete = new Map();
+    }
+
+    currentPendingTransitionCallbacks.markerIncomplete.set(markerName, {
+      transitions,
+      aborts,
+    });
+  }
+}
+
 export function addMarkerCompleteCallbackToPendingTransition(
   markerName: string,
   transitions: Set<Transition>,
@@ -405,6 +436,7 @@ export function addMarkerCompleteCallbackToPendingTransition(
         transitionProgress: null,
         transitionComplete: null,
         markerProgress: null,
+        markerIncomplete: null,
         markerComplete: new Map(),
       };
     }
@@ -431,6 +463,7 @@ export function addTransitionProgressCallbackToPendingTransition(
         transitionProgress: new Map(),
         transitionComplete: null,
         markerProgress: null,
+        markerIncomplete: null,
         markerComplete: null,
       };
     }
@@ -456,6 +489,7 @@ export function addTransitionCompleteCallbackToPendingTransition(
         transitionProgress: null,
         transitionComplete: [],
         markerProgress: null,
+        markerIncomplete: null,
         markerComplete: null,
       };
     }
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index e017674dda205..6a83f822c6a26 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -292,7 +292,6 @@ export type TransitionTracingCallbacks = {
     deletions: Array<{
       type: string,
       name?: string,
-      newName?: string,
       endTime: number,
     }>,
   ) => void,
@@ -315,7 +314,6 @@ export type TransitionTracingCallbacks = {
     deletions: Array<{
       type: string,
       name?: string,
-      newName?: string,
       endTime: number,
     }>,
   ) => void,
diff --git a/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js b/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
index ae4812afa8ec2..1089f0f7e0d0a 100644
--- a/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
@@ -23,6 +23,17 @@ let caches;
 let seededCache;
 
 describe('ReactInteractionTracing', () => {
+  function stringifyDeletions(deletions) {
+    return deletions
+      .map(
+        d =>
+          `{${Object.keys(d)
+            .map(key => `${key}: ${d[key]}`)
+            .sort()
+            .join(', ')}}`,
+      )
+      .join(', ');
+  }
   beforeEach(() => {
     jest.resetModules();
 
@@ -1283,6 +1294,410 @@ describe('ReactInteractionTracing', () => {
     });
   });
 
+  // @gate enableTransitionTracing
+  it.skip('warn and calls marker incomplete if name changes before transition completes', async () => {
+    const transitionCallbacks = {
+      onTransitionStart: (name, startTime) => {
+        Scheduler.unstable_yieldValue(
+          `onTransitionStart(${name}, ${startTime})`,
+        );
+      },
+      onTransitionProgress: (name, startTime, endTime, pending) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.unstable_yieldValue(
+          `onTransitionProgress(${name}, ${startTime}, ${endTime}, [${suspenseNames}])`,
+        );
+      },
+      onTransitionComplete: (name, startTime, endTime) => {
+        Scheduler.unstable_yieldValue(
+          `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
+        );
+      },
+      onMarkerProgress: (
+        transitioName,
+        markerName,
+        startTime,
+        currentTime,
+        pending,
+      ) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.unstable_yieldValue(
+          `onMarkerProgress(${transitioName}, ${markerName}, ${startTime}, ${currentTime}, [${suspenseNames}])`,
+        );
+      },
+      onMarkerIncomplete: (
+        transitionName,
+        markerName,
+        startTime,
+        deletions,
+      ) => {
+        Scheduler.unstable_yieldValue(
+          `onMarkerIncomplete(${transitionName}, ${markerName}, ${startTime}, [${stringifyDeletions(
+            deletions,
+          )}])`,
+        );
+      },
+      onMarkerComplete: (transitioName, markerName, startTime, endTime) => {
+        Scheduler.unstable_yieldValue(
+          `onMarkerComplete(${transitioName}, ${markerName}, ${startTime}, ${endTime})`,
+        );
+      },
+    };
+
+    function App({navigate, markerName}) {
+      return (
+        <div>
+          {navigate ? (
+            <React.unstable_TracingMarker name={markerName}>
+              <Suspense fallback={<Text text="Loading..." />}>
+                <AsyncText text="Page Two" />
+              </Suspense>
+            </React.unstable_TracingMarker>
+          ) : (
+            <Text text="Page One" />
+          )}
+        </div>
+      );
+    }
+
+    const root = ReactNoop.createRoot({
+      unstable_transitionCallbacks: transitionCallbacks,
+    });
+    await act(async () => {
+      root.render(<App navigate={false} markerName="marker one" />);
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      expect(Scheduler).toFlushAndYield(['Page One']);
+
+      startTransition(
+        () => root.render(<App navigate={true} markerName="marker one" />),
+        {
+          name: 'transition one',
+        },
+      );
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      expect(Scheduler).toFlushAndYield([
+        'Suspend [Page Two]',
+        'Loading...',
+        'onTransitionStart(transition one, 1000)',
+        'onMarkerProgress(transition one, marker one, 1000, 2000, [<null>])',
+        'onTransitionProgress(transition one, 1000, 2000, [<null>])',
+      ]);
+
+      root.render(<App navigate={true} markerName="marker two" />);
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      expect(() =>
+        expect(Scheduler).toFlushAndYield([
+          'Suspend [Page Two]',
+          'Loading...',
+          'onMarkerIncomplete(transition one, marker one, 1000, [{endTime: 3000, name: marker one, newName: marker two, type: marker}])',
+        ]),
+      ).toErrorDev('');
+
+      resolveText('Page Two');
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      expect(Scheduler).toFlushAndYield([
+        'Page Two',
+        'onMarkerProgress(transition one, marker one, 1000, 4000, [])',
+        'onTransitionProgress(transition one, 1000, 4000, [])',
+        'onTransitionComplete(transition one, 1000, 4000)',
+      ]);
+    });
+  });
+
+  // @gate enableTransitionTracing
+  it('marker incomplete for tree with parent and sibling tracing markers', async () => {
+    const transitionCallbacks = {
+      onTransitionStart: (name, startTime) => {
+        Scheduler.unstable_yieldValue(
+          `onTransitionStart(${name}, ${startTime})`,
+        );
+      },
+      onTransitionProgress: (name, startTime, endTime, pending) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.unstable_yieldValue(
+          `onTransitionProgress(${name}, ${startTime}, ${endTime}, [${suspenseNames}])`,
+        );
+      },
+      onTransitionComplete: (name, startTime, endTime) => {
+        Scheduler.unstable_yieldValue(
+          `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
+        );
+      },
+      onMarkerProgress: (
+        transitioName,
+        markerName,
+        startTime,
+        currentTime,
+        pending,
+      ) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.unstable_yieldValue(
+          `onMarkerProgress(${transitioName}, ${markerName}, ${startTime}, ${currentTime}, [${suspenseNames}])`,
+        );
+      },
+      onMarkerIncomplete: (
+        transitionName,
+        markerName,
+        startTime,
+        deletions,
+      ) => {
+        Scheduler.unstable_yieldValue(
+          `onMarkerIncomplete(${transitionName}, ${markerName}, ${startTime}, [${stringifyDeletions(
+            deletions,
+          )}])`,
+        );
+      },
+      onMarkerComplete: (transitioName, markerName, startTime, endTime) => {
+        Scheduler.unstable_yieldValue(
+          `onMarkerComplete(${transitioName}, ${markerName}, ${startTime}, ${endTime})`,
+        );
+      },
+    };
+
+    function App({navigate, showMarker}) {
+      return (
+        <div>
+          {navigate ? (
+            <React.unstable_TracingMarker name="parent">
+              {showMarker ? (
+                <React.unstable_TracingMarker name="marker one">
+                  <Suspense
+                    unstable_name="suspense page"
+                    fallback={<Text text="Loading..." />}>
+                    <AsyncText text="Page Two" />
+                  </Suspense>
+                </React.unstable_TracingMarker>
+              ) : (
+                <Suspense
+                  unstable_name="suspense page"
+                  fallback={<Text text="Loading..." />}>
+                  <AsyncText text="Page Two" />
+                </Suspense>
+              )}
+              <React.unstable_TracingMarker name="sibling">
+                <Suspense
+                  unstable_name="suspense sibling"
+                  fallback={<Text text="Sibling Loading..." />}>
+                  <AsyncText text="Sibling Text" />
+                </Suspense>
+              </React.unstable_TracingMarker>
+            </React.unstable_TracingMarker>
+          ) : (
+            <Text text="Page One" />
+          )}
+        </div>
+      );
+    }
+
+    const root = ReactNoop.createRoot({
+      unstable_transitionCallbacks: transitionCallbacks,
+    });
+    await act(async () => {
+      root.render(<App navigate={false} showMarker={true} />);
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      expect(Scheduler).toFlushAndYield(['Page One']);
+
+      startTransition(
+        () => root.render(<App navigate={true} showMarker={true} />),
+        {
+          name: 'transition one',
+        },
+      );
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      expect(Scheduler).toFlushAndYield([
+        'Suspend [Page Two]',
+        'Loading...',
+        'Suspend [Sibling Text]',
+        'Sibling Loading...',
+        'onTransitionStart(transition one, 1000)',
+        'onMarkerProgress(transition one, parent, 1000, 2000, [suspense page, suspense sibling])',
+        'onMarkerProgress(transition one, marker one, 1000, 2000, [suspense page])',
+        'onMarkerProgress(transition one, sibling, 1000, 2000, [suspense sibling])',
+        'onTransitionProgress(transition one, 1000, 2000, [suspense page, suspense sibling])',
+      ]);
+      root.render(<App navigate={true} showMarker={false} />);
+
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      expect(Scheduler).toFlushAndYield([
+        'Suspend [Page Two]',
+        'Loading...',
+        'Suspend [Sibling Text]',
+        'Sibling Loading...',
+        'onMarkerIncomplete(transition one, marker one, 1000, [{endTime: 3000, name: marker one, type: marker}])',
+        'onMarkerIncomplete(transition one, parent, 1000, [{endTime: 3000, name: marker one, type: marker}])',
+      ]);
+
+      root.render(<App navigate={true} showMarker={true} />);
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      expect(Scheduler).toFlushAndYield([
+        'Suspend [Page Two]',
+        'Loading...',
+        'Suspend [Sibling Text]',
+        'Sibling Loading...',
+      ]);
+    });
+
+    resolveText('Page Two');
+    ReactNoop.expire(1000);
+    await advanceTimers(1000);
+    expect(Scheduler).toFlushAndYield(['Page Two']);
+
+    resolveText('Sibling Text');
+    ReactNoop.expire(1000);
+    await advanceTimers(1000);
+    expect(Scheduler).toFlushAndYield([
+      'Sibling Text',
+      'onMarkerProgress(transition one, parent, 1000, 6000, [])',
+      'onMarkerProgress(transition one, sibling, 1000, 6000, [])',
+      // Calls markerComplete and transitionComplete for all parents
+      'onMarkerComplete(transition one, sibling, 1000, 6000)',
+      'onTransitionProgress(transition one, 1000, 6000, [])',
+    ]);
+  });
+
+  // @gate enableTransitionTracing
+  it('marker gets deleted', async () => {
+    const transitionCallbacks = {
+      onTransitionStart: (name, startTime) => {
+        Scheduler.unstable_yieldValue(
+          `onTransitionStart(${name}, ${startTime})`,
+        );
+      },
+      onTransitionProgress: (name, startTime, endTime, pending) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.unstable_yieldValue(
+          `onTransitionProgress(${name}, ${startTime}, ${endTime}, [${suspenseNames}])`,
+        );
+      },
+      onTransitionComplete: (name, startTime, endTime) => {
+        Scheduler.unstable_yieldValue(
+          `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
+        );
+      },
+      onMarkerProgress: (
+        transitioName,
+        markerName,
+        startTime,
+        currentTime,
+        pending,
+      ) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.unstable_yieldValue(
+          `onMarkerProgress(${transitioName}, ${markerName}, ${startTime}, ${currentTime}, [${suspenseNames}])`,
+        );
+      },
+      onMarkerIncomplete: (
+        transitionName,
+        markerName,
+        startTime,
+        deletions,
+      ) => {
+        Scheduler.unstable_yieldValue(
+          `onMarkerIncomplete(${transitionName}, ${markerName}, ${startTime}, [${stringifyDeletions(
+            deletions,
+          )}])`,
+        );
+      },
+      onMarkerComplete: (transitioName, markerName, startTime, endTime) => {
+        Scheduler.unstable_yieldValue(
+          `onMarkerComplete(${transitioName}, ${markerName}, ${startTime}, ${endTime})`,
+        );
+      },
+    };
+
+    function App({navigate, deleteOne}) {
+      return (
+        <div>
+          {navigate ? (
+            <React.unstable_TracingMarker name="parent">
+              {!deleteOne ? (
+                <div>
+                  <React.unstable_TracingMarker name="one">
+                    <Suspense
+                      unstable_name="suspense one"
+                      fallback={<Text text="Loading One..." />}>
+                      <AsyncText text="Page One" />
+                    </Suspense>
+                  </React.unstable_TracingMarker>
+                </div>
+              ) : null}
+              <React.unstable_TracingMarker name="two">
+                <Suspense
+                  unstable_name="suspense two"
+                  fallback={<Text text="Loading Two..." />}>
+                  <AsyncText text="Page Two" />
+                </Suspense>
+              </React.unstable_TracingMarker>
+            </React.unstable_TracingMarker>
+          ) : (
+            <Text text="Page One" />
+          )}
+        </div>
+      );
+    }
+    const root = ReactNoop.createRoot({
+      unstable_transitionCallbacks: transitionCallbacks,
+    });
+    await act(async () => {
+      root.render(<App navigate={false} deleteOne={false} />);
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      expect(Scheduler).toFlushAndYield(['Page One']);
+
+      startTransition(
+        () => root.render(<App navigate={true} deleteOne={false} />),
+        {
+          name: 'transition',
+        },
+      );
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      expect(Scheduler).toFlushAndYield([
+        'Suspend [Page One]',
+        'Loading One...',
+        'Suspend [Page Two]',
+        'Loading Two...',
+        'onTransitionStart(transition, 1000)',
+        'onMarkerProgress(transition, parent, 1000, 2000, [suspense one, suspense two])',
+        'onMarkerProgress(transition, one, 1000, 2000, [suspense one])',
+        'onMarkerProgress(transition, two, 1000, 2000, [suspense two])',
+        'onTransitionProgress(transition, 1000, 2000, [suspense one, suspense two])',
+      ]);
+
+      root.render(<App navigate={true} deleteOne={true} />);
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      expect(Scheduler).toFlushAndYield([
+        'Suspend [Page Two]',
+        'Loading Two...',
+        'onMarkerIncomplete(transition, one, 1000, [{endTime: 3000, name: one, type: marker}])',
+        'onMarkerIncomplete(transition, parent, 1000, [{endTime: 3000, name: one, type: marker}])',
+      ]);
+
+      await resolveText('Page Two');
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      expect(Scheduler).toFlushAndYield([
+        'Page Two',
+        // Marker progress will still get called after incomplete but not marker complete
+        'onMarkerProgress(transition, parent, 1000, 4000, [])',
+        'onMarkerProgress(transition, two, 1000, 4000, [])',
+        'onMarkerComplete(transition, two, 1000, 4000)',
+        // Transition progress will still get called after incomplete but not transition complete
+        'onTransitionProgress(transition, 1000, 4000, [])',
+      ]);
+    });
+  });
+
   // @gate enableTransitionTracing
   it('warns when marker name changes', async () => {
     const transitionCallbacks = {
@@ -1296,6 +1711,18 @@ describe('ReactInteractionTracing', () => {
           `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
         );
       },
+      onMarkerIncomplete: (
+        transitionName,
+        markerName,
+        startTime,
+        deletions,
+      ) => {
+        Scheduler.unstable_yieldValue(
+          `onMarkerIncomplete(${transitionName}, ${markerName}, ${startTime}, [${stringifyDeletions(
+            deletions,
+          )}])`,
+        );
+      },
       onMarkerComplete: (transitioName, markerName, startTime, endTime) => {
         Scheduler.unstable_yieldValue(
           `onMarkerComplete(${transitioName}, ${markerName}, ${startTime}, ${endTime})`,

From 128d2b1557530280c485082faeef46724015a74b Mon Sep 17 00:00:00 2001
From: Luna <lunaris.ruan@gmail.com>
Date: Fri, 5 Aug 2022 14:25:56 -0400
Subject: [PATCH 2/5] suspense boundary deleted

---
 .../src/ReactFiberCommitWork.new.js           |  21 +-
 .../ReactFiberTracingMarkerComponent.new.js   |   7 +
 .../src/ReactInternalTypes.js                 |   4 +-
 .../__tests__/ReactTransitionTracing-test.js  | 420 +++++++++++++++++-
 4 files changed, 440 insertions(+), 12 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 190c4719aa18d..d3e3c47378b9f 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -2100,12 +2100,21 @@ 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;
+            }
+
+            abortParentMarkerTransitions(deletedFiber, nearestMountedAncestor, {
+              reason: 'suspense',
+              name,
             });
           }
         }
diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
index 13c366db050b1..044418c13ea5c 100644
--- a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
@@ -173,6 +173,13 @@ function getFilteredDeletion(abort: TransitionAbort, endTime: number) {
         endTime,
       };
     }
+    case 'suspense': {
+      return {
+        type: 'suspense',
+        name: abort.name,
+        endTime,
+      };
+    }
     default: {
       return null;
     }
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index 6a83f822c6a26..d5ed83d34a077 100644
--- 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,
diff --git a/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js b/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
index 1089f0f7e0d0a..a6637b55977c9 100644
--- a/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
@@ -1531,8 +1531,9 @@ describe('ReactInteractionTracing', () => {
         'Loading...',
         'Suspend [Sibling Text]',
         'Sibling Loading...',
-        'onMarkerIncomplete(transition one, marker one, 1000, [{endTime: 3000, name: marker one, type: marker}])',
-        'onMarkerIncomplete(transition one, parent, 1000, [{endTime: 3000, name: marker one, type: marker}])',
+        'onMarkerProgress(transition one, parent, 1000, 3000, [suspense sibling])',
+        'onMarkerIncomplete(transition one, marker one, 1000, [{endTime: 3000, name: marker one, type: marker}, {endTime: 3000, name: suspense page, type: suspense}])',
+        'onMarkerIncomplete(transition one, parent, 1000, [{endTime: 3000, name: marker one, type: marker}, {endTime: 3000, name: suspense page, type: suspense}])',
       ]);
 
       root.render(<App navigate={true} showMarker={true} />);
@@ -1679,8 +1680,9 @@ describe('ReactInteractionTracing', () => {
       expect(Scheduler).toFlushAndYield([
         'Suspend [Page Two]',
         'Loading Two...',
-        'onMarkerIncomplete(transition, one, 1000, [{endTime: 3000, name: one, type: marker}])',
-        'onMarkerIncomplete(transition, parent, 1000, [{endTime: 3000, name: one, type: marker}])',
+        'onMarkerProgress(transition, parent, 1000, 3000, [suspense two])',
+        'onMarkerIncomplete(transition, one, 1000, [{endTime: 3000, name: one, type: marker}, {endTime: 3000, name: suspense one, type: suspense}])',
+        'onMarkerIncomplete(transition, parent, 1000, [{endTime: 3000, name: one, type: marker}, {endTime: 3000, name: suspense one, type: suspense}])',
       ]);
 
       await resolveText('Page Two');
@@ -1698,6 +1700,416 @@ describe('ReactInteractionTracing', () => {
     });
   });
 
+  // @gate enableTransitionTracing
+  it('Suspense boundary added by the transition is deleted', async () => {
+    const transitionCallbacks = {
+      onTransitionStart: (name, startTime) => {
+        Scheduler.unstable_yieldValue(
+          `onTransitionStart(${name}, ${startTime})`,
+        );
+      },
+      onTransitionProgress: (name, startTime, endTime, pending) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.unstable_yieldValue(
+          `onTransitionProgress(${name}, ${startTime}, ${endTime}, [${suspenseNames}])`,
+        );
+      },
+      onTransitionComplete: (name, startTime, endTime) => {
+        Scheduler.unstable_yieldValue(
+          `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
+        );
+      },
+      onMarkerProgress: (
+        transitioName,
+        markerName,
+        startTime,
+        currentTime,
+        pending,
+      ) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.unstable_yieldValue(
+          `onMarkerProgress(${transitioName}, ${markerName}, ${startTime}, ${currentTime}, [${suspenseNames}])`,
+        );
+      },
+      onMarkerIncomplete: (
+        transitionName,
+        markerName,
+        startTime,
+        deletions,
+      ) => {
+        Scheduler.unstable_yieldValue(
+          `onMarkerIncomplete(${transitionName}, ${markerName}, ${startTime}, [${stringifyDeletions(
+            deletions,
+          )}])`,
+        );
+      },
+      onMarkerComplete: (transitioName, markerName, startTime, endTime) => {
+        Scheduler.unstable_yieldValue(
+          `onMarkerComplete(${transitioName}, ${markerName}, ${startTime}, ${endTime})`,
+        );
+      },
+    };
+
+    function App({navigate, deleteOne}) {
+      return (
+        <div>
+          {navigate ? (
+            <React.unstable_TracingMarker name="parent">
+              <React.unstable_TracingMarker name="one">
+                {!deleteOne ? (
+                  <Suspense
+                    unstable_name="suspense one"
+                    fallback={<Text text="Loading One..." />}>
+                    <AsyncText text="Page One" />
+                    <React.unstable_TracingMarker name="page one" />
+                    <Suspense
+                      unstable_name="suspense child"
+                      fallback={<Text text="Loading Child..." />}>
+                      <React.unstable_TracingMarker name="child" />
+                      <AsyncText text="Child" />
+                    </Suspense>
+                  </Suspense>
+                ) : null}
+              </React.unstable_TracingMarker>
+              <React.unstable_TracingMarker name="two">
+                <Suspense
+                  unstable_name="suspense two"
+                  fallback={<Text text="Loading Two..." />}>
+                  <AsyncText text="Page Two" />
+                </Suspense>
+              </React.unstable_TracingMarker>
+            </React.unstable_TracingMarker>
+          ) : (
+            <Text text="Page One" />
+          )}
+        </div>
+      );
+    }
+    const root = ReactNoop.createRoot({
+      unstable_transitionCallbacks: transitionCallbacks,
+    });
+    await act(async () => {
+      root.render(<App navigate={false} deleteOne={false} />);
+
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      expect(Scheduler).toFlushAndYield(['Page One']);
+
+      startTransition(
+        () => root.render(<App navigate={true} deleteOne={false} />),
+        {
+          name: 'transition',
+        },
+      );
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      expect(Scheduler).toFlushAndYield([
+        'Suspend [Page One]',
+        'Suspend [Child]',
+        'Loading Child...',
+        'Loading One...',
+        'Suspend [Page Two]',
+        'Loading Two...',
+        'onTransitionStart(transition, 1000)',
+        'onMarkerProgress(transition, parent, 1000, 2000, [suspense one, suspense two])',
+        'onMarkerProgress(transition, one, 1000, 2000, [suspense one])',
+        'onMarkerProgress(transition, two, 1000, 2000, [suspense two])',
+        'onTransitionProgress(transition, 1000, 2000, [suspense one, suspense two])',
+      ]);
+
+      await resolveText('Page One');
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      expect(Scheduler).toFlushAndYield([
+        'Page One',
+        'Suspend [Child]',
+        'Loading Child...',
+        'onMarkerProgress(transition, parent, 1000, 3000, [suspense two, suspense child])',
+        'onMarkerProgress(transition, one, 1000, 3000, [suspense child])',
+        'onMarkerComplete(transition, page one, 1000, 3000)',
+        'onTransitionProgress(transition, 1000, 3000, [suspense two, suspense child])',
+      ]);
+
+      root.render(<App navigate={true} deleteOne={true} />);
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      expect(Scheduler).toFlushAndYield([
+        'Suspend [Page Two]',
+        'Loading Two...',
+        // "suspense one" has unsuspended so shouldn't be included
+        // tracing marker "page one" has completed so shouldn't be included
+        // all children of "suspense child" haven't yet been rendered so shouldn't be included
+        'onMarkerProgress(transition, one, 1000, 4000, [])',
+        'onMarkerProgress(transition, parent, 1000, 4000, [suspense two])',
+        'onMarkerIncomplete(transition, one, 1000, [{endTime: 4000, name: suspense child, type: suspense}])',
+        'onMarkerIncomplete(transition, parent, 1000, [{endTime: 4000, name: suspense child, type: suspense}])',
+      ]);
+
+      await resolveText('Page Two');
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      expect(Scheduler).toFlushAndYield([
+        'Page Two',
+        'onMarkerProgress(transition, parent, 1000, 5000, [])',
+        'onMarkerProgress(transition, two, 1000, 5000, [])',
+        'onMarkerComplete(transition, two, 1000, 5000)',
+        'onTransitionProgress(transition, 1000, 5000, [])',
+      ]);
+    });
+  });
+
+  // @gate enableTransitionTracing
+  it('Suspense boundary not added by the transition is deleted ', async () => {
+    const transitionCallbacks = {
+      onTransitionStart: (name, startTime) => {
+        Scheduler.unstable_yieldValue(
+          `onTransitionStart(${name}, ${startTime})`,
+        );
+      },
+      onTransitionProgress: (name, startTime, endTime, pending) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.unstable_yieldValue(
+          `onTransitionProgress(${name}, ${startTime}, ${endTime}, [${suspenseNames}])`,
+        );
+      },
+      onTransitionComplete: (name, startTime, endTime) => {
+        Scheduler.unstable_yieldValue(
+          `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
+        );
+      },
+      onMarkerProgress: (
+        transitioName,
+        markerName,
+        startTime,
+        currentTime,
+        pending,
+      ) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.unstable_yieldValue(
+          `onMarkerProgress(${transitioName}, ${markerName}, ${startTime}, ${currentTime}, [${suspenseNames}])`,
+        );
+      },
+      onMarkerIncomplete: (
+        transitionName,
+        markerName,
+        startTime,
+        deletions,
+      ) => {
+        Scheduler.unstable_yieldValue(
+          `onMarkerIncomplete(${transitionName}, ${markerName}, ${startTime}, [${stringifyDeletions(
+            deletions,
+          )}])`,
+        );
+      },
+      onMarkerComplete: (transitioName, markerName, startTime, endTime) => {
+        Scheduler.unstable_yieldValue(
+          `onMarkerComplete(${transitioName}, ${markerName}, ${startTime}, ${endTime})`,
+        );
+      },
+    };
+
+    function App({show}) {
+      return (
+        <React.unstable_TracingMarker name="parent">
+          {show ? (
+            <Suspense unstable_name="appended child">
+              <AsyncText text="Appended child" />
+            </Suspense>
+          ) : null}
+          <Suspense unstable_name="child">
+            <AsyncText text="Child" />
+          </Suspense>
+        </React.unstable_TracingMarker>
+      );
+    }
+
+    const root = ReactNoop.createRoot({
+      unstable_transitionCallbacks: transitionCallbacks,
+    });
+    await act(async () => {
+      startTransition(() => root.render(<App show={false} />), {
+        name: 'transition',
+      });
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      expect(Scheduler).toFlushAndYield([
+        'Suspend [Child]',
+        'onTransitionStart(transition, 0)',
+        'onMarkerProgress(transition, parent, 0, 1000, [child])',
+        'onTransitionProgress(transition, 0, 1000, [child])',
+      ]);
+
+      root.render(<App show={true} />);
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      // This appended child isn't part of the transition so we
+      // don't call any callback
+      expect(Scheduler).toFlushAndYield([
+        'Suspend [Appended child]',
+        'Suspend [Child]',
+      ]);
+
+      // This deleted child isn't part of the transition so we
+      // don't call any callbacks
+      root.render(<App show={false} />);
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      expect(Scheduler).toFlushAndYield(['Suspend [Child]']);
+
+      await resolveText('Child');
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      expect(Scheduler).toFlushAndYield([
+        'Child',
+        'onMarkerProgress(transition, parent, 0, 4000, [])',
+        'onMarkerComplete(transition, parent, 0, 4000)',
+        'onTransitionProgress(transition, 0, 4000, [])',
+        'onTransitionComplete(transition, 0, 4000)',
+      ]);
+    });
+  });
+
+  // @gate enableTransitionTracing
+  it('marker incomplete gets called properly if child suspense marker is not part of it', async () => {
+    const transitionCallbacks = {
+      onTransitionStart: (name, startTime) => {
+        Scheduler.unstable_yieldValue(
+          `onTransitionStart(${name}, ${startTime})`,
+        );
+      },
+      onTransitionProgress: (name, startTime, endTime, pending) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.unstable_yieldValue(
+          `onTransitionProgress(${name}, ${startTime}, ${endTime}, [${suspenseNames}])`,
+        );
+      },
+      onTransitionComplete: (name, startTime, endTime) => {
+        Scheduler.unstable_yieldValue(
+          `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
+        );
+      },
+      onMarkerProgress: (
+        transitioName,
+        markerName,
+        startTime,
+        currentTime,
+        pending,
+      ) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.unstable_yieldValue(
+          `onMarkerProgress(${transitioName}, ${markerName}, ${startTime}, ${currentTime}, [${suspenseNames}])`,
+        );
+      },
+      onMarkerIncomplete: (
+        transitionName,
+        markerName,
+        startTime,
+        deletions,
+      ) => {
+        Scheduler.unstable_yieldValue(
+          `onMarkerIncomplete(${transitionName}, ${markerName}, ${startTime}, [${stringifyDeletions(
+            deletions,
+          )}])`,
+        );
+      },
+      onMarkerComplete: (transitioName, markerName, startTime, endTime) => {
+        Scheduler.unstable_yieldValue(
+          `onMarkerComplete(${transitioName}, ${markerName}, ${startTime}, ${endTime})`,
+        );
+      },
+    };
+
+    function App({show, showSuspense}) {
+      return (
+        <React.unstable_TracingMarker name="parent">
+          {show ? (
+            <React.unstable_TracingMarker name="appended child">
+              {showSuspense ? (
+                <Suspense unstable_name="appended child">
+                  <AsyncText text="Appended child" />
+                </Suspense>
+              ) : null}
+            </React.unstable_TracingMarker>
+          ) : null}
+          <Suspense unstable_name="child">
+            <AsyncText text="Child" />
+          </Suspense>
+        </React.unstable_TracingMarker>
+      );
+    }
+
+    const root = ReactNoop.createRoot({
+      unstable_transitionCallbacks: transitionCallbacks,
+    });
+
+    await act(async () => {
+      startTransition(
+        () => root.render(<App show={false} showSuspense={false} />),
+        {
+          name: 'transition one',
+        },
+      );
+
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+    });
+
+    expect(Scheduler).toHaveYielded([
+      'Suspend [Child]',
+      'onTransitionStart(transition one, 0)',
+      'onMarkerProgress(transition one, parent, 0, 1000, [child])',
+      'onTransitionProgress(transition one, 0, 1000, [child])',
+    ]);
+
+    await act(async () => {
+      startTransition(
+        () => root.render(<App show={true} showSuspense={true} />),
+        {
+          name: 'transition two',
+        },
+      );
+
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+    });
+
+    expect(Scheduler).toHaveYielded([
+      'Suspend [Appended child]',
+      'Suspend [Child]',
+      'onTransitionStart(transition two, 1000)',
+      'onMarkerProgress(transition two, appended child, 1000, 2000, [appended child])',
+      'onTransitionProgress(transition two, 1000, 2000, [appended child])',
+    ]);
+
+    await act(async () => {
+      root.render(<App show={true} showSuspense={false} />);
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+    });
+
+    expect(Scheduler).toHaveYielded([
+      'Suspend [Child]',
+      'onMarkerProgress(transition two, appended child, 1000, 3000, [])',
+      'onMarkerIncomplete(transition two, appended child, 1000, [{endTime: 3000, name: appended child, type: suspense}])',
+    ]);
+
+    await act(async () => {
+      resolveText('Child');
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+    });
+
+    expect(Scheduler).toHaveYielded([
+      'Child',
+      'onMarkerProgress(transition one, parent, 0, 4000, [])',
+      'onMarkerComplete(transition one, parent, 0, 4000)',
+      'onTransitionProgress(transition one, 0, 4000, [])',
+      'onTransitionComplete(transition one, 0, 4000)',
+    ]);
+  });
+
   // @gate enableTransitionTracing
   it('warns when marker name changes', async () => {
     const transitionCallbacks = {

From ce5c42152c307f8b73e7abdb253e7f3c01f5b637 Mon Sep 17 00:00:00 2001
From: Luna <lunaris.ruan@gmail.com>
Date: Mon, 22 Aug 2022 11:12:06 +0100
Subject: [PATCH 3/5] Refactor code

---
 .../src/ReactFiberBeginWork.new.js            |   9 +-
 .../src/ReactFiberCommitWork.new.js           | 355 ++++++++++--------
 .../src/ReactFiberCompleteWork.new.js         |  10 -
 .../ReactFiberTracingMarkerComponent.new.js   |  52 ++-
 .../src/ReactInternalTypes.js                 |   2 +-
 5 files changed, 241 insertions(+), 187 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index b62c3b042174e..fa417e08114c9 100644
--- 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,11 +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/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index d3e3c47378b9f..4e921de5c0ee9 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -1140,96 +1140,136 @@ function commitLayoutEffectOnFiber(
   }
 }
 
-function abortParentMarkerTransitions(
-  deletedFiber: Fiber,
-  nearestMountedAncestor: Fiber,
+function abortRootTransitions(
+  root: FiberRoot,
   abort: TransitionAbort,
+  deletedTransitions: Set<Transition>,
+  deletedOffscreenInstance: OffscreenInstance | null,
+  isInDeletedTree: boolean,
 ) {
-  const deletedFiberInstance: OffscreenInstance = deletedFiber.stateNode;
-
-  let fiber = deletedFiber;
-  let isInDeletedTree = true;
-  while (fiber !== null) {
-    switch (fiber.tag) {
-      case TracingMarkerComponent:
-        const transitions = deletedFiberInstance.transitions;
+  if (enableTransitionTracing) {
+    const rootTransitions = root.incompleteTransitions;
+    deletedTransitions.forEach(transition => {
+      if (rootTransitions.has(transition)) {
+        const transitionInstance: TracingMarkerInstance = (rootTransitions.get(
+          transition,
+        ): any);
+        if (transitionInstance.aborts === null) {
+          transitionInstance.aborts = [];
+        }
+        transitionInstance.aborts.push(abort);
 
-        const markerInstance = fiber.stateNode;
-        const markerTransitions = markerInstance.transitions;
-        if (markerTransitions !== null && transitions !== null) {
-          let abortMarker = false;
-          transitions.forEach(transition => {
-            if (markerTransitions.has(transition)) {
-              abortMarker = true;
-            }
-          });
+        if (deletedOffscreenInstance !== null) {
+          if (
+            transitionInstance.pendingBoundaries !== null &&
+            transitionInstance.pendingBoundaries.has(deletedOffscreenInstance)
+          ) {
+            transitionInstance.pendingBoundaries.delete(
+              deletedOffscreenInstance,
+            );
+          }
+        }
+      }
+    });
+  }
+}
 
-          if (abortMarker) {
+function abortTracingMarkerTransitions(
+  abortedFiber: Fiber,
+  abort: TransitionAbort,
+  deletedTransitions: Set<Transition>,
+  deletedOffscreenInstance: OffscreenInstance | null,
+  isInDeletedTree: boolean,
+) {
+  if (enableTransitionTracing) {
+    const markerInstance: TracingMarkerInstance = abortedFiber.stateNode;
+    const markerTransitions = markerInstance.transitions;
+    const pendingBoundaries = markerInstance.pendingBoundaries;
+    if (markerTransitions !== null) {
+      // TODO: Refactor this code. Is there a way to move this code to
+      // the deletions phase instead of calculating it here while making sure
+      // complete is called appropriately?
+      deletedTransitions.forEach(transition => {
+        // If one of the transitions on the tracing marker is a transition
+        // that was in an aborted subtree, we will abort that tracing marker
+        if (
+          abortedFiber !== null &&
+          markerTransitions.has(transition) &&
+          (markerInstance.aborts === null ||
+            !markerInstance.aborts.includes(abort))
+        ) {
+          if (markerInstance.transitions !== null) {
             if (markerInstance.aborts === null) {
-              markerInstance.aborts = new Set();
+              markerInstance.aborts = [abort];
+              addMarkerIncompleteCallbackToPendingTransition(
+                abortedFiber.memoizedProps.name,
+                markerInstance.transitions,
+                markerInstance.aborts,
+              );
+            } else {
+              markerInstance.aborts.push(abort);
             }
 
-            markerInstance.aborts.add(abort);
-            addMarkerIncompleteCallbackToPendingTransition(
-              fiber.memoizedProps.name,
-              transitions,
-              markerInstance.aborts,
-            );
-
             // We only want to call onTransitionProgress when the marker hasn't been
             // deleted
             if (
+              deletedOffscreenInstance !== null &&
               !isInDeletedTree &&
-              markerInstance.pendingBoundaries !== null &&
-              markerInstance.pendingBoundaries.has(deletedFiberInstance)
+              pendingBoundaries !== null &&
+              pendingBoundaries.has(deletedOffscreenInstance)
             ) {
-              markerInstance.pendingBoundaries.delete(deletedFiberInstance);
+              pendingBoundaries.delete(deletedOffscreenInstance);
 
               addMarkerProgressCallbackToPendingTransition(
-                fiber.memoizedProps.name,
-                transitions,
-                markerInstance.pendingBoundaries,
+                abortedFiber.memoizedProps.name,
+                deletedTransitions,
+                pendingBoundaries,
               );
             }
           }
         }
-        break;
-      case HostRoot:
-        const root = fiber.stateNode;
-        const incompleteTransitions = root.incompleteTransitions;
-
-        if (deletedFiberInstance.transitions !== null) {
-          deletedFiberInstance.transitions.forEach(transition => {
-            if (incompleteTransitions.has(transition)) {
-              const transitionInstance = incompleteTransitions.get(transition);
-              if (transitionInstance.aborts === null) {
-                transitionInstance.aborts = [];
-              }
-              transitionInstance.aborts.push(abort);
-
-              if (
-                transitionInstance.pendingBoundaries !== null &&
-                transitionInstance.pendingBoundaries.has(deletedFiberInstance)
-              ) {
-                transitionInstance.pendingBoundaries.delete(
-                  deletedFiberInstance,
-                );
-              }
-            }
-          });
-        }
-        break;
-      default:
-        break;
+      });
     }
+  }
+}
+
+function abortParentMarkerTransitionsForDeletedFiber(
+  abortedFiber: Fiber,
+  abort: TransitionAbort,
+  deletedTransitions: Set<Transition>,
+  deletedOffscreenInstance: OffscreenInstance | null,
+  isInDeletedTree: boolean,
+) {
+  if (enableTransitionTracing) {
+    // Find all pending markers that are waiting on child suspense boundaries in the
+    // aborted subtree and cancels them
+    let fiber = abortedFiber;
+    while (fiber !== null) {
+      switch (fiber.tag) {
+        case TracingMarkerComponent:
+          abortTracingMarkerTransitions(
+            fiber,
+            abort,
+            deletedTransitions,
+            deletedOffscreenInstance,
+            isInDeletedTree,
+          );
+          break;
+        case HostRoot:
+          const root = fiber.stateNode;
+          abortRootTransitions(
+            root,
+            abort,
+            deletedTransitions,
+            deletedOffscreenInstance,
+            isInDeletedTree,
+          );
+
+          break;
+        default:
+          break;
+      }
 
-    if (
-      nearestMountedAncestor.deletions !== null &&
-      nearestMountedAncestor.deletions.includes(fiber)
-    ) {
-      isInDeletedTree = false;
-      fiber = nearestMountedAncestor;
-    } else {
       fiber = fiber.return;
     }
   }
@@ -1280,6 +1320,7 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
         pendingMarkers.forEach(markerInstance => {
           const pendingBoundaries = markerInstance.pendingBoundaries;
           const transitions = markerInstance.transitions;
+          const markerName = markerInstance.name;
           if (
             pendingBoundaries !== null &&
             !pendingBoundaries.has(offscreenInstance)
@@ -1290,10 +1331,10 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
             if (transitions !== null) {
               if (
                 markerInstance.tag === TransitionTracingMarker &&
-                markerInstance.name !== undefined
+                markerName !== null
               ) {
                 addMarkerProgressCallbackToPendingTransition(
-                  markerInstance.name,
+                  markerName,
                   transitions,
                   pendingBoundaries,
                 );
@@ -1317,6 +1358,7 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
         pendingMarkers.forEach(markerInstance => {
           const pendingBoundaries = markerInstance.pendingBoundaries;
           const transitions = markerInstance.transitions;
+          const markerName = markerInstance.name;
           if (
             pendingBoundaries !== null &&
             pendingBoundaries.has(offscreenInstance)
@@ -1325,13 +1367,27 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
             if (transitions !== null) {
               if (
                 markerInstance.tag === TransitionTracingMarker &&
-                markerInstance.name !== undefined
+                markerName !== null
               ) {
                 addMarkerProgressCallbackToPendingTransition(
-                  markerInstance.name,
+                  markerName,
                   transitions,
                   pendingBoundaries,
                 );
+
+                // If there are no more unresolved suspense boundaries, the interaction
+                // is considered finished
+                if (pendingBoundaries.size === 0) {
+                  if (markerInstance.aborts === null) {
+                    addMarkerCompleteCallbackToPendingTransition(
+                      markerName,
+                      transitions,
+                    );
+                  }
+                  markerInstance.transitions = null;
+                  markerInstance.pendingBoundaries = null;
+                  markerInstance.aborts = null;
+                }
               } else if (markerInstance.tag === TransitionRoot) {
                 transitions.forEach(transition => {
                   addTransitionProgressCallbackToPendingTransition(
@@ -1850,6 +1906,7 @@ function commitDeletionEffects(
           'a bug in React. Please file an issue.',
       );
     }
+
     commitDeletionEffectsOnFiber(root, returnFiber, deletedFiber);
     hostParent = null;
     hostParentIsContainer = false;
@@ -2097,28 +2154,6 @@ function commitDeletionEffectsOnFiber(
         offscreenSubtreeWasHidden =
           prevOffscreenSubtreeWasHidden || deletedFiber.memoizedState !== null;
 
-        if (enableTransitionTracing) {
-          // We need to mark this fiber's parents as deleted
-          const instance: OffscreenInstance = deletedFiber.stateNode;
-          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;
-            }
-
-            abortParentMarkerTransitions(deletedFiber, nearestMountedAncestor, {
-              reason: 'suspense',
-              name,
-            });
-          }
-        }
-
         recursivelyTraverseDeletionEffects(
           finishedRoot,
           nearestMountedAncestor,
@@ -2134,30 +2169,6 @@ function commitDeletionEffectsOnFiber(
       }
       break;
     }
-    case TracingMarkerComponent: {
-      if (enableTransitionTracing) {
-        // We need to mark this fiber's parents as deleted
-        const instance: TracingMarkerInstance = deletedFiber.stateNode;
-        const transitions = instance.transitions;
-        if (transitions !== null) {
-          const abort = {
-            reason: 'marker',
-            name: deletedFiber.memoizedProps.name,
-          };
-          abortParentMarkerTransitions(
-            deletedFiber,
-            nearestMountedAncestor,
-            abort,
-          );
-        }
-      }
-      recursivelyTraverseDeletionEffects(
-        finishedRoot,
-        nearestMountedAncestor,
-        deletedFiber,
-      );
-      return;
-    }
     default: {
       recursivelyTraverseDeletionEffects(
         finishedRoot,
@@ -3134,6 +3145,7 @@ function commitOffscreenPassiveMountEffects(
 
     commitTransitionProgress(finishedWork);
 
+    // TODO: Refactor this into an if/else branch
     if (!isHidden) {
       instance.transitions = null;
       instance.pendingMarkers = null;
@@ -3168,18 +3180,14 @@ function commitCachePassiveMountEffect(
 function commitTracingMarkerPassiveMountEffect(finishedWork: Fiber) {
   // Get the transitions that were initiatized during the render
   // and add a start transition callback for each of them
+  // We will only call this on initial mount of the tracing marker
+  // only if there are no suspense children
   const instance = finishedWork.stateNode;
-  if (
-    instance.transitions !== null &&
-    (instance.pendingBoundaries === null ||
-      instance.pendingBoundaries.size === 0)
-  ) {
-    if (instance.aborts === null) {
-      addMarkerCompleteCallbackToPendingTransition(
-        finishedWork.memoizedProps.name,
-        instance.transitions,
-      );
-    }
+  if (instance.transitions !== null && instance.pendingBoundaries === null) {
+    addMarkerCompleteCallbackToPendingTransition(
+      finishedWork.memoizedProps.name,
+      instance.transitions,
+    );
     instance.transitions = null;
     instance.pendingBoundaries = null;
     instance.aborts = null;
@@ -3285,7 +3293,7 @@ function commitPassiveMountOnFiber(
         if (enableTransitionTracing) {
           // Get the transitions that were initiatized during the render
           // and add a start transition callback for each of them
-          const root = finishedWork.stateNode;
+          const root: FiberRoot = finishedWork.stateNode;
           const incompleteTransitions = root.incompleteTransitions;
           // Initial render
           if (committedTransitions !== null) {
@@ -3674,21 +3682,6 @@ function commitAtomicPassiveEffects(
       }
       break;
     }
-    case TracingMarkerComponent: {
-      if (enableTransitionTracing) {
-        recursivelyTraverseAtomicPassiveEffects(
-          finishedRoot,
-          finishedWork,
-          committedLanes,
-          committedTransitions,
-        );
-        if (flags & Passive) {
-          commitTracingMarkerPassiveMountEffect(finishedWork);
-        }
-        break;
-      }
-      // Intentional fallthrough to next branch
-    }
     // eslint-disable-next-line-no-fallthrough
     default: {
       recursivelyTraverseAtomicPassiveEffects(
@@ -4016,6 +4009,43 @@ function commitPassiveUnmountInsideDeletedTreeOnFiber(
       }
       break;
     }
+    case SuspenseComponent: {
+      if (enableTransitionTracing) {
+        // We need to mark this fiber's parents as deleted
+        const offscreenFiber: Fiber = (current.child: any);
+        const instance: OffscreenInstance = offscreenFiber.stateNode;
+        const transitions = instance.transitions;
+        if (transitions !== null) {
+          const abortReason = {
+            reason: 'suspense',
+            name: current.memoizedProps.unstable_name || null,
+          };
+          if (
+            current.memoizedState === null ||
+            current.memoizedState.dehydrated === null
+          ) {
+            abortParentMarkerTransitionsForDeletedFiber(
+              offscreenFiber,
+              abortReason,
+              transitions,
+              instance,
+              true,
+            );
+
+            if (nearestMountedAncestor !== null) {
+              abortParentMarkerTransitionsForDeletedFiber(
+                nearestMountedAncestor,
+                abortReason,
+                transitions,
+                instance,
+                false,
+              );
+            }
+          }
+        }
+      }
+      break;
+    }
     case CacheComponent: {
       if (enableCache) {
         const cache = current.memoizedState.cache;
@@ -4023,6 +4053,37 @@ function commitPassiveUnmountInsideDeletedTreeOnFiber(
       }
       break;
     }
+    case TracingMarkerComponent: {
+      if (enableTransitionTracing) {
+        // We need to mark this fiber's parents as deleted
+        const instance: TracingMarkerInstance = current.stateNode;
+        const transitions = instance.transitions;
+        if (transitions !== null) {
+          const abortReason = {
+            reason: 'marker',
+            name: current.memoizedProps.name,
+          };
+          abortParentMarkerTransitionsForDeletedFiber(
+            current,
+            abortReason,
+            transitions,
+            null,
+            true,
+          );
+
+          if (nearestMountedAncestor !== null) {
+            abortParentMarkerTransitionsForDeletedFiber(
+              nearestMountedAncestor,
+              abortReason,
+              transitions,
+              null,
+              false,
+            );
+          }
+        }
+      }
+      break;
+    }
   }
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index 7a8843941eee5..135e9290f549f 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -1589,16 +1589,6 @@ function completeWork(
           popMarkerInstance(workInProgress);
         }
         bubbleProperties(workInProgress);
-
-        if (
-          current === null ||
-          (workInProgress.subtreeFlags & Visibility) !== NoFlags
-        ) {
-          // If any of our suspense children toggle visibility, this means that
-          // the pending boundaries array needs to be updated, which we only
-          // do in the passive phase.
-          workInProgress.flags |= Passive;
-        }
       }
       return null;
     }
diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
index 044418c13ea5c..724f9bdbd5944 100644
--- a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import type {TransitionTracingCallbacks, Fiber} from './ReactInternalTypes';
+import type {TransitionTracingCallbacks, Fiber, FiberRoot} from './ReactInternalTypes';
 import type {OffscreenInstance} from './ReactFiberOffscreenComponent';
 import type {StackCursor} from './ReactFiberStack.new';
 
@@ -43,6 +43,7 @@ export type BatchConfigTransition = {
   _updatedFibers?: Set<Fiber>,
 };
 
+// TODO: Is there a way to not include the tag or name here?
 export type TracingMarkerInstance = {|
   tag?: TracingMarkerTag,
   transitions: Set<Transition> | null,
@@ -121,10 +122,27 @@ export function processTransitionCallbacks(
         markerIncomplete.forEach(({transitions, aborts}, markerName) => {
           transitions.forEach(transition => {
             const filteredAborts = [];
-            aborts.forEach(deletion => {
-              const filteredDeletion = getFilteredDeletion(deletion, endTime);
-              if (filteredDeletion !== null) {
-                filteredAborts.push(filteredDeletion);
+            aborts.forEach(abort => {
+              switch (abort.reason) {
+                case 'marker': {
+                  filteredAborts.push({
+                    type: 'marker',
+                    name: abort.name,
+                    endTime,
+                  });
+                  break;
+                }
+                case 'suspense': {
+                  filteredAborts.push({
+                    type: 'suspense',
+                    name: abort.name,
+                    endTime,
+                  });
+                  break;
+                }
+                default: {
+                  break;
+                }
               }
             });
 
@@ -164,28 +182,6 @@ export function processTransitionCallbacks(
   }
 }
 
-function getFilteredDeletion(abort: TransitionAbort, endTime: number) {
-  switch (abort.reason) {
-    case 'marker': {
-      return {
-        type: 'marker',
-        name: abort.name,
-        endTime,
-      };
-    }
-    case 'suspense': {
-      return {
-        type: 'suspense',
-        name: abort.name,
-        endTime,
-      };
-    }
-    default: {
-      return null;
-    }
-  }
-}
-
 // For every tracing marker, store a pointer to it. We will later access it
 // to get the set of suspense boundaries that need to resolve before the
 // tracing marker can be logged as complete
@@ -206,7 +202,7 @@ export function pushRootMarkerInstance(workInProgress: Fiber): void {
     // transitions map. Each entry in this map functions like a tracing
     // marker does, so we can push it onto the marker instance stack
     const transitions = getWorkInProgressTransitions();
-    const root = workInProgress.stateNode;
+    const root: FiberRoot = workInProgress.stateNode;
 
     if (transitions !== null) {
       transitions.forEach(transition => {
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index d5ed83d34a077..141f7a8f59638 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -335,7 +335,7 @@ type TransitionTracingOnlyFiberRootProperties = {|
   // are considered complete when the pending suspense boundaries set is
   // empty. We can represent this as a Map of transitions to suspense
   // boundary sets
-  incompleteTransitions: Map<Array<Transition>, TracingMarkerInstance>,
+  incompleteTransitions: Map<Transition, TracingMarkerInstance>,
 |};
 
 // Exported FiberRoot type includes all properties,

From e535e8000ec5f974f55e547d03fd7761a00f63a6 Mon Sep 17 00:00:00 2001
From: Luna <lunaris.ruan@gmail.com>
Date: Mon, 8 Aug 2022 20:56:56 -0400
Subject: [PATCH 4/5] old

---
 .../react-reconciler/src/ReactFiber.old.js    |   2 +
 .../src/ReactFiberBeginWork.old.js            |  10 +-
 .../src/ReactFiberCommitWork.old.js           | 283 ++++++++++++++++--
 .../src/ReactFiberCompleteWork.old.js         |  10 -
 .../ReactFiberTracingMarkerComponent.old.js   |  69 ++++-
 .../src/ReactFiberWorkLoop.old.js             |  36 ++-
 6 files changed, 360 insertions(+), 50 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiber.old.js b/packages/react-reconciler/src/ReactFiber.old.js
index 572c1b770adaa..d8f1ef424bd13 100644
--- 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.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 65403e6c8ad37..449f306e7ef89 100644
--- 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__) {
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 6c17402e08460..9648c32f38069 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -30,7 +30,11 @@ import type {
 import type {HookFlags} from './ReactHookEffectTags';
 import type {Cache} from './ReactFiberCacheComponent.old';
 import type {RootState} from './ReactFiberRoot.old';
-import type {Transition} from './ReactFiberTracingMarkerComponent.old';
+import type {
+  Transition,
+  TracingMarkerInstance,
+  TransitionAbort,
+} from './ReactFiberTracingMarkerComponent.old';
 
 import {
   enableCreateEventHandleAPI,
@@ -146,6 +150,7 @@ import {
   addTransitionProgressCallbackToPendingTransition,
   addTransitionCompleteCallbackToPendingTransition,
   addMarkerProgressCallbackToPendingTransition,
+  addMarkerIncompleteCallbackToPendingTransition,
   addMarkerCompleteCallbackToPendingTransition,
   setIsRunningInsertionEffect,
 } from './ReactFiberWorkLoop.old';
@@ -1135,6 +1140,141 @@ function commitLayoutEffectOnFiber(
   }
 }
 
+function abortRootTransitions(
+  root: FiberRoot,
+  abort: TransitionAbort,
+  deletedTransitions: Set<Transition>,
+  deletedOffscreenInstance: OffscreenInstance | null,
+  isInDeletedTree: boolean,
+) {
+  if (enableTransitionTracing) {
+    const rootTransitions = root.incompleteTransitions;
+    deletedTransitions.forEach(transition => {
+      if (rootTransitions.has(transition)) {
+        const transitionInstance: TracingMarkerInstance = (rootTransitions.get(
+          transition,
+        ): any);
+        if (transitionInstance.aborts === null) {
+          transitionInstance.aborts = [];
+        }
+        transitionInstance.aborts.push(abort);
+
+        if (deletedOffscreenInstance !== null) {
+          if (
+            transitionInstance.pendingBoundaries !== null &&
+            transitionInstance.pendingBoundaries.has(deletedOffscreenInstance)
+          ) {
+            transitionInstance.pendingBoundaries.delete(
+              deletedOffscreenInstance,
+            );
+          }
+        }
+      }
+    });
+  }
+}
+
+function abortTracingMarkerTransitions(
+  abortedFiber: Fiber,
+  abort: TransitionAbort,
+  deletedTransitions: Set<Transition>,
+  deletedOffscreenInstance: OffscreenInstance | null,
+  isInDeletedTree: boolean,
+) {
+  if (enableTransitionTracing) {
+    const markerInstance: TracingMarkerInstance = abortedFiber.stateNode;
+    const markerTransitions = markerInstance.transitions;
+    const pendingBoundaries = markerInstance.pendingBoundaries;
+    if (markerTransitions !== null) {
+      // TODO: Refactor this code. Is there a way to move this code to
+      // the deletions phase instead of calculating it here while making sure
+      // complete is called appropriately?
+      deletedTransitions.forEach(transition => {
+        // If one of the transitions on the tracing marker is a transition
+        // that was in an aborted subtree, we will abort that tracing marker
+        if (
+          abortedFiber !== null &&
+          markerTransitions.has(transition) &&
+          (markerInstance.aborts === null ||
+            !markerInstance.aborts.includes(abort))
+        ) {
+          if (markerInstance.transitions !== null) {
+            if (markerInstance.aborts === null) {
+              markerInstance.aborts = [abort];
+              addMarkerIncompleteCallbackToPendingTransition(
+                abortedFiber.memoizedProps.name,
+                markerInstance.transitions,
+                markerInstance.aborts,
+              );
+            } else {
+              markerInstance.aborts.push(abort);
+            }
+
+            // We only want to call onTransitionProgress when the marker hasn't been
+            // deleted
+            if (
+              deletedOffscreenInstance !== null &&
+              !isInDeletedTree &&
+              pendingBoundaries !== null &&
+              pendingBoundaries.has(deletedOffscreenInstance)
+            ) {
+              pendingBoundaries.delete(deletedOffscreenInstance);
+
+              addMarkerProgressCallbackToPendingTransition(
+                abortedFiber.memoizedProps.name,
+                deletedTransitions,
+                pendingBoundaries,
+              );
+            }
+          }
+        }
+      });
+    }
+  }
+}
+
+function abortParentMarkerTransitionsForDeletedFiber(
+  abortedFiber: Fiber,
+  abort: TransitionAbort,
+  deletedTransitions: Set<Transition>,
+  deletedOffscreenInstance: OffscreenInstance | null,
+  isInDeletedTree: boolean,
+) {
+  if (enableTransitionTracing) {
+    // Find all pending markers that are waiting on child suspense boundaries in the
+    // aborted subtree and cancels them
+    let fiber = abortedFiber;
+    while (fiber !== null) {
+      switch (fiber.tag) {
+        case TracingMarkerComponent:
+          abortTracingMarkerTransitions(
+            fiber,
+            abort,
+            deletedTransitions,
+            deletedOffscreenInstance,
+            isInDeletedTree,
+          );
+          break;
+        case HostRoot:
+          const root = fiber.stateNode;
+          abortRootTransitions(
+            root,
+            abort,
+            deletedTransitions,
+            deletedOffscreenInstance,
+            isInDeletedTree,
+          );
+
+          break;
+        default:
+          break;
+      }
+
+      fiber = fiber.return;
+    }
+  }
+}
+
 function commitTransitionProgress(offscreenFiber: Fiber) {
   if (enableTransitionTracing) {
     // This function adds suspense boundaries to the root
@@ -1180,6 +1320,7 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
         pendingMarkers.forEach(markerInstance => {
           const pendingBoundaries = markerInstance.pendingBoundaries;
           const transitions = markerInstance.transitions;
+          const markerName = markerInstance.name;
           if (
             pendingBoundaries !== null &&
             !pendingBoundaries.has(offscreenInstance)
@@ -1190,10 +1331,10 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
             if (transitions !== null) {
               if (
                 markerInstance.tag === TransitionTracingMarker &&
-                markerInstance.name !== undefined
+                markerName !== null
               ) {
                 addMarkerProgressCallbackToPendingTransition(
-                  markerInstance.name,
+                  markerName,
                   transitions,
                   pendingBoundaries,
                 );
@@ -1217,6 +1358,7 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
         pendingMarkers.forEach(markerInstance => {
           const pendingBoundaries = markerInstance.pendingBoundaries;
           const transitions = markerInstance.transitions;
+          const markerName = markerInstance.name;
           if (
             pendingBoundaries !== null &&
             pendingBoundaries.has(offscreenInstance)
@@ -1225,13 +1367,27 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
             if (transitions !== null) {
               if (
                 markerInstance.tag === TransitionTracingMarker &&
-                markerInstance.name !== undefined
+                markerName !== null
               ) {
                 addMarkerProgressCallbackToPendingTransition(
-                  markerInstance.name,
+                  markerName,
                   transitions,
                   pendingBoundaries,
                 );
+
+                // If there are no more unresolved suspense boundaries, the interaction
+                // is considered finished
+                if (pendingBoundaries.size === 0) {
+                  if (markerInstance.aborts === null) {
+                    addMarkerCompleteCallbackToPendingTransition(
+                      markerName,
+                      transitions,
+                    );
+                  }
+                  markerInstance.transitions = null;
+                  markerInstance.pendingBoundaries = null;
+                  markerInstance.aborts = null;
+                }
               } else if (markerInstance.tag === TransitionRoot) {
                 transitions.forEach(transition => {
                   addTransitionProgressCallbackToPendingTransition(
@@ -1750,6 +1906,7 @@ function commitDeletionEffects(
           'a bug in React. Please file an issue.',
       );
     }
+
     commitDeletionEffectsOnFiber(root, returnFiber, deletedFiber);
     hostParent = null;
     hostParentIsContainer = false;
@@ -1996,6 +2153,7 @@ function commitDeletionEffectsOnFiber(
         const prevOffscreenSubtreeWasHidden = offscreenSubtreeWasHidden;
         offscreenSubtreeWasHidden =
           prevOffscreenSubtreeWasHidden || deletedFiber.memoizedState !== null;
+
         recursivelyTraverseDeletionEffects(
           finishedRoot,
           nearestMountedAncestor,
@@ -2986,6 +3144,12 @@ function commitOffscreenPassiveMountEffects(
     }
 
     commitTransitionProgress(finishedWork);
+
+    // TODO: Refactor this into an if/else branch
+    if (!isHidden) {
+      instance.transitions = null;
+      instance.pendingMarkers = null;
+    }
   }
 }
 
@@ -3016,20 +3180,18 @@ function commitCachePassiveMountEffect(
 function commitTracingMarkerPassiveMountEffect(finishedWork: Fiber) {
   // Get the transitions that were initiatized during the render
   // and add a start transition callback for each of them
+  // We will only call this on initial mount of the tracing marker
+  // only if there are no suspense children
   const instance = finishedWork.stateNode;
-  if (
-    instance.transitions !== null &&
-    (instance.pendingBoundaries === null ||
-      instance.pendingBoundaries.size === 0)
-  ) {
-    instance.transitions.forEach(transition => {
-      addMarkerCompleteCallbackToPendingTransition(
-        finishedWork.memoizedProps.name,
-        instance.transitions,
-      );
-    });
+  if (instance.transitions !== null && instance.pendingBoundaries === null) {
+    addMarkerCompleteCallbackToPendingTransition(
+      finishedWork.memoizedProps.name,
+      instance.transitions,
+    );
     instance.transitions = null;
     instance.pendingBoundaries = null;
+    instance.aborts = null;
+    instance.name = null;
   }
 }
 
@@ -3131,7 +3293,7 @@ function commitPassiveMountOnFiber(
         if (enableTransitionTracing) {
           // Get the transitions that were initiatized during the render
           // and add a start transition callback for each of them
-          const root = finishedWork.stateNode;
+          const root: FiberRoot = finishedWork.stateNode;
           const incompleteTransitions = root.incompleteTransitions;
           // Initial render
           if (committedTransitions !== null) {
@@ -3145,7 +3307,9 @@ function commitPassiveMountOnFiber(
           incompleteTransitions.forEach((markerInstance, transition) => {
             const pendingBoundaries = markerInstance.pendingBoundaries;
             if (pendingBoundaries === null || pendingBoundaries.size === 0) {
-              addTransitionCompleteCallbackToPendingTransition(transition);
+              if (markerInstance.aborts === null) {
+                addTransitionCompleteCallbackToPendingTransition(transition);
+              }
               incompleteTransitions.delete(transition);
             }
           });
@@ -3518,21 +3682,6 @@ function commitAtomicPassiveEffects(
       }
       break;
     }
-    case TracingMarkerComponent: {
-      if (enableTransitionTracing) {
-        recursivelyTraverseAtomicPassiveEffects(
-          finishedRoot,
-          finishedWork,
-          committedLanes,
-          committedTransitions,
-        );
-        if (flags & Passive) {
-          commitTracingMarkerPassiveMountEffect(finishedWork);
-        }
-        break;
-      }
-      // Intentional fallthrough to next branch
-    }
     // eslint-disable-next-line-no-fallthrough
     default: {
       recursivelyTraverseAtomicPassiveEffects(
@@ -3860,6 +4009,43 @@ function commitPassiveUnmountInsideDeletedTreeOnFiber(
       }
       break;
     }
+    case SuspenseComponent: {
+      if (enableTransitionTracing) {
+        // We need to mark this fiber's parents as deleted
+        const offscreenFiber: Fiber = (current.child: any);
+        const instance: OffscreenInstance = offscreenFiber.stateNode;
+        const transitions = instance.transitions;
+        if (transitions !== null) {
+          const abortReason = {
+            reason: 'suspense',
+            name: current.memoizedProps.unstable_name || null,
+          };
+          if (
+            current.memoizedState === null ||
+            current.memoizedState.dehydrated === null
+          ) {
+            abortParentMarkerTransitionsForDeletedFiber(
+              offscreenFiber,
+              abortReason,
+              transitions,
+              instance,
+              true,
+            );
+
+            if (nearestMountedAncestor !== null) {
+              abortParentMarkerTransitionsForDeletedFiber(
+                nearestMountedAncestor,
+                abortReason,
+                transitions,
+                instance,
+                false,
+              );
+            }
+          }
+        }
+      }
+      break;
+    }
     case CacheComponent: {
       if (enableCache) {
         const cache = current.memoizedState.cache;
@@ -3867,6 +4053,37 @@ function commitPassiveUnmountInsideDeletedTreeOnFiber(
       }
       break;
     }
+    case TracingMarkerComponent: {
+      if (enableTransitionTracing) {
+        // We need to mark this fiber's parents as deleted
+        const instance: TracingMarkerInstance = current.stateNode;
+        const transitions = instance.transitions;
+        if (transitions !== null) {
+          const abortReason = {
+            reason: 'marker',
+            name: current.memoizedProps.name,
+          };
+          abortParentMarkerTransitionsForDeletedFiber(
+            current,
+            abortReason,
+            transitions,
+            null,
+            true,
+          );
+
+          if (nearestMountedAncestor !== null) {
+            abortParentMarkerTransitionsForDeletedFiber(
+              nearestMountedAncestor,
+              abortReason,
+              transitions,
+              null,
+              false,
+            );
+          }
+        }
+      }
+      break;
+    }
   }
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index 1ff1a5173ec10..3fd1bffbc3a99 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -1589,16 +1589,6 @@ function completeWork(
           popMarkerInstance(workInProgress);
         }
         bubbleProperties(workInProgress);
-
-        if (
-          current === null ||
-          (workInProgress.subtreeFlags & Visibility) !== NoFlags
-        ) {
-          // If any of our suspense children toggle visibility, this means that
-          // the pending boundaries array needs to be updated, which we only
-          // do in the passive phase.
-          workInProgress.flags |= Passive;
-        }
       }
       return null;
     }
diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
index 0e3c352d77287..1d2132489f7b6 100644
--- a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import type {TransitionTracingCallbacks, Fiber} from './ReactInternalTypes';
+import type {TransitionTracingCallbacks, Fiber, FiberRoot} from './ReactInternalTypes';
 import type {OffscreenInstance} from './ReactFiberOffscreenComponent';
 import type {StackCursor} from './ReactFiberStack.old';
 
@@ -21,7 +21,14 @@ export type PendingTransitionCallbacks = {
   transitionStart: Array<Transition> | null,
   transitionProgress: Map<Transition, PendingBoundaries> | null,
   transitionComplete: Array<Transition> | null,
-  markerProgress: Map<string, TracingMarkerInstance> | null,
+  markerProgress: Map<
+    string,
+    {pendingBoundaries: PendingBoundaries, transitions: Set<Transition>},
+  > | null,
+  markerIncomplete: Map<
+    string,
+    {aborts: Array<TransitionAbort>, transitions: Set<Transition>},
+  > | null,
   markerComplete: Map<string, Set<Transition>> | null,
 };
 
@@ -36,11 +43,18 @@ export type BatchConfigTransition = {
   _updatedFibers?: Set<Fiber>,
 };
 
+// TODO: Is there a way to not include the tag or name here?
 export type TracingMarkerInstance = {|
   tag?: TracingMarkerTag,
-  pendingBoundaries: PendingBoundaries | null,
   transitions: Set<Transition> | null,
-  name?: string,
+  pendingBoundaries: PendingBoundaries | null,
+  aborts: Array<TransitionAbort> | null,
+  name: string | null,
+|};
+
+export type TransitionAbort = {|
+  reason: 'error' | 'unknown' | 'marker' | 'suspense',
+  name?: string | null,
 |};
 
 export const TransitionRoot = 0;
@@ -69,6 +83,7 @@ export function processTransitionCallbacks(
       if (onMarkerProgress != null && markerProgress !== null) {
         markerProgress.forEach((markerInstance, markerName) => {
           if (markerInstance.transitions !== null) {
+            // TODO: Clone the suspense object so users can't modify it
             const pending =
               markerInstance.pendingBoundaries !== null
                 ? Array.from(markerInstance.pendingBoundaries.values())
@@ -101,6 +116,48 @@ export function processTransitionCallbacks(
         });
       }
 
+      const markerIncomplete = pendingTransitions.markerIncomplete;
+      const onMarkerIncomplete = callbacks.onMarkerIncomplete;
+      if (onMarkerIncomplete != null && markerIncomplete !== null) {
+        markerIncomplete.forEach(({transitions, aborts}, markerName) => {
+          transitions.forEach(transition => {
+            const filteredAborts = [];
+            aborts.forEach(abort => {
+              switch (abort.reason) {
+                case 'marker': {
+                  filteredAborts.push({
+                    type: 'marker',
+                    name: abort.name,
+                    endTime,
+                  });
+                  break;
+                }
+                case 'suspense': {
+                  filteredAborts.push({
+                    type: 'suspense',
+                    name: abort.name,
+                    endTime,
+                  });
+                  break;
+                }
+                default: {
+                  break;
+                }
+              }
+            });
+
+            if (filteredAborts.length > 0) {
+              onMarkerIncomplete(
+                transition.name,
+                markerName,
+                transition.startTime,
+                filteredAborts,
+              );
+            }
+          });
+        });
+      }
+
       const transitionProgress = pendingTransitions.transitionProgress;
       const onTransitionProgress = callbacks.onTransitionProgress;
       if (onTransitionProgress != null && transitionProgress !== null) {
@@ -145,7 +202,7 @@ export function pushRootMarkerInstance(workInProgress: Fiber): void {
     // transitions map. Each entry in this map functions like a tracing
     // marker does, so we can push it onto the marker instance stack
     const transitions = getWorkInProgressTransitions();
-    const root = workInProgress.stateNode;
+    const root: FiberRoot = workInProgress.stateNode;
 
     if (transitions !== null) {
       transitions.forEach(transition => {
@@ -154,6 +211,8 @@ export function pushRootMarkerInstance(workInProgress: Fiber): void {
             tag: TransitionRoot,
             transitions: new Set([transition]),
             pendingBoundaries: null,
+            aborts: null,
+            name: null,
           };
           root.incompleteTransitions.set(transition, markerInstance);
         }
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 14e378794bfbc..5955f43d02802 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -18,6 +18,7 @@ import type {
   PendingTransitionCallbacks,
   PendingBoundaries,
   Transition,
+  TransitionAbort,
 } from './ReactFiberTracingMarkerComponent.old';
 import type {OffscreenInstance} from './ReactFiberOffscreenComponent';
 
@@ -355,6 +356,7 @@ export function addTransitionStartCallbackToPendingTransition(
         transitionProgress: null,
         transitionComplete: null,
         markerProgress: null,
+        markerIncomplete: null,
         markerComplete: null,
       };
     }
@@ -370,7 +372,7 @@ export function addTransitionStartCallbackToPendingTransition(
 export function addMarkerProgressCallbackToPendingTransition(
   markerName: string,
   transitions: Set<Transition>,
-  pendingBoundaries: PendingBoundaries | null,
+  pendingBoundaries: PendingBoundaries,
 ) {
   if (enableTransitionTracing) {
     if (currentPendingTransitionCallbacks === null) {
@@ -379,6 +381,7 @@ export function addMarkerProgressCallbackToPendingTransition(
         transitionProgress: null,
         transitionComplete: null,
         markerProgress: new Map(),
+        markerIncomplete: null,
         markerComplete: null,
       };
     }
@@ -394,6 +397,34 @@ export function addMarkerProgressCallbackToPendingTransition(
   }
 }
 
+export function addMarkerIncompleteCallbackToPendingTransition(
+  markerName: string,
+  transitions: Set<Transition>,
+  aborts: Array<TransitionAbort>,
+) {
+  if (enableTransitionTracing) {
+    if (currentPendingTransitionCallbacks === null) {
+      currentPendingTransitionCallbacks = {
+        transitionStart: null,
+        transitionProgress: null,
+        transitionComplete: null,
+        markerProgress: null,
+        markerIncomplete: new Map(),
+        markerComplete: null,
+      };
+    }
+
+    if (currentPendingTransitionCallbacks.markerIncomplete === null) {
+      currentPendingTransitionCallbacks.markerIncomplete = new Map();
+    }
+
+    currentPendingTransitionCallbacks.markerIncomplete.set(markerName, {
+      transitions,
+      aborts,
+    });
+  }
+}
+
 export function addMarkerCompleteCallbackToPendingTransition(
   markerName: string,
   transitions: Set<Transition>,
@@ -405,6 +436,7 @@ export function addMarkerCompleteCallbackToPendingTransition(
         transitionProgress: null,
         transitionComplete: null,
         markerProgress: null,
+        markerIncomplete: null,
         markerComplete: new Map(),
       };
     }
@@ -431,6 +463,7 @@ export function addTransitionProgressCallbackToPendingTransition(
         transitionProgress: new Map(),
         transitionComplete: null,
         markerProgress: null,
+        markerIncomplete: null,
         markerComplete: null,
       };
     }
@@ -456,6 +489,7 @@ export function addTransitionCompleteCallbackToPendingTransition(
         transitionProgress: null,
         transitionComplete: [],
         markerProgress: null,
+        markerIncomplete: null,
         markerComplete: null,
       };
     }

From 0cbae60a5c349839f48a9cd98041e717ef715c51 Mon Sep 17 00:00:00 2001
From: Luna <lunaris.ruan@gmail.com>
Date: Thu, 25 Aug 2022 16:48:13 +0100
Subject: [PATCH 5/5] lint

---
 .../src/ReactFiberTracingMarkerComponent.new.js             | 6 +++++-
 .../src/ReactFiberTracingMarkerComponent.old.js             | 6 +++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
index 724f9bdbd5944..1be1e7f930994 100644
--- a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
@@ -7,7 +7,11 @@
  * @flow
  */
 
-import type {TransitionTracingCallbacks, Fiber, FiberRoot} from './ReactInternalTypes';
+import type {
+  TransitionTracingCallbacks,
+  Fiber,
+  FiberRoot,
+} from './ReactInternalTypes';
 import type {OffscreenInstance} from './ReactFiberOffscreenComponent';
 import type {StackCursor} from './ReactFiberStack.new';
 
diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
index 1d2132489f7b6..e88930867851a 100644
--- a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
@@ -7,7 +7,11 @@
  * @flow
  */
 
-import type {TransitionTracingCallbacks, Fiber, FiberRoot} from './ReactInternalTypes';
+import type {
+  TransitionTracingCallbacks,
+  Fiber,
+  FiberRoot,
+} from './ReactInternalTypes';
 import type {OffscreenInstance} from './ReactFiberOffscreenComponent';
 import type {StackCursor} from './ReactFiberStack.old';