Only show most recent transition, per queue

When multiple transitions update the same queue, only the most recent
one should be allowed to finish. Do not display intermediate states.

For example, if you click on multiple tabs in quick succession, we
should not switch to any tab that isn't the last one you clicked.

Author: acdlite

packages/react-reconciler/src/ReactFiberHooks.js

@@ -51,6 +51,7 @@ import warning from 'shared/warning';
 import getComponentName from 'shared/getComponentName';
 import is from 'shared/objectIs';
 import {markWorkInProgressReceivedUpdate} from './ReactFiberBeginWork';
+import {SuspendOnTask} from './ReactFiberThrow';
 import {requestCurrentSuspenseConfig} from './ReactFiberSuspenseConfig';
 import {
   startTransition,
@@ -744,7 +745,10 @@ function updateReducer<S, I, A>(
     let prevUpdate = baseUpdate;
     let update = first;
     let didSkip = false;
+    let lastProcessedTransitionTime = NoWork;
+    let lastSkippedTransitionTime = NoWork;
     do {
+      const suspenseConfig = update.suspenseConfig;
       const updateExpirationTime = update.expirationTime;
       if (updateExpirationTime < renderExpirationTime) {
         // Priority is insufficient. Skip this update. If this is the first
@@ -760,6 +764,16 @@ function updateReducer<S, I, A>(
           currentlyRenderingFiber.expirationTime = updateExpirationTime;
           markUnprocessedUpdateTime(updateExpirationTime);
         }
+
+        if (suspenseConfig !== null) {
+          // This update is part of a transition
+          if (
+            lastSkippedTransitionTime === NoWork ||
+            lastSkippedTransitionTime > updateExpirationTime
+          ) {
+            lastSkippedTransitionTime = updateExpirationTime;
+          }
+        }
       } else {
         // This update does have sufficient priority.
         // Mark the event time of this update as relevant to this render pass.
@@ -768,10 +782,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(updateExpirationTime, suspenseConfig);
 
         // Process this update.
         if (update.eagerReducer === reducer) {
@@ -782,12 +793,32 @@ function updateReducer<S, I, A>(
           const action = update.action;
           newState = reducer(newState, action);
         }
+
+        if (suspenseConfig !== null) {
+          // This update is part of a transition
+          if (
+            lastProcessedTransitionTime === NoWork ||
+            lastProcessedTransitionTime > updateExpirationTime
+          ) {
+            lastProcessedTransitionTime = updateExpirationTime;
+          }
+        }
       }
 
       prevUpdate = update;
       update = update.next;
     } while (update !== null && update !== first);
 
+    if (
+      lastProcessedTransitionTime !== NoWork &&
+      lastSkippedTransitionTime !== NoWork
+    ) {
+      // There are multiple updates scheduled on this queue, but only some of
+      // them were processed. To avoid showing an intermediate state, abort
+      // the current render and restart at a level that includes them all.
+      throw new SuspendOnTask(lastSkippedTransitionTime);
+    }
+
     if (!didSkip) {
       newBaseUpdate = prevUpdate;
       newBaseState = newState;

packages/react-reconciler/src/ReactFiberThrow.js

@@ -62,6 +62,12 @@ import {Sync} from './ReactFiberExpirationTime';
 
 const PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;
 
+// Throw an object with this type to abort the current render and restart at
+// a different level.
+export function SuspendOnTask(expirationTime: ExpirationTime) {
+  this.retryTime = expirationTime;
+}
+
 function createRootErrorUpdate(
   fiber: Fiber,
   errorInfo: CapturedValue<mixed>,

packages/react-reconciler/src/ReactFiberWorkLoop.js

@@ -126,6 +126,7 @@ import {
   throwException,
   createRootErrorUpdate,
   createClassErrorUpdate,
+  SuspendOnTask,
 } from './ReactFiberThrow';
 import {
   commitBeforeMutationLifeCycles as commitBeforeMutationEffectOnFiber,
@@ -201,13 +202,14 @@ const LegacyUnbatchedContext = /*       */ 0b001000;
 const RenderContext = /*                */ 0b010000;
 const CommitContext = /*                */ 0b100000;
 
-type RootExitStatus = 0 | 1 | 2 | 3 | 4 | 5;
+type RootExitStatus = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 const RootIncomplete = 0;
 const RootFatalErrored = 1;
-const RootErrored = 2;
-const RootSuspended = 3;
-const RootSuspendedWithDelay = 4;
-const RootCompleted = 5;
+const RootSuspendedOnTask = 2;
+const RootErrored = 3;
+const RootSuspended = 4;
+const RootSuspendedWithDelay = 5;
+const RootCompleted = 6;
 
 export type Thenable = {
   then(resolve: () => mixed, reject?: () => mixed): Thenable | void,
@@ -238,7 +240,7 @@ let workInProgressRootCanSuspendUsingConfig: null | SuspenseConfig = null;
 // The work left over by components that were visited during this render. Only
 // includes unprocessed updates, not work in bailed out children.
 let workInProgressRootNextUnprocessedUpdateTime: ExpirationTime = NoWork;
-
+let workInProgressRootRestartTime: ExpirationTime = NoWork;
 // If we're pinged while rendering we don't always restart immediately.
 // This flag determines if it might be worthwhile to restart if an opportunity
 // happens latere.
@@ -708,7 +710,12 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
         throw fatalError;
       }
 
-      if (workInProgress !== null) {
+      if (workInProgressRootExitStatus === RootSuspendedOnTask) {
+        // Can't finish rendering at this level. Exit early and restart at the
+        // specified time.
+        markRootSuspendedAtTime(root, expirationTime);
+        root.nextKnownPendingLevel = workInProgressRootRestartTime;
+      } else if (workInProgress !== null) {
         // There's still work left over. Exit without committing.
         stopInterruptedWorkLoopTimer();
       } else {
@@ -749,7 +756,8 @@ function finishConcurrentRender(
 
   switch (exitStatus) {
     case RootIncomplete:
-    case RootFatalErrored: {
+    case RootFatalErrored:
+    case RootSuspendedOnTask: {
       invariant(false, 'Root did not complete. This is a bug in React.');
     }
     // Flow knows about invariant, so it complains if I add a break
@@ -1036,7 +1044,12 @@ function performSyncWorkOnRoot(root) {
       throw fatalError;
     }
 
-    if (workInProgress !== null) {
+    if (workInProgressRootExitStatus === RootSuspendedOnTask) {
+      // Can't finish rendering at this level. Exit early and restart at the
+      // specified time.
+      markRootSuspendedAtTime(root, expirationTime);
+      root.nextKnownPendingLevel = workInProgressRootRestartTime;
+    } else if (workInProgress !== null) {
       // This is a sync render, so we should have finished the whole tree.
       invariant(
         false,
@@ -1263,6 +1276,7 @@ function prepareFreshStack(root, expirationTime) {
   workInProgressRootLatestSuspenseTimeout = Sync;
   workInProgressRootCanSuspendUsingConfig = null;
   workInProgressRootNextUnprocessedUpdateTime = NoWork;
+  workInProgressRootRestartTime = NoWork;
   workInProgressRootHasPendingPing = false;
 
   if (enableSchedulerTracing) {
@@ -1283,6 +1297,20 @@ function handleError(root, thrownValue) {
       resetHooks();
       resetCurrentDebugFiberInDEV();
 
+      // Check if this is a SuspendOnTask exception. This is the one type of
+      // exception that is allowed to happen at the root.
+      // TODO: I think instanceof is OK here? A brand check seems unnecessary
+      // since this is always thrown by the renderer and not across realms
+      // or packages.
+      if (thrownValue instanceof SuspendOnTask) {
+        // Can't finish rendering at this level. Exit early and restart at
+        // the specified time.
+        workInProgressRootExitStatus = RootSuspendedOnTask;
+        workInProgressRootRestartTime = thrownValue.retryTime;
+        workInProgress = null;
+        return;
+      }
+
       if (workInProgress === null || workInProgress.return === null) {
         // Expected to be working on a non-root fiber. This is a fatal error
         // because there's no ancestor that can handle it; the root is
@@ -2624,15 +2652,17 @@ if (__DEV__ && replayFailedUnitOfWorkWithInvokeGuardedCallback) {
     try {
       return originalBeginWork(current, unitOfWork, expirationTime);
     } catch (originalError) {
+      // Filter out special exception types
       if (
         originalError !== null &&
         typeof originalError === 'object' &&
-        typeof originalError.then === 'function'
+        // Promise
+        (typeof originalError.then === 'function' ||
+          // SuspendOnTask exception
+          originalError instanceof SuspendOnTask)
       ) {
-        // Don't replay promises. Treat everything else like an error.
         throw originalError;
       }
-
       // Keep this code in sync with handleError; any changes here must have
       // corresponding changes there.
       resetContextDependencies();

packages/react-reconciler/src/ReactUpdateQueue.js

@@ -105,6 +105,7 @@ import {
   markRenderEventTimeAndConfig,
   markUnprocessedUpdateTime,
 } from './ReactFiberWorkLoop';
+import {SuspendOnTask} from './ReactFiberThrow';
 
 import invariant from 'shared/invariant';
 import warningWithoutStack from 'shared/warningWithoutStack';
@@ -474,12 +475,15 @@ export function processUpdateQueue<State>(
   let newBaseState = queue.baseState;
   let newFirstUpdate = null;
   let newExpirationTime = NoWork;
+  let lastProcessedTransitionTime = NoWork;
+  let lastSkippedTransitionTime = NoWork;
 
   // Iterate through the list of updates to compute the result.
   let update = queue.firstUpdate;
   let resultState = newBaseState;
   while (update !== null) {
     const updateExpirationTime = update.expirationTime;
+    const suspenseConfig = update.suspenseConfig;
     if (updateExpirationTime < renderExpirationTime) {
       // This update does not have sufficient priority. Skip it.
       if (newFirstUpdate === null) {
@@ -495,6 +499,16 @@ export function processUpdateQueue<State>(
       if (newExpirationTime < updateExpirationTime) {
         newExpirationTime = updateExpirationTime;
       }
+
+      if (suspenseConfig !== null) {
+        // This update is part of a transition
+        if (
+          lastSkippedTransitionTime === NoWork ||
+          lastSkippedTransitionTime > updateExpirationTime
+        ) {
+          lastSkippedTransitionTime = updateExpirationTime;
+        }
+      }
     } else {
       // This update does have sufficient priority.
 
@@ -504,7 +518,7 @@ export function processUpdateQueue<State>(
       // 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(updateExpirationTime, suspenseConfig);
 
       // Process it and compute a new result.
       resultState = getStateFromUpdate(
@@ -527,11 +541,31 @@ export function processUpdateQueue<State>(
           queue.lastEffect = update;
         }
       }
+
+      if (suspenseConfig !== null) {
+        // This update is part of a transition
+        if (
+          lastProcessedTransitionTime === NoWork ||
+          lastProcessedTransitionTime > updateExpirationTime
+        ) {
+          lastProcessedTransitionTime = updateExpirationTime;
+        }
+      }
     }
     // Continue to the next update.
     update = update.next;
   }
 
+  if (
+    lastProcessedTransitionTime !== NoWork &&
+    lastSkippedTransitionTime !== NoWork
+  ) {
+    // There are multiple updates scheduled on this queue, but only some of
+    // them were processed. To avoid showing an intermediate state, abort
+    // the current render and restart at a level that includes them all.
+    throw new SuspendOnTask(lastSkippedTransitionTime);
+  }
+
   // Separately, iterate though the list of captured updates.
   let newFirstCapturedUpdate = null;
   update = queue.firstCapturedUpdate;