Resume immediately pinged fiber without unwinding (facebook#25074)

* Yield to main thread if continuation is returned

Instead of using an imperative method `requestYield` to ask Scheduler to
yield to the main thread, we can assume that any time a Scheduler task
returns a continuation callback, it's because it wants to yield to the
main thread. We can assume the task already checked some condition that
caused it to return a continuation, so we don't need to do any
additional checks — we can immediately yield and schedule a new task
for the continuation.

The replaces the `requestYield` API that I added in ca990e9.

* Move unwind after error into main work loop

I need to be able to yield to the main thread in between when an error
is thrown and when the stack is unwound. (This is the motivation behind
the refactor, but it isn't implemented in this commit.) Currently the
unwind is inlined directly into `handleError`.

Instead, I've moved the unwind logic into the main work loop. At the
very beginning of the function, we check to see if the work-in-progress
is in a "suspended" state — that is, whether it needs to be unwound. If
it is, we will enter the unwind phase instead of the begin phase.

We only need to perform this check when we first enter the work loop:
at the beginning of a Scheduler chunk, or after something throws. We
don't need to perform it after every unit of work.

* Yield to main thread whenever a fiber suspends

When a fiber suspends, we should yield to the main thread in case the
data is already cached, to unblock a potential ping event.

By itself, this commit isn't useful because we don't do anything special
in the case where to do receive an immediate ping event. I've split this
out only to demonstrate that it doesn't break any existing behavior.

See the next commit for full context and motivation.

* Resume immediately pinged fiber without unwinding

If a fiber suspends, and is pinged immediately in a microtask (or a
regular task that fires before React resumes rendering), try rendering
the same fiber again without unwinding the stack. This can be super
helpful when working with promises and async-await, because even if the
outermost promise hasn't been cached before, the underlying data may
have been preloaded. In many cases, we can continue rendering
immediately without having to show a fallback.

This optimization should work during any concurrent (time-sliced)
render. It doesn't work during discrete updates because those are
semantically required to finish synchronously — those get the current
behavior.

Author: acdlite

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

@@ -357,7 +357,7 @@ function throwException(
   sourceFiber: Fiber,
   value: mixed,
   rootRenderLanes: Lanes,
-) {
+): Wakeable | null {
   // The source fiber did not complete.
   sourceFiber.flags |= Incomplete;
 
@@ -459,7 +459,7 @@ function throwException(
       if (suspenseBoundary.mode & ConcurrentMode) {
         attachPingListener(root, wakeable, rootRenderLanes);
       }
-      return;
+      return wakeable;
     } else {
       // No boundary was found. Unless this is a sync update, this is OK.
       // We can suspend and wait for more data to arrive.
@@ -474,7 +474,7 @@ function throwException(
         // This case also applies to initial hydration.
         attachPingListener(root, wakeable, rootRenderLanes);
         renderDidSuspendDelayIfPossible();
-        return;
+        return wakeable;
       }
 
       // This is a sync/discrete update. We treat this case like an error
@@ -517,7 +517,7 @@ function throwException(
         // Even though the user may not be affected by this error, we should
         // still log it so it can be fixed.
         queueHydrationError(createCapturedValueAtFiber(value, sourceFiber));
-        return;
+        return null;
       }
     } else {
       // Otherwise, fall through to the error path.
@@ -540,7 +540,7 @@ function throwException(
         workInProgress.lanes = mergeLanes(workInProgress.lanes, lane);
         const update = createRootErrorUpdate(workInProgress, errorInfo, lane);
         enqueueCapturedUpdate(workInProgress, update);
-        return;
+        return null;
       }
       case ClassComponent:
         // Capture and retry
@@ -564,14 +564,15 @@ function throwException(
             lane,
           );
           enqueueCapturedUpdate(workInProgress, update);
-          return;
+          return null;
         }
         break;
       default:
         break;
     }
     workInProgress = workInProgress.return;
   } while (workInProgress !== null);
+  return null;
 }
 
 export {throwException, createRootErrorUpdate, createClassErrorUpdate};

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

