Measure callback timeout relative to current time (#15479)

Fixes a bug where the timeout passed to `scheduleCallback` represented
an absolute timestamp, instead of the amount of time until that
timestamp is reached. The solution is to subtract the current time
from the expiration.

The bug wasn't caught by other tests because we use virtual times that
default to 0, and most tests don't advance time.

I also moved the `initialTimeMs` offset to the
`SchedulerWithReactIntegration` module so that we don't have to remember
to subtract the offset every time. (We should consider upstreaming this
to the Scheduler package.)

Author: acdlite

packages/react-reconciler/src/ReactFiberScheduler.js

@@ -234,21 +234,20 @@ let interruptedBy: Fiber | null = null;
 // In other words, because expiration times determine how updates are batched,
 // we want all updates of like priority that occur within the same event to
 // receive the same expiration time. Otherwise we get tearing.
-let initialTimeMs: number = now();
 let currentEventTime: ExpirationTime = NoWork;
 
 export function requestCurrentTime() {
   if (workPhase === RenderPhase || workPhase === CommitPhase) {
     // We're inside React, so it's fine to read the actual time.
-    return msToExpirationTime(now() - initialTimeMs);
+    return msToExpirationTime(now());
   }
   // We're not inside React, so we may be in the middle of a browser event.
   if (currentEventTime !== NoWork) {
     // Use the same start time for all updates until we enter React again.
     return currentEventTime;
   }
   // This is the first update since React yielded. Compute a new start time.
-  currentEventTime = msToExpirationTime(now() - initialTimeMs);
+  currentEventTime = msToExpirationTime(now());
   return currentEventTime;
 }
 
@@ -453,10 +452,18 @@ function scheduleCallbackForRoot(
       cancelCallback(existingCallbackNode);
     }
     root.callbackExpirationTime = expirationTime;
-    const options =
-      expirationTime === Sync
-        ? null
-        : {timeout: expirationTimeToMs(expirationTime)};
+
+    let options = null;
+    if (expirationTime !== Sync && expirationTime !== Never) {
+      let timeout = expirationTimeToMs(expirationTime) - now();
+      if (timeout > 5000) {
+        // Sanity check. Should never take longer than 5 seconds.
+        // TODO: Add internal warning?
+        timeout = 5000;
+      }
+      options = {timeout};
+    }
+
     root.callbackNode = scheduleCallback(
       priorityLevel,
       runRootCallback.bind(
@@ -949,7 +956,7 @@ function inferTimeFromExpirationTime(expirationTime: ExpirationTime): number {
   // We don't know exactly when the update was scheduled, but we can infer an
   // approximate start time from the expiration time.
   const earliestExpirationTimeMs = expirationTimeToMs(expirationTime);
-  return earliestExpirationTimeMs - LOW_PRIORITY_EXPIRATION + initialTimeMs;
+  return earliestExpirationTimeMs - LOW_PRIORITY_EXPIRATION;
 }
 
 function workLoopSync() {
@@ -1860,7 +1867,7 @@ function computeMsUntilTimeout(
 
   // Compute the time until this render pass would expire.
   const timeUntilExpirationMs =
-    expirationTimeToMs(committedExpirationTime) + initialTimeMs - currentTimeMs;
+    expirationTimeToMs(committedExpirationTime) - currentTimeMs;
 
   // Clamp the timeout to the expiration time.
   // TODO: Once the event time is exact instead of inferred from expiration time

packages/react-reconciler/src/SchedulerWithReactIntegration.js

@@ -65,14 +65,24 @@ export const IdlePriority: ReactPriorityLevel = 95;
 // NoPriority is the absence of priority. Also React-only.
 export const NoPriority: ReactPriorityLevel = 90;
 
-export const now = Scheduler_now;
 export const shouldYield = disableYielding
   ? () => false // Never yield when `disableYielding` is on
   : Scheduler_shouldYield;
 
 let immediateQueue: Array<SchedulerCallback> | null = null;
 let immediateQueueCallbackNode: mixed | null = null;
 let isFlushingImmediate: boolean = false;
+let initialTimeMs: number = Scheduler_now();
+
+// If the initial timestamp is reasonably small, use Scheduler's `now` directly.
+// This will be the case for modern browsers that support `performance.now`. In
+// older browsers, Scheduler falls back to `Date.now`, which returns a Unix
+// timestamp. In that case, subtract the module initialization time to simulate
+// the behavior of performance.now and keep our times small enough to fit
+// within 32 bits.
+// TODO: Consider lifting this into Scheduler.
+export const now =
+  initialTimeMs < 10000 ? Scheduler_now : () => Scheduler_now() - initialTimeMs;
 
 export function getCurrentPriorityLevel(): ReactPriorityLevel {
   switch (Scheduler_getCurrentPriorityLevel()) {

packages/react-reconciler/src/__tests__/ReactExpiration-test.internal.js

@@ -272,4 +272,25 @@ describe('ReactExpiration', () => {
     expect(Scheduler).toFlushExpired([]);
     expect(ReactNoop).toMatchRenderedOutput('Hi');
   });
+
+  it('should measure callback timeout relative to current time, not start-up time', () => {
+    // Corresponds to a bugfix: https://github.com/facebook/react/pull/15479
+    // The bug wasn't caught by other tests because we use virtual times that
+    // default to 0, and most tests don't advance time.
+
+    // Before scheduling an update, advance the current time.
+    Scheduler.advanceTime(10000);
+
+    ReactNoop.render('Hi');
+    expect(Scheduler).toFlushExpired([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
+
+    // Advancing by ~5 seconds should be sufficient to expire the update. (I
+    // used a slightly larger number to allow for possible rounding.)
+    Scheduler.advanceTime(6000);
+
+    ReactNoop.render('Hi');
+    expect(Scheduler).toFlushExpired([]);
+    expect(ReactNoop).toMatchRenderedOutput('Hi');
+  });
 });