Decouple expiration times and transition timeouts (#17920)

We currently use the expiration time to represent the timeout of a
transition. Since we intend to stop treating work priority as a
timeline, we can no longer use this trick.

In this commit, I've changed it to store the event time on the update
object instead. Long term, we will store event time on the root as a map
of transition -> event time. I'm only storing it on the update object
as a temporary workaround to unblock the rest of the changes.

Author: acdlite

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

@@ -196,7 +196,7 @@ const classComponentUpdater = {
       suspenseConfig,
     );
 
-    const update = createUpdate(expirationTime, suspenseConfig);
+    const update = createUpdate(currentTime, expirationTime, suspenseConfig);
     update.payload = payload;
     if (callback !== undefined && callback !== null) {
       if (__DEV__) {
@@ -218,7 +218,7 @@ const classComponentUpdater = {
       suspenseConfig,
     );
 
-    const update = createUpdate(expirationTime, suspenseConfig);
+    const update = createUpdate(currentTime, expirationTime, suspenseConfig);
     update.tag = ReplaceState;
     update.payload = payload;
 
@@ -242,7 +242,7 @@ const classComponentUpdater = {
       suspenseConfig,
     );
 
-    const update = createUpdate(expirationTime, suspenseConfig);
+    const update = createUpdate(currentTime, expirationTime, suspenseConfig);
     update.tag = ForceUpdate;
 
     if (callback !== undefined && callback !== null) {

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

@@ -35,6 +35,8 @@ export const Idle = 2;
 // Continuous Hydration is slightly higher than Idle and is used to increase
 // priority of hover targets.
 export const ContinuousHydration = 3;
+export const LongTransition = 49999;
+export const ShortTransition = 99999;
 export const Sync = MAX_SIGNED_31_BIT_INT;
 export const Batched = Sync - 1;
 
@@ -84,16 +86,13 @@ export function computeAsyncExpiration(
   );
 }
 
-export function computeSuspenseExpiration(
+export function computeSuspenseTimeout(
   currentTime: ExpirationTime,
   timeoutMs: number,
 ): ExpirationTime {
-  // TODO: Should we warn if timeoutMs is lower than the normal pri expiration time?
-  return computeExpirationBucket(
-    currentTime,
-    timeoutMs,
-    LOW_PRIORITY_BATCH_SIZE,
-  );
+  const currentTimeMs = expirationTimeToMs(currentTime);
+  const deadlineMs = currentTimeMs + timeoutMs;
+  return msToExpirationTime(deadlineMs);
 }
 
 // We intentionally set a higher expiration time for interactive updates in

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

@@ -96,6 +96,9 @@ import {getIsRendering} from './ReactCurrentFiber';
 const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;
 
 type Update<S, A> = {|
+  // TODO: Temporary field. Will remove this by storing a map of
+  // transition -> start time on the root.
+  eventTime: ExpirationTime,
   expirationTime: ExpirationTime,
   suspenseConfig: null | SuspenseConfig,
   action: A,
@@ -715,14 +718,17 @@ function updateReducer<S, I, A>(
     let newBaseQueueLast = null;
     let update = first;
     do {
+      const suspenseConfig = update.suspenseConfig;
       const updateExpirationTime = update.expirationTime;
+      const updateEventTime = update.eventTime;
       if (updateExpirationTime < renderExpirationTime) {
         // Priority is insufficient. Skip this update. If this is the first
         // skipped update, the previous update/state is the new base
         // update/state.
         const clone: Update<S, A> = {
-          expirationTime: update.expirationTime,
-          suspenseConfig: update.suspenseConfig,
+          eventTime: updateEventTime,
+          expirationTime: updateExpirationTime,
+          suspenseConfig: suspenseConfig,
           action: update.action,
           eagerReducer: update.eagerReducer,
           eagerState: update.eagerState,
@@ -744,6 +750,7 @@ function updateReducer<S, I, A>(
 
         if (newBaseQueueLast !== null) {
           const clone: Update<S, A> = {
+            eventTime: updateEventTime,
             expirationTime: Sync, // This update is going to be committed so we never want uncommit it.
             suspenseConfig: update.suspenseConfig,
             action: update.action,
@@ -760,10 +767,7 @@ function updateReducer<S, I, A>(
         // TODO: We should skip this update if it was already committed but currently
         // we have no way of detecting the difference between a committed and suspended
         // update here.
-        markRenderEventTimeAndConfig(
-          updateExpirationTime,
-          update.suspenseConfig,
-        );
+        markRenderEventTimeAndConfig(updateEventTime, suspenseConfig);
 
         // Process this update.
         if (update.eagerReducer === reducer) {
@@ -1651,6 +1655,7 @@ function dispatchAction<S, A>(
   );
 
   const update: Update<S, A> = {
+    eventTime: currentTime,
     expirationTime,
     suspenseConfig,
     action,

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

@@ -206,7 +206,7 @@ export function propagateContextChange(
 
           if (fiber.tag === ClassComponent) {
             // Schedule a force update on the work-in-progress.
-            const update = createUpdate(renderExpirationTime, null);
+            const update = createUpdate(NoWork, renderExpirationTime, null);
             update.tag = ForceUpdate;
             // TODO: Because we don't have a work-in-progress, this will add the
             // update to the current fiber, too, which means it will persist even if

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

@@ -271,7 +271,7 @@ export function updateContainer(
     }
   }
 
-  const update = createUpdate(expirationTime, suspenseConfig);
+  const update = createUpdate(currentTime, expirationTime, suspenseConfig);
   // Caution: React DevTools currently depends on this property
   // being called "element".
   update.payload = {element};

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

@@ -56,7 +56,7 @@ import {
 } from './ReactFiberWorkLoop.new';
 import {logCapturedError} from './ReactFiberErrorLogger';
 
-import {Sync} from './ReactFiberExpirationTime.new';
+import {Sync, NoWork} from './ReactFiberExpirationTime.new';
 
 const PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;
 
@@ -65,7 +65,7 @@ function createRootErrorUpdate(
   errorInfo: CapturedValue<mixed>,
   expirationTime: ExpirationTime,
 ): Update<mixed> {
-  const update = createUpdate(expirationTime, null);
+  const update = createUpdate(NoWork, expirationTime, null);
   // Unmount the root by rendering null.
   update.tag = CaptureUpdate;
   // Caution: React DevTools currently depends on this property
@@ -84,7 +84,7 @@ function createClassErrorUpdate(
   errorInfo: CapturedValue<mixed>,
   expirationTime: ExpirationTime,
 ): Update<mixed> {
-  const update = createUpdate(expirationTime, null);
+  const update = createUpdate(NoWork, expirationTime, null);
   update.tag = CaptureUpdate;
   const getDerivedStateFromError = fiber.type.getDerivedStateFromError;
   if (typeof getDerivedStateFromError === 'function') {
@@ -260,7 +260,7 @@ function throwException(
               // When we try rendering again, we should not reuse the current fiber,
               // since it's known to be in an inconsistent state. Use a force update to
               // prevent a bail out.
-              const update = createUpdate(Sync, null);
+              const update = createUpdate(NoWork, Sync, null);
               update.tag = ForceUpdate;
               enqueueUpdate(sourceFiber, update);
             }