[DevTools] Handle dehydrated Suspense boundaries

Author: eps1lon

packages/react-devtools-shared/src/backend/fiber/renderer.js

@@ -3603,9 +3603,14 @@ export function attach(
         } else {
           const contentFiber = fiber.child;
           if (contentFiber === null) {
-            throw new Error(
-              'There should always be an Offscreen Fiber child in a Suspense boundary.',
-            );
+            const suspenseState = fiber.memoizedState;
+            if (suspenseState === null || suspenseState.dehydrated === null) {
+              throw new Error(
+                'There should always be an Offscreen Fiber child in a hydrated Suspense boundary.',
+              );
+            }
+            // This Suspense Fiber is still dehydrated. It won't have any children
+            // until hydration.
           }
           const isTimedOut = fiber.memoizedState !== null;
           if (!isTimedOut) {
@@ -3654,12 +3659,17 @@ export function attach(
           }
         } else {
           const contentFiber = fiber.child;
+          const suspenseState = fiber.memoizedState;
           if (contentFiber === null) {
-            throw new Error(
-              'There should always be an Offscreen Fiber child in a Suspense boundary.',
-            );
+            if (suspenseState === null || suspenseState.dehydrated === null) {
+              throw new Error(
+                'There should always be an Offscreen Fiber child in a hydrated Suspense boundary.',
+              );
+            }
+            // This Suspense Fiber is still dehydrated. It won't have any children
+            // until hydration.
           }
-          const isTimedOut = fiber.memoizedState !== null;
+          const isTimedOut = suspenseState !== null;
           if (!isTimedOut) {
             newSuspenseNode.rects = measureInstance(newInstance);
           }
@@ -3787,34 +3797,40 @@ export function attach(
         // Modern Suspense path
         const contentFiber = fiber.child;
         if (contentFiber === null) {
-          throw new Error(
-            'There should always be an Offscreen Fiber child in a Suspense boundary.',
-          );
-        }
-        const fallbackFiber = contentFiber.sibling;
-
-        // First update only the Offscreen boundary. I.e. the main content.
-        mountVirtualChildrenRecursively(
-          contentFiber,
-          fallbackFiber,
-          traceNearestHostComponentUpdate,
-          0, // first level
-        );
+          const suspenseState = fiber.memoizedState;
+          if (suspenseState === null || suspenseState.dehydrated === null) {
+            throw new Error(
+              'There should always be an Offscreen Fiber child in a hydrated Suspense boundary.',
+            );
+          }
+          // This Suspense Fiber is still dehydrated. It won't have any children
+          // until hydration.
+        } else {
+          const fallbackFiber = contentFiber.sibling;
 
-        // Next, we'll pop back out of the SuspenseNode that we added above and now we'll
-        // reconcile the fallback, reconciling anything by inserting into the parent SuspenseNode.
-        // Since the fallback conceptually blocks the parent.
-        reconcilingParentSuspenseNode = stashedSuspenseParent;
-        previouslyReconciledSiblingSuspenseNode = stashedSuspensePrevious;
-        remainingReconcilingChildrenSuspenseNodes = stashedSuspenseRemaining;
-        shouldPopSuspenseNode = false;
-        if (fallbackFiber !== null) {
+          // First update only the Offscreen boundary. I.e. the main content.
           mountVirtualChildrenRecursively(
+            contentFiber,
             fallbackFiber,
-            null,
             traceNearestHostComponentUpdate,
             0, // first level
           );
+
+          // Next, we'll pop back out of the SuspenseNode that we added above and now we'll
+          // reconcile the fallback, reconciling anything by inserting into the parent SuspenseNode.
+          // Since the fallback conceptually blocks the parent.
+          reconcilingParentSuspenseNode = stashedSuspenseParent;
+          previouslyReconciledSiblingSuspenseNode = stashedSuspensePrevious;
+          remainingReconcilingChildrenSuspenseNodes = stashedSuspenseRemaining;
+          shouldPopSuspenseNode = false;
+          if (fallbackFiber !== null) {
+            mountVirtualChildrenRecursively(
+              fallbackFiber,
+              null,
+              traceNearestHostComponentUpdate,
+              0, // first level
+            );
+          }
         }
       } else {
         if (fiber.child !== null) {
@@ -4719,61 +4735,74 @@ export function attach(
         const prevContentFiber = prevFiber.child;
         const nextContentFiber = nextFiber.child;
         if (nextContentFiber === null || prevContentFiber === null) {
-          throw new Error(
-            'There should always be an Offscreen Fiber child in a Suspense boundary.',
+          const previousSuspenseState = prevFiber.memoizedState;
+          const nextSuspenseState = nextFiber.memoizedState;
+          if (
+            previousSuspenseState === null ||
+            previousSuspenseState.dehydrated === null ||
+            nextSuspenseState === null ||
+            nextSuspenseState.dehydrated === null
+          ) {
+            throw new Error(
+              'There should always be an Offscreen Fiber child in a hydrated Suspense boundary.',
+            );
+          }
+          // This Suspense Fiber is still dehydrated. It won't have any children
+          // until hydration.
+        } else {
+          const prevFallbackFiber = prevContentFiber.sibling;
+          const nextFallbackFiber = nextContentFiber.sibling;
+
+          // First update only the Offscreen boundary. I.e. the main content.
+          updateFlags |= updateVirtualChildrenRecursively(
+            nextContentFiber,
+            nextFallbackFiber,
+            prevContentFiber,
+            traceNearestHostComponentUpdate,
+            0,
           );
-        }
-        const prevFallbackFiber = prevContentFiber.sibling;
-        const nextFallbackFiber = nextContentFiber.sibling;
-
-        // First update only the Offscreen boundary. I.e. the main content.
-        updateFlags |= updateVirtualChildrenRecursively(
-          nextContentFiber,
-          nextFallbackFiber,
-          prevContentFiber,
-          traceNearestHostComponentUpdate,
-          0,
-        );
 
-        shouldMeasureSuspenseNode = false;
-        if (prevFallbackFiber !== null || nextFallbackFiber !== null) {
-          const fallbackStashedSuspenseParent = reconcilingParentSuspenseNode;
-          const fallbackStashedSuspensePrevious =
-            previouslyReconciledSiblingSuspenseNode;
-          const fallbackStashedSuspenseRemaining =
-            remainingReconcilingChildrenSuspenseNodes;
-          // Next, we'll pop back out of the SuspenseNode that we added above and now we'll
-          // reconcile the fallback, reconciling anything in the context of the parent SuspenseNode.
-          // Since the fallback conceptually blocks the parent.
-          reconcilingParentSuspenseNode = stashedSuspenseParent;
-          previouslyReconciledSiblingSuspenseNode = stashedSuspensePrevious;
-          remainingReconcilingChildrenSuspenseNodes = stashedSuspenseRemaining;
-          try {
-            if (nextFallbackFiber === null) {
-              unmountRemainingChildren();
-            } else {
-              updateFlags |= updateVirtualChildrenRecursively(
-                nextFallbackFiber,
-                null,
-                prevFallbackFiber,
-                traceNearestHostComponentUpdate,
-                0,
-              );
-            }
-          } finally {
-            reconcilingParentSuspenseNode = fallbackStashedSuspenseParent;
-            previouslyReconciledSiblingSuspenseNode =
-              fallbackStashedSuspensePrevious;
+          shouldMeasureSuspenseNode = false;
+          if (prevFallbackFiber || nextFallbackFiber !== null) {
+            const fallbackStashedSuspenseParent = reconcilingParentSuspenseNode;
+            const fallbackStashedSuspensePrevious =
+              previouslyReconciledSiblingSuspenseNode;
+            const fallbackStashedSuspenseRemaining =
+              remainingReconcilingChildrenSuspenseNodes;
+            // Next, we'll pop back out of the SuspenseNode that we added above and now we'll
+            // reconcile the fallback, reconciling anything in the context of the parent SuspenseNode.
+            // Since the fallback conceptually blocks the parent.
+            reconcilingParentSuspenseNode = stashedSuspenseParent;
+            previouslyReconciledSiblingSuspenseNode = stashedSuspensePrevious;
             remainingReconcilingChildrenSuspenseNodes =
-              fallbackStashedSuspenseRemaining;
+              stashedSuspenseRemaining;
+            try {
+              if (nextFallbackFiber === null) {
+                unmountRemainingChildren();
+              } else {
+                updateFlags |= updateVirtualChildrenRecursively(
+                  nextFallbackFiber,
+                  null,
+                  prevFallbackFiber,
+                  traceNearestHostComponentUpdate,
+                  0,
+                );
+              }
+            } finally {
+              reconcilingParentSuspenseNode = fallbackStashedSuspenseParent;
+              previouslyReconciledSiblingSuspenseNode =
+                fallbackStashedSuspensePrevious;
+              remainingReconcilingChildrenSuspenseNodes =
+                fallbackStashedSuspenseRemaining;
+            }
+          }
+          if (nextFiber.memoizedState === null) {
+            // Measure this Suspense node in case it changed. We don't update the rect while
+            // we're inside a disconnected subtree nor if we are the Suspense boundary that
+            // is suspended. This lets us keep the rectangle of the displayed content while
+            // we're suspended to visualize the resulting state.
+            shouldMeasureSuspenseNode = !isInDisconnectedSubtree;
           }
-        }
-        if (nextFiber.memoizedState === null) {
-          // Measure this Suspense node in case it changed. We don't update the rect while
-          // we're inside a disconnected subtree nor if we are the Suspense boundary that
-          // is suspended. This lets us keep the rectangle of the displayed content while
-          // we're suspended to visualize the resulting state.
-          shouldMeasureSuspenseNode = !isInDisconnectedSubtree;
         }
       } else {
         // Common case: Primary -> Primary.