Detect and prevent render starvation, per lane (#18864)

* Detect and prevent render starvation, per lane

If an update is CPU-bound for longer than expected according to its
priority, we assume it's being starved by other work on the main thread.

To detect this, we keep track of the elapsed time using a fixed-size
array where each slot corresponds to a lane. What we actually store is
the event time when the lane first became CPU-bound.

Then, when receiving a new update or yielding to the main thread, we
check how long each lane has been pending. If the time exceeds a
threshold constant corresponding to its priority, we mark it as expired
to force it to synchronously finish.

We don't want to mistake time elapsed while an update is IO-bound
(waiting for data to resolve) for time when it is CPU-bound. So when a
lane suspends, we clear its associated event time from the array. When
it receives a signal to try again, either a ping or an update, we assign
a new event time to restart the clock.

* Store as expiration time, not start time

I originally stored the start time because I thought I could use this
in the future to also measure Suspense timeouts. (Event times are
currently stored on each update object for this purpose.) But that
won't work because in the case of expiration times, we reset the clock
whenever the update becomes IO-bound. So to replace the per-update
field, I'm going to have to track those on the room separately from
expiration times.

Author: acdlite

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

@@ -112,6 +112,7 @@ import {
   SyncLane,
   OffscreenLane,
   DefaultHydrationLane,
+  NoTimestamp,
   includesSomeLane,
   laneToLanes,
   removeLanes,
@@ -2301,7 +2302,9 @@ function updateDehydratedSuspenseComponent(
         // is one of the very rare times where we mutate the current tree
         // during the render phase.
         suspenseState.retryLane = attemptHydrationAtLane;
-        scheduleUpdateOnFiber(current, attemptHydrationAtLane);
+        // TODO: Ideally this would inherit the event time of the current render
+        const eventTime = NoTimestamp;
+        scheduleUpdateOnFiber(current, attemptHydrationAtLane, eventTime);
       } else {
         // We have already tried to ping at a higher priority than we're rendering with
         // so if we got here, we must have failed to hydrate at those levels. We must

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

@@ -202,7 +202,7 @@ const classComponentUpdater = {
     }
 
     enqueueUpdate(fiber, update);
-    scheduleUpdateOnFiber(fiber, lane);
+    scheduleUpdateOnFiber(fiber, lane, eventTime);
   },
   enqueueReplaceState(inst, payload, callback) {
     const fiber = getInstance(inst);
@@ -222,7 +222,7 @@ const classComponentUpdater = {
     }
 
     enqueueUpdate(fiber, update);
-    scheduleUpdateOnFiber(fiber, lane);
+    scheduleUpdateOnFiber(fiber, lane, eventTime);
   },
   enqueueForceUpdate(inst, callback) {
     const fiber = getInstance(inst);
@@ -241,7 +241,7 @@ const classComponentUpdater = {
     }
 
     enqueueUpdate(fiber, update);
-    scheduleUpdateOnFiber(fiber, lane);
+    scheduleUpdateOnFiber(fiber, lane, eventTime);
   },
 };
 

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

@@ -1720,7 +1720,7 @@ function dispatchAction<S, A>(
         warnIfNotCurrentlyActingUpdatesInDev(fiber);
       }
     }
-    scheduleUpdateOnFiber(fiber, lane);
+    scheduleUpdateOnFiber(fiber, lane, eventTime);
   }
 }
 

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

@@ -20,7 +20,7 @@ import {
 } from './ReactFiberWorkLoop.new';
 import {updateContainer} from './ReactFiberReconciler.new';
 import {emptyContextObject} from './ReactFiberContext.new';
