Track which fibers scheduled the current render work

facebook · Apr 2, 2021 · f892d9b · f892d9b
1 parent 9ed0167
commit f892d9b
Show file tree

Hide file tree

Showing 22 changed files with 1,031 additions and 42 deletions.
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -36,6 +36,7 @@ import {
   enableScopeAPI,
   enableStrictEffects,
   deletedTreeCleanUpLevel,
+  enableUpdaterTracking,
 } from 'shared/ReactFeatureFlags';
 import {
   FunctionComponent,
@@ -86,7 +87,7 @@ import {
   resetCurrentFiber as resetCurrentDebugFiberInDEV,
   setCurrentFiber as setCurrentDebugFiberInDEV,
 } from './ReactCurrentFiber';
-
+import {isDevToolsPresent} from './ReactFiberDevToolsHook.new';
 import {onCommitUnmount} from './ReactFiberDevToolsHook.new';
 import {resolveDefaultProps} from './ReactFiberLazyComponent.new';
 import {
@@ -134,6 +135,7 @@ import {
   resolveRetryWakeable,
   markCommitTimeOfFallback,
   enqueuePendingPassiveProfilerEffect,
+  restorePendingUpdaters,
 } from './ReactFiberWorkLoop.new';
 import {
   NoFlags as NoHookEffect,
@@ -1663,7 +1665,12 @@ function commitDeletion(
   detachFiberMutation(current);
 }
 
-function commitWork(current: Fiber | null, finishedWork: Fiber): void {
+function commitWork(
+  finishedRoot: FiberRoot,
+  current: Fiber | null,
+  finishedWork: Fiber,
+  committedLanes: Lanes,
+): void {
   if (!supportsMutation) {
     switch (finishedWork.tag) {
       case FunctionComponent:
@@ -1704,11 +1711,19 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
       }
       case SuspenseComponent: {
         commitSuspenseComponent(finishedWork);
-        attachSuspenseRetryListeners(finishedWork);
+        attachSuspenseRetryListeners(
+          finishedRoot,
+          finishedWork,
+          committedLanes,
+        );
         return;
       }
       case SuspenseListComponent: {
-        attachSuspenseRetryListeners(finishedWork);
+        attachSuspenseRetryListeners(
+          finishedRoot,
+          finishedWork,
+          committedLanes,
+        );
         return;
       }
       case HostRoot: {
@@ -1827,11 +1842,11 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
     }
     case SuspenseComponent: {
       commitSuspenseComponent(finishedWork);
-      attachSuspenseRetryListeners(finishedWork);
+      attachSuspenseRetryListeners(finishedRoot, finishedWork, committedLanes);
       return;
     }
     case SuspenseListComponent: {
-      attachSuspenseRetryListeners(finishedWork);
+      attachSuspenseRetryListeners(finishedRoot, finishedWork, committedLanes);
       return;
     }
     case IncompleteClassComponent: {
@@ -1927,7 +1942,11 @@ function commitSuspenseHydrationCallbacks(
   }
 }
 
-function attachSuspenseRetryListeners(finishedWork: Fiber) {
+function attachSuspenseRetryListeners(
+  finishedRoot: FiberRoot,
+  finishedWork: Fiber,
+  committedLanes: Lanes,
+) {
   // If this boundary just timed out, then it will have a set of wakeables.
   // For each wakeable, attach a listener so that when it resolves, React
   // attempts to re-render the boundary in the primary (pre-timeout) state.
@@ -1947,6 +1966,12 @@ function attachSuspenseRetryListeners(finishedWork: Fiber) {
             retry = Schedule_tracing_wrap(retry);
           }
         }
+        if (enableUpdaterTracking) {
+          if (isDevToolsPresent) {
+            // If we have pending work still, associate the original updaters with it.
+            restorePendingUpdaters(finishedRoot, committedLanes);
+          }
+        }
         retryCache.add(wakeable);
         wakeable.then(retry, retry);
       }
@@ -1978,12 +2003,16 @@ function commitResetTextContent(current: Fiber) {
   resetTextContent(current.stateNode);
 }
 
-export function commitMutationEffects(root: FiberRoot, firstChild: Fiber) {
+export function commitMutationEffects(
+  root: FiberRoot,
+  firstChild: Fiber,
+  committedLanes: Lanes,
+) {
   nextEffect = firstChild;
-  commitMutationEffects_begin(root);
+  commitMutationEffects_begin(root, committedLanes);
 }
 
-function commitMutationEffects_begin(root: FiberRoot) {
+function commitMutationEffects_begin(root: FiberRoot, committedLanes: Lanes) {
   while (nextEffect !== null) {
     const fiber = nextEffect;
 
@@ -2020,12 +2049,15 @@ function commitMutationEffects_begin(root: FiberRoot) {
       ensureCorrectReturnPointer(child, fiber);
       nextEffect = child;
     } else {
-      commitMutationEffects_complete(root);
+      commitMutationEffects_complete(root, committedLanes);
     }
   }
 }
 
-function commitMutationEffects_complete(root: FiberRoot) {
+function commitMutationEffects_complete(
+  root: FiberRoot,
+  committedLanes: Lanes,
+) {
   while (nextEffect !== null) {
     const fiber = nextEffect;
     if (__DEV__) {
@@ -2036,6 +2068,7 @@ function commitMutationEffects_complete(root: FiberRoot) {
         null,
         fiber,
         root,
+        committedLanes,
       );
       if (hasCaughtError()) {
         const error = clearCaughtError();
@@ -2044,7 +2077,7 @@ function commitMutationEffects_complete(root: FiberRoot) {
       resetCurrentDebugFiberInDEV();
     } else {
       try {
-        commitMutationEffectsOnFiber(fiber, root);
+        commitMutationEffectsOnFiber(fiber, root, committedLanes);
       } catch (error) {
         captureCommitPhaseError(fiber, fiber.return, error);
       }
@@ -2061,7 +2094,11 @@ function commitMutationEffects_complete(root: FiberRoot) {
   }
 }
 
-function commitMutationEffectsOnFiber(finishedWork: Fiber, root: FiberRoot) {
+function commitMutationEffectsOnFiber(
+  finishedWork: Fiber,
+  root: FiberRoot,
+  committedLanes: Lanes,
+) {
   const flags = finishedWork.flags;
 
   if (flags & ContentReset) {
@@ -2106,7 +2143,7 @@ function commitMutationEffectsOnFiber(finishedWork: Fiber, root: FiberRoot) {
 
       // Update
       const current = finishedWork.alternate;
-      commitWork(current, finishedWork);
+      commitWork(root, current, finishedWork, committedLanes);
       break;
     }
     case Hydrating: {
@@ -2118,12 +2155,12 @@ function commitMutationEffectsOnFiber(finishedWork: Fiber, root: FiberRoot) {
 
       // Update
       const current = finishedWork.alternate;
-      commitWork(current, finishedWork);
+      commitWork(root, current, finishedWork, committedLanes);
       break;
     }
     case Update: {
       const current = finishedWork.alternate;
-      commitWork(current, finishedWork);
+      commitWork(root, current, finishedWork, committedLanes);
       break;
     }
   }

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -36,6 +36,7 @@ import {
   enableScopeAPI,
   enableStrictEffects,
   deletedTreeCleanUpLevel,
+  enableUpdaterTracking,
 } from 'shared/ReactFeatureFlags';
 import {
   FunctionComponent,
@@ -86,7 +87,7 @@ import {
   resetCurrentFiber as resetCurrentDebugFiberInDEV,
   setCurrentFiber as setCurrentDebugFiberInDEV,
 } from './ReactCurrentFiber';
-
+import {isDevToolsPresent} from './ReactFiberDevToolsHook.old';
 import {onCommitUnmount} from './ReactFiberDevToolsHook.old';
 import {resolveDefaultProps} from './ReactFiberLazyComponent.old';
 import {
@@ -134,6 +135,7 @@ import {
   resolveRetryWakeable,
   markCommitTimeOfFallback,
   enqueuePendingPassiveProfilerEffect,
+  restorePendingUpdaters,
 } from './ReactFiberWorkLoop.old';
 import {
   NoFlags as NoHookEffect,
@@ -1663,7 +1665,12 @@ function commitDeletion(
   detachFiberMutation(current);
 }
 
-function commitWork(current: Fiber | null, finishedWork: Fiber): void {
+function commitWork(
+  finishedRoot: FiberRoot,
+  current: Fiber | null,
+  finishedWork: Fiber,
+  committedLanes: Lanes,
+): void {
   if (!supportsMutation) {
     switch (finishedWork.tag) {
       case FunctionComponent:
@@ -1704,11 +1711,19 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
       }
       case SuspenseComponent: {
         commitSuspenseComponent(finishedWork);
-        attachSuspenseRetryListeners(finishedWork);
+        attachSuspenseRetryListeners(
+          finishedRoot,
+          finishedWork,
+          committedLanes,
+        );
         return;
       }
       case SuspenseListComponent: {
-        attachSuspenseRetryListeners(finishedWork);
+        attachSuspenseRetryListeners(
+          finishedRoot,
+          finishedWork,
+          committedLanes,
+        );
         return;
       }
       case HostRoot: {
@@ -1827,11 +1842,11 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
     }
     case SuspenseComponent: {
       commitSuspenseComponent(finishedWork);
-      attachSuspenseRetryListeners(finishedWork);
+      attachSuspenseRetryListeners(finishedRoot, finishedWork, committedLanes);
       return;
     }
     case SuspenseListComponent: {
-      attachSuspenseRetryListeners(finishedWork);
+      attachSuspenseRetryListeners(finishedRoot, finishedWork, committedLanes);
       return;
     }
     case IncompleteClassComponent: {
@@ -1927,7 +1942,11 @@ function commitSuspenseHydrationCallbacks(
   }
 }
 
-function attachSuspenseRetryListeners(finishedWork: Fiber) {
+function attachSuspenseRetryListeners(
+  finishedRoot: FiberRoot,
+  finishedWork: Fiber,
+  committedLanes: Lanes,
+) {
   // If this boundary just timed out, then it will have a set of wakeables.
   // For each wakeable, attach a listener so that when it resolves, React
   // attempts to re-render the boundary in the primary (pre-timeout) state.
@@ -1947,6 +1966,12 @@ function attachSuspenseRetryListeners(finishedWork: Fiber) {
             retry = Schedule_tracing_wrap(retry);
           }
         }
+        if (enableUpdaterTracking) {
+          if (isDevToolsPresent) {
+            // If we have pending work still, associate the original updaters with it.
+            restorePendingUpdaters(finishedRoot, committedLanes);
+          }
+        }
         retryCache.add(wakeable);
         wakeable.then(retry, retry);
       }
@@ -1978,12 +2003,16 @@ function commitResetTextContent(current: Fiber) {
   resetTextContent(current.stateNode);
 }
 
-export function commitMutationEffects(root: FiberRoot, firstChild: Fiber) {
+export function commitMutationEffects(
+  root: FiberRoot,
+  firstChild: Fiber,
+  committedLanes: Lanes,
+) {
   nextEffect = firstChild;
-  commitMutationEffects_begin(root);
+  commitMutationEffects_begin(root, committedLanes);
 }
 
-function commitMutationEffects_begin(root: FiberRoot) {
+function commitMutationEffects_begin(root: FiberRoot, committedLanes: Lanes) {
   while (nextEffect !== null) {
     const fiber = nextEffect;
 
@@ -2020,12 +2049,15 @@ function commitMutationEffects_begin(root: FiberRoot) {
       ensureCorrectReturnPointer(child, fiber);
       nextEffect = child;
     } else {
-      commitMutationEffects_complete(root);
+      commitMutationEffects_complete(root, committedLanes);
     }
   }
 }
 
-function commitMutationEffects_complete(root: FiberRoot) {
+function commitMutationEffects_complete(
+  root: FiberRoot,
+  committedLanes: Lanes,
+) {
   while (nextEffect !== null) {
     const fiber = nextEffect;
     if (__DEV__) {
@@ -2036,6 +2068,7 @@ function commitMutationEffects_complete(root: FiberRoot) {
         null,
         fiber,
         root,
+        committedLanes,
       );
       if (hasCaughtError()) {
         const error = clearCaughtError();
@@ -2044,7 +2077,7 @@ function commitMutationEffects_complete(root: FiberRoot) {
       resetCurrentDebugFiberInDEV();
     } else {
       try {
-        commitMutationEffectsOnFiber(fiber, root);
+        commitMutationEffectsOnFiber(fiber, root, committedLanes);
       } catch (error) {
         captureCommitPhaseError(fiber, fiber.return, error);
       }
@@ -2061,7 +2094,11 @@ function commitMutationEffects_complete(root: FiberRoot) {
   }
 }
 
-function commitMutationEffectsOnFiber(finishedWork: Fiber, root: FiberRoot) {
+function commitMutationEffectsOnFiber(
+  finishedWork: Fiber,
+  root: FiberRoot,
+  committedLanes: Lanes,
+) {
   const flags = finishedWork.flags;
 
   if (flags & ContentReset) {
@@ -2106,7 +2143,7 @@ function commitMutationEffectsOnFiber(finishedWork: Fiber, root: FiberRoot) {
 
       // Update
       const current = finishedWork.alternate;
-      commitWork(current, finishedWork);
+      commitWork(root, current, finishedWork, committedLanes);
       break;
     }
     case Hydrating: {
@@ -2118,12 +2155,12 @@ function commitMutationEffectsOnFiber(finishedWork: Fiber, root: FiberRoot) {
 
       // Update
       const current = finishedWork.alternate;
-      commitWork(current, finishedWork);
+      commitWork(root, current, finishedWork, committedLanes);
       break;
     }
     case Update: {
       const current = finishedWork.alternate;
-      commitWork(current, finishedWork);
+      commitWork(root, current, finishedWork, committedLanes);
       break;
     }
   }