Skip to content

Commit 0ddd69d

Browse files
salazarmsalazarm
authored
Throw on hydration mismatch and force client rendering if boundary hasn't suspended within concurrent root (#22629)
* Throw on hydration mismatch * remove debugger * update error message * update error message part2... * fix test? * test? :( * tests 4real * remove useRefAccessWarning gating * split markSuspenseBoundary and getNearestBoundary * also assert html is correct * replace-fork * also remove client render flag on suspend * replace-fork * fix mismerge????
1 parent c3f34e4 commit 0ddd69d

File tree

7 files changed

+444
-346
lines changed

7 files changed

+444
-346
lines changed

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

Lines changed: 16 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1677,45 +1677,37 @@ describe('ReactDOMFizzServer', () => {
16771677

16781678
// @gate experimental
16791679
it('calls getServerSnapshot instead of getSnapshot', async () => {
1680-
const ref = React.createRef();
1681-
16821680
function getServerSnapshot() {
16831681
return 'server';
16841682
}
1685-
16861683
function getClientSnapshot() {
16871684
return 'client';
16881685
}
1689-
16901686
function subscribe() {
16911687
return () => {};
16921688
}
1693-
16941689
function Child({text}) {
16951690
Scheduler.unstable_yieldValue(text);
16961691
return text;
16971692
}
1698-
16991693
function App() {
17001694
const value = useSyncExternalStore(
17011695
subscribe,
17021696
getClientSnapshot,
17031697
getServerSnapshot,
17041698
);
17051699
return (
1706-
<div ref={ref}>
1700+
<div>
17071701
<Child text={value} />
17081702
</div>
17091703
);
17101704
}
1711-
17121705
const loggedErrors = [];
17131706
await act(async () => {
17141707
const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
17151708
<Suspense fallback="Loading...">
17161709
<App />
17171710
</Suspense>,
1718-
17191711
{
17201712
onError(x) {
17211713
loggedErrors.push(x);
@@ -1726,56 +1718,43 @@ describe('ReactDOMFizzServer', () => {
17261718
});
17271719
expect(Scheduler).toHaveYielded(['server']);
17281720

1729-
const serverRenderedDiv = container.getElementsByTagName('div')[0];
1730-
17311721
ReactDOM.hydrateRoot(container, <App />);
17321722

1733-
// The first paint uses the server snapshot
1734-
expect(Scheduler).toFlushUntilNextPaint(['server']);
1735-
expect(getVisibleChildren(container)).toEqual(<div>server</div>);
1736-
// Hydration succeeded
1737-
expect(ref.current).toEqual(serverRenderedDiv);
1738-
1739-
// Asynchronously we detect that the store has changed on the client,
1740-
// and patch up the inconsistency
1741-
expect(Scheduler).toFlushUntilNextPaint(['client']);
1723+
expect(() => {
1724+
// The first paint switches to client rendering due to mismatch
1725+
expect(Scheduler).toFlushUntilNextPaint(['client']);
1726+
}).toErrorDev(
1727+
'Warning: An error occurred during hydration. The server HTML was replaced with client content',
1728+
{withoutStack: true},
1729+
);
17421730
expect(getVisibleChildren(container)).toEqual(<div>client</div>);
1743-
expect(ref.current).toEqual(serverRenderedDiv);
17441731
});
17451732

17461733
// The selector implementation uses the lazy ref initialization pattern
1747-
// @gate !(enableUseRefAccessWarning && __DEV__)
17481734
// @gate experimental
17491735
it('calls getServerSnapshot instead of getSnapshot (with selector and isEqual)', async () => {
17501736
// Same as previous test, but with a selector that returns a complex object
17511737
// that is memoized with a custom `isEqual` function.
17521738
const ref = React.createRef();
1753-
17541739
function getServerSnapshot() {
17551740
return {env: 'server', other: 'unrelated'};
17561741
}
1757-
17581742
function getClientSnapshot() {
17591743
return {env: 'client', other: 'unrelated'};
17601744
}
1761-
17621745
function selector({env}) {
17631746
return {env};
17641747
}
1765-
17661748
function isEqual(a, b) {
17671749
return a.env === b.env;
17681750
}
1769-
17701751
function subscribe() {
17711752
return () => {};
17721753
}
1773-
17741754
function Child({text}) {
17751755
Scheduler.unstable_yieldValue(text);
17761756
return text;
17771757
}
1778-
17791758
function App() {
17801759
const {env} = useSyncExternalStoreWithSelector(
17811760
subscribe,
@@ -1790,14 +1769,12 @@ describe('ReactDOMFizzServer', () => {
17901769
</div>
17911770
);
17921771
}
1793-
17941772
const loggedErrors = [];
17951773
await act(async () => {
17961774
const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
17971775
<Suspense fallback="Loading...">
17981776
<App />
17991777
</Suspense>,
1800-
18011778
{
18021779
onError(x) {
18031780
loggedErrors.push(x);
@@ -1808,21 +1785,17 @@ describe('ReactDOMFizzServer', () => {
18081785
});
18091786
expect(Scheduler).toHaveYielded(['server']);
18101787

1811-
const serverRenderedDiv = container.getElementsByTagName('div')[0];
1812-
18131788
ReactDOM.hydrateRoot(container, <App />);
18141789

1815-
// The first paint uses the server snapshot
1816-
expect(Scheduler).toFlushUntilNextPaint(['server']);
1817-
expect(getVisibleChildren(container)).toEqual(<div>server</div>);
1818-
// Hydration succeeded
1819-
expect(ref.current).toEqual(serverRenderedDiv);
1820-
1821-
// Asynchronously we detect that the store has changed on the client,
1822-
// and patch up the inconsistency
1823-
expect(Scheduler).toFlushUntilNextPaint(['client']);
1790+
// The first paint uses the client due to mismatch forcing client render
1791+
expect(() => {
1792+
// The first paint switches to client rendering due to mismatch
1793+
expect(Scheduler).toFlushUntilNextPaint(['client']);
1794+
}).toErrorDev(
1795+
'Warning: An error occurred during hydration. The server HTML was replaced with client content',
1796+
{withoutStack: true},
1797+
);
18241798
expect(getVisibleChildren(container)).toEqual(<div>client</div>);
1825-
expect(ref.current).toEqual(serverRenderedDiv);
18261799
});
18271800

18281801
// @gate experimental

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

Lines changed: 96 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -197,12 +197,7 @@ describe('ReactDOMServerPartialHydration', () => {
197197
// hydrating anyway.
198198
suspend = true;
199199
ReactDOM.hydrateRoot(container, <App />);
200-
expect(() => {
201-
Scheduler.unstable_flushAll();
202-
}).toErrorDev(
203-
// TODO: This error should not be logged in this case. It's a false positive.
204-
'Did not expect server HTML to contain the text node "Hello" in <div>.',
205-
);
200+
Scheduler.unstable_flushAll();
206201
jest.runAllTimers();
207202

208203
// Expect the server-generated HTML to stay intact.
@@ -218,6 +213,101 @@ describe('ReactDOMServerPartialHydration', () => {
218213
expect(container.textContent).toBe('HelloHello');
219214
});
220215

216+
it('falls back to client rendering boundary on mismatch', async () => {
217+
let client = false;
218+
let suspend = false;
219+
let resolve;
220+
const promise = new Promise(resolvePromise => {
221+
resolve = () => {
222+
suspend = false;
223+
resolvePromise();
224+
};
225+
});
226+
function Child() {
227+
if (suspend) {
228+
Scheduler.unstable_yieldValue('Suspend');
229+
throw promise;
230+
} else {
231+
Scheduler.unstable_yieldValue('Hello');
232+
return 'Hello';
233+
}
234+
}
235+
function Component({shouldMismatch}) {
236+
Scheduler.unstable_yieldValue('Component');
237+
if (shouldMismatch && client) {
238+
return <article>Mismatch</article>;
239+
}
240+
return <div>Component</div>;
241+
}
242+
function App() {
243+
return (
244+
<Suspense fallback="Loading...">
245+
<Child />
246+
<Component />
247+
<Component />
248+
<Component />
249+
<Component shouldMismatch={true} />
250+
</Suspense>
251+
);
252+
}
253+
const finalHTML = ReactDOMServer.renderToString(<App />);
254+
const container = document.createElement('div');
255+
container.innerHTML = finalHTML;
256+
expect(Scheduler).toHaveYielded([
257+
'Hello',
258+
'Component',
259+
'Component',
260+
'Component',
261+
'Component',
262+
]);
263+
264+
expect(container.innerHTML).toBe(
265+
'<!--$-->Hello<div>Component</div><div>Component</div><div>Component</div><div>Component</div><!--/$-->',
266+
);
267+
268+
suspend = true;
269+
client = true;
270+
271+
ReactDOM.hydrateRoot(container, <App />);
272+
expect(Scheduler).toFlushAndYield([
273+
'Suspend',
274+
'Component',
275+
'Component',
276+
'Component',
277+
'Component',
278+
]);
279+
jest.runAllTimers();
280+
281+
// Unchanged
282+
expect(container.innerHTML).toBe(
283+
'<!--$-->Hello<div>Component</div><div>Component</div><div>Component</div><div>Component</div><!--/$-->',
284+
);
285+
286+
suspend = false;
287+
resolve();
288+
await promise;
289+
290+
expect(Scheduler).toFlushAndYield([
291+
// first pass, mismatches at end
292+
'Hello',
293+
'Component',
294+
'Component',
295+
'Component',
296+
'Component',
297+
// second pass as client render
298+
'Hello',
299+
'Component',
300+
'Component',
301+
'Component',
302+
'Component',
303+
]);
304+
305+
// Client rendered - suspense comment nodes removed
306+
expect(container.innerHTML).toBe(
307+
'Hello<div>Component</div><div>Component</div><div>Component</div><article>Mismatch</article>',
308+
);
309+
});
310+
221311
it('calls the hydration callbacks after hydration or deletion', async () => {
222312
let suspend = false;
223313
let resolve;

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
*/
99

1010
import type {Fiber} from './ReactInternalTypes';
11+
import {NoMode, ConcurrentMode} from './ReactTypeOfMode';
1112
import type {
1213
Instance,
1314
TextInstance,
@@ -323,12 +324,21 @@ function tryHydrate(fiber, nextInstance) {
323324
}
324325
}
325326

327+
function throwOnHydrationMismatchIfConcurrentMode(fiber) {
328+
if ((fiber.mode & ConcurrentMode) !== NoMode) {
329+
throw new Error(
330+
'An error occurred during hydration. The server HTML was replaced with client content',
331+
);
332+
}
333+
}
334+
326335
function tryToClaimNextHydratableInstance(fiber: Fiber): void {
327336
if (!isHydrating) {
328337
return;
329338
}
330339
let nextInstance = nextHydratableInstance;
331340
if (!nextInstance) {
341+
throwOnHydrationMismatchIfConcurrentMode(fiber);
332342
// Nothing to hydrate. Make it an insertion.
333343
insertNonHydratedInstance((hydrationParentFiber: any), fiber);
334344
isHydrating = false;
@@ -337,6 +347,7 @@ function tryToClaimNextHydratableInstance(fiber: Fiber): void {
337347
}
338348
const firstAttemptedInstance = nextInstance;
339349
if (!tryHydrate(fiber, nextInstance)) {
350+
throwOnHydrationMismatchIfConcurrentMode(fiber);
340351
// If we can't hydrate this instance let's try the next one.
341352
// We use this as a heuristic. It's based on intuition and not data so it
342353
// might be flawed or unnecessary.

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
*/
99

1010
import type {Fiber} from './ReactInternalTypes';
11+
import {NoMode, ConcurrentMode} from './ReactTypeOfMode';
1112
import type {
1213
Instance,
1314
TextInstance,
@@ -323,12 +324,21 @@ function tryHydrate(fiber, nextInstance) {
323324
}
324325
}
325326

327+
function throwOnHydrationMismatchIfConcurrentMode(fiber) {
328+
if ((fiber.mode & ConcurrentMode) !== NoMode) {
329+
throw new Error(
330+
'An error occurred during hydration. The server HTML was replaced with client content',
331+
);
332+
}
333+
}
334+
326335
function tryToClaimNextHydratableInstance(fiber: Fiber): void {
327336
if (!isHydrating) {
328337
return;
329338
}
330339
let nextInstance = nextHydratableInstance;
331340
if (!nextInstance) {
341+
throwOnHydrationMismatchIfConcurrentMode(fiber);
332342
// Nothing to hydrate. Make it an insertion.
333343
insertNonHydratedInstance((hydrationParentFiber: any), fiber);
334344
isHydrating = false;
@@ -337,6 +347,7 @@ function tryToClaimNextHydratableInstance(fiber: Fiber): void {
337347
}
338348
const firstAttemptedInstance = nextInstance;
339349
if (!tryHydrate(fiber, nextInstance)) {
350+
throwOnHydrationMismatchIfConcurrentMode(fiber);
340351
// If we can't hydrate this instance let's try the next one.
341352
// We use this as a heuristic. It's based on intuition and not data so it
342353
// might be flawed or unnecessary.

0 commit comments

Comments
 (0)