[DevTools] Refactor incompleteTransitions field from Root Fiber memoized state to FiberRoot (#24765)

lunaruan · web-flow · commit cf665c4b73a2 · 2022-06-20T17:08:54.000-07:00
`incompleteTransitions` persists across renders, so it should be part of the `fiber.stateNode` (ie FiberRoot) rather than `fiber.memoizedState`
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -1317,7 +1317,6 @@ function updateHostRoot(current, workInProgress, renderLanes) {
       element: nextChildren,
       isDehydrated: false,
       cache: nextState.cache,
-      incompleteTransitions: nextState.incompleteTransitions,
     };
     const updateQueue: UpdateQueue<RootState> = (workInProgress.updateQueue: any);
     // `baseState` can always be the last state because the root doesn't
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -1317,7 +1317,6 @@ function updateHostRoot(current, workInProgress, renderLanes) {
       element: nextChildren,
       isDehydrated: false,
       cache: nextState.cache,
-      incompleteTransitions: nextState.incompleteTransitions,
     };
     const updateQueue: UpdateQueue<RootState> = (workInProgress.updateQueue: any);
     // `baseState` can always be the last state because the root doesn't
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -2809,12 +2809,12 @@ function commitPassiveMountOnFiber(
       if (enableTransitionTracing) {
         // Get the transitions that were initiatized during the render
         // and add a start transition callback for each of them
-        const state = finishedWork.memoizedState;
-        let incompleteTransitions = state.incompleteTransitions;
+        const root = finishedWork.stateNode;
+        let incompleteTransitions = root.incompleteTransitions;
         // Initial render
         if (committedTransitions !== null) {
-          if (state.incompleteTransitions === null) {
-            state.incompleteTransitions = incompleteTransitions = new Map();
+          if (incompleteTransitions === null) {
+            root.incompleteTransitions = incompleteTransitions = new Map();
           }
 
           committedTransitions.forEach(transition => {
@@ -2849,7 +2849,7 @@ function commitPassiveMountOnFiber(
           incompleteTransitions === null ||
           incompleteTransitions.size === 0
         ) {
-          state.incompleteTransitions = null;
+          root.incompleteTransitions = null;
         }
       }
       break;
@@ -2889,22 +2889,19 @@ function commitPassiveMountOnFiber(
       if (enableTransitionTracing) {
         const isFallback = finishedWork.memoizedState;
         const queue = (finishedWork.updateQueue: any);
-        const rootMemoizedState = finishedRoot.current.memoizedState;
         const instance = finishedWork.stateNode;
 
         if (queue !== null) {
           if (isFallback) {
             const transitions = queue.transitions;
             let prevTransitions = instance.transitions;
-            let rootIncompleteTransitions =
-              rootMemoizedState.incompleteTransitions;
+            let rootIncompleteTransitions = finishedRoot.incompleteTransitions;
 
             // We lazily instantiate transition tracing relevant maps
             // and sets in the commit phase as we need to use them. We only
             // instantiate them in the fallback phase on an as needed basis
-            if (rootMemoizedState.incompleteTransitions === null) {
-              // TODO(luna): Move this to the fiber root
-              rootMemoizedState.incompleteTransitions = rootIncompleteTransitions = new Map();
+            if (rootIncompleteTransitions === null) {
+              finishedRoot.incompleteTransitions = rootIncompleteTransitions = new Map();
             }
             if (instance.pendingMarkers === null) {
               instance.pendingMarkers = new Set();
@@ -2924,12 +2921,14 @@ function commitPassiveMountOnFiber(
                 // the queue's marker set. We will iterate through the marker
                 // set when we toggle state on the suspense boundary and
                 // add or remove the pending suspense boundaries as needed.
-                if (!rootIncompleteTransitions.has(transition)) {
-                  rootIncompleteTransitions.set(transition, new Map());
+                if (rootIncompleteTransitions !== null) {
+                  if (!rootIncompleteTransitions.has(transition)) {
+                    rootIncompleteTransitions.set(transition, new Map());
+                  }
+                  instance.pendingMarkers.add(
+                    rootIncompleteTransitions.get(transition),
+                  );
                 }
-                instance.pendingMarkers.add(
-                  rootIncompleteTransitions.get(transition),
-                );
               });
             }
           }
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -2809,12 +2809,12 @@ function commitPassiveMountOnFiber(
       if (enableTransitionTracing) {
         // Get the transitions that were initiatized during the render
         // and add a start transition callback for each of them
-        const state = finishedWork.memoizedState;
-        let incompleteTransitions = state.incompleteTransitions;
+        const root = finishedWork.stateNode;
+        let incompleteTransitions = root.incompleteTransitions;
         // Initial render
         if (committedTransitions !== null) {
-          if (state.incompleteTransitions === null) {
-            state.incompleteTransitions = incompleteTransitions = new Map();
+          if (incompleteTransitions === null) {
+            root.incompleteTransitions = incompleteTransitions = new Map();
           }
 
           committedTransitions.forEach(transition => {
@@ -2849,7 +2849,7 @@ function commitPassiveMountOnFiber(
           incompleteTransitions === null ||
           incompleteTransitions.size === 0
         ) {
-          state.incompleteTransitions = null;
+          root.incompleteTransitions = null;
         }
       }
       break;
@@ -2889,22 +2889,19 @@ function commitPassiveMountOnFiber(
       if (enableTransitionTracing) {
         const isFallback = finishedWork.memoizedState;
         const queue = (finishedWork.updateQueue: any);
-        const rootMemoizedState = finishedRoot.current.memoizedState;
         const instance = finishedWork.stateNode;
 
         if (queue !== null) {
           if (isFallback) {
             const transitions = queue.transitions;
             let prevTransitions = instance.transitions;
-            let rootIncompleteTransitions =
-              rootMemoizedState.incompleteTransitions;
+            let rootIncompleteTransitions = finishedRoot.incompleteTransitions;
 
             // We lazily instantiate transition tracing relevant maps
             // and sets in the commit phase as we need to use them. We only
             // instantiate them in the fallback phase on an as needed basis
-            if (rootMemoizedState.incompleteTransitions === null) {
-              // TODO(luna): Move this to the fiber root
-              rootMemoizedState.incompleteTransitions = rootIncompleteTransitions = new Map();
+            if (rootIncompleteTransitions === null) {
+              finishedRoot.incompleteTransitions = rootIncompleteTransitions = new Map();
             }
             if (instance.pendingMarkers === null) {
               instance.pendingMarkers = new Set();
@@ -2924,12 +2921,14 @@ function commitPassiveMountOnFiber(
                 // the queue's marker set. We will iterate through the marker
                 // set when we toggle state on the suspense boundary and
                 // add or remove the pending suspense boundaries as needed.
-                if (!rootIncompleteTransitions.has(transition)) {
-                  rootIncompleteTransitions.set(transition, new Map());
+                if (rootIncompleteTransitions !== null) {
+                  if (!rootIncompleteTransitions.has(transition)) {
+                    rootIncompleteTransitions.set(transition, new Map());
+                  }
+                  instance.pendingMarkers.add(
+                    rootIncompleteTransitions.get(transition),
+                  );
                 }
-                instance.pendingMarkers.add(
-                  rootIncompleteTransitions.get(transition),
-                );
               });
             }
           }
diff --git a/packages/react-reconciler/src/ReactFiberRoot.new.js b/packages/react-reconciler/src/ReactFiberRoot.new.js
@@ -15,10 +15,6 @@ import type {
 } from './ReactInternalTypes';
 import type {RootTag} from './ReactRootTags';
 import type {Cache} from './ReactFiberCacheComponent.new';
-import type {
-  PendingSuspenseBoundaries,
-  Transition,
-} from './ReactFiberTracingMarkerComponent.new';
 
 import {noTimeout, supportsHydration} from './ReactFiberHostConfig';
 import {createHostRootFiber} from './ReactFiber.new';
@@ -45,13 +41,6 @@ export type RootState = {
   element: any,
   isDehydrated: boolean,
   cache: Cache,
-  // Transitions on the root can be represented as a bunch of tracing markers.
-  // Each entangled group of transitions can be treated as a tracing marker.
-  // It will have a set of pending suspense boundaries. These transitions
-  // 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<Transition, PendingSuspenseBoundaries> | null,
 };
 
 function FiberRootNode(
@@ -109,6 +98,7 @@ function FiberRootNode(
     for (let i = 0; i < TotalLanes; i++) {
       transitionLanesMap.push(null);
     }
+    this.incompleteTransitions = null;
   }
 
   if (enableProfilerTimer && enableProfilerCommitHooks) {
@@ -194,15 +184,13 @@ export function createFiberRoot(
       element: initialChildren,
       isDehydrated: hydrate,
       cache: initialCache,
-      incompleteTransitions: null,
     };
     uninitializedFiber.memoizedState = initialState;
   } else {
     const initialState: RootState = {
       element: initialChildren,
       isDehydrated: hydrate,
       cache: (null: any), // not enabled yet
-      incompleteTransitions: null,
     };
     uninitializedFiber.memoizedState = initialState;
   }
diff --git a/packages/react-reconciler/src/ReactFiberRoot.old.js b/packages/react-reconciler/src/ReactFiberRoot.old.js
@@ -15,10 +15,6 @@ import type {
 } from './ReactInternalTypes';
 import type {RootTag} from './ReactRootTags';
 import type {Cache} from './ReactFiberCacheComponent.old';
-import type {
-  PendingSuspenseBoundaries,
-  Transition,
-} from './ReactFiberTracingMarkerComponent.old';
 
 import {noTimeout, supportsHydration} from './ReactFiberHostConfig';
 import {createHostRootFiber} from './ReactFiber.old';
@@ -45,13 +41,6 @@ export type RootState = {
   element: any,
   isDehydrated: boolean,
   cache: Cache,
-  // Transitions on the root can be represented as a bunch of tracing markers.
-  // Each entangled group of transitions can be treated as a tracing marker.
-  // It will have a set of pending suspense boundaries. These transitions
-  // 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<Transition, PendingSuspenseBoundaries> | null,
 };
 
 function FiberRootNode(
@@ -107,6 +96,7 @@ function FiberRootNode(
     for (let i = 0; i < TotalLanes; i++) {
       transitionLanesMap.push(null);
     }
+    this.incompleteTransitions = null;
   }
 
   if (enableProfilerTimer && enableProfilerCommitHooks) {
@@ -192,15 +182,13 @@ export function createFiberRoot(
       element: initialChildren,
       isDehydrated: hydrate,
       cache: initialCache,
-      incompleteTransitions: null,
     };
     uninitializedFiber.memoizedState = initialState;
   } else {
     const initialState: RootState = {
       element: initialChildren,
       isDehydrated: hydrate,
       cache: (null: any), // not enabled yet
-      incompleteTransitions: null,
     };
     uninitializedFiber.memoizedState = initialState;
   }
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -26,6 +26,9 @@ import type {Lane, Lanes, LaneMap} from './ReactFiberLane.old';
 import type {RootTag} from './ReactRootTags';
 import type {TimeoutHandle, NoTimeout} from './ReactFiberHostConfig';
 import type {Cache} from './ReactFiberCacheComponent.old';
+// Doing this because there's a merge conflict because of the way sync-reconciler-fork
+// is implemented
+import type {PendingSuspenseBoundaries} from './ReactFiberTracingMarkerComponent.new';
 import type {Transition} from './ReactFiberTracingMarkerComponent.new';
 import type {ConcurrentUpdate} from './ReactFiberConcurrentUpdates.new';
 
@@ -326,6 +329,13 @@ export type TransitionTracingCallbacks = {
 type TransitionTracingOnlyFiberRootProperties = {|
   transitionCallbacks: null | TransitionTracingCallbacks,
   transitionLanes: Array<Array<Transition> | null>,
+  // Transitions on the root can be represented as a bunch of tracing markers.
+  // Each entangled group of transitions can be treated as a tracing marker.
+  // It will have a set of pending suspense boundaries. These transitions
+  // 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<Transition, PendingSuspenseBoundaries> | null,
 |};
 
 // Exported FiberRoot type includes all properties,
