diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js index 3918c014ca146..fd0dd8e99a5b0 100644 --- a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js +++ b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js @@ -38,6 +38,8 @@ import { canHydrateSuspenseInstance, getNextHydratableSibling, getFirstHydratableChild, + getFirstHydratableChildWithinContainer, + getFirstHydratableChildWithinSuspenseInstance, hydrateInstance, hydrateTextInstance, hydrateSuspenseInstance, @@ -45,11 +47,15 @@ import { shouldDeleteUnhydratedTailInstances, didNotMatchHydratedContainerTextInstance, didNotMatchHydratedTextInstance, - didNotHydrateContainerInstance, + didNotHydrateInstanceWithinContainer, + didNotHydrateInstanceWithinSuspenseInstance, didNotHydrateInstance, - didNotFindHydratableContainerInstance, - didNotFindHydratableContainerTextInstance, - didNotFindHydratableContainerSuspenseInstance, + didNotFindHydratableInstanceWithinContainer, + didNotFindHydratableTextInstanceWithinContainer, + didNotFindHydratableSuspenseInstanceWithinContainer, + didNotFindHydratableInstanceWithinSuspenseInstance, + didNotFindHydratableTextInstanceWithinSuspenseInstance, + didNotFindHydratableSuspenseInstanceWithinSuspenseInstance, didNotFindHydratableInstance, didNotFindHydratableTextInstance, didNotFindHydratableSuspenseInstance, @@ -78,8 +84,10 @@ function enterHydrationState(fiber: Fiber): boolean { return false; } - const parentInstance = fiber.stateNode.containerInfo; - nextHydratableInstance = getFirstHydratableChild(parentInstance); + const parentInstance: Container = fiber.stateNode.containerInfo; + nextHydratableInstance = getFirstHydratableChildWithinContainer( + parentInstance, + ); hydrationParentFiber = fiber; isHydrating = true; return true; @@ -92,8 +100,10 @@ function reenterHydrationStateFromDehydratedSuspenseInstance( if (!supportsHydration) { return false; } - nextHydratableInstance = getNextHydratableSibling(suspenseInstance); - popToNextHostParent(fiber); + nextHydratableInstance = getFirstHydratableChildWithinSuspenseInstance( + suspenseInstance, + ); + hydrationParentFiber = fiber; isHydrating = true; return true; } @@ -105,7 +115,7 @@ function deleteHydratableInstance( if (__DEV__) { switch (returnFiber.tag) { case HostRoot: - didNotHydrateContainerInstance( + didNotHydrateInstanceWithinContainer( returnFiber.stateNode.containerInfo, instance, ); @@ -118,6 +128,14 @@ function deleteHydratableInstance( instance, ); break; + case SuspenseComponent: + const suspenseState: SuspenseState = returnFiber.memoizedState; + if (suspenseState.dehydrated !== null) + didNotHydrateInstanceWithinSuspenseInstance( + suspenseState.dehydrated, + instance, + ); + break; } } @@ -144,14 +162,23 @@ function insertNonHydratedInstance(returnFiber: Fiber, fiber: Fiber) { case HostComponent: const type = fiber.type; const props = fiber.pendingProps; - didNotFindHydratableContainerInstance(parentContainer, type, props); + didNotFindHydratableInstanceWithinContainer( + parentContainer, + type, + props, + ); break; case HostText: const text = fiber.pendingProps; - didNotFindHydratableContainerTextInstance(parentContainer, text); + didNotFindHydratableTextInstanceWithinContainer( + parentContainer, + text, + ); break; case SuspenseComponent: - didNotFindHydratableContainerSuspenseInstance(parentContainer); + didNotFindHydratableSuspenseInstanceWithinContainer( + parentContainer, + ); break; } break; @@ -191,6 +218,35 @@ function insertNonHydratedInstance(returnFiber: Fiber, fiber: Fiber) { } break; } + case SuspenseComponent: { + const suspenseState: SuspenseState = returnFiber.memoizedState; + const parentInstance = suspenseState.dehydrated; + if (parentInstance !== null) + switch (fiber.tag) { + case HostComponent: + const type = fiber.type; + const props = fiber.pendingProps; + didNotFindHydratableInstanceWithinSuspenseInstance( + parentInstance, + type, + props, + ); + break; + case HostText: + const text = fiber.pendingProps; + didNotFindHydratableTextInstanceWithinSuspenseInstance( + parentInstance, + text, + ); + break; + case SuspenseComponent: + didNotFindHydratableSuspenseInstanceWithinSuspenseInstance( + parentInstance, + ); + break; + } + break; + } default: return; }