-import {SyncLane} from './ReactFiberLane';
+import {SyncLane, NoTimestamp} from './ReactFiberLane';
 import {
   ClassComponent,
   FunctionComponent,
@@ -319,7 +319,7 @@ function scheduleFibersWithFamiliesRecursively(
       fiber._debugNeedsRemount = true;
     }
     if (needsRemount || needsRender) {
-      scheduleUpdateOnFiber(fiber, SyncLane);
+      scheduleUpdateOnFiber(fiber, SyncLane, NoTimestamp);
     }
     if (child !== null && !needsRemount) {
       scheduleFibersWithFamiliesRecursively(

packages/react-reconciler/src/ReactFiberLane.js

@@ -29,6 +29,7 @@ export opaque type LanePriority =
   | 16;
 export opaque type Lanes = number;
 export opaque type Lane = number;
+export opaque type LaneMap<T> = Array<T>;
 
 import invariant from 'shared/invariant';
 
@@ -66,7 +67,7 @@ const IdleLanePriority: LanePriority = 2;
 
 const OffscreenLanePriority: LanePriority = 1;
 
-const NoLanePriority: LanePriority = 0;
+export const NoLanePriority: LanePriority = 0;
 
 const TotalLanes = 31;
 
@@ -117,6 +118,8 @@ const IdleUpdateRangeEnd = 30;
 
 export const OffscreenLane: Lane = /*                   */ 0b1000000000000000000000000000000;
 
+export const NoTimestamp = -1;
+
 // "Registers" used to "return" multiple values
 // Used by getHighestPriorityLanes and getNextLanes:
 let return_highestLanePriority: LanePriority = DefaultLanePriority;
@@ -365,6 +368,63 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
   return nextLanes;
 }
 
+function computeExpirationTime(lane: Lane, currentTime: number) {
+  // TODO: Expiration heuristic is constant per lane, so could use a map.
+  getHighestPriorityLanes(lane);
+  const priority = return_highestLanePriority;
+  if (priority >= InputContinuousLanePriority) {
+    // User interactions should expire slightly more quickly.
+    return currentTime + 1000;
+  } else if (priority >= TransitionLongLanePriority) {
+    return currentTime + 5000;
+  } else {
+    // Anything idle priority or lower should never expire.
+    return NoTimestamp;
+  }
+}
+
+export function markStarvedLanesAsExpired(
+  root: FiberRoot,
+  currentTime: number,
+): void {
+  // TODO: This gets called every time we yield. We can optimize by storing
+  // the earliest expiration time on the root. Then use that to quickly bail out
+  // of this function.
+
+  const pendingLanes = root.pendingLanes;
+  const suspendedLanes = root.suspendedLanes;
+  const pingedLanes = root.pingedLanes;
+  const expirationTimes = root.expirationTimes;
+
+  // Iterate through the pending lanes and check if we've reached their
+  // expiration time. If so, we'll assume the update is being starved and mark
+  // it as expired to force it to finish.
+  let lanes = pendingLanes;
+  while (lanes > 0) {
+    const index = ctrz(lanes);
+    const lane = 1 << index;
+
+    const expirationTime = expirationTimes[index];
+    if (expirationTime === NoTimestamp) {
+      // Found a pending lane with no expiration time. If it's not suspended, or
+      // if it's pinged, assume it's CPU-bound. Compute a new expiration time
+      // using the current time.
+      if (
+        (lane & suspendedLanes) === NoLanes ||
+        (lane & pingedLanes) !== NoLanes
+      ) {
+        // Assumes timestamps are monotonically increasing.
+        expirationTimes[index] = computeExpirationTime(lane, currentTime);
+      }
+    } else if (expirationTime <= currentTime) {
+      // This lane expired
+      root.expiredLanes |= lane;
+    }
+
+    lanes &= ~lane;
+  }
+}
+
 // This returns the highest priority pending lanes regardless of whether they
 // are suspended.
 export function getHighestPriorityPendingLanes(root: FiberRoot) {
@@ -555,6 +615,10 @@ export function higherPriorityLane(a: Lane, b: Lane) {
   return a !== NoLane && a < b ? a : b;
 }
 
+export function createLaneMap<T>(initial: T): LaneMap<T> {
+  return new Array(TotalLanes).fill(initial);
+}
+
 export function markRootUpdated(root: FiberRoot, updateLane: Lane) {
   root.pendingLanes |= updateLane;
 
@@ -570,16 +634,33 @@ export function markRootUpdated(root: FiberRoot, updateLane: Lane) {
 
   // Unsuspend any update at equal or lower priority.
   const higherPriorityLanes = updateLane - 1; // Turns 0b1000 into 0b0111
+
   root.suspendedLanes &= higherPriorityLanes;
   root.pingedLanes &= higherPriorityLanes;
 }
 
 export function markRootSuspended(root: FiberRoot, suspendedLanes: Lanes) {
   root.suspendedLanes |= suspendedLanes;
   root.pingedLanes &= ~suspendedLanes;
+
+  // The suspended lanes are no longer CPU-bound. Clear their expiration times.
+  const expirationTimes = root.expirationTimes;
+  let lanes = suspendedLanes;
+  while (lanes > 0) {
+    const index = ctrz(lanes);
+    const lane = 1 << index;
+
+    expirationTimes[index] = NoTimestamp;
+
+    lanes &= ~lane;
+  }
 }
 
-export function markRootPinged(root: FiberRoot, pingedLanes: Lanes) {
+export function markRootPinged(
+  root: FiberRoot,
+  pingedLanes: Lanes,
+  eventTime: number,
+) {
   root.pingedLanes |= root.suspendedLanes & pingedLanes;
 }
 
@@ -600,6 +681,8 @@ export function markRootMutableRead(root: FiberRoot, updateLane: Lane) {
 }
 
 export function markRootFinished(root: FiberRoot, remainingLanes: Lanes) {
+  const noLongerPendingLanes = root.pendingLanes & ~remainingLanes;
+
   root.pendingLanes = remainingLanes;
 
   // Let's try everything again
@@ -608,6 +691,18 @@ export function markRootFinished(root: FiberRoot, remainingLanes: Lanes) {
 
   root.expiredLanes &= remainingLanes;
   root.mutableReadLanes &= remainingLanes;
+
+  const expirationTimes = root.expirationTimes;
+  let lanes = noLongerPendingLanes;
+  while (lanes > 0) {
+    const index = ctrz(lanes);
+    const lane = 1 << index;
+
+    // Clear the expiration time
+    expirationTimes[index] = -1;
+
+    lanes &= ~lane;
+  }
 }
 
 export function getBumpedLaneForHydration(
@@ -671,18 +766,25 @@ export function getBumpedLaneForHydration(
 
 const clz32 = Math.clz32 ? Math.clz32 : clz32Fallback;
 
-// Taken from:
+// Count leading zeros. Only used on lanes, so assume input is an integer.
+// Based on:
 // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/clz32
 const log = Math.log;
 const LN2 = Math.LN2;
-function clz32Fallback(x) {
-  // Let n be ToUint32(x).
-  // Let p be the number of leading zero bits in
-  // the 32-bit binary representation of n.
-  // Return p.
-  const asUint = x >>> 0;
-  if (asUint === 0) {
+function clz32Fallback(lanes: Lanes | Lane) {
+  if (lanes === 0) {
     return 32;
   }
-  return (31 - ((log(asUint) / LN2) | 0)) | 0; // the "| 0" acts like math.floor
+  return (31 - ((log(lanes) / LN2) | 0)) | 0;
+}
+
+// Count trailing zeros. Only used on lanes, so assume input is an integer.
+function ctrz(lanes: Lanes | Lane) {
+  let bits = lanes;
+  bits |= bits << 16;
+  bits |= bits << 8;
+  bits |= bits << 4;
+  bits |= bits << 2;
+  bits |= bits << 1;
+  return 32 - clz32(~bits);
 }

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

@@ -22,6 +22,7 @@ import {
 } from './ReactWorkTags';
 import {
   NoLanes,
+  NoTimestamp,
   isSubsetOfLanes,
   includesSomeLane,
   mergeLanes,
@@ -209,7 +210,7 @@ export function propagateContextChange(
           if (fiber.tag === ClassComponent) {
             // Schedule a force update on the work-in-progress.
             const update = createUpdate(
-              -1,
+              NoTimestamp,
               pickArbitraryLane(renderLanes),
               null,
             );

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

@@ -76,6 +76,7 @@ import {
   SyncLane,
   InputDiscreteHydrationLane,
   SelectiveHydrationLane,
+  NoTimestamp,
   getHighestPriorityPendingLanes,
   higherPriorityLane,
 } from './ReactFiberLane';
@@ -307,7 +308,7 @@ export function updateContainer(
   }
 
   enqueueUpdate(current, update);
-  scheduleUpdateOnFiber(current, lane);
+  scheduleUpdateOnFiber(current, lane, eventTime);
 
   return lane;
 }
@@ -352,7 +353,8 @@ export function attemptSynchronousHydration(fiber: Fiber): void {
       }
       break;
     case SuspenseComponent:
-      flushSync(() => scheduleUpdateOnFiber(fiber, SyncLane));
+      const eventTime = requestEventTime();
+      flushSync(() => scheduleUpdateOnFiber(fiber, SyncLane, eventTime));
       // If we're still blocked after this, we need to increase
       // the priority of any promises resolving within this
       // boundary so that they next attempt also has higher pri.
@@ -389,8 +391,9 @@ export function attemptUserBlockingHydration(fiber: Fiber): void {
     // Suspense.
     return;
   }
+  const eventTime = requestEventTime();
   const lane = InputDiscreteHydrationLane;
-  scheduleUpdateOnFiber(fiber, lane);
+  scheduleUpdateOnFiber(fiber, lane, eventTime);
   markRetryLaneIfNotHydrated(fiber, lane);
 }
 
@@ -402,8 +405,9 @@ export function attemptContinuousHydration(fiber: Fiber): void {
     // Suspense.
     return;
   }
+  const eventTime = requestEventTime();
   const lane = SelectiveHydrationLane;
-  scheduleUpdateOnFiber(fiber, lane);
+  scheduleUpdateOnFiber(fiber, lane, eventTime);
   markRetryLaneIfNotHydrated(fiber, lane);
 }
 
@@ -413,8 +417,9 @@ export function attemptHydrationAtCurrentPriority(fiber: Fiber): void {
     // their priority other than synchronously flush it.
     return;
   }
+  const eventTime = requestEventTime();
   const lane = requestUpdateLane(fiber, null);
-  scheduleUpdateOnFiber(fiber, lane);
+  scheduleUpdateOnFiber(fiber, lane, eventTime);
   markRetryLaneIfNotHydrated(fiber, lane);
 }
 
@@ -497,7 +502,7 @@ if (__DEV__) {
       // Shallow cloning props works as a workaround for now to bypass the bailout check.
       fiber.memoizedProps = {...fiber.memoizedProps};
 
-      scheduleUpdateOnFiber(fiber, SyncLane);
+      scheduleUpdateOnFiber(fiber, SyncLane, NoTimestamp);
     }
   };
 
@@ -507,11 +512,11 @@ if (__DEV__) {
     if (fiber.alternate) {
       fiber.alternate.pendingProps = fiber.pendingProps;
     }
-    scheduleUpdateOnFiber(fiber, SyncLane);
+    scheduleUpdateOnFiber(fiber, SyncLane, NoTimestamp);
   };
 
   scheduleUpdate = (fiber: Fiber) => {
-    scheduleUpdateOnFiber(fiber, SyncLane);
+    scheduleUpdateOnFiber(fiber, SyncLane, NoTimestamp);
   };
 
   setSuspenseHandler = (newShouldSuspendImpl: Fiber => boolean) => {

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

@@ -12,7 +12,12 @@ import type {RootTag} from './ReactRootTags';
 
 import {noTimeout} from './ReactFiberHostConfig';
 import {createHostRootFiber} from './ReactFiber.new';
-import {NoLanes} from './ReactFiberLane';
+import {
+  NoLanes,
+  NoLanePriority,
+  NoTimestamp,
+  createLaneMap,
+} from './ReactFiberLane';
 import {
   enableSchedulerTracing,
   enableSuspenseCallback,
@@ -33,8 +38,8 @@ function FiberRootNode(containerInfo, tag, hydrate) {
   this.hydrate = hydrate;
   this.callbackNode = null;
   this.callbackId = NoLanes;
-  this.callbackIsSync = false;
-  this.expiresAt = -1;
+  this.callbackPriority_new = NoLanePriority;
+  this.expirationTimes = createLaneMap(NoTimestamp);
 
   this.pendingLanes = NoLanes;
   this.suspendedLanes = NoLanes;