{"body":"* Revert #24236 (Don't recreate the same fallback on the client if hydrating suspends)\r\n\r\n* Use @gate FIXME","patch":"diff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js\nindex bf53885975..72ed9f8775 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js\n@@ -869,16 +869,15 @@ describe('ReactDOMFizzServer', () => {\n });\n \n \/\/ We still can't render it on the client.\n- expect(Scheduler).toFlushAndYield([]);\n- expect(getVisibleChildren(container)).toEqual(

Loading...<\/div>);\n-\n- \/\/ We now resolve it on the client.\n- resolveText('Hello');\n-\n expect(Scheduler).toFlushAndYield([\n 'The server could not finish this Suspense boundary, likely due to an ' +\n 'error during server rendering. Switched to client rendering.',\n ]);\n+ expect(getVisibleChildren(container)).toEqual(

Loading...<\/div>);\n+\n+ \/\/ We now resolve it on the client.\n+ resolveText('Hello');\n+ Scheduler.unstable_flushAll();\n \n \/\/ The client rendered HTML is now in place.\n expect(getVisibleChildren(container)).toEqual(\n@@ -2189,7 +2188,10 @@ describe('ReactDOMFizzServer', () => {\n },\n );\n \n+ \/\/ Disabled because of a WWW late mutations regression.\n+ \/\/ We may want to re-enable this if we figure out why.\n \/\/ @gate experimental\n+ \/\/ @gate FIXME\n it('does not recreate the fallback if server errors and hydration suspends', async () => {\n let isClient = false;\n \n@@ -2268,7 +2270,10 @@ describe('ReactDOMFizzServer', () => {\n );\n });\n \n+ \/\/ Disabled because of a WWW late mutations regression.\n+ \/\/ We may want to re-enable this if we figure out why.\n \/\/ @gate experimental\n+ \/\/ @gate FIXME\n it(\n 'does not recreate the fallback if server errors and hydration suspends ' +\n 'and root receives a transition',\n@@ -2364,7 +2369,10 @@ describe('ReactDOMFizzServer', () => {\n },\n );\n \n+ \/\/ Disabled because of a WWW late mutations regression.\n+ \/\/ We may want to re-enable this if we figure out why.\n \/\/ @gate experimental\n+ \/\/ @gate FIXME\n it(\n 'recreates the fallback if server errors and hydration suspends but ' +\n 'client receives new props',\n@@ -2542,12 +2550,17 @@ describe('ReactDOMFizzServer', () => {\n },\n });\n \n- \/\/ An error happened but instead of surfacing it to the UI, we suspended.\n- expect(Scheduler).toFlushAndYield([]);\n+ \/\/ An error logged but instead of surfacing it to the UI, we switched\n+ \/\/ to client rendering.\n+ expect(Scheduler).toFlushAndYield([\n+ 'Hydration error',\n+ 'There was an error while hydrating this Suspense boundary. Switched ' +\n+ 'to client rendering.',\n+ ]);\n expect(getVisibleChildren(container)).toEqual(\n

\n \n- Yay!<\/span>\n+ Loading...\n \n <\/div>,\n );\n@@ -2555,12 +2568,7 @@ describe('ReactDOMFizzServer', () => {\n await act(async () => {\n resolveText('Yay!');\n });\n- expect(Scheduler).toFlushAndYield([\n- 'Yay!',\n- 'Hydration error',\n- 'There was an error while hydrating this Suspense boundary. Switched ' +\n- 'to client rendering.',\n- ]);\n+ expect(Scheduler).toFlushAndYield(['Yay!']);\n expect(getVisibleChildren(container)).toEqual(\n

\n \ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMHydrationDiff-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMHydrationDiff-test.js\nindex 9237493c6d..f6b5a0b428 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMHydrationDiff-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMHydrationDiff-test.js\n@@ -792,7 +792,7 @@ describe('ReactDOMServerHydration', () => {\n });\n \n \/\/ @gate __DEV__\n- it('does not warn when client renders an extra node inside Suspense fallback', () => {\n+ it('warns when client renders an extra node inside Suspense fallback', () => {\n function Mismatch({isClient}) {\n return (\n

\n@@ -809,12 +809,15 @@ describe('ReactDOMServerHydration', () => {\n <\/div>\n );\n }\n- \/\/ There is no error because we don't actually hydrate fallbacks.\n- expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`Array []`);\n+ expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`\n+ Array [\n+ \"Caught [The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.]\",\n+ ]\n+ `);\n });\n \n \/\/ @gate __DEV__\n- it('does not warn when server renders an extra node inside Suspense fallback', () => {\n+ it('warns when server renders an extra node inside Suspense fallback', () => {\n function Mismatch({isClient}) {\n return (\n

\n@@ -831,8 +834,11 @@ describe('ReactDOMServerHydration', () => {\n <\/div>\n );\n }\n- \/\/ There is no error because we don't actually hydrate fallbacks.\n- expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`Array []`);\n+ expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`\n+ Array [\n+ \"Caught [The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.]\",\n+ ]\n+ `);\n });\n });\n \ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerPartialHydration-test.internal.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerPartialHydration-test.internal.js\nindex fe9d8dd453..e4d3364582 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerPartialHydration-test.internal.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerPartialHydration-test.internal.js\n@@ -2115,7 +2115,10 @@ describe('ReactDOMServerPartialHydration', () => {\n });\n \n suspend = true;\n- expect(Scheduler).toFlushAndYield([]);\n+ expect(Scheduler).toFlushAndYield([\n+ 'The server could not finish this Suspense boundary, likely due to ' +\n+ 'an error during server rendering. Switched to client rendering.',\n+ ]);\n \n \/\/ We haven't hydrated the second child but the placeholder is still in the list.\n expect(container.textContent).toBe('ALoading B');\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.new.js b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.new.js\nindex 0764f16c89..1538e32fca 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.new.js\n@@ -2270,7 +2270,6 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {\n } else {\n \/\/ Suspended but we should no longer be in dehydrated mode.\n \/\/ Therefore we now have to render the fallback.\n- renderDidSuspendDelayIfPossible();\n const nextPrimaryChildren = nextProps.children;\n const nextFallbackChildren = nextProps.fallback;\n const fallbackChildFragment = mountSuspenseFallbackAfterRetryWithoutHydrating(\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.old.js b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.old.js\nindex 6d6e15e24a..c50ca6357a 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.old.js\n@@ -2270,7 +2270,6 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {\n } else {\n \/\/ Suspended but we should no longer be in dehydrated mode.\n \/\/ Therefore we now have to render the fallback.\n- renderDidSuspendDelayIfPossible();\n const nextPrimaryChildren = nextProps.children;\n const nextFallbackChildren = nextProps.fallback;\n const fallbackChildFragment = mountSuspenseFallbackAfterRetryWithoutHydrating(\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberLane.new.js b\/packages\/react-reconciler\/src\/ReactFiberLane.new.js\nindex aa3360bd3c..708c9318b3 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberLane.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberLane.new.js\n@@ -459,6 +459,9 @@ export function includesOnlyNonUrgentLanes(lanes: Lanes) {\n const UrgentLanes = SyncLane | InputContinuousLane | DefaultLane;\n return (lanes & UrgentLanes) === NoLanes;\n }\n+export function includesOnlyTransitions(lanes: Lanes) {\n+ return (lanes & TransitionLanes) === lanes;\n+}\n \n export function includesBlockingLane(root: FiberRoot, lanes: Lanes) {\n if (\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberLane.old.js b\/packages\/react-reconciler\/src\/ReactFiberLane.old.js\nindex a65a922d99..e71aa5575a 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberLane.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberLane.old.js\n@@ -459,6 +459,9 @@ export function includesOnlyNonUrgentLanes(lanes: Lanes) {\n const UrgentLanes = SyncLane | InputContinuousLane | DefaultLane;\n return (lanes & UrgentLanes) === NoLanes;\n }\n+export function includesOnlyTransitions(lanes: Lanes) {\n+ return (lanes & TransitionLanes) === lanes;\n+}\n \n export function includesBlockingLane(root: FiberRoot, lanes: Lanes) {\n if (\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.new.js b\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.new.js\nindex aa20335cbe..89c880d868 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.new.js\n@@ -131,7 +131,7 @@ import {\n pickArbitraryLane,\n includesNonIdleWork,\n includesOnlyRetries,\n- includesOnlyNonUrgentLanes,\n+ includesOnlyTransitions,\n includesBlockingLane,\n includesExpiredLane,\n getNextLanes,\n@@ -1150,7 +1150,7 @@ function finishConcurrentRender(root, exitStatus, lanes) {\n case RootSuspendedWithDelay: {\n markRootSuspended(root, lanes);\n \n- if (includesOnlyNonUrgentLanes(lanes)) {\n+ if (includesOnlyTransitions(lanes)) {\n \/\/ This is a transition, so we should exit without committing a\n \/\/ placeholder and without scheduling a timeout. Delay indefinitely\n \/\/ until we receive more data.\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.old.js b\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.old.js\nindex e2c3a76c7f..2f5dbe8530 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.old.js\n@@ -131,7 +131,7 @@ import {\n pickArbitraryLane,\n includesNonIdleWork,\n includesOnlyRetries,\n- includesOnlyNonUrgentLanes,\n+ includesOnlyTransitions,\n includesBlockingLane,\n includesExpiredLane,\n getNextLanes,\n@@ -1150,7 +1150,7 @@ function finishConcurrentRender(root, exitStatus, lanes) {\n case RootSuspendedWithDelay: {\n markRootSuspended(root, lanes);\n \n- if (includesOnlyNonUrgentLanes(lanes)) {\n+ if (includesOnlyTransitions(lanes)) {\n \/\/ This is a transition, so we should exit without committing a\n \/\/ placeholder and without scheduling a timeout. Delay indefinitely\n \/\/ until we receive more data.\n","commit":{"revision":"bd4784c8f8c6b17cf45c712db8ed8ed19a622b26","shortRevision":"bd4784c8f8","authorEmail":"dan.abramov@me.com","authorName":"dan","subject":"Revert #24236 (Don't recreate the same fallback on the client if hydrating suspends) (#24434)","authoredAt":"2022-04-25T16:16:32+01:00"},"parents":["6d3b6d0f408136479d7298f1a14d79e8a12f0c65"],"files":[{"path":"packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js","status":"M"},{"path":"packages\/react-dom\/src\/__tests__\/ReactDOMHydrationDiff-test.js","status":"M"},{"path":"packages\/react-dom\/src\/__tests__\/ReactDOMServerPartialHydration-test.internal.js","status":"M"},{"path":"packages\/react-reconciler\/src\/ReactFiberBeginWork.new.js","status":"M"},{"path":"packages\/react-reconciler\/src\/ReactFiberBeginWork.old.js","status":"M"},{"path":"packages\/react-reconciler\/src\/ReactFiberLane.new.js","status":"M"},{"path":"packages\/react-reconciler\/src\/ReactFiberLane.old.js","status":"M"},{"path":"packages\/react-reconciler\/src\/ReactFiberWorkLoop.new.js","status":"M"},{"path":"packages\/react-reconciler\/src\/ReactFiberWorkLoop.old.js","status":"M"}]}

dillon1000/react

Files changed