Add DehydratedSuspenseComponent type of work

Will be used for Suspense boundaries that are left with their server
rendered content intact.

packages/react-reconciler/src/ReactDebugFiberPerf.js

@@ -21,6 +21,7 @@ import {
   ContextConsumer,
   Mode,
   SuspenseComponent,
+  DehydratedSuspenseComponent,
 } from 'shared/ReactWorkTags';
 
 type MeasurementPhase =
@@ -317,7 +318,8 @@ export function stopFailedWorkTimer(fiber: Fiber): void {
     }
     fiber._debugIsCurrentlyTiming = false;
     const warning =
-      fiber.tag === SuspenseComponent
+      fiber.tag === SuspenseComponent ||
+      fiber.tag === DehydratedSuspenseComponent
         ? 'Rendering was suspended'
         : 'An error was thrown inside this error boundary';
     endFiberMark(fiber, null, warning);

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -30,6 +30,7 @@ import {
   ContextConsumer,
   Profiler,
   SuspenseComponent,
+  DehydratedSuspenseComponent,
   MemoComponent,
   SimpleMemoComponent,
   LazyComponent,
@@ -1392,6 +1393,13 @@ function updateSuspenseComponent(
   // children -- we skip over the primary children entirely.
   let next;
   if (current === null) {
+    // If we're currently hydrating, try to hydrate this boundary.
+    tryToClaimNextHydratableInstance(workInProgress);
+    // This could've changed the tag if this was a dehydrated suspense component.
+    if (workInProgress.tag === DehydratedSuspenseComponent) {
+      return updateDehydratedSuspenseComponent(null, workInProgress);
+    }
+
     // This is the initial mount. This branch is pretty simple because there's
     // no previous state that needs to be preserved.
     if (nextDidTimeout) {
@@ -1598,6 +1606,13 @@ function updateSuspenseComponent(
   return next;
 }
 
+function updateDehydratedSuspenseComponent(
+  current: Fiber | null,
+  workInProgress: Fiber,
+) {
+  return null;
+}
+
 function updatePortalComponent(
   current: Fiber | null,
   workInProgress: Fiber,
@@ -2051,6 +2066,9 @@ function beginWork(
         renderExpirationTime,
       );
     }
+    case DehydratedSuspenseComponent: {
+      return updateDehydratedSuspenseComponent(current, workInProgress);
+    }
     default:
       invariant(
         false,

packages/react-reconciler/src/ReactFiberCompleteWork.js

@@ -34,6 +34,7 @@ import {
   Mode,
   Profiler,
   SuspenseComponent,
+  DehydratedSuspenseComponent,
   MemoComponent,
   SimpleMemoComponent,
   LazyComponent,
@@ -762,6 +763,17 @@ function completeWork(
       }
       break;
     }
+    case DehydratedSuspenseComponent: {
+      if (current === null) {
+        let wasHydrated = popHydrationState(workInProgress);
+        invariant(
+          wasHydrated,
+          'A dehydrated suspense component was completed without a hydrated node. ' +
+            'This is probably a bug in React.',
+        );
+      }
+      break;
+    }
     default:
       invariant(
         false,

packages/react-reconciler/src/ReactFiberSuspenseComponent.js

@@ -24,3 +24,13 @@ export function shouldCaptureSuspense(workInProgress: Fiber): boolean {
   const nextState: SuspenseState | null = workInProgress.memoizedState;
   return nextState === null;
 }
+
+export function shouldCaptureDehydratedSuspense(
+  workInProgress: Fiber,
+): boolean {
+  // In order to capture, the Suspense component must have a fallback prop.
+  if (workInProgress.memoizedProps.fallback === undefined) {
+    return false;
+  }
+  return true;
+}

packages/react-reconciler/src/ReactFiberUnwindWork.js

@@ -25,6 +25,7 @@ import {
   HostPortal,
   ContextProvider,
   SuspenseComponent,
+  DehydratedSuspenseComponent,
   IncompleteClassComponent,
 } from 'shared/ReactWorkTags';
 import {
@@ -36,7 +37,10 @@ import {
 } from 'shared/ReactSideEffectTags';
 import {enableSchedulerTracing} from 'shared/ReactFeatureFlags';
 import {ConcurrentMode} from './ReactTypeOfMode';
-import {shouldCaptureSuspense} from './ReactFiberSuspenseComponent';
+import {
+  shouldCaptureSuspense,
+  shouldCaptureDehydratedSuspense,
+} from './ReactFiberSuspenseComponent';
 
 import {createCapturedValue} from './ReactCapturedValue';
 import {
@@ -197,6 +201,8 @@ function throwException(
             earliestTimeoutMs = timeoutPropMs;
           }
         }
+      } else if (workInProgress.tag === DehydratedSuspenseComponent) {
+        // TODO
       }
       workInProgress = workInProgress.return;
     } while (workInProgress !== null);
@@ -334,6 +340,12 @@ function throwException(
         workInProgress.effectTag |= ShouldCapture;
         workInProgress.expirationTime = renderExpirationTime;
         return;
+      } else if (
+        workInProgress.tag === DehydratedSuspenseComponent &&
+        shouldCaptureDehydratedSuspense(workInProgress)
+      ) {
+        // TODO
+        return;
       }
       // This boundary already captured during this render. Continue to the next
       // boundary.
@@ -432,6 +444,7 @@ function unwindWork(
       return workInProgress;
     }
     case HostComponent: {
+      // TODO: popHydrationState
       popHostContext(workInProgress);
       return null;
     }
@@ -444,6 +457,11 @@ function unwindWork(
       }
       return null;
     }
+    case DehydratedSuspenseComponent: {
+      // TODO: popHydrationState
+      // TODO: Maybe re-render if it captured?
+      return null;
+    }
     case HostPortal:
       popHostContainer(workInProgress);
       return null;

packages/shared/ReactWorkTags.js

@@ -46,3 +46,4 @@ export const MemoComponent = 14;
 export const SimpleMemoComponent = 15;
 export const LazyComponent = 16;
 export const IncompleteClassComponent = 17;
+export const DehydratedSuspenseComponent = 18;