Delete terminal fallback content in first pass

If the dehydrated suspense boundary's fallback content is terminal there
is nothing to show. We need to get actual content on the screen soon.

If we deprioritize that work to offscreen, then the timeout heuristics will
be wrong.

Therefore, if we have no current and we're already at terminal fallback
state we'll immediately schedule a deletion and upgrade to real suspense.

Author: sebmarkbage

packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js

@@ -703,6 +703,65 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(ref.current).toBe(span);
   });
 
+  it('replaces the fallback within the maxDuration if there is a nested suspense', async () => {
+    let suspend = false;
+    let promise = new Promise(resolvePromise => {});
+    let ref = React.createRef();
+
+    function Child() {
+      if (suspend) {
+        throw promise;
+      } else {
+        return 'Hello';
+      }
+    }
+
+    function InnerChild() {
+      // Always suspends indefinitely
+      throw promise;
+    }
+
+    function App() {
+      return (
+        <div>
+          <Suspense fallback="Loading..." maxDuration={100}>
+            <span ref={ref}>
+              <Child />
+            </span>
+            <Suspense fallback={null}>
+              <InnerChild />
+            </Suspense>
+          </Suspense>
+        </div>
+      );
+    }
+
+    // First we render the final HTML. With the streaming renderer
+    // this may have suspense points on the server but here we want
+    // to test the completed HTML. Don't suspend on the server.
+    suspend = true;
+    let finalHTML = ReactDOMServer.renderToString(<App />);
+    let container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    expect(container.getElementsByTagName('span').length).toBe(0);
+
+    // On the client we have the data available quickly for some reason.
+    suspend = false;
+    let root = ReactDOM.unstable_createRoot(container, {hydrate: true});
+    root.render(<App />);
+    Scheduler.flushAll();
+    // This will have exceeded the maxDuration so we should timeout.
+    jest.advanceTimersByTime(500);
+    // The boundary should longer be suspended for the middle content
+    // even though the inner boundary is still suspended.
+
+    expect(container.textContent).toBe('Hello');
+
+    let span = container.getElementsByTagName('span')[0];
+    expect(ref.current).toBe(span);
+  });
+
   it('waits for pending content to come in from the server and then hydrates it', async () => {
     let suspend = false;
     let promise = new Promise(resolvePromise => {});

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -1632,12 +1632,28 @@ function updateSuspenseComponent(
 }
 
 function retrySuspenseComponentWithoutHydrating(
-  current: Fiber,
+  current: Fiber | null,
   workInProgress: Fiber,
   renderExpirationTime: ExpirationTime,
 ) {
+  let fiberToDelete = current;
+  if (fiberToDelete === null) {
+    // We're going to delete the dehydrated boundary but we don't have a
+    // current. To be able to insert something in the deletion list we
+    // to create one. That's because our workInProgress is going to be
+    // upgraded so we can't use that one.
+    fiberToDelete = createWorkInProgress(
+      workInProgress,
+      workInProgress.pendingProps,
+      renderExpirationTime,
+    );
+    fiberToDelete.return = workInProgress.return;
+  } else {
+    // This is now an insertion.
+    workInProgress.effectTag |= Placement;
+  }
   // Detach from the current dehydrated boundary.
-  current.alternate = null;
+  fiberToDelete.alternate = null;
   workInProgress.alternate = null;
 
   // Insert a deletion in the effect list.
@@ -1649,20 +1665,18 @@ function retrySuspenseComponentWithoutHydrating(
   );
   const last = returnFiber.lastEffect;
   if (last !== null) {
-    last.nextEffect = current;
-    returnFiber.lastEffect = current;
+    last.nextEffect = fiberToDelete;
+    returnFiber.lastEffect = fiberToDelete;
   } else {
-    returnFiber.firstEffect = returnFiber.lastEffect = current;
+    returnFiber.firstEffect = returnFiber.lastEffect = fiberToDelete;
   }
-  current.nextEffect = null;
-  current.effectTag = Deletion;
+  fiberToDelete.nextEffect = null;
+  fiberToDelete.effectTag = Deletion;
 
   // Upgrade this work in progress to a real Suspense component.
   workInProgress.tag = SuspenseComponent;
   workInProgress.stateNode = null;
   workInProgress.memoizedState = null;
-  // This is now an insertion.
-  workInProgress.effectTag |= Placement;
   // Retry as a real Suspense component.
   return updateSuspenseComponent(null, workInProgress, renderExpirationTime);
 }
@@ -1672,6 +1686,17 @@ function updateDehydratedSuspenseComponent(
   workInProgress: Fiber,
   renderExpirationTime: ExpirationTime,
 ) {
+  const suspenseInstance = (workInProgress.stateNode: SuspenseInstance);
+  if (isSuspenseInstanceFallback(suspenseInstance)) {
+    // This boundary is in a permanent fallback state. In this case, we'll never
+    // get an update and we'll never be able to hydrate the final content. Let's just try the
+    // client side render instead.
+    return retrySuspenseComponentWithoutHydrating(
+      current,
+      workInProgress,
+      renderExpirationTime,
+    );
+  }
   if (current === null) {
     // During the first pass, we'll bail out and not drill into the children.
     // Instead, we'll leave the content in place and try to hydrate it later.
@@ -1684,17 +1709,6 @@ function updateDehydratedSuspenseComponent(
     workInProgress.child = null;
     return null;
   }
-  const suspenseInstance = (current.stateNode: SuspenseInstance);
-  if (isSuspenseInstanceFallback(suspenseInstance)) {
-    // This boundary is in a permanent fallback state. In this case, we'll never
-    // get an update and we'll never be able to hydrate the final content. Let's just try the
-    // client side render instead.
-    return retrySuspenseComponentWithoutHydrating(
-      current,
-      workInProgress,
-      renderExpirationTime,
-    );
-  }
   // We use childExpirationTime to indicate that a child might depend on context, so if
   // any context has changed, we need to treat is as if the input might have changed.
   const hasContextChanged = current.childExpirationTime >= renderExpirationTime;