Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Move tail hydration mismatch back to hydration context #28501

Merged
merged 1 commit into from
Mar 6, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -538,6 +538,7 @@ describe('ReactDOMServerPartialHydration', () => {
assertLog([
'Server rendered',
'Client rendered',
'Hydration failed because the initial UI does not match what was rendered on the server.',
'There was an error while hydrating this Suspense boundary. ' +
'Switched to client rendering.',
]);
Expand Down
19 changes: 4 additions & 15 deletions packages/react-reconciler/src/ReactFiberCompleteWork.js
Original file line number Diff line number Diff line change
Expand Up @@ -141,11 +141,9 @@ import {
prepareToHydrateHostInstance,
prepareToHydrateHostTextInstance,
prepareToHydrateHostSuspenseInstance,
warnIfUnhydratedTailNodes,
popHydrationState,
resetHydrationState,
getIsHydrating,
hasUnhydratedTailNodes,
upgradeHydrationErrorsToRecoverable,
} from './ReactFiberHydrationContext';
import {
Expand Down Expand Up @@ -866,18 +864,6 @@ function completeDehydratedSuspenseBoundary(
workInProgress: Fiber,
nextState: SuspenseState | null,
): boolean {
if (
hasUnhydratedTailNodes() &&
(workInProgress.mode & ConcurrentMode) !== NoMode &&
(workInProgress.flags & DidCapture) === NoFlags
) {
warnIfUnhydratedTailNodes(workInProgress);
resetHydrationState();
workInProgress.flags |= ForceClientRender | DidCapture;

return false;
}

const wasHydrated = popHydrationState(workInProgress);

if (nextState !== null && nextState.dehydrated !== null) {
Expand Down Expand Up @@ -1337,7 +1323,6 @@ function completeWork(
return null;
}
case SuspenseComponent: {
popSuspenseHandler(workInProgress);
const nextState: null | SuspenseState = workInProgress.memoizedState;

// Special path for dehydrated boundaries. We may eventually move this
Expand All @@ -1358,10 +1343,12 @@ function completeWork(
);
if (!fallthroughToNormalSuspensePath) {
if (workInProgress.flags & ForceClientRender) {
popSuspenseHandler(workInProgress);
// Special case. There were remaining unhydrated nodes. We treat
// this as a mismatch. Revert to client rendering.
return workInProgress;
} else {
popSuspenseHandler(workInProgress);
// Did not finish hydrating, either because this is the initial
// render or because something suspended.
return null;
Expand All @@ -1371,6 +1358,8 @@ function completeWork(
// Continue with the normal Suspense path.
}

popSuspenseHandler(workInProgress);

if ((workInProgress.flags & DidCapture) !== NoFlags) {
// Something suspended. Re-render with the fallback children.
workInProgress.lanes = renderLanes;
Expand Down
6 changes: 0 additions & 6 deletions packages/react-reconciler/src/ReactFiberHydrationContext.js
Original file line number Diff line number Diff line change
Expand Up @@ -893,10 +893,6 @@ function popHydrationState(fiber: Fiber): boolean {
return true;
}

function hasUnhydratedTailNodes(): boolean {
return isHydrating && nextHydratableInstance !== null;
}

function warnIfUnhydratedTailNodes(fiber: Fiber) {
let nextInstance = nextHydratableInstance;
while (nextInstance) {
Expand Down Expand Up @@ -952,6 +948,4 @@ export {
prepareToHydrateHostTextInstance,
prepareToHydrateHostSuspenseInstance,
popHydrationState,
hasUnhydratedTailNodes,
warnIfUnhydratedTailNodes,
};