old

Author: lunaruan

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

@@ -237,7 +237,6 @@ import {
   markSkippedUpdateLanes,
   getWorkInProgressRoot,
   pushRenderLanes,
-  getWorkInProgressTransitions,
 } from './ReactFiberWorkLoop.old';
 import {setWorkInProgressVersion} from './ReactMutableSource.old';
 import {pushCacheProvider, CacheContext} from './ReactFiberCacheComponent.old';
@@ -257,6 +256,7 @@ import {
   getSuspendedCache,
   pushTransition,
   getOffscreenDeferredCache,
+  getSuspendedTransitions,
 } from './ReactFiberTransition.old';
 
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
@@ -653,16 +653,18 @@ function updateOffscreenComponent(
     // Rendering a hidden tree.
     if ((workInProgress.mode & ConcurrentMode) === NoMode) {
       // In legacy sync mode, don't defer the subtree. Render it now.
+      // TODO: Consider how Offscreen should work with transitions in the future
       const nextState: OffscreenState = {
         baseLanes: NoLanes,
         cachePool: null,
+        transitions: null,
       };
       workInProgress.memoizedState = nextState;
       if (enableCache) {
         // push the cache pool even though we're going to bail out
         // because otherwise there'd be a context mismatch
         if (current !== null) {
-          pushTransition(workInProgress, null);
+          pushTransition(workInProgress, null, null);
         }
       }
       pushRenderLanes(workInProgress, renderLanes);
@@ -689,14 +691,15 @@ function updateOffscreenComponent(
       const nextState: OffscreenState = {
         baseLanes: nextBaseLanes,
         cachePool: spawnedCachePool,
+        transitions: null,
       };
       workInProgress.memoizedState = nextState;
       workInProgress.updateQueue = null;
       if (enableCache) {
         // push the cache pool even though we're going to bail out
         // because otherwise there'd be a context mismatch
         if (current !== null) {
-          pushTransition(workInProgress, null);
+          pushTransition(workInProgress, null, null);
         }
       }
 
@@ -724,6 +727,7 @@ function updateOffscreenComponent(
       const nextState: OffscreenState = {
         baseLanes: NoLanes,
         cachePool: null,
+        transitions: null,
       };
       workInProgress.memoizedState = nextState;
       // Push the lanes that were skipped when we bailed out.
@@ -734,7 +738,7 @@ function updateOffscreenComponent(
         // using the same cache. Unless the parent changed, since that means
         // there was a refresh.
         const prevCachePool = prevState !== null ? prevState.cachePool : null;
-        pushTransition(workInProgress, prevCachePool);
+        pushTransition(workInProgress, prevCachePool, null);
       }
 
       pushRenderLanes(workInProgress, subtreeRenderLanes);
@@ -747,14 +751,21 @@ function updateOffscreenComponent(
 
       subtreeRenderLanes = mergeLanes(prevState.baseLanes, renderLanes);
 
+      let prevCachePool = null;
       if (enableCache) {
         // If the render that spawned this one accessed the cache pool, resume
         // using the same cache. Unless the parent changed, since that means
         // there was a refresh.
-        const prevCachePool = prevState.cachePool;
-        pushTransition(workInProgress, prevCachePool);
+        prevCachePool = prevState.cachePool;
       }
 
+      let transitions = null;
+      if (enableTransitionTracing) {
+        transitions = prevState.transitions;
+      }
+
+      pushTransition(workInProgress, prevCachePool, transitions);
+
       // Since we're not hidden anymore, reset the state
       workInProgress.memoizedState = null;
     } else {
@@ -768,7 +779,7 @@ function updateOffscreenComponent(
         // using the same cache. Unless the parent changed, since that means
         // there was a refresh.
         if (current !== null) {
-          pushTransition(workInProgress, null);
+          pushTransition(workInProgress, null, null);
         }
       }
     }
@@ -1326,28 +1337,25 @@ function updateHostRoot(current, workInProgress, renderLanes) {
   const nextProps = workInProgress.pendingProps;
   const prevState = workInProgress.memoizedState;
   const prevChildren = prevState.element;
+
   cloneUpdateQueue(current, workInProgress);
   processUpdateQueue(workInProgress, nextProps, null, renderLanes);
 
   const nextState: RootState = workInProgress.memoizedState;
   const root: FiberRoot = workInProgress.stateNode;
 
+  pushRootTransition(workInProgress, root, renderLanes);
+
   if (enableCache) {
-    const nextCache: Cache = nextState.cache;
-    pushRootTransition(root);
+    const nextCache: Cache = workInProgress.memoizedState.cache;
     pushCacheProvider(workInProgress, nextCache);
     if (nextCache !== prevState.cache) {
       // The root cache refreshed.
       propagateContextChange(workInProgress, CacheContext, renderLanes);
     }
   }
 
-  if (enableTransitionTracing) {
-    // FIXME: Slipped past code review. This is not a safe mutation:
-    // workInProgress.memoizedState is a shared object. Need to fix before
-    // rolling out the Transition Tracing experiment.
-    workInProgress.memoizedState.transitions = getWorkInProgressTransitions();
-  }
+  const pendingSuspenseBoundaries = nextState.pendingSuspenseBoundaries || null;
 
   // Caution: React DevTools currently depends on this property
   // being called "element".
@@ -1362,6 +1370,7 @@ function updateHostRoot(current, workInProgress, renderLanes) {
       element: nextChildren,
       isDehydrated: false,
       cache: nextState.cache,
+      pendingSuspenseBoundaries,
       transitions: nextState.transitions,
     };
     const updateQueue: UpdateQueue<RootState> = (workInProgress.updateQueue: any);
@@ -1435,6 +1444,20 @@ function updateHostRoot(current, workInProgress, renderLanes) {
       }
     }
   } else {
+    if (enableTransitionTracing) {
+      if (pendingSuspenseBoundaries !== nextState.pendingSuspenseBoundaries) {
+        const overrideState: RootState = {
+          element: nextChildren,
+          isDehydrated: nextState.isDehydrated,
+          cache: nextState.cache,
+          pendingSuspenseBoundaries,
+          transitions: nextState.transitions,
+        };
+
+        workInProgress.memoizedState = overrideState;
+      }
+    }
+
     // Root is not dehydrated. Either this is a client-only root, or it
     // already hydrated.
     resetHydrationState();
@@ -1979,6 +2002,7 @@ function mountSuspenseOffscreenState(renderLanes: Lanes): OffscreenState {
   return {
     baseLanes: renderLanes,
     cachePool: getSuspendedCache(),
+    transitions: getSuspendedTransitions(),
   };
 }
 
@@ -2010,9 +2034,11 @@ function updateSuspenseOffscreenState(
       cachePool = getSuspendedCache();
     }
   }
+
   return {
     baseLanes: mergeLanes(prevOffscreenState.baseLanes, renderLanes),
     cachePool,
+    transitions: prevOffscreenState.transitions,
   };
 }
 
@@ -2103,6 +2129,8 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
 
   pushSuspenseContext(workInProgress, suspenseContext);
 
+  const root = getWorkInProgressRoot();
+
   // OK, the next part is confusing. We're about to reconcile the Suspense
   // boundary's children. This involves some custom reconciliation logic. Two
   // main reasons this is so complicated.
@@ -2143,7 +2171,6 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
         }
       }
     }
