Skip to content

Commit

Permalink
Tighten up the types of getFirstHydratableChild
Browse files Browse the repository at this point in the history
We currently call getFirstHydratableChild to step into the children of
a suspense boundary. This can be a text node or a suspense boundary
which isn't compatible with getFirstHydratableChild, and we cheat the type.

This accidentally works because .firstChild always returns null on those
nodes in the DOM.

This just makes that explicit.
  • Loading branch information
sebmarkbage committed Oct 19, 2021
1 parent a5062b1 commit 00cac59
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 4 deletions.
11 changes: 9 additions & 2 deletions packages/react-reconciler/src/ReactFiberHydrationContext.new.js
Original file line number Diff line number Diff line change
Expand Up @@ -261,6 +261,8 @@ function tryHydrate(fiber, nextInstance) {
const instance = canHydrateInstance(nextInstance, type, props);
if (instance !== null) {
fiber.stateNode = (instance: Instance);
hydrationParentFiber = fiber;
nextHydratableInstance = getFirstHydratableChild(instance);
return true;
}
return false;
Expand All @@ -270,6 +272,9 @@ function tryHydrate(fiber, nextInstance) {
const textInstance = canHydrateTextInstance(nextInstance, text);
if (textInstance !== null) {
fiber.stateNode = (textInstance: TextInstance);
hydrationParentFiber = fiber;
// Text Instances don't have children so there's nothing to hydrate.
nextHydratableInstance = null;
return true;
}
return false;
Expand All @@ -294,6 +299,10 @@ function tryHydrate(fiber, nextInstance) {
);
dehydratedFragment.return = fiber;
fiber.child = dehydratedFragment;
hydrationParentFiber = fiber;
// While a Suspense Instance does have children, we won't step into
// it during the first pass. Instead, we'll reenter it later.
nextHydratableInstance = null;
return true;
}
}
Expand Down Expand Up @@ -338,8 +347,6 @@ function tryToClaimNextHydratableInstance(fiber: Fiber): void {
firstAttemptedInstance,
);
}
hydrationParentFiber = fiber;
nextHydratableInstance = getFirstHydratableChild((nextInstance: any));
}

function prepareToHydrateHostInstance(
Expand Down
11 changes: 9 additions & 2 deletions packages/react-reconciler/src/ReactFiberHydrationContext.old.js
Original file line number Diff line number Diff line change
Expand Up @@ -261,6 +261,8 @@ function tryHydrate(fiber, nextInstance) {
const instance = canHydrateInstance(nextInstance, type, props);
if (instance !== null) {
fiber.stateNode = (instance: Instance);
hydrationParentFiber = fiber;
nextHydratableInstance = getFirstHydratableChild(instance);
return true;
}
return false;
Expand All @@ -270,6 +272,9 @@ function tryHydrate(fiber, nextInstance) {
const textInstance = canHydrateTextInstance(nextInstance, text);
if (textInstance !== null) {
fiber.stateNode = (textInstance: TextInstance);
hydrationParentFiber = fiber;
// Text Instances don't have children so there's nothing to hydrate.
nextHydratableInstance = null;
return true;
}
return false;
Expand All @@ -294,6 +299,10 @@ function tryHydrate(fiber, nextInstance) {
);
dehydratedFragment.return = fiber;
fiber.child = dehydratedFragment;
hydrationParentFiber = fiber;
// While a Suspense Instance does have children, we won't step into
// it during the first pass. Instead, we'll reenter it later.
nextHydratableInstance = null;
return true;
}
}
Expand Down Expand Up @@ -338,8 +347,6 @@ function tryToClaimNextHydratableInstance(fiber: Fiber): void {
firstAttemptedInstance,
);
}
hydrationParentFiber = fiber;
nextHydratableInstance = getFirstHydratableChild((nextInstance: any));
}

function prepareToHydrateHostInstance(
Expand Down

0 comments on commit 00cac59

Please sign in to comment.