fix hydration warning suppression in text comparisons (#24784)
* fix hydration warning suppression in text comparisons * lint * lowercase test
Josh Story committed
Jun 26, 2022 at 12:22 UTC
167853026cb193f81c0474d3bf9ef9e03dde203e
4 files changed
+54
-2
packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+48
@@ -4146,6 +4146,54 @@ describe('ReactDOMFizzServer', () => {
4146
);
4147
});
4148
4149
+ it('hydration warnings for mismatched text with multiple text nodes caused by suspending should be suppressed', async () => {
4150
+ let resolve;
4151
+ const Lazy = React.lazy(() => {
4152
+ return new Promise(r => {
4153
+ resolve = r;
4154
+ });
4155
+ });
4156
+
4157
+ function App({isClient}) {
4158
+ return (
4159
+ <div>
4160
+ {isClient ? <Lazy /> : <p>lazy</p>}
4161
+ <p>some {'text'}</p>
4162
+ </div>
4163
+ );
4164
+ }
4165
+ await act(async () => {
4166
+ const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
4167
+ pipe(writable);
4168
+ });
4169
+
4170
+ const errors = [];
4171
+ ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
4172
+ onRecoverableError(error) {
4173
+ errors.push(error.message);
4174
+ },
4175
+ });
4176
+
4177
+ expect(Scheduler).toFlushAndYield([]);
4178
+ expect(errors).toEqual([]);
4179
+ expect(getVisibleChildren(container)).toEqual(
4180
+ <div>
4181
+ <p>lazy</p>
4182
+ <p>some {'text'}</p>
4183
+ </div>,
4184
+ );
4185
+
4186
+ resolve({default: () => <p>lazy</p>});
4187
+ expect(Scheduler).toFlushAndYield([]);
4188
+ expect(errors).toEqual([]);
4189
+ expect(getVisibleChildren(container)).toEqual(
4190
+ <div>
4191
+ <p>lazy</p>
4192
+ <p>some {'text'}</p>
4193
+ </div>,
4194
+ );
4195
+ });
4196
+
4197
describe('text separators', () => {
4198
// To force performWork to start before resolving AsyncText but before piping we need to wait until
4199
// after scheduleWork which currently uses setImmediate to delay performWork
packages/react-dom/src/client/ReactDOMHostConfig.js
+2
-2
@@ -971,8 +971,8 @@ export function didNotMatchHydratedContainerTextInstance(
971
textInstance: TextInstance,
972
text: string,
973
isConcurrentMode: boolean,
974
+ shouldWarnDev: boolean,
975
) {
975
- const shouldWarnDev = true;
976
checkForUnmatchedText(
977
textInstance.nodeValue,
978
text,
@@ -988,9 +988,9 @@ export function didNotMatchHydratedTextInstance(
988
textInstance: TextInstance,
989
text: string,
990
isConcurrentMode: boolean,
991
+ shouldWarnDev: boolean,
992
) {
993
if (parentProps[SUPPRESS_HYDRATION_WARNING] !== true) {
993
- const shouldWarnDev = true;
994
checkForUnmatchedText(
995
textInstance.nodeValue,
996
text,
packages/react-reconciler/src/ReactFiberHydrationContext.new.js
+2
@@ -508,6 +508,7 @@ function prepareToHydrateHostTextInstance(fiber: Fiber): boolean {
508
textContent,
509
// TODO: Delete this argument when we remove the legacy root API.
510
isConcurrentMode,
511
+ shouldWarnIfMismatchDev,
512
);
513
break;
514
}
@@ -525,6 +526,7 @@ function prepareToHydrateHostTextInstance(fiber: Fiber): boolean {
526
textContent,
527
// TODO: Delete this argument when we remove the legacy root API.
528
isConcurrentMode,
529
+ shouldWarnIfMismatchDev,
530
);
531
break;
532
}
packages/react-reconciler/src/ReactFiberHydrationContext.old.js
+2
@@ -508,6 +508,7 @@ function prepareToHydrateHostTextInstance(fiber: Fiber): boolean {
508
textContent,
509
// TODO: Delete this argument when we remove the legacy root API.
510
isConcurrentMode,
511
+ shouldWarnIfMismatchDev,
512
);
513
break;
514
}
@@ -525,6 +526,7 @@ function prepareToHydrateHostTextInstance(fiber: Fiber): boolean {
526
textContent,
527
// TODO: Delete this argument when we remove the legacy root API.
528
isConcurrentMode,
529
+ shouldWarnIfMismatchDev,
530
);
531
break;
532
}