commit work

Author: lunaruan

packages/react-reconciler/src/ReactFiberCommitWork.new.js

@@ -22,7 +22,10 @@ import type {SuspenseState} from './ReactFiberSuspenseComponent.new';
 import type {UpdateQueue} from './ReactUpdateQueue.new';
 import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.new';
 import type {Wakeable} from 'shared/ReactTypes';
-import type {OffscreenState} from './ReactFiberOffscreenComponent';
+import type {
+  OffscreenState,
+  OffscreenInstance,
+} from './ReactFiberOffscreenComponent';
 import type {HookFlags} from './ReactHookEffectTags';
 import type {Cache} from './ReactFiberCacheComponent.new';
 import type {RootState} from './ReactFiberRoot.new';
@@ -1072,68 +1075,80 @@ function commitTransitionProgress(
   finishedRoot: FiberRoot,
   offscreenFiber: Fiber,
 ) {
-  // This function adds suspense boundaries to the root
-  // or tracing marker's pendingSuspenseBoundaries map.
-  // When a suspense boundary goes from a resolved to a fallback
-  // state we add the boundary to the map, and when it goes from
-  // a fallback to a resolved state, we remove the boundary from
-  // the map.
-
-  // We use stateNode on the Offscreen component as a stable object
-  // that doesnt change from render to render. This way we can
-  // distinguish between different Offscreen instances (vs. the same
-  // Offscreen instance with different fibers)
-  const offscreenInstance: OffscreenInstance = offscreenFiber.stateNode;
-
-  let prevState: SuspenseState | null = null;
-  const previousFiber = offscreenFiber.alternate;
-  if (previousFiber !== null && previousFiber.memoizedState !== null) {
-    prevState = previousFiber.memoizedState;
-  }
-  const nextState: SuspenseState | null = offscreenFiber.memoizedState;
-
-  const wasHidden = prevState !== null;
-  const isHidden = nextState !== null;
-
-  const rootState: RootState = finishedRoot.current.memoizedState;
-  // TODO(luna) move pendingSuspenseBoundaries and transitions from
-  // HostRoot fiber to FiberRoot
-  const rootPendingBoundaries = rootState.pendingSuspenseBoundaries;
-
-  // If there is a name on the suspense boundary, store that in
-  // the pending boundaries.
-  let name = null;
-  const parent = offscreenFiber.return;
-  if (
-    parent !== null &&
-    parent.tag === SuspenseComponent &&
-    parent.memoizedProps.unstable_name
-  ) {
-    name = parent.memoizedProps.unstable_name;
-  }
+  if (enableTransitionTracing) {
+    // This function adds suspense boundaries to the root
+    // or tracing marker's pendingSuspenseBoundaries map.
+    // When a suspense boundary goes from a resolved to a fallback
+    // state we add the boundary to the map, and when it goes from
+    // a fallback to a resolved state, we remove the boundary from
+    // the map.
+
+    // We use stateNode on the Offscreen component as a stable object
+    // that doesnt change from render to render. This way we can
+    // distinguish between different Offscreen instances (vs. the same
+    // Offscreen instance with different fibers)
+    const offscreenInstance: OffscreenInstance = offscreenFiber.stateNode;
+
+    let prevState: SuspenseState | null = null;
+    const previousFiber = offscreenFiber.alternate;
+    if (previousFiber !== null && previousFiber.memoizedState !== null) {
+      prevState = previousFiber.memoizedState;
+    }
+    const nextState: SuspenseState | null = offscreenFiber.memoizedState;
+
+    const wasHidden = prevState !== null;
+    const isHidden = nextState !== null;
+
+    const rootState: RootState = finishedRoot.current.memoizedState;
+    // TODO(luna) move pendingSuspenseBoundaries and transitions from
+    // HostRoot fiber to FiberRoot
+    const rootPendingBoundaries = rootState.pendingSuspenseBoundaries;
+    const rootTransitions = rootState.transitions;
+
+    // If there is a name on the suspense boundary, store that in
+    // the pending boundaries.
+    let name = null;
+    const parent = offscreenFiber.return;
+    if (
+      parent !== null &&
+      parent.tag === SuspenseComponent &&
+      parent.memoizedProps.unstable_name
+    ) {
+      name = parent.memoizedProps.unstable_name;
+    }
 
-  if (rootPendingBoundaries !== null) {
-    if (previousFiber === null) {
-      // Initial mount
-      if (isHidden) {
-        rootPendingBoundaries.set(offscreenInstance, {
-          name,
-        });
-      }
-    } else {
-      if (wasHidden && !isHidden) {
-        // The suspense boundary went from hidden to visible. Remove
-        // the boundary from the pending suspense boundaries set
-        // if it's there
-        if (rootPendingBoundaries.has(offscreenInstance)) {
-          rootPendingBoundaries.delete(offscreenInstance);
+    if (rootPendingBoundaries !== null) {
+      if (previousFiber === null) {
+        // Initial mount
+        if (isHidden) {
+          rootPendingBoundaries.set(offscreenInstance, {
+            name,
+          });
+        }
+      } else {
+        if (wasHidden && !isHidden) {
+          // The suspense boundary went from hidden to visible. Remove
+          // the boundary from the pending suspense boundaries set
+          // if it's there
+          if (rootPendingBoundaries.has(offscreenInstance)) {
+            rootPendingBoundaries.delete(offscreenInstance);
+
+            if (rootPendingBoundaries.size === 0 && rootTransitions !== null) {
+              rootTransitions.forEach(transition => {
+                addTransitionCompleteCallbackToPendingTransition({
+                  transitionName: transition.name,
+                  startTime: transition.startTime,
+                });
+              });
+            }
+          }
+        } else if (!wasHidden && isHidden) {
+          // The suspense boundaries was just hidden. Add the boundary
+          // to the pending boundary set if it's there
+          rootPendingBoundaries.set(offscreenInstance, {
+            name,
+          });
         }
-      } else if (!wasHidden && isHidden) {
-        // The suspense boundaries was just hidden. Add the boundary
-        // to the pending boundary set if it's there
-        rootPendingBoundaries.set(offscreenInstance, {
-          name,
-        });
       }
     }
   }
@@ -2823,12 +2838,15 @@ function commitPassiveMountOnFiber(
         // Get the transitions that were initiatized during the render
         // and add a start transition callback for each of them
         const state = finishedWork.memoizedState;
+        // TODO Since it's a mutable field, this should live on the FiberRoot
         if (state.transitions === null) {
           state.transitions = new Set([]);
         }
         const pendingTransitions = state.transitions;
+        const pendingSuspenseBoundaries = state.pendingSuspenseBoundaries;
 
-        if (committedTransitions != null) {
+        // Initial render
+        if (committedTransitions !== null) {
           committedTransitions.forEach(transition => {
             addTransitionStartCallbackToPendingTransition({
               transitionName: transition.name,
@@ -2837,28 +2855,20 @@ function commitPassiveMountOnFiber(
             pendingTransitions.add(transition);
           });
 
-          clearTransitionsForLanes(finishedRoot, committedLanes);
-        }
-
-        const pendingSuspenseBoundaries = state.pendingSuspenseBoundaries;
-        const processedTransitions = new Set();
-        // process the lazy transitions list by filtering duplicate transitions
-        // and calling the transition complete callback on all transitions
-        // if there are no more pending suspense boundaries
-        pendingTransitions.forEach(transition => {
-          if (!processedTransitions.has(transition)) {
-            if (
-              pendingSuspenseBoundaries === null ||
-              pendingSuspenseBoundaries.size === 0
-            ) {
+          if (
+            pendingSuspenseBoundaries === null ||
+            pendingSuspenseBoundaries.size === 0
+          ) {
+            pendingTransitions.forEach(transition => {
               addTransitionCompleteCallbackToPendingTransition({
                 transitionName: transition.name,
                 startTime: transition.startTime,
               });
-            }
-            processedTransitions.add(transition);
+            });
           }
-        });
+
+          clearTransitionsForLanes(finishedRoot, committedLanes);
+        }
 
         // If there are no more pending suspense boundaries we
         // clear the transitions because they are all complete.
@@ -2922,7 +2932,7 @@ function commitPassiveMountOnFiber(
             // Add all the transitions saved in the update queue during
             // the render phase (ie the transitions associated with this boundary)
             // into the transitions set.
-            if (transitions != null) {
+            if (transitions !== null) {
               if (prevTransitions === null) {
                 // We only have one instance of the transitions set
                 // because we update it only during the commit phase. We