tmp

Author: lunaruan

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

@@ -664,12 +664,9 @@ function updateOffscreenComponent(
         nextBaseLanes = mergeLanes(prevBaseLanes, renderLanes);
         if (enableCache) {
           // Save the cache pool so we can resume later.
-          const prevCachePool = prevState.cachePool;
-          if (prevCachePool !== null) {
-            // push the cache pool even though we're going to bail out
-            // because otherwise there'd be a context mismatch
-            restoreSpawnedCachePool(workInProgress, prevCachePool);
-          }
+          // push the cache pool even though we're going to bail out
+          // because otherwise there'd be a context mismatch
+          restoreSpawnedCachePool(workInProgress, null);
           spawnedCachePool = getOffscreenDeferredCachePool();
         }
       } else {
@@ -711,12 +708,10 @@ function updateOffscreenComponent(
         // using the same cache. Unless the parent changed, since that means
         // there was a refresh.
         const prevCachePool = prevState.cachePool;
-        if (prevCachePool !== null) {
-          spawnedCachePool = restoreSpawnedCachePool(
-            workInProgress,
-            prevCachePool,
-          );
-        }
+        spawnedCachePool = restoreSpawnedCachePool(
+          workInProgress,
+          prevCachePool,
+        );
       }
 
       // Rendering at offscreen, so we can clear the base lanes.
@@ -743,12 +738,10 @@ function updateOffscreenComponent(
         // using the same cache. Unless the parent changed, since that means
         // there was a refresh.
         const prevCachePool = prevState.cachePool;
-        if (prevCachePool !== null) {
-          spawnedCachePool = restoreSpawnedCachePool(
-            workInProgress,
-            prevCachePool,
-          );
-        }
+        spawnedCachePool = restoreSpawnedCachePool(
+          workInProgress,
+          prevCachePool,
+        );
       }
 
       // Since we're not hidden anymore, reset the state
@@ -758,6 +751,15 @@ function updateOffscreenComponent(
       // special to do. Need to push to the stack regardless, though, to avoid
       // a push/pop misalignment.
       subtreeRenderLanes = renderLanes;
+
+      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.
+        if (current !== null) {
+          restoreSpawnedCachePool(workInProgress, null);
+        }
+      }
     }
     pushRenderLanes(workInProgress, subtreeRenderLanes);
   }
@@ -2071,6 +2073,7 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
 
     const nextPrimaryChildren = nextProps.children;
     const nextFallbackChildren = nextProps.fallback;
+
     if (showFallback) {
       const fallbackFragment = mountSuspenseFallbackChildren(
         workInProgress,

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

@@ -200,34 +200,57 @@ export function popRootCachePool(root: FiberRoot, renderLanes: Lanes) {
 
 export function restoreSpawnedCachePool(
   offscreenWorkInProgress: Fiber,
-  prevCachePool: SpawnedCachePool,
+  prevCachePool: SpawnedCachePool | null,
 ): SpawnedCachePool | null {
   if (!enableCache) {
     return (null: any);
   }
-  const nextParentCache = isPrimaryRenderer
-    ? CacheContext._currentValue
-    : CacheContext._currentValue2;
-  if (nextParentCache !== prevCachePool.parent) {
-    // There was a refresh. Don't bother restoring anything since the refresh
-    // will override it.
+  // console.log(
+  //   '::: push pool',
+  //   prevCachePool,
+  //   new Error().stack
+  //     .split('\n')
+  //     .slice(2, 6)
+  //     .join('\n'),
+  //   resumedCache.current,
+  // );
+
+  if (prevCachePool === null) {
+    push(resumedCache, resumedCache.current, offscreenWorkInProgress);
     return null;
   } else {
-    // No refresh. Resume with the previous cache. New Cache boundaries in the
-    // subtree use this one instead of requesting a fresh one (see
-    // peekCacheFromPool).
-    push(resumedCache, prevCachePool.pool, offscreenWorkInProgress);
-
-    // Return the cache pool to signal that we did in fact push it. We will
-    // assign this to the field on the fiber so we know to pop the context.
-    return prevCachePool;
+    const nextParentCache = isPrimaryRenderer
+      ? CacheContext._currentValue
+      : CacheContext._currentValue2;
+    if (nextParentCache !== prevCachePool.parent) {
+      // There was a refresh. Don't bother restoring anything since the refresh
+      // will override it.
+      return null;
+    } else {
+      // No refresh. Resume with the previous cache. New Cache boundaries in the
+      // subtree use this one instead of requesting a fresh one (see
+      // peekCacheFromPool).
+      push(resumedCache, prevCachePool.pool, offscreenWorkInProgress);
+
+      // Return the cache pool to signal that we did in fact push it. We will
+      // assign this to the field on the fiber so we know to pop the context.
+      return prevCachePool;
+    }
   }
 }
 
 export function popCachePool(workInProgress: Fiber) {
   if (!enableCache) {
     return;
   }
+
+  // console.log(
+  //   '::: pop pool',
+  //   new Error().stack
+  //     .split('\n')
+  //     .slice(2, 6)
+  //     .join('\n'),
+  // );
   pop(resumedCache, workInProgress);
 }
 

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

@@ -1550,14 +1550,7 @@ function completeWork(
           // Run passive effects to retain/release the cache.
           workInProgress.flags |= Passive;
         }
-        let prevState: OffscreenState | null = null;
-        if (
-          workInProgress.alternate !== null &&
-          workInProgress.alternate.memoizedState !== null
-        ) {
-          prevState = workInProgress.alternate.memoizedState;
-        }
-        if (prevState !== null && prevState.cachePool !== null) {
+        if (workInProgress.alternate !== null) {
           popCachePool(workInProgress);
         }
       }

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

@@ -12,7 +12,6 @@ import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {Lanes} from './ReactFiberLane.new';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.new';
 import type {Cache} from './ReactFiberCacheComponent.new';
-import type {OffscreenState} from './ReactFiberOffscreenComponent';
 
 import {resetWorkInProgressVersions as resetMutableSourceWorkInProgressVersions} from './ReactMutableSource.new';
 import {
@@ -153,15 +152,8 @@ function unwindWork(workInProgress: Fiber, renderLanes: Lanes) {
     case OffscreenComponent:
     case LegacyHiddenComponent:
       popRenderLanes(workInProgress);
-      let prevState: OffscreenState | null = null;
       if (enableCache) {
-        if (
-          workInProgress.alternate !== null &&
-          workInProgress.alternate.memoizedState !== null
-        ) {
-          prevState = workInProgress.alternate.memoizedState;
-        }
-        if (prevState !== null && prevState.cachePool !== null) {
+        if (workInProgress.alternate !== null) {
           popCachePool(workInProgress);
         }
       }
@@ -225,14 +217,7 @@ function unwindInterruptedWork(interruptedWork: Fiber, renderLanes: Lanes) {
     case LegacyHiddenComponent:
       popRenderLanes(interruptedWork);
       if (enableCache) {
-        let prevState: OffscreenState | null = null;
-        if (
-          interruptedWork.alternate !== null &&
-          interruptedWork.alternate.memoizedState !== null
-        ) {
-          prevState = interruptedWork.alternate.memoizedState;
-        }
-        if (prevState !== null && prevState.cachePool !== null) {
+        if (interruptedWork.alternate !== null) {
           popCachePool(interruptedWork);
         }
       }