Skip to content

Commit bd4784c

Browse files
gaearongaearon
authored
Revert #24236 (Don't recreate the same fallback on the client if hydrating suspends) (#24434)
* Revert #24236 (Don't recreate the same fallback on the client if hydrating suspends) * Use @GATE FIXME
1 parent 6d3b6d0 commit bd4784c

9 files changed

+49
-28
lines changed

‎packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js

Lines changed: 23 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -869,16 +869,15 @@ describe('ReactDOMFizzServer', () => {
869869
});
870870

871871
// We still can't render it on the client.
872-
expect(Scheduler).toFlushAndYield([]);
873-
expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
874-
875-
// We now resolve it on the client.
876-
resolveText('Hello');
877-
878872
expect(Scheduler).toFlushAndYield([
879873
'The server could not finish this Suspense boundary, likely due to an ' +
880874
'error during server rendering. Switched to client rendering.',
881875
]);
876+
expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
877+
878+
// We now resolve it on the client.
879+
resolveText('Hello');
880+
Scheduler.unstable_flushAll();
882881

883882
// The client rendered HTML is now in place.
884883
expect(getVisibleChildren(container)).toEqual(
@@ -2189,7 +2188,10 @@ describe('ReactDOMFizzServer', () => {
21892188
},
21902189
);
21912190

2191+
// Disabled because of a WWW late mutations regression.
2192+
// We may want to re-enable this if we figure out why.
21922193
// @gate experimental
2194+
// @gate FIXME
21932195
it('does not recreate the fallback if server errors and hydration suspends', async () => {
21942196
let isClient = false;
21952197

@@ -2268,7 +2270,10 @@ describe('ReactDOMFizzServer', () => {
22682270
);
22692271
});
22702272

2273+
// Disabled because of a WWW late mutations regression.
2274+
// We may want to re-enable this if we figure out why.
22712275
// @gate experimental
2276+
// @gate FIXME
22722277
it(
22732278
'does not recreate the fallback if server errors and hydration suspends ' +
22742279
'and root receives a transition',
@@ -2364,7 +2369,10 @@ describe('ReactDOMFizzServer', () => {
23642369
},
23652370
);
23662371

2372+
// Disabled because of a WWW late mutations regression.
2373+
// We may want to re-enable this if we figure out why.
23672374
// @gate experimental
2375+
// @gate FIXME
23682376
it(
23692377
'recreates the fallback if server errors and hydration suspends but ' +
23702378
'client receives new props',
@@ -2542,25 +2550,25 @@ describe('ReactDOMFizzServer', () => {
25422550
},
25432551
});
25442552

2545-
// An error happened but instead of surfacing it to the UI, we suspended.
2546-
expect(Scheduler).toFlushAndYield([]);
2553+
// An error logged but instead of surfacing it to the UI, we switched
2554+
// to client rendering.
2555+
expect(Scheduler).toFlushAndYield([
2556+
'Hydration error',
2557+
'There was an error while hydrating this Suspense boundary. Switched ' +
2558+
'to client rendering.',
2559+
]);
25472560
expect(getVisibleChildren(container)).toEqual(
25482561
<div>
25492562
<span />
2550-
<span>Yay!</span>
2563+
Loading...
25512564
<span />
25522565
</div>,
25532566
);
25542567

25552568
await act(async () => {
25562569
resolveText('Yay!');
25572570
});
2558-
expect(Scheduler).toFlushAndYield([
2559-
'Yay!',
2560-
'Hydration error',
2561-
'There was an error while hydrating this Suspense boundary. Switched ' +
2562-
'to client rendering.',
2563-
]);
2571+
expect(Scheduler).toFlushAndYield(['Yay!']);
25642572
expect(getVisibleChildren(container)).toEqual(
25652573
<div>
25662574
<span />

‎packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -792,7 +792,7 @@ describe('ReactDOMServerHydration', () => {
792792
});
793793

794794
// @gate __DEV__
795-
it('does not warn when client renders an extra node inside Suspense fallback', () => {
795+
it('warns when client renders an extra node inside Suspense fallback', () => {
796796
function Mismatch({isClient}) {
797797
return (
798798
<div className="parent">
@@ -809,12 +809,15 @@ describe('ReactDOMServerHydration', () => {
809809
</div>
810810
);
811811
}
812-
// There is no error because we don't actually hydrate fallbacks.
813-
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`Array []`);
812+
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
813+
Array [
814+
"Caught [The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.]",
815+
]
816+
`);
814817
});
815818

816819
// @gate __DEV__
817-
it('does not warn when server renders an extra node inside Suspense fallback', () => {
820+
it('warns when server renders an extra node inside Suspense fallback', () => {
818821
function Mismatch({isClient}) {
819822
return (
820823
<div className="parent">
@@ -831,8 +834,11 @@ describe('ReactDOMServerHydration', () => {
831834
</div>
832835
);
833836
}
834-
// There is no error because we don't actually hydrate fallbacks.
835-
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`Array []`);
837+
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
838+
Array [
839+
"Caught [The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.]",
840+
]
841+
`);
836842
});
837843
});
838844

‎packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2115,7 +2115,10 @@ describe('ReactDOMServerPartialHydration', () => {
21152115
});
21162116

21172117
suspend = true;
2118-
expect(Scheduler).toFlushAndYield([]);
2118+
expect(Scheduler).toFlushAndYield([
2119+
'The server could not finish this Suspense boundary, likely due to ' +
2120+
'an error during server rendering. Switched to client rendering.',
2121+
]);
21192122

21202123
// We haven't hydrated the second child but the placeholder is still in the list.
21212124
expect(container.textContent).toBe('ALoading B');

‎packages/react-reconciler/src/ReactFiberBeginWork.new.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2270,7 +2270,6 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
22702270
} else {
22712271
// Suspended but we should no longer be in dehydrated mode.
22722272
// Therefore we now have to render the fallback.
2273-
renderDidSuspendDelayIfPossible();
22742273
const nextPrimaryChildren = nextProps.children;
22752274
const nextFallbackChildren = nextProps.fallback;
22762275
const fallbackChildFragment = mountSuspenseFallbackAfterRetryWithoutHydrating(

‎packages/react-reconciler/src/ReactFiberBeginWork.old.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2270,7 +2270,6 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
22702270
} else {
22712271
// Suspended but we should no longer be in dehydrated mode.
22722272
// Therefore we now have to render the fallback.
2273-
renderDidSuspendDelayIfPossible();
22742273
const nextPrimaryChildren = nextProps.children;
22752274
const nextFallbackChildren = nextProps.fallback;
22762275
const fallbackChildFragment = mountSuspenseFallbackAfterRetryWithoutHydrating(

‎packages/react-reconciler/src/ReactFiberLane.new.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -459,6 +459,9 @@ export function includesOnlyNonUrgentLanes(lanes: Lanes) {
459459
const UrgentLanes = SyncLane | InputContinuousLane | DefaultLane;
460460
return (lanes & UrgentLanes) === NoLanes;
461461
}
462+
export function includesOnlyTransitions(lanes: Lanes) {
463+
return (lanes & TransitionLanes) === lanes;
464+
}
462465

463466
export function includesBlockingLane(root: FiberRoot, lanes: Lanes) {
464467
if (

‎packages/react-reconciler/src/ReactFiberLane.old.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -459,6 +459,9 @@ export function includesOnlyNonUrgentLanes(lanes: Lanes) {
459459
const UrgentLanes = SyncLane | InputContinuousLane | DefaultLane;
460460
return (lanes & UrgentLanes) === NoLanes;
461461
}
462+
export function includesOnlyTransitions(lanes: Lanes) {
463+
return (lanes & TransitionLanes) === lanes;
464+
}
462465

463466
export function includesBlockingLane(root: FiberRoot, lanes: Lanes) {
464467
if (

‎packages/react-reconciler/src/ReactFiberWorkLoop.new.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@ import {
131131
pickArbitraryLane,
132132
includesNonIdleWork,
133133
includesOnlyRetries,
134-
includesOnlyNonUrgentLanes,
134+
includesOnlyTransitions,
135135
includesBlockingLane,
136136
includesExpiredLane,
137137
getNextLanes,
@@ -1150,7 +1150,7 @@ function finishConcurrentRender(root, exitStatus, lanes) {
11501150
case RootSuspendedWithDelay: {
11511151
markRootSuspended(root, lanes);
11521152

1153-
if (includesOnlyNonUrgentLanes(lanes)) {
1153+
if (includesOnlyTransitions(lanes)) {
11541154
// This is a transition, so we should exit without committing a
11551155
// placeholder and without scheduling a timeout. Delay indefinitely
11561156
// until we receive more data.

‎packages/react-reconciler/src/ReactFiberWorkLoop.old.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@ import {
131131
pickArbitraryLane,
132132
includesNonIdleWork,
133133
includesOnlyRetries,
134-
includesOnlyNonUrgentLanes,
134+
includesOnlyTransitions,
135135
includesBlockingLane,
136136
includesExpiredLane,
137137
getNextLanes,
@@ -1150,7 +1150,7 @@ function finishConcurrentRender(root, exitStatus, lanes) {
11501150
case RootSuspendedWithDelay: {
11511151
markRootSuspended(root, lanes);
11521152

1153-
if (includesOnlyNonUrgentLanes(lanes)) {
1153+
if (includesOnlyTransitions(lanes)) {
11541154
// This is a transition, so we should exit without committing a
11551155
// placeholder and without scheduling a timeout. Delay indefinitely
11561156
// until we receive more data.

0 commit comments

Comments
 (0)