@@ -357,7 +357,7 @@ function throwException(
   sourceFiber: Fiber,
   value: mixed,
   rootRenderLanes: Lanes,
-) {
+): Wakeable | null {
   // The source fiber did not complete.
   sourceFiber.flags |= Incomplete;
 
@@ -459,7 +459,7 @@ function throwException(
       if (suspenseBoundary.mode & ConcurrentMode) {
         attachPingListener(root, wakeable, rootRenderLanes);
       }
-      return;
+      return wakeable;
     } else {
       // No boundary was found. Unless this is a sync update, this is OK.
       // We can suspend and wait for more data to arrive.
@@ -474,7 +474,7 @@ function throwException(
         // This case also applies to initial hydration.
         attachPingListener(root, wakeable, rootRenderLanes);
         renderDidSuspendDelayIfPossible();
-        return;
+        return wakeable;
       }
 
       // This is a sync/discrete update. We treat this case like an error
@@ -517,7 +517,7 @@ function throwException(
         // Even though the user may not be affected by this error, we should
         // still log it so it can be fixed.
         queueHydrationError(createCapturedValueAtFiber(value, sourceFiber));
-        return;
+        return null;
       }
     } else {
       // Otherwise, fall through to the error path.
@@ -540,7 +540,7 @@ function throwException(
         workInProgress.lanes = mergeLanes(workInProgress.lanes, lane);
         const update = createRootErrorUpdate(workInProgress, errorInfo, lane);
         enqueueCapturedUpdate(workInProgress, update);
-        return;
+        return null;
       }
       case ClassComponent:
         // Capture and retry
@@ -564,14 +564,15 @@ function throwException(
             lane,
           );
           enqueueCapturedUpdate(workInProgress, update);
-          return;
+          return null;
         }
         break;
       default:
         break;
     }
     workInProgress = workInProgress.return;
   } while (workInProgress !== null);
+  return null;
 }
 
 export {throwException, createRootErrorUpdate, createClassErrorUpdate};

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

@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {Wakeable} from 'shared/ReactTypes';
+
+let suspendedWakeable: Wakeable | null = null;
+let wasPinged = false;
+let adHocSuspendCount: number = 0;
+
+const MAX_AD_HOC_SUSPEND_COUNT = 50;
+
+export function suspendedWakeableWasPinged() {
+  return wasPinged;
+}
+
+export function trackSuspendedWakeable(wakeable: Wakeable) {
+  adHocSuspendCount++;
+  suspendedWakeable = wakeable;
+}
+
+export function attemptToPingSuspendedWakeable(wakeable: Wakeable) {
+  if (wakeable === suspendedWakeable) {
+    // This ping is from the wakeable that just suspended. Mark it as pinged.
+    // When the work loop resumes, we'll immediately try rendering the fiber
+    // again instead of unwinding the stack.
+    wasPinged = true;
+    return true;
+  }
+  return false;
+}
+
+export function resetWakeableState() {
+  suspendedWakeable = null;
+  wasPinged = false;
+  adHocSuspendCount = 0;
+}
+
+export function throwIfInfinitePingLoopDetected() {
+  if (adHocSuspendCount > MAX_AD_HOC_SUSPEND_COUNT) {
+    // TODO: Guard against an infinite loop by throwing an error if the same
+    // component suspends too many times in a row. This should be thrown from
+    // the render phase so that it gets the component stack.
+  }
+}

packages/react-reconciler/src/ReactFiberWakeable.old.js

@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {Wakeable} from 'shared/ReactTypes';
+
+let suspendedWakeable: Wakeable | null = null;
+let wasPinged = false;
+let adHocSuspendCount: number = 0;
+
+const MAX_AD_HOC_SUSPEND_COUNT = 50;
+
+export function suspendedWakeableWasPinged() {
+  return wasPinged;
+}
+
+export function trackSuspendedWakeable(wakeable: Wakeable) {
+  adHocSuspendCount++;
+  suspendedWakeable = wakeable;
+}
+
+export function attemptToPingSuspendedWakeable(wakeable: Wakeable) {
+  if (wakeable === suspendedWakeable) {
+    // This ping is from the wakeable that just suspended. Mark it as pinged.
+    // When the work loop resumes, we'll immediately try rendering the fiber
+    // again instead of unwinding the stack.
+    wasPinged = true;
+    return true;
+  }
+  return false;
+}
+
+export function resetWakeableState() {
+  suspendedWakeable = null;
+  wasPinged = false;
+  adHocSuspendCount = 0;
+}
+
+export function throwIfInfinitePingLoopDetected() {
+  if (adHocSuspendCount > MAX_AD_HOC_SUSPEND_COUNT) {
+    // TODO: Guard against an infinite loop by throwing an error if the same
+    // component suspends too many times in a row. This should be thrown from
+    // the render phase so that it gets the component stack.
+  }
+}