@samitouri / QOS-React-2 / commits / bd4784c8f8

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

dan committed Apr 25, 2022 at 16:16 UTC bd4784c8f8c6b17cf45c712db8ed8ed19a622b26

9 files changed +49 -28

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

+23 -15

@@ -869,16 +869,15 @@ describe('ReactDOMFizzServer', () => {

869 });

870

871 // 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 -

872 expect(Scheduler).toFlushAndYield([

873 'The server could not finish this Suspense boundary, likely due to an ' +

874 'error during server rendering. Switched to client rendering.',

875 ]);

876 + expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);

877 +

878 + // We now resolve it on the client.

879 + resolveText('Hello');

880 + Scheduler.unstable_flushAll();

881

882 // The client rendered HTML is now in place.

883 expect(getVisibleChildren(container)).toEqual(

@@ -2189,7 +2188,10 @@ describe('ReactDOMFizzServer', () => {

2188 },

2189 );

2190

2191 + // Disabled because of a WWW late mutations regression.

2192 + // We may want to re-enable this if we figure out why.

2193 // @gate experimental

2194 + // @gate FIXME

2195 it('does not recreate the fallback if server errors and hydration suspends', async () => {

2196 let isClient = false;

2197

@@ -2268,7 +2270,10 @@ describe('ReactDOMFizzServer', () => {

2270 );

2271 });

2272

2273 + // Disabled because of a WWW late mutations regression.

2274 + // We may want to re-enable this if we figure out why.

2275 // @gate experimental

2276 + // @gate FIXME

2277 it(

2278 'does not recreate the fallback if server errors and hydration suspends ' +

2279 'and root receives a transition',

@@ -2364,7 +2369,10 @@ describe('ReactDOMFizzServer', () => {

2369 },

2370 );

2371

2372 + // Disabled because of a WWW late mutations regression.

2373 + // We may want to re-enable this if we figure out why.

2374 // @gate experimental

2375 + // @gate FIXME

2376 it(

2377 'recreates the fallback if server errors and hydration suspends but ' +

2378 'client receives new props',

@@ -2542,12 +2550,17 @@ describe('ReactDOMFizzServer', () => {

2550 },

2551 });

2552

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 + ]);

2560 expect(getVisibleChildren(container)).toEqual(

2561 <div>

2562 <span />

2550 - <span>Yay!</span>

2563 + Loading...

2564 <span />

2565 </div>,

2566 );

@@ -2555,12 +2568,7 @@ describe('ReactDOMFizzServer', () => {

2568 await act(async () => {

2569 resolveText('Yay!');

2570 });

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!']);

2572 expect(getVisibleChildren(container)).toEqual(

2573 <div>

2574 <span />

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

+12 -6

@@ -792,7 +792,7 @@ describe('ReactDOMServerHydration', () => {

792 });

793

794 // @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', () => {

796 function Mismatch({isClient}) {

797 return (

798 <div className="parent">

@@ -809,12 +809,15 @@ describe('ReactDOMServerHydration', () => {

809 </div>

810 );

811 }

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 + `);

817 });

818

819 // @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', () => {

821 function Mismatch({isClient}) {

822 return (

823 <div className="parent">

@@ -831,8 +834,11 @@ describe('ReactDOMServerHydration', () => {

834 </div>

835 );

836 }

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 + `);

842 });

843 });

844

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

+4 -1

@@ -2115,7 +2115,10 @@ describe('ReactDOMServerPartialHydration', () => {

2115 });

2116

2117 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 + ]);

2122

2123 // We haven't hydrated the second child but the placeholder is still in the list.

2124 expect(container.textContent).toBe('ALoading B');

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

-1

@@ -2270,7 +2270,6 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {

2270 } else {

2271 // Suspended but we should no longer be in dehydrated mode.

2272 // Therefore we now have to render the fallback.

2273 - renderDidSuspendDelayIfPossible();

2273 const nextPrimaryChildren = nextProps.children;

2274 const nextFallbackChildren = nextProps.fallback;

2275 const fallbackChildFragment = mountSuspenseFallbackAfterRetryWithoutHydrating(

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

-1

@@ -2270,7 +2270,6 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {

2270 } else {

2271 // Suspended but we should no longer be in dehydrated mode.

2272 // Therefore we now have to render the fallback.

2273 - renderDidSuspendDelayIfPossible();

2273 const nextPrimaryChildren = nextProps.children;

2274 const nextFallbackChildren = nextProps.fallback;

2275 const fallbackChildFragment = mountSuspenseFallbackAfterRetryWithoutHydrating(

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

@@ -459,6 +459,9 @@ export function includesOnlyNonUrgentLanes(lanes: Lanes) {

459 const UrgentLanes = SyncLane | InputContinuousLane | DefaultLane;

460 return (lanes & UrgentLanes) === NoLanes;

461 }

462 +export function includesOnlyTransitions(lanes: Lanes) {

463 + return (lanes & TransitionLanes) === lanes;

464 +}

465

466 export function includesBlockingLane(root: FiberRoot, lanes: Lanes) {

467 if (

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

@@ -459,6 +459,9 @@ export function includesOnlyNonUrgentLanes(lanes: Lanes) {

459 const UrgentLanes = SyncLane | InputContinuousLane | DefaultLane;

460 return (lanes & UrgentLanes) === NoLanes;

461 }

462 +export function includesOnlyTransitions(lanes: Lanes) {

463 + return (lanes & TransitionLanes) === lanes;

464 +}

465

466 export function includesBlockingLane(root: FiberRoot, lanes: Lanes) {

467 if (

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

+2 -2

@@ -131,7 +131,7 @@ import {

131 pickArbitraryLane,

132 includesNonIdleWork,

133 includesOnlyRetries,

134 - includesOnlyNonUrgentLanes,

134 + includesOnlyTransitions,

135 includesBlockingLane,

136 includesExpiredLane,

137 getNextLanes,

@@ -1150,7 +1150,7 @@ function finishConcurrentRender(root, exitStatus, lanes) {

1150 case RootSuspendedWithDelay: {

1151 markRootSuspended(root, lanes);

1152

1153 - if (includesOnlyNonUrgentLanes(lanes)) {

1153 + if (includesOnlyTransitions(lanes)) {

1154 // This is a transition, so we should exit without committing a

1155 // placeholder and without scheduling a timeout. Delay indefinitely

1156 // until we receive more data.

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