Remove hydrate option from createRoot (#22878)
* remove hydrate: true option * remove missed comment * lint * warning * circumvent flow
salazarm committed
Dec 7, 2021 at 16:10 UTC
5041c37d27ee8f80bf152951d20bf861f817c7c6
12 files changed
+149
-251
fixtures/ssr/src/index.js
+2
-3
@@ -1,7 +1,6 @@
1
import React from 'react';
2
-import {createRoot} from 'react-dom';
2
+import {hydrateRoot} from 'react-dom';
3
4
import App from './components/App';
5
6
-let root = createRoot(document, {hydrate: true});
7
-root.render(<App assets={window.assetManifest} />);
6
+let root = hydrateRoot(document, <App assets={window.assetManifest} />);
packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+5
-10
@@ -465,8 +465,7 @@ describe('ReactDOMFizzServer', () => {
465
expect(loggedErrors).toEqual([]);
466
467
// Attempt to hydrate the content.
468
- const root = ReactDOM.createRoot(container, {hydrate: true});
469
- root.render(<App isClient={true} />);
468
+ ReactDOM.hydrateRoot(container, <App isClient={true} />);
469
Scheduler.unstable_flushAll();
470
471
// We're still loading because we're waiting for the server to stream more content.
@@ -629,8 +628,7 @@ describe('ReactDOMFizzServer', () => {
628
expect(loggedErrors).toEqual([]);
629
630
// Attempt to hydrate the content.
632
- const root = ReactDOM.createRoot(container, {hydrate: true});
633
- root.render(<App />);
631
+ ReactDOM.hydrateRoot(container, <App />);
632
Scheduler.unstable_flushAll();
633
634
// We're still loading because we're waiting for the server to stream more content.
@@ -701,8 +699,7 @@ describe('ReactDOMFizzServer', () => {
699
pipe(writable);
700
});
701
704
- const root = ReactDOM.createRoot(container, {hydrate: true});
705
- root.render(<App showMore={false} />);
702
+ const root = ReactDOM.hydrateRoot(container, <App showMore={false} />);
703
Scheduler.unstable_flushAll();
704
705
// We're not hydrated yet.
@@ -769,8 +766,7 @@ describe('ReactDOMFizzServer', () => {
766
// We're still showing a fallback.
767
768
// Attempt to hydrate the content.
772
- const root = ReactDOM.createRoot(container, {hydrate: true});
773
- root.render(<App />);
769
+ ReactDOM.hydrateRoot(container, <App />);
770
Scheduler.unstable_flushAll();
771
772
// We're still loading because we're waiting for the server to stream more content.
@@ -1459,8 +1455,7 @@ describe('ReactDOMFizzServer', () => {
1455
// We're still showing a fallback.
1456
1457
// Attempt to hydrate the content.
1462
- const root = ReactDOM.createRoot(container, {hydrate: true});
1463
- root.render(<App isClient={true} />);
1458
+ ReactDOM.hydrateRoot(container, <App isClient={true} />);
1459
Scheduler.unstable_flushAll();
1460
1461
// We're still loading because we're waiting for the server to stream more content.
packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+70
-96
@@ -155,8 +155,7 @@ describe('ReactDOMServerPartialHydration', () => {
155
// On the client we don't have all data yet but we want to start
156
// hydrating anyway.
157
suspend = true;
158
- const root = ReactDOM.createRoot(container, {hydrate: true});
159
- root.render(<App />);
158
+ ReactDOM.hydrateRoot(container, <App />);
159
Scheduler.unstable_flushAll();
160
jest.runAllTimers();
161
@@ -383,20 +382,15 @@ describe('ReactDOMServerPartialHydration', () => {
382
// hydrating anyway.
383
suspend = true;
384
suspend2 = true;
386
- const root = ReactDOM.createRoot(container, {
387
- hydrate: true,
388
- hydrationOptions: {
389
- onHydrated(node) {
390
- hydrated.push(node);
391
- },
392
- onDeleted(node) {
393
- deleted.push(node);
394
- },
385
+ const root = ReactDOM.hydrateRoot(container, <App />, {
386
+ onHydrated(node) {
387
+ hydrated.push(node);
388
+ },
389
+ onDeleted(node) {
390
+ deleted.push(node);
391
},
392
});
397
- act(() => {
398
- root.render(<App />);
399
- });
393
+ Scheduler.unstable_flushAll();
394
395
expect(hydrated.length).toBe(0);
396
expect(deleted.length).toBe(0);
@@ -514,17 +508,12 @@ describe('ReactDOMServerPartialHydration', () => {
508
// On the client we don't have all data yet but we want to start
509
// hydrating anyway.
510
suspend = true;
517
- const root = ReactDOM.createRoot(container, {
518
- hydrate: true,
519
- hydrationOptions: {
520
- onDeleted(node) {
521
- deleted.push(node);
522
- },
511
+ const root = ReactDOM.hydrateRoot(container, <App />, {
512
+ onDeleted(node) {
513
+ deleted.push(node);
514
},
515
});
525
- act(() => {
526
- root.render(<App />);
527
- });
516
+ Scheduler.unstable_flushAll();
517
518
expect(deleted.length).toBe(0);
519
@@ -580,7 +569,7 @@ describe('ReactDOMServerPartialHydration', () => {
569
}).toErrorDev(
570
'Warning: Cannot hydrate Suspense in legacy mode. Switch from ' +
571
'ReactDOM.hydrate(element, container) to ' +
583
- 'ReactDOM.createRoot(container, { hydrate: true })' +
572
+ 'ReactDOM.hydrateRoot(container, <App />)' +
573
'.render(element) or remove the Suspense components from the server ' +
574
'rendered components.' +
575
'\n in Suspense (at **)' +
@@ -660,8 +649,7 @@ describe('ReactDOMServerPartialHydration', () => {
649
suspend = true;
650
651
act(() => {
663
- const root = ReactDOM.createRoot(container, {hydrate: true});
664
- root.render(<App />);
652
+ ReactDOM.hydrateRoot(container, <App />);
653
});
654
655
expect(container.firstChild.firstChild.tagName).not.toBe('DIV');
@@ -717,8 +705,7 @@ describe('ReactDOMServerPartialHydration', () => {
705
// hydrating anyway.
706
suspend = true;
707
act(() => {
720
- const root = ReactDOM.createRoot(container, {hydrate: true});
721
- root.render(<App />);
708
+ ReactDOM.hydrateRoot(container, <App />);
709
});
710
711
expect(container.firstChild.children[1].textContent).toBe('Middle');
@@ -767,8 +754,10 @@ describe('ReactDOMServerPartialHydration', () => {
754
// On the client we don't have all data yet but we want to start
755
// hydrating anyway.
756
suspend = true;
770
- const root = ReactDOM.createRoot(container, {hydrate: true});
771
- root.render(<App text="Hello" className="hello" />);
757
+ const root = ReactDOM.hydrateRoot(
758
+ container,
759
+ <App text="Hello" className="hello" />,
760
+ );
761
Scheduler.unstable_flushAll();
762
jest.runAllTimers();
763
@@ -839,8 +828,10 @@ describe('ReactDOMServerPartialHydration', () => {
828
// On the client we don't have all data yet but we want to start
829
// hydrating anyway.
830
suspend = true;
842
- const root = ReactDOM.createRoot(container, {hydrate: true});
843
- root.render(<App text="Hello" className="hello" />);
831
+ const root = ReactDOM.hydrateRoot(
832
+ container,
833
+ <App text="Hello" className="hello" />,
834
+ );
835
Scheduler.unstable_flushAll();
836
jest.runAllTimers();
837
@@ -910,8 +901,10 @@ describe('ReactDOMServerPartialHydration', () => {
901
// On the client we don't have all data yet but we want to start
902
// hydrating anyway.
903
suspend = true;
913
- const root = ReactDOM.createRoot(container, {hydrate: true});
914
- root.render(<App text="Hello" className="hello" />);
904
+ const root = ReactDOM.hydrateRoot(
905
+ container,
906
+ <App text="Hello" className="hello" />,
907
+ );
908
Scheduler.unstable_flushAll();
909
jest.runAllTimers();
910
@@ -983,8 +976,10 @@ describe('ReactDOMServerPartialHydration', () => {
976
// On the client we don't have all data yet but we want to start
977
// hydrating anyway.
978
suspend = true;
986
- const root = ReactDOM.createRoot(container, {hydrate: true});
987
- root.render(<App text="Hello" className="hello" />);
979
+ const root = ReactDOM.hydrateRoot(
980
+ container,
981
+ <App text="Hello" className="hello" />,
982
+ );
983
Scheduler.unstable_flushAll();
984
jest.runAllTimers();
985
@@ -1055,8 +1050,10 @@ describe('ReactDOMServerPartialHydration', () => {
1050
// On the client we don't have all data yet but we want to start
1051
// hydrating anyway.
1052
suspend = true;
1058
- const root = ReactDOM.createRoot(container, {hydrate: true});
1059
- root.render(<App text="Hello" className="hello" />);
1053
+ const root = ReactDOM.hydrateRoot(
1054
+ container,
1055
+ <App text="Hello" className="hello" />,
1056
+ );
1057
Scheduler.unstable_flushAll();
1058
jest.runAllTimers();
1059
@@ -1126,8 +1123,10 @@ describe('ReactDOMServerPartialHydration', () => {
1123
// On the client we don't have all data yet but we want to start
1124
// hydrating anyway.
1125
suspend = true;
1129
- const root = ReactDOM.createRoot(container, {hydrate: true});
1130
- root.render(<App text="Hello" className="hello" />);
1126
+ const root = ReactDOM.hydrateRoot(
1127
+ container,
1128
+ <App text="Hello" className="hello" />,
1129
+ );
1130
Scheduler.unstable_flushAll();
1131
jest.runAllTimers();
1132
@@ -1206,11 +1205,10 @@ describe('ReactDOMServerPartialHydration', () => {
1205
const container = document.createElement('div');
1206
container.innerHTML = finalHTML;
1207
1209
- const root = ReactDOM.createRoot(container, {hydrate: true});
1208
+ ReactDOM.hydrateRoot(container, <App text="Hello" className="hello" />);
1209
1210
await act(async () => {
1211
suspend = true;
1213
- root.render(<App />);
1212
expect(Scheduler).toFlushAndYieldThrough(['Child']);
1213
1214
// While we're part way through the hydration, we update the state.
@@ -1277,8 +1275,8 @@ describe('ReactDOMServerPartialHydration', () => {
1275
// On the client we don't have all data yet but we want to start
1276
// hydrating anyway.
1277
suspend = true;
1280
- const root = ReactDOM.createRoot(container, {hydrate: true});
1281
- root.render(
1278
+ const root = ReactDOM.hydrateRoot(
1279
+ container,
1280
<Context.Provider value={{text: 'Hello', className: 'hello'}}>
1281
<App />
1282
</Context.Provider>,
@@ -1359,8 +1357,8 @@ describe('ReactDOMServerPartialHydration', () => {
1357
// On the client we don't have all data yet but we want to start
1358
// hydrating anyway.
1359
suspend = true;
1362
- const root = ReactDOM.createRoot(container, {hydrate: true});
1363
- root.render(
1360
+ const root = ReactDOM.hydrateRoot(
1361
+ container,
1362
<Context.Provider value={{text: 'Hello', className: 'hello'}}>
1363
<App />
1364
</Context.Provider>,
@@ -1437,8 +1435,7 @@ describe('ReactDOMServerPartialHydration', () => {
1435
1436
// On the client we have the data available quickly for some reason.
1437
suspend = false;
1440
- const root = ReactDOM.createRoot(container, {hydrate: true});
1441
- root.render(<App />);
1438
+ ReactDOM.hydrateRoot(container, <App />);
1439
Scheduler.unstable_flushAll();
1440
jest.runAllTimers();
1441
@@ -1493,8 +1490,7 @@ describe('ReactDOMServerPartialHydration', () => {
1490
1491
// On the client we have the data available quickly for some reason.
1492
suspend = false;
1496
- const root = ReactDOM.createRoot(container, {hydrate: true});
1497
- root.render(<App />);
1493
+ ReactDOM.hydrateRoot(container, <App />);
1494
Scheduler.unstable_flushAll();
1495
// This will have exceeded the suspended time so we should timeout.
1496
jest.advanceTimersByTime(500);
@@ -1554,8 +1550,7 @@ describe('ReactDOMServerPartialHydration', () => {
1550
1551
// On the client we have the data available quickly for some reason.
1552
suspend = false;
1557
- const root = ReactDOM.createRoot(container, {hydrate: true});
1558
- root.render(<App />);
1553
+ ReactDOM.hydrateRoot(container, <App />);
1554
Scheduler.unstable_flushAll();
1555
// This will have exceeded the suspended time so we should timeout.
1556
jest.advanceTimersByTime(500);
@@ -1621,12 +1616,9 @@ describe('ReactDOMServerPartialHydration', () => {
1616
1617
const spanB = container.getElementsByTagName('span')[1];
1618
1624
- const root = ReactDOM.createRoot(container, {hydrate: true});
1625
-
1619
+ const root = ReactDOM.hydrateRoot(container, <App showMore={false} />);
1620
suspend = true;
1627
- act(() => {
1628
- root.render(<App showMore={false} />);
1629
- });
1621
+ Scheduler.unstable_flushAll();
1622
1623
// We're not hydrated yet.
1624
expect(ref.current).toBe(null);
@@ -1704,12 +1696,10 @@ describe('ReactDOMServerPartialHydration', () => {
1696
1697
const spanA = container.getElementsByTagName('span')[0];
1698
1707
- const root = ReactDOM.createRoot(container, {hydrate: true});
1699
+ const root = ReactDOM.hydrateRoot(container, <App showMore={false} />);
1700
1701
suspend = true;
1710
- act(() => {
1711
- root.render(<App showMore={false} />);
1712
- });
1702
+ Scheduler.unstable_flushAll();
1703
1704
// We're not hydrated yet.
1705
expect(ref.current).toBe(null);
@@ -1868,13 +1858,10 @@ describe('ReactDOMServerPartialHydration', () => {
1858
const container = document.createElement('div');
1859
container.innerHTML = html;
1860
1871
- const root = ReactDOM.createRoot(container, {hydrate: true});
1861
+ ReactDOM.hydrateRoot(container, <App />);
1862
1863
suspend = true;
1874
-
1875
- await act(async () => {
1876
- root.render(<App />);
1877
- });
1864
+ Scheduler.unstable_flushAll();
1865
1866
// We haven't hydrated the second child but the placeholder is still in the list.
1867
expect(container.textContent).toBe('ALoading B');
@@ -1929,8 +1916,7 @@ describe('ReactDOMServerPartialHydration', () => {
1916
const span = container.getElementsByTagName('span')[1];
1917
1918
suspend = false;
1932
- const root = ReactDOM.createRoot(container, {hydrate: true});
1933
- root.render(<App />);
1919
+ ReactDOM.hydrateRoot(container, <App />);
1920
Scheduler.unstable_flushAll();
1921
jest.runAllTimers();
1922
@@ -1972,8 +1958,7 @@ describe('ReactDOMServerPartialHydration', () => {
1958
1959
// On the client we don't have all data yet but we want to start
1960
// hydrating anyway.
1975
- const root = ReactDOM.createRoot(container, {hydrate: true});
1976
- root.render(<App />);
1961
+ ReactDOM.hydrateRoot(container, <App />);
1962
Scheduler.unstable_flushAll();
1963
jest.runAllTimers();
1964
@@ -2025,8 +2010,8 @@ describe('ReactDOMServerPartialHydration', () => {
2010
// On the client we don't have all data yet but we want to start
2011
// hydrating anyway.
2012
suspend = true;
2028
- const root = ReactDOM.createRoot(container, {hydrate: true});
2029
- root.render(
2013
+ const root = ReactDOM.hydrateRoot(
2014
+ container,
2015
<ClassName.Provider value={'hello'}>
2016
<App text="Hello" />
2017
</ClassName.Provider>,
@@ -2117,8 +2102,7 @@ describe('ReactDOMServerPartialHydration', () => {
2102
// On the client we don't have all data yet but we want to start
2103
// hydrating anyway.
2104
suspend = true;
2120
- const root = ReactDOM.createRoot(container, {hydrate: true});
2121
- root.render(<App />);
2105
+ ReactDOM.hydrateRoot(container, <App />);
2106
Scheduler.unstable_flushAll();
2107
jest.runAllTimers();
2108
@@ -2205,8 +2189,7 @@ describe('ReactDOMServerPartialHydration', () => {
2189
// hydrating anyway.
2190
suspend = true;
2191
isServerRendering = false;
2208
- const root = ReactDOM.createRoot(container, {hydrate: true});
2209
- root.render(<App />);
2192
+ ReactDOM.hydrateRoot(container, <App />);
2193
2194
// We'll do one click before hydrating.
2195
a.click();
@@ -2296,8 +2279,7 @@ describe('ReactDOMServerPartialHydration', () => {
2279
// On the client we don't have all data yet but we want to start
2280
// hydrating anyway.
2281
suspend = true;
2299
- const root = ReactDOM.createRoot(container, {hydrate: true});
2300
- root.render(<App />);
2282
+ ReactDOM.hydrateRoot(container, <App />);
2283
2284
// We'll do one click before hydrating.
2285
await act(async () => {
@@ -2392,8 +2374,7 @@ describe('ReactDOMServerPartialHydration', () => {
2374
// hydrating anyway.
2375
suspend = true;
2376
isServerRendering = false;
2395
- const root = ReactDOM.createRoot(container, {hydrate: true});
2396
- root.render(<App />);
2377
+ ReactDOM.hydrateRoot(container, <App />);
2378
2379
// We'll do one click before hydrating.
2380
a.click();
@@ -2480,8 +2461,7 @@ describe('ReactDOMServerPartialHydration', () => {
2461
// On the client we don't have all data yet but we want to start
2462
// hydrating anyway.
2463
suspend = true;
2483
- const root = ReactDOM.createRoot(container, {hydrate: true});
2484
- root.render(<App />);
2464
+ ReactDOM.hydrateRoot(container, <App />);
2465
Scheduler.unstable_flushAll();
2466
jest.runAllTimers();
2467
@@ -2569,8 +2549,7 @@ describe('ReactDOMServerPartialHydration', () => {
2549
suspend = true;
2550
2551
// Hydrate asynchronously.
2572
- const root = ReactDOM.createRoot(childContainer, {hydrate: true});
2573
- root.render(<App />);
2552
+ ReactDOM.hydrateRoot(childContainer, <App />);
2553
jest.runAllTimers();
2554
Scheduler.unstable_flushAll();
2555
@@ -2668,8 +2647,7 @@ describe('ReactDOMServerPartialHydration', () => {
2647
// hydrating anyway.
2648
suspend1 = true;
2649
suspend2 = true;
2671
- const root = ReactDOM.createRoot(container, {hydrate: true});
2672
- root.render(<App />);
2650
+ ReactDOM.hydrateRoot(container, <App />);
2651
2652
Scheduler.unstable_flushAll();
2653
jest.runAllTimers();
@@ -2755,8 +2733,7 @@ describe('ReactDOMServerPartialHydration', () => {
2733
container.innerHTML = finalHTML;
2734
2735
suspend = true;
2758
- const root = ReactDOM.createRoot(container, {hydrate: true});
2759
- root.render(<App showSibling={false} />);
2736
+ const root = ReactDOM.hydrateRoot(container, <App showSibling={false} />);
2737
expect(Scheduler).toFlushAndYield([]);
2738
2739
expect(ref.current).toBe(null);
@@ -2842,8 +2819,7 @@ describe('ReactDOMServerPartialHydration', () => {
2819
// On the client we don't have all data yet but we want to start
2820
// hydrating anyway.
2821
suspend = true;
2845
- const root = ReactDOM.createRoot(container, {hydrate: true});
2846
- root.render(<App />);
2822
+ ReactDOM.hydrateRoot(container, <App />);
2823
Scheduler.unstable_flushAll();
2824
jest.runAllTimers();
2825
@@ -2908,8 +2884,8 @@ describe('ReactDOMServerPartialHydration', () => {
2884
const span = container.getElementsByTagName('span')[0];
2885
expect(span.innerHTML).toBe('Hidden child');
2886
2911
- const root = ReactDOM.createRoot(container, {hydrate: true});
2912
- root.render(<App />);
2887
+ ReactDOM.hydrateRoot(container, <App />);
2888
+
2889
Scheduler.unstable_flushAll();
2890
expect(ref.current).toBe(span);
2891
expect(span.innerHTML).toBe('Hidden child');
@@ -2937,8 +2913,7 @@ describe('ReactDOMServerPartialHydration', () => {
2913
const span = container.getElementsByTagName('span')[0];
2914
expect(span.innerHTML).toBe('Hidden child');
2915
2940
- const root = ReactDOM.createRoot(container, {hydrate: true});
2941
- root.render(<App />);
2916
+ ReactDOM.hydrateRoot(container, <App />);
2917
Scheduler.unstable_flushAll();
2918
expect(ref.current).toBe(span);
2919
expect(span.innerHTML).toBe('Hidden child');
@@ -2963,8 +2938,7 @@ describe('ReactDOMServerPartialHydration', () => {
2938
2939
const span = container.getElementsByTagName('span')[0];
2940
2966
- const root = ReactDOM.createRoot(container, {hydrate: true});
2967
- root.render(<App />);
2941
+ ReactDOM.hydrateRoot(container, <App />);
2942
Scheduler.unstable_flushAll();
2943
expect(ref.current).toBe(span);
2944
expect(ref.current.innerHTML).toBe('Hidden child');
packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
+9
-20
@@ -165,8 +165,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
165
166
const span = container.getElementsByTagName('span')[1];
167
168
- const root = ReactDOM.createRoot(container, {hydrate: true});
169
- root.render(<App />);
168
+ ReactDOM.hydrateRoot(container, <App />);
169
170
// Nothing has been hydrated so far.
171
expect(Scheduler).toHaveYielded([]);
@@ -244,8 +243,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
243
244
// A and D will be suspended. We'll click on D which should take
245
// priority, after we unsuspend.
247
- const root = ReactDOM.createRoot(container, {hydrate: true});
248
- root.render(<App />);
246
+ ReactDOM.hydrateRoot(container, <App />);
247
248
// Nothing has been hydrated so far.
249
expect(Scheduler).toHaveYielded([]);
@@ -343,8 +341,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
341
342
// A and D will be suspended. We'll click on D which should take
343
// priority, after we unsuspend.
346
- const root = ReactDOM.createRoot(container, {hydrate: true});
347
- root.render(<App />);
344
+ ReactDOM.hydrateRoot(container, <App />);
345
346
// Nothing has been hydrated so far.
347
expect(Scheduler).toHaveYielded([]);
@@ -443,9 +440,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
440
441
isServerRendering = false;
442
446
- const root = ReactDOM.createRoot(container, {hydrate: true});
447
-
448
- root.render(<App />);
443
+ ReactDOM.hydrateRoot(container, <App />);
444
445
// Nothing has been hydrated so far.
446
expect(Scheduler).toHaveYielded([]);
@@ -530,8 +525,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
525
526
// A and D will be suspended. We'll click on D which should take
527
// priority, after we unsuspend.
533
- const root = ReactDOM.createRoot(container, {hydrate: true});
534
- root.render(<App />);
528
+ ReactDOM.hydrateRoot(container, <App />);
529
530
// Nothing has been hydrated so far.
531
expect(Scheduler).toHaveYielded([]);
@@ -629,8 +623,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
623
624
// A and D will be suspended. We'll click on D which should take
625
// priority, after we unsuspend.
632
- const root = ReactDOM.createRoot(container, {hydrate: true});
633
- root.render(<App />);
626
+ ReactDOM.hydrateRoot(container, <App />);
627
628
// Nothing has been hydrated so far.
629
expect(Scheduler).toHaveYielded([]);
@@ -739,8 +732,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
732
733
// A and D will be suspended. We'll click on D which should take
734
// priority, after we unsuspend.
742
- const root = ReactDOM.createRoot(container, {hydrate: true});
743
- root.render(<App />);
735
+ ReactDOM.hydrateRoot(container, <App />);
736
737
// Nothing has been hydrated so far.
738
expect(Scheduler).toHaveYielded([]);
@@ -1373,8 +1365,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
1365
1366
// A and D will be suspended. We'll click on D which should take
1367
// priority, after we unsuspend.
1376
- const root = ReactDOM.createRoot(container, {hydrate: true});
1377
- root.render(<App />);
1368
+ ReactDOM.hydrateRoot(container, <App />);
1369
1370
// Nothing has been hydrated so far.
1371
expect(Scheduler).toHaveYielded([]);
@@ -1489,10 +1480,8 @@ describe('ReactDOMServerSelectiveHydration', () => {
1480
const spanB = container.getElementsByTagName('span')[2];
1481
const spanC = container.getElementsByTagName('span')[4];
1482
1492
- const root = ReactDOM.createRoot(container, {hydrate: true});
1483
act(() => {
1494
- root.render(<App a="A" />);
1495
-
1484
+ const root = ReactDOM.hydrateRoot(container, <App a="A" />);
1485
// Hydrate the shell.
1486
expect(Scheduler).toFlushAndYieldThrough(['App', 'Commit']);
1487
packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
+1
-2
@@ -163,8 +163,7 @@ describe('ReactDOMServerSuspense', () => {
163
expect(divB.textContent).toBe('B');
164
165
act(() => {
166
- const root = ReactDOM.createRoot(parent, {hydrate: true});
167
- root.render(example);
166
+ ReactDOM.hydrateRoot(parent, example);
167
});
168
169
const parent2 = element.parentNode;
packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
+1
-2
@@ -403,8 +403,7 @@ describe('ReactDOMServerHydration', () => {
403
const finalHTML = ReactDOMServer.renderToString(<div />);
404
const container = document.createElement('div');
405
container.innerHTML = finalHTML;
406
- const root = ReactDOM.createRoot(container, {hydrate: true});
407
- root.render(<div />);
406
+ const root = ReactDOM.hydrateRoot(container, <div />);
407
Scheduler.unstable_flushAll();
408
root.render(null);
409
Scheduler.unstable_flushAll();
packages/react-dom/src/client/ReactDOMRoot.js
+9
-31
@@ -21,15 +21,6 @@ export type RootType = {
21
};
22
23
export type CreateRootOptions = {
24
- // TODO: Remove these options.
25
- hydrate?: boolean,
26
- hydrationOptions?: {
27
- onHydrated?: (suspenseNode: Comment) => void,
28
- onDeleted?: (suspenseNode: Comment) => void,
29
- mutableSources?: Array<MutableSource<any>>,
30
- ...
31
- },
32
- // END OF TODO
24
unstable_strictMode?: boolean,
25
unstable_concurrentUpdatesByDefault?: boolean,
26
identifierPrefix?: string,
@@ -149,21 +140,17 @@ export function createRoot(
140
141
warnIfReactDOMContainerInDEV(container);
142
152
- // TODO: Delete these options
153
- const hydrate = options != null && options.hydrate === true;
154
- const hydrationCallbacks =
155
- (options != null && options.hydrationOptions) || null;
156
- const mutableSources =
157
- (options != null &&
158
- options.hydrationOptions != null &&
159
- options.hydrationOptions.mutableSources) ||
160
- null;
161
- // END TODO
162
-
143
let isStrictMode = false;
144
let concurrentUpdatesByDefaultOverride = false;
145
let identifierPrefix = '';
146
if (options !== null && options !== undefined) {
147
+ if (__DEV__) {
148
+ if ((options: any).hydrate) {
149
+ console.warn(
150
+ 'hydrate through createRoot is deprecated. Use ReactDOM.hydrateRoot(container, <App />) instead.',
151
+ );
152
+ }
153
+ }
154
if (options.unstable_strictMode === true) {
155
isStrictMode = true;
156
}
@@ -181,8 +168,8 @@ export function createRoot(
168
const root = createContainer(
169
container,
170
ConcurrentRoot,
184
- hydrate,
185
- hydrationCallbacks,
171
+ false,
172
+ null,
173
isStrictMode,
174
concurrentUpdatesByDefaultOverride,
175
identifierPrefix,
@@ -193,15 +180,6 @@ export function createRoot(
180
container.nodeType === COMMENT_NODE ? container.parentNode : container;
181
listenToAllSupportedEvents(rootContainerElement);
182
196
- // TODO: Delete this path
197
- if (mutableSources) {
198
- for (let i = 0; i < mutableSources.length; i++) {
199
- const mutableSource = mutableSources[i];
200
- registerMutableSourceForHydration(root, mutableSource);
201
- }
202
- }
203
- // END TODO
204
-
183
return new ReactDOMRoot(root);
184
}
185
packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
+1
-2
@@ -629,8 +629,7 @@ describe('DOMPluginEventSystem', () => {
629
suspend = true;
630
631
// Hydrate asynchronously.
632
- const root = ReactDOM.createRoot(childContainer, {hydrate: true});
633
- root.render(<App />);
632
+ ReactDOM.hydrateRoot(childContainer, <App />);
633
jest.runAllTimers();
634
Scheduler.unstable_flushAll();
635
packages/react-reconciler/src/ReactFiberBeginWork.new.js
+1
-1
@@ -2586,7 +2586,7 @@ function mountDehydratedSuspenseComponent(
2586
console.error(
2587
'Cannot hydrate Suspense in legacy mode. Switch from ' +
2588
'ReactDOM.hydrate(element, container) to ' +
2589
- 'ReactDOM.createRoot(container, { hydrate: true })' +
2589
+ 'ReactDOM.hydrateRoot(container, <App />)' +
2590
'.render(element) or remove the Suspense components from ' +
2591
'the server rendered components.',
2592
);
packages/react-reconciler/src/ReactFiberBeginWork.old.js
+1
-1
@@ -2586,7 +2586,7 @@ function mountDehydratedSuspenseComponent(
2586
console.error(
2587
'Cannot hydrate Suspense in legacy mode. Switch from ' +
2588
'ReactDOM.hydrate(element, container) to ' +
2589
- 'ReactDOM.createRoot(container, { hydrate: true })' +
2589
+ 'ReactDOM.hydrateRoot(container, <App />)' +
2590
'.render(element) or remove the Suspense components from ' +
2591
'the server rendered components.',
2592
);
packages/react-reconciler/src/__tests__/ReactScope-test.internal.js
+1
-2
@@ -312,8 +312,7 @@ describe('ReactScope', () => {
312
// On the client we don't have all data yet but we want to start
313
// hydrating anyway.
314
suspend = true;
315
- const root = ReactDOM.createRoot(container2, {hydrate: true});
316
- root.render(<App />);
315
+ ReactDOM.hydrateRoot(container2, <App />);
316
Scheduler.unstable_flushAll();
317
jest.runAllTimers();
318
packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
+48
-81
@@ -168,14 +168,10 @@ describe('useMutableSourceHydration', () => {
168
expect(Scheduler).toHaveYielded(['only:one']);
169
expect(source.listenerCount).toBe(0);
170
171
- const root = ReactDOM.createRoot(container, {
172
- hydrate: true,
173
- hydrationOptions: {
174
- mutableSources: [mutableSource],
175
- },
176
- });
171
act(() => {
178
- root.render(<TestComponent />);
172
+ ReactDOM.hydrateRoot(container, <TestComponent />, {
173
+ mutableSources: [mutableSource],
174
+ });
175
});
176
expect(Scheduler).toHaveYielded(['only:one']);
177
expect(source.listenerCount).toBe(1);
@@ -205,22 +201,16 @@ describe('useMutableSourceHydration', () => {
201
expect(Scheduler).toHaveYielded(['only:one']);
202
expect(source.listenerCount).toBe(0);
203
208
- const root = ReactDOM.createRoot(container, {
209
- hydrate: true,
210
- hydrationOptions: {
211
- mutableSources: [mutableSource],
212
- },
213
- });
204
expect(() => {
205
act(() => {
216
- root.render(<TestComponent />);
206
+ ReactDOM.hydrateRoot(container, <TestComponent />, {
207
+ mutableSources: [mutableSource],
208
+ });
209
210
source.value = 'two';
211
});
212
}).toErrorDev(
221
- 'Warning: An error occurred during hydration. ' +
222
- 'The server HTML was replaced with client content in <div>.',
223
- {withoutStack: true},
213
+ 'Warning: Text content did not match. Server: "only:one" Client: "only:two"',
214
);
215
expect(Scheduler).toHaveYielded(['only:two']);
216
expect(source.listenerCount).toBe(1);
@@ -258,20 +248,18 @@ describe('useMutableSourceHydration', () => {
248
expect(Scheduler).toHaveYielded(['a:one', 'b:one']);
249
expect(source.listenerCount).toBe(0);
250
261
- const root = ReactDOM.createRoot(container, {
262
- hydrate: true,
263
- hydrationOptions: {
264
- mutableSources: [mutableSource],
265
- },
266
- });
251
expect(() => {
252
act(() => {
253
if (gate(flags => flags.enableSyncDefaultUpdates)) {
254
React.startTransition(() => {
271
- root.render(<TestComponent />);
255
+ ReactDOM.hydrateRoot(container, <TestComponent />, {
256
+ mutableSources: [mutableSource],
257
+ });
258
});
259
} else {
274
- root.render(<TestComponent />);
260
+ ReactDOM.hydrateRoot(container, <TestComponent />, {
261
+ mutableSources: [mutableSource],
262
+ });
263
}
264
expect(Scheduler).toFlushAndYieldThrough(['a:one']);
265
source.value = 'two';
@@ -318,50 +306,34 @@ describe('useMutableSourceHydration', () => {
306
container.innerHTML = htmlString;
307
expect(Scheduler).toHaveYielded(['0:a:one', '1:b:one']);
308
321
- const root = ReactDOM.createRoot(container, {
322
- hydrate: true,
323
- hydrationOptions: {
324
- mutableSources: [mutableSource],
325
- },
326
- });
309
expect(() => {
310
act(() => {
311
+ const fragment = (
312
+ <>
313
+ <Component
314
+ label="0"
315
+ getSnapshot={getSnapshotA}
316
+ mutableSource={mutableSource}
317
+ subscribe={subscribeA}
318
+ />
319
+ <Component
320
+ label="1"
321
+ getSnapshot={getSnapshotB}
322
+ mutableSource={mutableSource}
323
+ subscribe={subscribeB}
324
+ />
325
+ </>
326
+ );
327
if (gate(flags => flags.enableSyncDefaultUpdates)) {
328
React.startTransition(() => {
331
- root.render(
332
- <>
333
- <Component
334
- label="0"
335
- getSnapshot={getSnapshotA}
336
- mutableSource={mutableSource}
337
- subscribe={subscribeA}
338
- />
339
- <Component
340
- label="1"
341
- getSnapshot={getSnapshotB}
342
- mutableSource={mutableSource}
343
- subscribe={subscribeB}
344
- />
345
- </>,
346
- );
329
+ ReactDOM.hydrateRoot(container, fragment, {
330
+ mutableSources: [mutableSource],
331
+ });
332
});
333
} else {
349
- root.render(
350
- <>
351
- <Component
352
- label="0"
353
- getSnapshot={getSnapshotA}
354
- mutableSource={mutableSource}
355
- subscribe={subscribeA}
356
- />
357
- <Component
358
- label="1"
359
- getSnapshot={getSnapshotB}
360
- mutableSource={mutableSource}
361
- subscribe={subscribeB}
362
- />
363
- </>,
364
- );
334
+ ReactDOM.hydrateRoot(container, fragment, {
335
+ mutableSources: [mutableSource],
336
+ });
337
}
338
expect(Scheduler).toFlushAndYieldThrough(['0:a:one']);
339
source.valueB = 'b:two';
@@ -409,21 +381,19 @@ describe('useMutableSourceHydration', () => {
381
expect(Scheduler).toHaveYielded([1, 'a:one']);
382
expect(source.listenerCount).toBe(0);
383
412
- const root = ReactDOM.createRoot(container, {
413
- hydrate: true,
414
- hydrationOptions: {
415
- mutableSources: [mutableSource],
416
- },
417
- });
418
-
384
expect(() => {
385
act(() => {
386
+ let root;
387
if (gate(flags => flags.enableSyncDefaultUpdates)) {
388
React.startTransition(() => {
423
- root.render(<TestComponent flag={1} />);
389
+ root = ReactDOM.hydrateRoot(container, <TestComponent flag={1} />, {
390
+ mutableSources: [mutableSource],
391
+ });
392
});
393
} else {
426
- root.render(<TestComponent flag={1} />);
394
+ root = ReactDOM.hydrateRoot(container, <TestComponent flag={1} />, {
395
+ mutableSources: [mutableSource],
396
+ });
397
}
398
expect(Scheduler).toFlushAndYieldThrough([1]);
399
@@ -438,19 +408,16 @@ describe('useMutableSourceHydration', () => {
408
dispatchAndSetCurrentEvent(arbitraryElement, mouseOverEvent);
409
410
expect(Scheduler).toFlushAndYieldThrough([2]);
441
-
411
source.value = 'two';
412
});
413
}).toErrorDev(
445
- [
446
- 'Warning: An error occurred during hydration. ' +
447
- 'The server HTML was replaced with client content in <div>.',
448
-
449
- 'Warning: Text content did not match. Server: "1" Client: "2"',
450
- ],
451
- {withoutStack: 1},
414
+ 'Warning: Text content did not match. Server: "1" Client: "2"',
415
);
453
- expect(Scheduler).toHaveYielded([2, 'a:two']);
416
expect(source.listenerCount).toBe(1);
417
+ if (gate(flags => flags.enableSyncDefaultUpdates)) {
418
+ expect(Scheduler).toHaveYielded([2, 'a:two']);
419
+ } else {
420
+ expect(Scheduler).toHaveYielded(['a:two']);
421
+ }
422
});
423
});