-
     const nextPrimaryChildren = nextProps.children;
     const nextFallbackChildren = nextProps.fallback;
 
@@ -2159,6 +2186,18 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
         renderLanes,
       );
       workInProgress.memoizedState = SUSPENDED_MARKER;
+      if (enableTransitionTracing) {
+        const currentTransitions = getSuspendedTransitions();
+        if (currentTransitions !== null) {
+          const primaryChildUpdateQueue: OffscreenQueue = {
+            transitions: currentTransitions,
+            rootMemoizedState:
+              root === null ? null : root.current.memoizedState,
+          };
+          primaryChildFragment.updateQueue = primaryChildUpdateQueue;
+        }
+      }
+
       return fallbackFragment;
     } else if (
       enableCPUSuspense &&
@@ -2285,6 +2324,8 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
           if (currentTransitions !== null) {
             const primaryChildUpdateQueue: OffscreenQueue = {
               transitions: currentTransitions,
+              rootMemoizedState:
+                root === null ? null : root.current.memoizedState,
             };
             primaryChildFragment.updateQueue = primaryChildUpdateQueue;
           }
@@ -2336,6 +2377,8 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
           if (currentTransitions !== null) {
             const primaryChildUpdateQueue: OffscreenQueue = {
               transitions: currentTransitions,
+              rootMemoizedState:
+                root === null ? null : root.current.memoizedState,
             };
             primaryChildFragment.updateQueue = primaryChildUpdateQueue;
           }
@@ -2368,6 +2411,7 @@ function mountSuspensePrimaryChildren(
   renderLanes,
 ) {
   const mode = workInProgress.mode;
+
   const primaryChildProps: OffscreenProps = {
     mode: 'visible',
     children: primaryChildren,
@@ -2390,7 +2434,6 @@ function mountSuspenseFallbackChildren(
 ) {
   const mode = workInProgress.mode;
   const progressedPrimaryFragment: Fiber | null = workInProgress.child;
-
   const primaryChildProps: OffscreenProps = {
     mode: 'hidden',
     children: primaryChildren,
@@ -3594,14 +3637,13 @@ function attemptEarlyBailoutIfNoScheduledUpdate(
     case HostRoot:
       pushHostRootContext(workInProgress);
       const root: FiberRoot = workInProgress.stateNode;
+      pushRootTransition(workInProgress, root, renderLanes);
+
       if (enableCache) {
         const cache: Cache = current.memoizedState.cache;
         pushCacheProvider(workInProgress, cache);
-        pushRootTransition(root);
-      }
-      if (enableTransitionTracing) {
-        workInProgress.memoizedState.transitions = getWorkInProgressTransitions();
       }
+
       resetHydrationState();
       break;
     case HostComponent:

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

@@ -13,8 +13,8 @@ import {enableCache} from 'shared/ReactFeatureFlags';
 import {REACT_CONTEXT_TYPE} from 'shared/ReactSymbols';
 
 import {pushProvider, popProvider} from './ReactFiberNewContext.old';
-import * as Scheduler from 'scheduler';
 
+import * as Scheduler from 'scheduler';
 export type Cache = {|
   controller: AbortController,
   data: Map<() => mixed, mixed>,