concat in commit rather than render phase for offscreen transitions

Author: lunaruan

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

@@ -26,6 +26,7 @@ import type {SuspenseContext} from './ReactFiberSuspenseContext.new';
 import type {
   OffscreenProps,
   OffscreenState,
+  OffscreenQueue,
 } from './ReactFiberOffscreenComponent';
 import type {
   Cache,
@@ -2037,21 +2038,10 @@ function updateSuspenseOffscreenState(
     }
   }
 
-  let transitions = null;
-  if (enableTransitionTracing) {
-    const currentTransitions = getSuspendedTransitions();
-    const prevTransitions = prevOffscreenState.transitions;
-    if (prevTransitions !== null) {
-      transitions = prevTransitions.concat(currentTransitions);
-    } else {
-      transitions = currentTransitions;
-    }
-  }
-
   return {
     baseLanes: mergeLanes(prevOffscreenState.baseLanes, renderLanes),
     cachePool,
-    transitions,
+    transitions: prevOffscreenState.transitions,
   };
 }
 
@@ -2310,13 +2300,23 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
           nextFallbackChildren,
           renderLanes,
         );
+
         const primaryChildFragment: Fiber = (workInProgress.child: any);
         const prevOffscreenState: OffscreenState | null = (current.child: any)
           .memoizedState;
         primaryChildFragment.memoizedState =
           prevOffscreenState === null
             ? mountSuspenseOffscreenState(renderLanes)
             : updateSuspenseOffscreenState(prevOffscreenState, renderLanes);
+        if (enableTransitionTracing) {
+          const currentTransitions = getSuspendedTransitions();
+          if (currentTransitions !== null) {
+            const primaryChildUpdateQueue: OffscreenQueue = {
+              transitions: currentTransitions,
+            };
+            primaryChildFragment.updateQueue = primaryChildUpdateQueue;
+          }
+        }
         primaryChildFragment.childLanes = getRemainingWorkInPrimaryTree(
           current,
           renderLanes,
@@ -2358,6 +2358,17 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
           current,
           renderLanes,
         );
+
+        if (enableTransitionTracing) {
+          const currentTransitions = getSuspendedTransitions();
+          if (currentTransitions !== null) {
+            const primaryChildUpdateQueue: OffscreenQueue = {
+              transitions: currentTransitions,
+            };
+            primaryChildFragment.updateQueue = primaryChildUpdateQueue;
+          }
+        }
+
         // Skip the primary children, and continue working on the
         // fallback children.
         workInProgress.memoizedState = SUSPENDED_MARKER;

packages/react-reconciler/src/ReactFiberBeginWork.old.js

@@ -26,6 +26,7 @@ import type {SuspenseContext} from './ReactFiberSuspenseContext.old';
 import type {
   OffscreenProps,
   OffscreenState,
+  OffscreenQueue,
 } from './ReactFiberOffscreenComponent';
 import type {
   Cache,
@@ -2037,21 +2038,10 @@ function updateSuspenseOffscreenState(
     }
   }
 
-  let transitions = null;
-  if (enableTransitionTracing) {
-    const currentTransitions = getSuspendedTransitions();
-    const prevTransitions = prevOffscreenState.transitions;
-    if (prevTransitions !== null) {
-      transitions = prevTransitions.concat(currentTransitions);
-    } else {
-      transitions = currentTransitions;
-    }
-  }
-
   return {
     baseLanes: mergeLanes(prevOffscreenState.baseLanes, renderLanes),
     cachePool,
-    transitions,
+    transitions: prevOffscreenState.transitions,
   };
 }
 
@@ -2310,13 +2300,23 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
           nextFallbackChildren,
           renderLanes,
         );
+
         const primaryChildFragment: Fiber = (workInProgress.child: any);
         const prevOffscreenState: OffscreenState | null = (current.child: any)
           .memoizedState;
         primaryChildFragment.memoizedState =
           prevOffscreenState === null
             ? mountSuspenseOffscreenState(renderLanes)
             : updateSuspenseOffscreenState(prevOffscreenState, renderLanes);
+        if (enableTransitionTracing) {
+          const currentTransitions = getSuspendedTransitions();
+          if (currentTransitions !== null) {
+            const primaryChildUpdateQueue: OffscreenQueue = {
+              transitions: currentTransitions,
+            };
+            primaryChildFragment.updateQueue = primaryChildUpdateQueue;
+          }
+        }
         primaryChildFragment.childLanes = getRemainingWorkInPrimaryTree(
           current,
           renderLanes,
@@ -2358,6 +2358,17 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
           current,
           renderLanes,
         );
+
+        if (enableTransitionTracing) {
+          const currentTransitions = getSuspendedTransitions();
+          if (currentTransitions !== null) {
+            const primaryChildUpdateQueue: OffscreenQueue = {
+              transitions: currentTransitions,
+            };
+            primaryChildFragment.updateQueue = primaryChildUpdateQueue;
+          }
+        }
+
         // Skip the primary children, and continue working on the
         // fallback children.
         workInProgress.memoizedState = SUSPENDED_MARKER;

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

@@ -2760,6 +2760,21 @@ function commitPassiveMountEffects_complete(
               let props;
               if (isFallback) {
                 props = fiber.pendingProps;
+                const queue = (fiber.updateQueue: any);
+
+                if (queue !== null) {
+                  const transitions = queue.transitions;
+                  const prevTransitions = fiber.memoizedState.transitions;
+                  if (transitions != null) {
+                    if (prevTransitions === null) {
+                      fiber.memoizedState.transitions = transitions;
+                    } else {
+                      fiber.memoizedState.transitions = transitions.concat(
+                        prevTransitions,
+                      );
+                    }
+                  }
+                }
               } else {
                 props = fiber.memoizedProps;
               }

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

@@ -2760,6 +2760,21 @@ function commitPassiveMountEffects_complete(
               let props;
               if (isFallback) {
                 props = fiber.pendingProps;
+                const queue = (fiber.updateQueue: any);
+
+                if (queue !== null) {
+                  const transitions = queue.transitions;
+                  const prevTransitions = fiber.memoizedState.transitions;
+                  if (transitions != null) {
+                    if (prevTransitions === null) {
+                      fiber.memoizedState.transitions = transitions;
+                    } else {
+                      fiber.memoizedState.transitions = transitions.concat(
+                        prevTransitions,
+                      );
+                    }
+                  }
+                }
               } else {
                 props = fiber.memoizedProps;
               }

packages/react-reconciler/src/ReactFiberOffscreenComponent.js

@@ -34,4 +34,8 @@ export type OffscreenState = {|
   transitions: LazyTransitions | null,
 |};
 
+export type OffscreenQueue = {|
+  transitions: LazyTransitions,
+|} | null;
+
 export type OffscreenInstance = {};