.',
- );
- }
+ Scheduler.unstable_flushAll();
jest.runAllTimers();
// Expect the server-generated HTML to stay intact.
@@ -249,7 +240,6 @@ describe('ReactDOMServerPartialHydration', () => {
expect(container.textContent).toBe('HelloHello');
});
- // @gate enableClientRenderFallbackOnHydrationMismatch
it('falls back to client rendering boundary on mismatch', async () => {
// We can't use the toErrorDev helper here because this is async.
const originalConsoleError = console.error;
@@ -532,15 +522,11 @@ describe('ReactDOMServerPartialHydration', () => {
expect(container.innerHTML).toContain('
');
- if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
- expect(Scheduler).toHaveYielded([
- 'There was an error while hydrating this Suspense boundary. ' +
- 'Switched to client rendering.',
- ]);
- expect(ref.current).not.toBe(span);
- } else {
- expect(ref.current).toBe(span);
- }
+ expect(Scheduler).toHaveYielded([
+ 'There was an error while hydrating this Suspense boundary. ' +
+ 'Switched to client rendering.',
+ ]);
+ expect(ref.current).not.toBe(span);
});
it('recovers with client render when server rendered additional nodes at suspense root after unsuspending', async () => {
@@ -603,11 +589,7 @@ describe('ReactDOMServerPartialHydration', () => {
expect(container.innerHTML).toContain('
');
- if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
- expect(ref.current).not.toBe(span);
- } else {
- expect(ref.current).toBe(span);
- }
+ expect(ref.current).not.toBe(span);
if (__DEV__) {
expect(mockError).toHaveBeenCalledWith(
'Warning: Did not expect server HTML to contain a <%s> in <%s>.%s',
@@ -660,20 +642,14 @@ describe('ReactDOMServerPartialHydration', () => {
});
});
}).toErrorDev('Did not expect server HTML to contain a
in ');
- if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
- expect(Scheduler).toHaveYielded([
- '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.',
- ]);
- }
+ expect(Scheduler).toHaveYielded([
+ '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.',
+ ]);
expect(container.innerHTML).toContain('A');
expect(container.innerHTML).not.toContain('B');
- if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
- expect(ref.current).not.toBe(span);
- } else {
- expect(ref.current).toBe(span);
- }
+ expect(ref.current).not.toBe(span);
});
it('calls the onDeleted hydration callback if the parent gets deleted', async () => {
@@ -3292,7 +3268,6 @@ describe('ReactDOMServerPartialHydration', () => {
itHydratesWithoutMismatch('an empty string in class component', TestAppClass);
- // @gate enableClientRenderFallbackOnHydrationMismatch
it('fallback to client render on hydration mismatch at root', async () => {
let isClient = false;
let suspend = true;
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index 0cf031776399e..4b640055e5b4e 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -62,7 +62,6 @@ import dangerousStyleValue from '../shared/dangerousStyleValue';
import {retryIfBlockedOn} from '../events/ReactDOMEventReplaying';
import {
- enableClientRenderFallbackOnHydrationMismatch,
enableCreateEventHandleAPI,
enableScopeAPI,
} from 'shared/ReactFeatureFlags';
@@ -1005,10 +1004,7 @@ export function didNotHydrateInstance(
isConcurrentMode: boolean,
) {
if (__DEV__) {
- if (
- (enableClientRenderFallbackOnHydrationMismatch && isConcurrentMode) ||
- parentProps[SUPPRESS_HYDRATION_WARNING] !== true
- ) {
+ if (isConcurrentMode || parentProps[SUPPRESS_HYDRATION_WARNING] !== true) {
if (instance.nodeType === ELEMENT_NODE) {
warnForDeletedHydratableElement(parentInstance, (instance: any));
} else if (instance.nodeType === COMMENT_NODE) {
@@ -1089,10 +1085,7 @@ export function didNotFindHydratableInstance(
isConcurrentMode: boolean,
) {
if (__DEV__) {
- if (
- (enableClientRenderFallbackOnHydrationMismatch && isConcurrentMode) ||
- parentProps[SUPPRESS_HYDRATION_WARNING] !== true
- ) {
+ if (isConcurrentMode || parentProps[SUPPRESS_HYDRATION_WARNING] !== true) {
warnForInsertedHydratedElement(parentInstance, type, props);
}
}
@@ -1106,10 +1099,7 @@ export function didNotFindHydratableTextInstance(
isConcurrentMode: boolean,
) {
if (__DEV__) {
- if (
- (enableClientRenderFallbackOnHydrationMismatch && isConcurrentMode) ||
- parentProps[SUPPRESS_HYDRATION_WARNING] !== true
- ) {
+ if (isConcurrentMode || parentProps[SUPPRESS_HYDRATION_WARNING] !== true) {
warnForInsertedHydratedText(parentInstance, text);
}
}
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index 683d29ab3c880..4cbae604140b7 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -31,7 +31,6 @@ import type {SuspenseContext} from './ReactFiberSuspenseContext.new';
import type {OffscreenState} from './ReactFiberOffscreenComponent';
import type {Cache} from './ReactFiberCacheComponent.new';
import {
- enableClientRenderFallbackOnHydrationMismatch,
enableSuspenseAvoidThisFallback,
enableLegacyHidden,
} from 'shared/ReactFeatureFlags';
@@ -1066,7 +1065,6 @@ function completeWork(
const nextState: null | SuspenseState = workInProgress.memoizedState;
if (
- enableClientRenderFallbackOnHydrationMismatch &&
hasUnhydratedTailNodes() &&
(workInProgress.mode & ConcurrentMode) !== NoMode &&
(workInProgress.flags & DidCapture) === NoFlags
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index 549e3da16b035..dd2703f396ee5 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -31,7 +31,6 @@ import type {SuspenseContext} from './ReactFiberSuspenseContext.old';
import type {OffscreenState} from './ReactFiberOffscreenComponent';
import type {Cache} from './ReactFiberCacheComponent.old';
import {
- enableClientRenderFallbackOnHydrationMismatch,
enableSuspenseAvoidThisFallback,
enableLegacyHidden,
} from 'shared/ReactFeatureFlags';
@@ -1066,7 +1065,6 @@ function completeWork(
const nextState: null | SuspenseState = workInProgress.memoizedState;
if (
- enableClientRenderFallbackOnHydrationMismatch &&
hasUnhydratedTailNodes() &&
(workInProgress.mode & ConcurrentMode) !== NoMode &&
(workInProgress.flags & DidCapture) === NoFlags
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
index 98981e904a90a..26b05d008ac53 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
@@ -68,7 +68,6 @@ import {
didNotFindHydratableTextInstance,
didNotFindHydratableSuspenseInstance,
} from './ReactFiberHostConfig';
-import {enableClientRenderFallbackOnHydrationMismatch} from 'shared/ReactFeatureFlags';
import {OffscreenLane} from './ReactFiberLane.new';
import {
getSuspendedTreeContext,
@@ -378,7 +377,6 @@ function tryHydrate(fiber, nextInstance) {
function shouldClientRenderOnMismatch(fiber: Fiber) {
return (
- enableClientRenderFallbackOnHydrationMismatch &&
(fiber.mode & ConcurrentMode) !== NoMode &&
(fiber.flags & DidCapture) === NoFlags
);
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
index fd98256927847..cf7890e3edbae 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
@@ -68,7 +68,6 @@ import {
didNotFindHydratableTextInstance,
didNotFindHydratableSuspenseInstance,
} from './ReactFiberHostConfig';
-import {enableClientRenderFallbackOnHydrationMismatch} from 'shared/ReactFeatureFlags';
import {OffscreenLane} from './ReactFiberLane.old';
import {
getSuspendedTreeContext,
@@ -378,7 +377,6 @@ function tryHydrate(fiber, nextInstance) {
function shouldClientRenderOnMismatch(fiber: Fiber) {
return (
- enableClientRenderFallbackOnHydrationMismatch &&
(fiber.mode & ConcurrentMode) !== NoMode &&
(fiber.flags & DidCapture) === NoFlags
);
diff --git a/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js b/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
index cb2d7d2ac81b2..a22e8114f605e 100644
--- a/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
+++ b/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
@@ -169,7 +169,7 @@ describe('useMutableSourceHydration', () => {
});
// @gate enableUseMutableSource
- // @gate enableClientRenderFallbackOnHydrationMismatch
+ // @gate enableClientRenderFallbackOnTextMismatch
it('should detect a tear before hydrating a component', () => {
const source = createSource('one');
const mutableSource = createMutableSource(source, param => param.version);
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 8f2872de99f14..218a3514f0f34 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -41,7 +41,6 @@ export const skipUnmountedBoundaries = true;
export const enableSuspenseLayoutEffectSemantics = true;
// TODO: Finish rolling out in www
-export const enableClientRenderFallbackOnHydrationMismatch = true;
export const enableClientRenderFallbackOnTextMismatch = true;
// TODO: Need to review this code one more time before landing
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 4aa7a4187f60f..6baef59489978 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -50,7 +50,6 @@ export const enableSuspenseAvoidThisFallback = false;
export const enableSuspenseAvoidThisFallbackFizz = false;
export const enableCPUSuspense = true;
export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
-export const enableClientRenderFallbackOnHydrationMismatch = true;
export const enableClientRenderFallbackOnTextMismatch = true;
export const enableComponentStackLocations = false;
export const enableLegacyFBSupport = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index a210ced18e6a9..e9398deee80db 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -41,7 +41,6 @@ export const enableSuspenseAvoidThisFallback = false;
export const enableSuspenseAvoidThisFallbackFizz = false;
export const enableCPUSuspense = false;
export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
-export const enableClientRenderFallbackOnHydrationMismatch = true;
export const enableClientRenderFallbackOnTextMismatch = true;
export const enableComponentStackLocations = false;
export const enableLegacyFBSupport = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index c4d6d046a3c91..c3ca7f565c737 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -41,7 +41,6 @@ export const enableSuspenseAvoidThisFallback = false;
export const enableSuspenseAvoidThisFallbackFizz = false;
export const enableCPUSuspense = false;
export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
-export const enableClientRenderFallbackOnHydrationMismatch = true;
export const enableClientRenderFallbackOnTextMismatch = true;
export const enableComponentStackLocations = true;
export const enableLegacyFBSupport = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index aee9188ca8969..d186c1852e6b3 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -51,7 +51,6 @@ export const enableSuspenseAvoidThisFallback = false;
export const enableSuspenseAvoidThisFallbackFizz = false;
export const enableCPUSuspense = false;
export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
-export const enableClientRenderFallbackOnHydrationMismatch = true;
export const enableClientRenderFallbackOnTextMismatch = true;
export const enableStrictEffects = false;
export const createRootStrictEffectsByDefault = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 340b180dd4d70..e258b155c2c11 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -41,7 +41,6 @@ export const enableSuspenseAvoidThisFallback = true;
export const enableSuspenseAvoidThisFallbackFizz = false;
export const enableCPUSuspense = false;
export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
-export const enableClientRenderFallbackOnHydrationMismatch = true;
export const enableClientRenderFallbackOnTextMismatch = true;
export const enableComponentStackLocations = true;
export const enableLegacyFBSupport = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 3b7013f5bacdf..d173aaa1b30a9 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -41,7 +41,6 @@ export const enableSuspenseAvoidThisFallback = false;
export const enableSuspenseAvoidThisFallbackFizz = false;
export const enableCPUSuspense = false;
export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
-export const enableClientRenderFallbackOnHydrationMismatch = true;
export const enableClientRenderFallbackOnTextMismatch = true;
export const enableComponentStackLocations = true;
export const enableLegacyFBSupport = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index 15e4ac5e6d6e0..c2842d955938d 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -41,7 +41,6 @@ export const enableSuspenseAvoidThisFallback = true;
export const enableSuspenseAvoidThisFallbackFizz = false;
export const enableCPUSuspense = true;
export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
-export const enableClientRenderFallbackOnHydrationMismatch = true;
export const enableClientRenderFallbackOnTextMismatch = true;
export const enableComponentStackLocations = true;
export const enableLegacyFBSupport = !__EXPERIMENTAL__;
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index cfc32d6bacff1..253cb58a2d1f6 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -26,7 +26,6 @@ export const enableLazyContextPropagation = __VARIANT__;
export const enableSyncDefaultUpdates = __VARIANT__;
export const consoleManagedByDevToolsDuringStrictMode = __VARIANT__;
export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = __VARIANT__;
-export const enableClientRenderFallbackOnHydrationMismatch = __VARIANT__;
export const enableClientRenderFallbackOnTextMismatch = __VARIANT__;
export const enableTransitionTracing = __VARIANT__;
export const enableSymbolFallbackForWWW = __VARIANT__;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 0d0fbf1a06265..5a8f89bae8406 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -32,7 +32,6 @@ export const {
enableLazyContextPropagation,
enableSyncDefaultUpdates,
enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
- enableClientRenderFallbackOnHydrationMismatch,
enableClientRenderFallbackOnTextMismatch,
} = dynamicFeatureFlags;