Add a failing test for nested fallbacks

packages/react-reconciler/src/ReactFiber.js

@@ -29,6 +29,7 @@ import {
   Mode,
   ContextProvider,
   ContextConsumer,
+  TimeoutComponent,
 } from 'shared/ReactTypeOfWork';
 import getComponentName from 'shared/getComponentName';
 
@@ -42,6 +43,7 @@ import {
   REACT_PROVIDER_TYPE,
   REACT_CONTEXT_TYPE,
   REACT_ASYNC_MODE_TYPE,
+  REACT_TIMEOUT_TYPE,
 } from 'shared/ReactSymbols';
 
 let hasBadMapPolyfill;
@@ -347,6 +349,9 @@ export function createFiberFromElement(
       case REACT_RETURN_TYPE:
         fiberTag = ReturnComponent;
         break;
+      case REACT_TIMEOUT_TYPE:
+        fiberTag = TimeoutComponent;
+        break;
       default: {
         if (typeof type === 'object' && type !== null) {
           switch (type.$$typeof) {

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -30,11 +30,14 @@ import {
   Mode,
   ContextProvider,
   ContextConsumer,
+  TimeoutComponent,
 } from 'shared/ReactTypeOfWork';
 import {
+  NoEffect,
   PerformedWork,
   Placement,
   ContentReset,
+  DidCapture,
   Ref,
 } from 'shared/ReactTypeOfSideEffect';
 import {ReactCurrentOwner} from 'shared/ReactGlobalSharedState';
@@ -83,8 +86,16 @@ export default function<T, P, I, TI, HI, PI, C, CC, CX, PL>(
   config: HostConfig<T, P, I, TI, HI, PI, C, CC, CX, PL>,
   hostContext: HostContext<C, CX>,
   hydrationContext: HydrationContext<C, CX>,
-  scheduleWork: (fiber: Fiber, expirationTime: ExpirationTime) => void,
-  computeExpirationForFiber: (fiber: Fiber) => ExpirationTime,
+  scheduleWork: (
+    fiber: Fiber,
+    startTime: ExpirationTime,
+    expirationTime: ExpirationTime,
+  ) => void,
+  computeExpirationForFiber: (
+    startTime: ExpirationTime,
+    fiber: Fiber,
+  ) => ExpirationTime,
+  recalculateCurrentTime: () => ExpirationTime,
 ) {
   const {shouldSetTextContent, shouldDeprioritizeSubtree} = config;
 
@@ -108,6 +119,7 @@ export default function<T, P, I, TI, HI, PI, C, CC, CX, PL>(
     computeExpirationForFiber,
     memoizeProps,
     memoizeState,
+    recalculateCurrentTime,
   );
 
   // TODO: Remove this and use reconcileChildrenAtExpirationTime directly.
@@ -716,6 +728,57 @@ export default function<T, P, I, TI, HI, PI, C, CC, CX, PL>(
     return workInProgress.stateNode;
   }
 
+  function updateTimeoutComponent(
+    current,
+    workInProgress,
+    renderExpirationTime,
+  ) {
+    const nextProps = workInProgress.pendingProps;
+    const prevProps = workInProgress.memoizedProps;
+
+    let nextState = workInProgress.memoizedState;
+    if (nextState === null) {
+      nextState = workInProgress.memoizedState = false;
+    }
+    const prevState = current === null ? nextState : current.memoizedState;
+
+    const updateQueue = workInProgress.updateQueue;
+    if (updateQueue !== null) {
+      nextState = workInProgress.memoizedState = processUpdateQueue(
+        current,
+        workInProgress,
+        updateQueue,
+        null,
+        null,
+        renderExpirationTime,
+      );
+    }
+
+    if (hasLegacyContextChanged()) {
+      // Normally we can bail out on props equality but if context has changed
+      // we don't do the bailout and we have to reuse existing props instead.
+    } else if (
+      // Don't bail out if this is a restart
+      (workInProgress.effectTag & DidCapture) === NoEffect &&
+      prevProps === nextProps &&
+      prevState === nextState
+    ) {
+      return bailoutOnAlreadyFinishedWork(current, workInProgress);
+    }
+
+    if ((workInProgress.effectTag & DidCapture) !== NoEffect) {
+      nextState = workInProgress.memoizedState = true;
+    }
+
+    const isExpired = nextState;
+    const render = nextProps.children;
+    const nextChildren = render(isExpired);
+    workInProgress.memoizedProps = nextProps;
+    workInProgress.memoizedState = nextState;
+    reconcileChildren(current, workInProgress, nextChildren);
+    return workInProgress.child;
+  }
+
   function updatePortalComponent(
     current,
     workInProgress,
@@ -1092,6 +1155,12 @@ export default function<T, P, I, TI, HI, PI, C, CC, CX, PL>(
         // A return component is just a placeholder, we can just run through the
         // next one immediately.
         return null;
+      case TimeoutComponent:
+        return updateTimeoutComponent(
+          current,
+          workInProgress,
+          renderExpirationTime,
+        );
       case HostPortal:
         return updatePortalComponent(
           current,

packages/react-reconciler/src/ReactFiberClassComponent.js

@@ -110,10 +110,18 @@ function callGetDerivedStateFromCatch(ctor: any, capturedValues: Array<mixed>) {
 }
 
 export default function(
-  scheduleWork: (fiber: Fiber, expirationTime: ExpirationTime) => void,
-  computeExpirationForFiber: (fiber: Fiber) => ExpirationTime,
+  scheduleWork: (
+    fiber: Fiber,
+    startTime: ExpirationTime,
+    expirationTime: ExpirationTime,
+  ) => void,
+  computeExpirationForFiber: (
+    startTime: ExpirationTime,
+    fiber: Fiber,
+  ) => ExpirationTime,
   memoizeProps: (workInProgress: Fiber, props: any) => void,
   memoizeState: (workInProgress: Fiber, state: any) => void,
+  recalculateCurrentTime: () => ExpirationTime,
 ) {
   // Class component state updater
   const updater = {
@@ -124,7 +132,8 @@ export default function(
       if (__DEV__) {
         warnOnInvalidCallback(callback, 'setState');
       }
-      const expirationTime = computeExpirationForFiber(fiber);
+      const currentTime = recalculateCurrentTime();
+      const expirationTime = computeExpirationForFiber(currentTime, fiber);
       const update = {
         expirationTime,
         partialState,
@@ -135,15 +144,16 @@ export default function(
         next: null,
       };
       insertUpdateIntoFiber(fiber, update);
-      scheduleWork(fiber, expirationTime);
+      scheduleWork(fiber, currentTime, expirationTime);
     },
     enqueueReplaceState(instance, state, callback) {
       const fiber = ReactInstanceMap.get(instance);
       callback = callback === undefined ? null : callback;
       if (__DEV__) {
         warnOnInvalidCallback(callback, 'replaceState');
       }
-      const expirationTime = computeExpirationForFiber(fiber);
+      const currentTime = recalculateCurrentTime();
+      const expirationTime = computeExpirationForFiber(currentTime, fiber);
       const update = {
         expirationTime,
         partialState: state,
@@ -154,15 +164,16 @@ export default function(
         next: null,
       };
       insertUpdateIntoFiber(fiber, update);
-      scheduleWork(fiber, expirationTime);
+      scheduleWork(fiber, currentTime, expirationTime);
     },
     enqueueForceUpdate(instance, callback) {
       const fiber = ReactInstanceMap.get(instance);
       callback = callback === undefined ? null : callback;
       if (__DEV__) {
         warnOnInvalidCallback(callback, 'forceUpdate');
       }
-      const expirationTime = computeExpirationForFiber(fiber);
+      const currentTime = recalculateCurrentTime();
+      const expirationTime = computeExpirationForFiber(currentTime, fiber);
       const update = {
         expirationTime,
         partialState: null,
@@ -173,7 +184,7 @@ export default function(
         next: null,
       };
       insertUpdateIntoFiber(fiber, update);
-      scheduleWork(fiber, expirationTime);
+      scheduleWork(fiber, currentTime, expirationTime);
     },
   };
 

packages/react-reconciler/src/ReactFiberCommitWork.js

@@ -25,6 +25,7 @@ import {
   HostText,
   HostPortal,
   CallComponent,
+  TimeoutComponent,
 } from 'shared/ReactTypeOfWork';
 import ReactErrorUtils from 'shared/ReactErrorUtils';
 import {Placement, Update, ContentReset} from 'shared/ReactTypeOfSideEffect';
@@ -33,6 +34,7 @@ import invariant from 'fbjs/lib/invariant';
 import {commitCallbacks} from './ReactFiberUpdateQueue';
 import {onCommitUnmount} from './ReactFiberDevToolsHook';
 import {startPhaseTimer, stopPhaseTimer} from './ReactDebugFiberPerf';
+import {insertUpdateIntoFiber} from './ReactFiberUpdateQueue';
 import {logCapturedError} from './ReactFiberErrorLogger';
 import getComponentName from 'shared/getComponentName';
 import {getStackAddendumByWorkInProgressFiber} from 'shared/ReactFiberComponentTreeHook';
@@ -152,6 +154,22 @@ export default function<T, P, I, TI, HI, PI, C, CC, CX, PL>(
     }
   }
 
+  function scheduleExpirationBoundaryRecovery(fiber) {
+    const currentTime = recalculateCurrentTime();
+    const expirationTime = computeExpirationForFiber(currentTime, fiber);
+    const update = {
+      expirationTime,
+      partialState: false,
+      callback: null,
+      isReplace: true,
+      isForced: false,
+      capturedValue: null,
+      next: null,
+    };
+    insertUpdateIntoFiber(fiber, update);
+    scheduleWork(fiber, currentTime, expirationTime);
+  }
+
   function commitLifeCycles(
     finishedRoot: FiberRoot,
     current: Fiber | null,
@@ -226,6 +244,18 @@ export default function<T, P, I, TI, HI, PI, C, CC, CX, PL>(
         // We have no life-cycles associated with portals.
         return;
       }
+      case TimeoutComponent: {
+        const updateQueue = finishedWork.updateQueue;
+        if (updateQueue !== null) {
+          const promises = updateQueue.capturedValues;
+          if (promises !== null) {
+            Promise.race(promises).then(() =>
+              scheduleExpirationBoundaryRecovery(finishedWork),
+            );
+          }
+        }
+        return;
+      }
       default: {
         invariant(
           false,
@@ -784,6 +814,9 @@ export default function<T, P, I, TI, HI, PI, C, CC, CX, PL>(
       case HostRoot: {
         return;
       }
+      case TimeoutComponent: {
+        return;
+      }
       default: {
         invariant(
           false,

packages/react-reconciler/src/ReactFiberCompleteWork.js

@@ -34,6 +34,7 @@ import {
   ContextConsumer,
   Fragment,
   Mode,
+  TimeoutComponent,
 } from 'shared/ReactTypeOfWork';
 import {
   Placement,
@@ -605,6 +606,11 @@ export default function<T, P, I, TI, HI, PI, C, CC, CX, PL>(
       case ReturnComponent:
         // Does nothing.
         return null;
+      case TimeoutComponent:
+        if (workInProgress.effectTag & DidCapture) {
+          workInProgress.effectTag |= Update;
+        }
+        return null;
       case Fragment:
         return null;
       case Mode: