old

Author: lunaruan

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

@@ -236,7 +236,7 @@ import {
   markSkippedUpdateLanes,
   getWorkInProgressRoot,
   pushRenderLanes,
-  getWorkInProgressTransitions,
+  setRootPendingSuspenseBoundaries,
 } from './ReactFiberWorkLoop.old';
 import {setWorkInProgressVersion} from './ReactMutableSource.old';
 import {pushCacheProvider, CacheContext} from './ReactFiberCacheComponent.old';
@@ -256,6 +256,7 @@ import {
   getSuspendedCache,
   pushTransition,
   getOffscreenDeferredCache,
+  getSuspendedTransitions,
 } from './ReactFiberTransition.old';
 
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
@@ -655,13 +656,14 @@ function updateOffscreenComponent(
       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);
@@ -688,14 +690,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);
         }
       }
 
@@ -723,6 +726,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.
@@ -733,7 +737,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);
@@ -746,14 +750,14 @@ function updateOffscreenComponent(
 
       subtreeRenderLanes = mergeLanes(prevState.baseLanes, renderLanes);
 
-      if (enableCache) {
+      if (enableCache || enableTransitionTracing) {
         // 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);
+        const transitions = prevState.transitions;
+        pushTransition(workInProgress, prevCachePool, transitions);
       }
-
       // Since we're not hidden anymore, reset the state
       workInProgress.memoizedState = null;
     } else {
@@ -767,7 +771,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);
         }
       }
     }
@@ -1325,27 +1329,34 @@ 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;
 
+  if (enableCache || enableTransitionTracing) {
+    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);
     }
   }
 
+  let pendingSuspenseBoundaries = nextState.pendingSuspenseBoundaries;
   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();
+    if (prevState.pendingSuspenseBoundaries === null) {
+      pendingSuspenseBoundaries = new Map();
+    }
+    // TODO(luna) change to pushPendingSuspenseBoundaries
+    // once we add tracing markers
+    setRootPendingSuspenseBoundaries(pendingSuspenseBoundaries);
   }
 
   // Caution: React DevTools currently depends on this property
@@ -1361,6 +1372,7 @@ function updateHostRoot(current, workInProgress, renderLanes) {
       element: nextChildren,
       isDehydrated: false,
       cache: nextState.cache,
+      pendingSuspenseBoundaries: pendingSuspenseBoundaries,
       transitions: nextState.transitions,
     };
     const updateQueue: UpdateQueue<RootState> = (workInProgress.updateQueue: any);
@@ -1434,6 +1446,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: pendingSuspenseBoundaries,
+          transitions: nextState.transitions,
+        };
+
+        workInProgress.memoizedState = overrideState;
+      }
+    }
+
     // Root is not dehydrated. Either this is a client-only root, or it
     // already hydrated.
     resetHydrationState();
@@ -1978,6 +2004,7 @@ function mountSuspenseOffscreenState(renderLanes: Lanes): OffscreenState {
   return {
     baseLanes: renderLanes,
     cachePool: getSuspendedCache(),
+    transitions: getSuspendedTransitions(),
   };
 }
 
@@ -2009,9 +2036,22 @@ function updateSuspenseOffscreenState(
       cachePool = getSuspendedCache();
     }
   }
+
+  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,
   };
 }
 
@@ -2345,6 +2385,7 @@ function mountSuspensePrimaryChildren(
   renderLanes,
 ) {
   const mode = workInProgress.mode;
+
   const primaryChildProps: OffscreenProps = {
     mode: 'visible',
     children: primaryChildren,
@@ -2367,7 +2408,6 @@ function mountSuspenseFallbackChildren(
 ) {
   const mode = workInProgress.mode;
   const progressedPrimaryFragment: Fiber | null = workInProgress.child;
-
   const primaryChildProps: OffscreenProps = {
     mode: 'hidden',
     children: primaryChildren,
@@ -3571,14 +3611,25 @@ function attemptEarlyBailoutIfNoScheduledUpdate(
     case HostRoot:
       pushHostRootContext(workInProgress);
       const root: FiberRoot = workInProgress.stateNode;
+      if (enableCache || enableTransitionTracing) {
+        pushRootTransition(workInProgress, root, renderLanes);
+      }
+
       if (enableCache) {
         const cache: Cache = current.memoizedState.cache;
         pushCacheProvider(workInProgress, cache);
-        pushRootTransition(root);
       }
+
       if (enableTransitionTracing) {
-        workInProgress.memoizedState.transitions = getWorkInProgressTransitions();
+        const pendingSuspenseBoundaries =
+          workInProgress.memoizedState.pendingSuspenseBoundaries;
+        // TODO(luna) change to pushPendingSuspenseBoundaries
+        // once we add tracing markers
+        if (pendingSuspenseBoundaries) {
+          setRootPendingSuspenseBoundaries(pendingSuspenseBoundaries);
+        }
       }
+
       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>,