From 40043dc8ed650b0ac5ea1704f8d4c2cc3db310a3 Mon Sep 17 00:00:00 2001
From: Marco Salazar <salazarm@fb.com>
Date: Tue, 7 Dec 2021 15:18:33 -0500
Subject: [PATCH 1/5] remove hydrate: true option

---
 fixtures/ssr/src/index.js                     |   5 +-
 .../src/__tests__/ReactDOMFizzServer-test.js  |  15 +-
 ...DOMServerPartialHydration-test.internal.js | 169 ++++++++----------
 ...MServerSelectiveHydration-test.internal.js |  29 +--
 .../ReactDOMServerSuspense-test.internal.js   |   3 +-
 .../ReactServerRenderingHydration-test.js     |   3 +-
 packages/react-dom/src/client/ReactDOMRoot.js |  32 +---
 .../DOMPluginEventSystem-test.internal.js     |   3 +-
 .../src/ReactFiberBeginWork.new.js            |   2 +-
 .../src/ReactFiberBeginWork.old.js            |   2 +-
 .../src/__tests__/ReactScope-test.internal.js |   3 +-
 .../useMutableSourceHydration-test.js         | 130 +++++---------
 12 files changed, 146 insertions(+), 250 deletions(-)

diff --git a/fixtures/ssr/src/index.js b/fixtures/ssr/src/index.js
index 0af0c3127aa1d..8bef3639ae754 100644
--- a/fixtures/ssr/src/index.js
+++ b/fixtures/ssr/src/index.js
@@ -1,7 +1,6 @@
 import React from 'react';
-import {createRoot} from 'react-dom';
+import {hydrateRoot} from 'react-dom';
 
 import App from './components/App';
 
-let root = createRoot(document, {hydrate: true});
-root.render(<App assets={window.assetManifest} />);
+let root = hydrateRoot(document, <App assets={window.assetManifest} />);
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index ca592002ad25e..fc8eb68bf5687 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -465,8 +465,7 @@ describe('ReactDOMFizzServer', () => {
     expect(loggedErrors).toEqual([]);
 
     // Attempt to hydrate the content.
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App isClient={true} />);
+    const root = ReactDOM.hydrateRoot(container, <App isClient={true} />);
     Scheduler.unstable_flushAll();
 
     // We're still loading because we're waiting for the server to stream more content.
@@ -629,8 +628,7 @@ describe('ReactDOMFizzServer', () => {
     expect(loggedErrors).toEqual([]);
 
     // Attempt to hydrate the content.
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
+    const root = ReactDOM.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
 
     // We're still loading because we're waiting for the server to stream more content.
@@ -701,8 +699,7 @@ describe('ReactDOMFizzServer', () => {
       pipe(writable);
     });
 
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App showMore={false} />);
+    const root = ReactDOM.hydrateRoot(container, <App showMore={false} />);
     Scheduler.unstable_flushAll();
 
     // We're not hydrated yet.
@@ -769,8 +766,7 @@ describe('ReactDOMFizzServer', () => {
     // We're still showing a fallback.
 
     // Attempt to hydrate the content.
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
+    const root = ReactDOM.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
 
     // We're still loading because we're waiting for the server to stream more content.
@@ -1459,8 +1455,7 @@ describe('ReactDOMFizzServer', () => {
     // We're still showing a fallback.
 
     // Attempt to hydrate the content.
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App isClient={true} />);
+    const root = ReactDOM.hydrateRoot(container, <App isClient={true} />);
     Scheduler.unstable_flushAll();
 
     // We're still loading because we're waiting for the server to stream more content.
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index 780228a4271cb..5f7cc20590b0b 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -155,8 +155,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
+    const root = ReactDOM.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
@@ -383,20 +382,15 @@ describe('ReactDOMServerPartialHydration', () => {
     // hydrating anyway.
     suspend = true;
     suspend2 = true;
-    const root = ReactDOM.createRoot(container, {
-      hydrate: true,
-      hydrationOptions: {
-        onHydrated(node) {
-          hydrated.push(node);
-        },
-        onDeleted(node) {
-          deleted.push(node);
-        },
+    const root = ReactDOM.hydrateRoot(container, <App />, {
+      onHydrated(node) {
+        hydrated.push(node);
+      },
+      onDeleted(node) {
+        deleted.push(node);
       },
     });
-    act(() => {
-      root.render(<App />);
-    });
+    Scheduler.unstable_flushAll();
 
     expect(hydrated.length).toBe(0);
     expect(deleted.length).toBe(0);
@@ -514,17 +508,12 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    const root = ReactDOM.createRoot(container, {
-      hydrate: true,
-      hydrationOptions: {
-        onDeleted(node) {
-          deleted.push(node);
-        },
+    const root = ReactDOM.hydrateRoot(container, <App />, {
+      onDeleted(node) {
+        deleted.push(node);
       },
     });
-    act(() => {
-      root.render(<App />);
-    });
+    Scheduler.unstable_flushAll();
 
     expect(deleted.length).toBe(0);
 
@@ -580,7 +569,7 @@ describe('ReactDOMServerPartialHydration', () => {
     }).toErrorDev(
       'Warning: Cannot hydrate Suspense in legacy mode. Switch from ' +
         'ReactDOM.hydrate(element, container) to ' +
-        'ReactDOM.createRoot(container, { hydrate: true })' +
+        'ReactDOM.hydrateRoot(container, <App />)' +
         '.render(element) or remove the Suspense components from the server ' +
         'rendered components.' +
         '\n    in Suspense (at **)' +
@@ -660,8 +649,7 @@ describe('ReactDOMServerPartialHydration', () => {
     suspend = true;
 
     act(() => {
-      const root = ReactDOM.createRoot(container, {hydrate: true});
-      root.render(<App />);
+      ReactDOM.hydrateRoot(container, <App />);
     });
 
     expect(container.firstChild.firstChild.tagName).not.toBe('DIV');
@@ -717,8 +705,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // hydrating anyway.
     suspend = true;
     act(() => {
-      const root = ReactDOM.createRoot(container, {hydrate: true});
-      root.render(<App />);
+      ReactDOM.hydrateRoot(container, <App />);
     });
 
     expect(container.firstChild.children[1].textContent).toBe('Middle');
@@ -767,8 +754,10 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App text="Hello" className="hello" />);
+    const root = ReactDOM.hydrateRoot(
+      container,
+      <App text="Hello" className="hello" />,
+    );
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
@@ -839,8 +828,10 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App text="Hello" className="hello" />);
+    const root = ReactDOM.hydrateRoot(
+      container,
+      <App text="Hello" className="hello" />,
+    );
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
@@ -910,8 +901,10 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App text="Hello" className="hello" />);
+    const root = ReactDOM.hydrateRoot(
+      container,
+      <App text="Hello" className="hello" />,
+    );
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
@@ -983,8 +976,10 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App text="Hello" className="hello" />);
+    const root = ReactDOM.hydrateRoot(
+      container,
+      <App text="Hello" className="hello" />,
+    );
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
@@ -1055,8 +1050,10 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App text="Hello" className="hello" />);
+    const root = ReactDOM.hydrateRoot(
+      container,
+      <App text="Hello" className="hello" />,
+    );
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
@@ -1126,8 +1123,10 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App text="Hello" className="hello" />);
+    const root = ReactDOM.hydrateRoot(
+      container,
+      <App text="Hello" className="hello" />,
+    );
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
@@ -1206,11 +1205,13 @@ describe('ReactDOMServerPartialHydration', () => {
     const container = document.createElement('div');
     container.innerHTML = finalHTML;
 
-    const root = ReactDOM.createRoot(container, {hydrate: true});
+    const root = ReactDOM.hydrateRoot(
+      container,
+      <App text="Hello" className="hello" />,
+    );
 
     await act(async () => {
       suspend = true;
-      root.render(<App />);
       expect(Scheduler).toFlushAndYieldThrough(['Child']);
 
       // While we're part way through the hydration, we update the state.
@@ -1277,8 +1278,8 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(
+    const root = ReactDOM.hydrateRoot(
+      container,
       <Context.Provider value={{text: 'Hello', className: 'hello'}}>
         <App />
       </Context.Provider>,
@@ -1359,8 +1360,8 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(
+    const root = ReactDOM.hydrateRoot(
+      container,
       <Context.Provider value={{text: 'Hello', className: 'hello'}}>
         <App />
       </Context.Provider>,
@@ -1437,8 +1438,7 @@ describe('ReactDOMServerPartialHydration', () => {
 
     // On the client we have the data available quickly for some reason.
     suspend = false;
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
+    const root = ReactDOM.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
@@ -1493,8 +1493,7 @@ describe('ReactDOMServerPartialHydration', () => {
 
     // On the client we have the data available quickly for some reason.
     suspend = false;
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
+    const root = ReactDOM.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
     // This will have exceeded the suspended time so we should timeout.
     jest.advanceTimersByTime(500);
@@ -1554,8 +1553,7 @@ describe('ReactDOMServerPartialHydration', () => {
 
     // On the client we have the data available quickly for some reason.
     suspend = false;
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
+    const root = ReactDOM.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
     // This will have exceeded the suspended time so we should timeout.
     jest.advanceTimersByTime(500);
@@ -1621,12 +1619,9 @@ describe('ReactDOMServerPartialHydration', () => {
 
     const spanB = container.getElementsByTagName('span')[1];
 
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-
+    const root = ReactDOM.hydrateRoot(container, <App showMore={false} />);
     suspend = true;
-    act(() => {
-      root.render(<App showMore={false} />);
-    });
+    Scheduler.unstable_flushAll();
 
     // We're not hydrated yet.
     expect(ref.current).toBe(null);
@@ -1704,12 +1699,10 @@ describe('ReactDOMServerPartialHydration', () => {
 
     const spanA = container.getElementsByTagName('span')[0];
 
-    const root = ReactDOM.createRoot(container, {hydrate: true});
+    const root = ReactDOM.hydrateRoot(container, <App showMore={false} />);
 
     suspend = true;
-    act(() => {
-      root.render(<App showMore={false} />);
-    });
+    Scheduler.unstable_flushAll();
 
     // We're not hydrated yet.
     expect(ref.current).toBe(null);
@@ -1868,13 +1861,10 @@ describe('ReactDOMServerPartialHydration', () => {
     const container = document.createElement('div');
     container.innerHTML = html;
 
-    const root = ReactDOM.createRoot(container, {hydrate: true});
+    const root = ReactDOM.hydrateRoot(container, <App />);
 
     suspend = true;
-
-    await act(async () => {
-      root.render(<App />);
-    });
+    Scheduler.unstable_flushAll();
 
     // We haven't hydrated the second child but the placeholder is still in the list.
     expect(container.textContent).toBe('ALoading B');
@@ -1929,8 +1919,7 @@ describe('ReactDOMServerPartialHydration', () => {
     const span = container.getElementsByTagName('span')[1];
 
     suspend = false;
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
+    const root = ReactDOM.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
@@ -1972,8 +1961,7 @@ describe('ReactDOMServerPartialHydration', () => {
 
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
+    const root = ReactDOM.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
@@ -2025,8 +2013,8 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(
+    const root = ReactDOM.hydrateRoot(
+      container,
       <ClassName.Provider value={'hello'}>
         <App text="Hello" />
       </ClassName.Provider>,
@@ -2117,8 +2105,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
+    const root = ReactDOM.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
@@ -2205,8 +2192,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // hydrating anyway.
     suspend = true;
     isServerRendering = false;
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
+    const root = ReactDOM.hydrateRoot(container, <App />);
 
     // We'll do one click before hydrating.
     a.click();
@@ -2296,8 +2282,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
+    const root = ReactDOM.hydrateRoot(container, <App />);
 
     // We'll do one click before hydrating.
     await act(async () => {
@@ -2392,8 +2377,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // hydrating anyway.
     suspend = true;
     isServerRendering = false;
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
+    const root = ReactDOM.hydrateRoot(container, <App />);
 
     // We'll do one click before hydrating.
     a.click();
@@ -2480,8 +2464,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
+    const root = ReactDOM.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
@@ -2569,8 +2552,7 @@ describe('ReactDOMServerPartialHydration', () => {
     suspend = true;
 
     // Hydrate asynchronously.
-    const root = ReactDOM.createRoot(childContainer, {hydrate: true});
-    root.render(<App />);
+    const root = ReactDOM.hydrateRoot(childContainer, <App />);
     jest.runAllTimers();
     Scheduler.unstable_flushAll();
 
@@ -2668,8 +2650,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // hydrating anyway.
     suspend1 = true;
     suspend2 = true;
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
+    const root = ReactDOM.hydrateRoot(container, <App />);
 
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
@@ -2755,8 +2736,7 @@ describe('ReactDOMServerPartialHydration', () => {
     container.innerHTML = finalHTML;
 
     suspend = true;
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App showSibling={false} />);
+    const root = ReactDOM.hydrateRoot(container, <App showSibling={false} />);
     expect(Scheduler).toFlushAndYield([]);
 
     expect(ref.current).toBe(null);
@@ -2842,8 +2822,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
+    const root = ReactDOM.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
@@ -2908,8 +2887,8 @@ describe('ReactDOMServerPartialHydration', () => {
     const span = container.getElementsByTagName('span')[0];
     expect(span.innerHTML).toBe('Hidden child');
 
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
+    const root = ReactDOM.hydrateRoot(container, <App />);
+
     Scheduler.unstable_flushAll();
     expect(ref.current).toBe(span);
     expect(span.innerHTML).toBe('Hidden child');
@@ -2937,8 +2916,7 @@ describe('ReactDOMServerPartialHydration', () => {
     const span = container.getElementsByTagName('span')[0];
     expect(span.innerHTML).toBe('Hidden child');
 
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
+    const root = ReactDOM.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
     expect(ref.current).toBe(span);
     expect(span.innerHTML).toBe('Hidden child');
@@ -2963,8 +2941,7 @@ describe('ReactDOMServerPartialHydration', () => {
 
     const span = container.getElementsByTagName('span')[0];
 
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
+    const root = ReactDOM.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
     expect(ref.current).toBe(span);
     expect(ref.current.innerHTML).toBe('Hidden child');
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
index 6c4dafbf5c300..8f9f7a4ac7422 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
@@ -165,8 +165,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     const span = container.getElementsByTagName('span')[1];
 
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
+    const root = ReactDOM.hydrateRoot(container, <App />);
 
     // Nothing has been hydrated so far.
     expect(Scheduler).toHaveYielded([]);
@@ -244,8 +243,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     // A and D will be suspended. We'll click on D which should take
     // priority, after we unsuspend.
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
+    const root = ReactDOM.hydrateRoot(container, <App />);
 
     // Nothing has been hydrated so far.
     expect(Scheduler).toHaveYielded([]);
@@ -343,8 +341,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     // A and D will be suspended. We'll click on D which should take
     // priority, after we unsuspend.
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
+    const root = ReactDOM.hydrateRoot(container, <App />);
 
     // Nothing has been hydrated so far.
     expect(Scheduler).toHaveYielded([]);
@@ -443,9 +440,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     isServerRendering = false;
 
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-
-    root.render(<App />);
+    const root = ReactDOM.hydrateRoot(container, <App />);
 
     // Nothing has been hydrated so far.
     expect(Scheduler).toHaveYielded([]);
@@ -530,8 +525,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     // A and D will be suspended. We'll click on D which should take
     // priority, after we unsuspend.
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
+    const root = ReactDOM.hydrateRoot(container, <App />);
 
     // Nothing has been hydrated so far.
     expect(Scheduler).toHaveYielded([]);
@@ -629,8 +623,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     // A and D will be suspended. We'll click on D which should take
     // priority, after we unsuspend.
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
+    const root = ReactDOM.hydrateRoot(container, <App />);
 
     // Nothing has been hydrated so far.
     expect(Scheduler).toHaveYielded([]);
@@ -739,8 +732,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     // A and D will be suspended. We'll click on D which should take
     // priority, after we unsuspend.
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
+    const root = ReactDOM.hydrateRoot(container, <App />);
 
     // Nothing has been hydrated so far.
     expect(Scheduler).toHaveYielded([]);
@@ -1373,8 +1365,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     // A and D will be suspended. We'll click on D which should take
     // priority, after we unsuspend.
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
+    const root = ReactDOM.hydrateRoot(container, <App />);
 
     // Nothing has been hydrated so far.
     expect(Scheduler).toHaveYielded([]);
@@ -1489,10 +1480,8 @@ describe('ReactDOMServerSelectiveHydration', () => {
     const spanB = container.getElementsByTagName('span')[2];
     const spanC = container.getElementsByTagName('span')[4];
 
-    const root = ReactDOM.createRoot(container, {hydrate: true});
     act(() => {
-      root.render(<App a="A" />);
-
+      const root = ReactDOM.hydrateRoot(container, <App a="A" />);
       // Hydrate the shell.
       expect(Scheduler).toFlushAndYieldThrough(['App', 'Commit']);
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
index c2eb630e52acd..327b83b940235 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
@@ -163,8 +163,7 @@ describe('ReactDOMServerSuspense', () => {
     expect(divB.textContent).toBe('B');
 
     act(() => {
-      const root = ReactDOM.createRoot(parent, {hydrate: true});
-      root.render(example);
+      ReactDOM.hydrateRoot(parent, example);
     });
 
     const parent2 = element.parentNode;
diff --git a/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js b/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
index 6e2ec3150d7f7..0069946767252 100644
--- a/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
+++ b/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
@@ -403,8 +403,7 @@ describe('ReactDOMServerHydration', () => {
     const finalHTML = ReactDOMServer.renderToString(<div />);
     const container = document.createElement('div');
     container.innerHTML = finalHTML;
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<div />);
+    const root = ReactDOM.hydrateRoot(container, <div />);
     Scheduler.unstable_flushAll();
     root.render(null);
     Scheduler.unstable_flushAll();
diff --git a/packages/react-dom/src/client/ReactDOMRoot.js b/packages/react-dom/src/client/ReactDOMRoot.js
index 3c49a15fc14dc..a6c4fa0293301 100644
--- a/packages/react-dom/src/client/ReactDOMRoot.js
+++ b/packages/react-dom/src/client/ReactDOMRoot.js
@@ -21,14 +21,6 @@ export type RootType = {
 };
 
 export type CreateRootOptions = {
-  // TODO: Remove these options.
-  hydrate?: boolean,
-  hydrationOptions?: {
-    onHydrated?: (suspenseNode: Comment) => void,
-    onDeleted?: (suspenseNode: Comment) => void,
-    mutableSources?: Array<MutableSource<any>>,
-    ...
-  },
   // END OF TODO
   unstable_strictMode?: boolean,
   unstable_concurrentUpdatesByDefault?: boolean,
@@ -149,17 +141,6 @@ export function createRoot(
 
   warnIfReactDOMContainerInDEV(container);
 
-  // TODO: Delete these options
-  const hydrate = options != null && options.hydrate === true;
-  const hydrationCallbacks =
-    (options != null && options.hydrationOptions) || null;
-  const mutableSources =
-    (options != null &&
-      options.hydrationOptions != null &&
-      options.hydrationOptions.mutableSources) ||
-    null;
-  // END TODO
-
   let isStrictMode = false;
   let concurrentUpdatesByDefaultOverride = false;
   let identifierPrefix = '';
@@ -181,8 +162,8 @@ export function createRoot(
   const root = createContainer(
     container,
     ConcurrentRoot,
-    hydrate,
-    hydrationCallbacks,
+    false,
+    null,
     isStrictMode,
     concurrentUpdatesByDefaultOverride,
     identifierPrefix,
@@ -193,15 +174,6 @@ export function createRoot(
     container.nodeType === COMMENT_NODE ? container.parentNode : container;
   listenToAllSupportedEvents(rootContainerElement);
 
-  // TODO: Delete this path
-  if (mutableSources) {
-    for (let i = 0; i < mutableSources.length; i++) {
-      const mutableSource = mutableSources[i];
-      registerMutableSourceForHydration(root, mutableSource);
-    }
-  }
-  // END TODO
-
   return new ReactDOMRoot(root);
 }
 
diff --git a/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js b/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
index 1b2bfbb0bef4d..e49961ea8fa4a 100644
--- a/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
+++ b/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
@@ -629,8 +629,7 @@ describe('DOMPluginEventSystem', () => {
           suspend = true;
 
           // Hydrate asynchronously.
-          const root = ReactDOM.createRoot(childContainer, {hydrate: true});
-          root.render(<App />);
+          const root = ReactDOM.hydrateRoot(childContainer, <App />);
           jest.runAllTimers();
           Scheduler.unstable_flushAll();
 
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index d66bba0dc2ee3..02b2ec1a45f68 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -2586,7 +2586,7 @@ function mountDehydratedSuspenseComponent(
       console.error(
         'Cannot hydrate Suspense in legacy mode. Switch from ' +
           'ReactDOM.hydrate(element, container) to ' +
-          'ReactDOM.createRoot(container, { hydrate: true })' +
+          'ReactDOM.hydrateRoot(container, <App />)' +
           '.render(element) or remove the Suspense components from ' +
           'the server rendered components.',
       );
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 62d51046b3c46..8733ab0a4e51f 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -2586,7 +2586,7 @@ function mountDehydratedSuspenseComponent(
       console.error(
         'Cannot hydrate Suspense in legacy mode. Switch from ' +
           'ReactDOM.hydrate(element, container) to ' +
-          'ReactDOM.createRoot(container, { hydrate: true })' +
+          'ReactDOM.hydrateRoot(container, <App />)' +
           '.render(element) or remove the Suspense components from ' +
           'the server rendered components.',
       );
diff --git a/packages/react-reconciler/src/__tests__/ReactScope-test.internal.js b/packages/react-reconciler/src/__tests__/ReactScope-test.internal.js
index dedc8146d8082..2bcadfbed0256 100644
--- a/packages/react-reconciler/src/__tests__/ReactScope-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactScope-test.internal.js
@@ -312,8 +312,7 @@ describe('ReactScope', () => {
       // On the client we don't have all data yet but we want to start
       // hydrating anyway.
       suspend = true;
-      const root = ReactDOM.createRoot(container2, {hydrate: true});
-      root.render(<App />);
+      const root = ReactDOM.hydrateRoot(container2, <App />);
       Scheduler.unstable_flushAll();
       jest.runAllTimers();
 
diff --git a/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js b/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
index 61ebbe45e90c1..27304a72a7b30 100644
--- a/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
+++ b/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
@@ -168,14 +168,10 @@ describe('useMutableSourceHydration', () => {
     expect(Scheduler).toHaveYielded(['only:one']);
     expect(source.listenerCount).toBe(0);
 
-    const root = ReactDOM.createRoot(container, {
-      hydrate: true,
-      hydrationOptions: {
-        mutableSources: [mutableSource],
-      },
-    });
     act(() => {
-      root.render(<TestComponent />);
+      ReactDOM.hydrateRoot(container, <TestComponent />, {
+        mutableSources: [mutableSource],
+      });
     });
     expect(Scheduler).toHaveYielded(['only:one']);
     expect(source.listenerCount).toBe(1);
@@ -205,22 +201,16 @@ describe('useMutableSourceHydration', () => {
     expect(Scheduler).toHaveYielded(['only:one']);
     expect(source.listenerCount).toBe(0);
 
-    const root = ReactDOM.createRoot(container, {
-      hydrate: true,
-      hydrationOptions: {
-        mutableSources: [mutableSource],
-      },
-    });
     expect(() => {
       act(() => {
-        root.render(<TestComponent />);
+        ReactDOM.hydrateRoot(container, <TestComponent />, {
+          mutableSources: [mutableSource],
+        });
 
         source.value = 'two';
       });
     }).toErrorDev(
-      'Warning: An error occurred during hydration. ' +
-        'The server HTML was replaced with client content in <div>.',
-      {withoutStack: true},
+      'Warning: Text content did not match. Server: "only:one" Client: "only:two"',
     );
     expect(Scheduler).toHaveYielded(['only:two']);
     expect(source.listenerCount).toBe(1);
@@ -258,20 +248,18 @@ describe('useMutableSourceHydration', () => {
     expect(Scheduler).toHaveYielded(['a:one', 'b:one']);
     expect(source.listenerCount).toBe(0);
 
-    const root = ReactDOM.createRoot(container, {
-      hydrate: true,
-      hydrationOptions: {
-        mutableSources: [mutableSource],
-      },
-    });
     expect(() => {
       act(() => {
         if (gate(flags => flags.enableSyncDefaultUpdates)) {
           React.startTransition(() => {
-            root.render(<TestComponent />);
+            ReactDOM.hydrateRoot(container, <TestComponent />, {
+              mutableSources: [mutableSource],
+            });
           });
         } else {
-          root.render(<TestComponent />);
+          ReactDOM.hydrateRoot(container, <TestComponent />, {
+            mutableSources: [mutableSource],
+          });
         }
         expect(Scheduler).toFlushAndYieldThrough(['a:one']);
         source.value = 'two';
@@ -318,50 +306,34 @@ describe('useMutableSourceHydration', () => {
     container.innerHTML = htmlString;
     expect(Scheduler).toHaveYielded(['0:a:one', '1:b:one']);
 
-    const root = ReactDOM.createRoot(container, {
-      hydrate: true,
-      hydrationOptions: {
-        mutableSources: [mutableSource],
-      },
-    });
     expect(() => {
       act(() => {
+        const fragment = (
+          <>
+            <Component
+              label="0"
+              getSnapshot={getSnapshotA}
+              mutableSource={mutableSource}
+              subscribe={subscribeA}
+            />
+            <Component
+              label="1"
+              getSnapshot={getSnapshotB}
+              mutableSource={mutableSource}
+              subscribe={subscribeB}
+            />
+          </>
+        );
         if (gate(flags => flags.enableSyncDefaultUpdates)) {
           React.startTransition(() => {
-            root.render(
-              <>
-                <Component
-                  label="0"
-                  getSnapshot={getSnapshotA}
-                  mutableSource={mutableSource}
-                  subscribe={subscribeA}
-                />
-                <Component
-                  label="1"
-                  getSnapshot={getSnapshotB}
-                  mutableSource={mutableSource}
-                  subscribe={subscribeB}
-                />
-              </>,
-            );
+            ReactDOM.hydrateRoot(container, fragment, {
+              mutableSources: [mutableSource],
+            });
           });
         } else {
-          root.render(
-            <>
-              <Component
-                label="0"
-                getSnapshot={getSnapshotA}
-                mutableSource={mutableSource}
-                subscribe={subscribeA}
-              />
-              <Component
-                label="1"
-                getSnapshot={getSnapshotB}
-                mutableSource={mutableSource}
-                subscribe={subscribeB}
-              />
-            </>,
-          );
+          ReactDOM.hydrateRoot(container, fragment, {
+            mutableSources: [mutableSource],
+          });
         }
         expect(Scheduler).toFlushAndYieldThrough(['0:a:one']);
         source.valueB = 'b:two';
@@ -409,21 +381,19 @@ describe('useMutableSourceHydration', () => {
     expect(Scheduler).toHaveYielded([1, 'a:one']);
     expect(source.listenerCount).toBe(0);
 
-    const root = ReactDOM.createRoot(container, {
-      hydrate: true,
-      hydrationOptions: {
-        mutableSources: [mutableSource],
-      },
-    });
-
     expect(() => {
       act(() => {
+        let root;
         if (gate(flags => flags.enableSyncDefaultUpdates)) {
           React.startTransition(() => {
-            root.render(<TestComponent flag={1} />);
+            root = ReactDOM.hydrateRoot(container, <TestComponent flag={1} />, {
+              mutableSources: [mutableSource],
+            });
           });
         } else {
-          root.render(<TestComponent flag={1} />);
+          root = ReactDOM.hydrateRoot(container, <TestComponent flag={1} />, {
+            mutableSources: [mutableSource],
+          });
         }
         expect(Scheduler).toFlushAndYieldThrough([1]);
 
@@ -438,19 +408,17 @@ describe('useMutableSourceHydration', () => {
         dispatchAndSetCurrentEvent(arbitraryElement, mouseOverEvent);
 
         expect(Scheduler).toFlushAndYieldThrough([2]);
-
         source.value = 'two';
       });
     }).toErrorDev(
-      [
-        'Warning: An error occurred during hydration. ' +
-          'The server HTML was replaced with client content in <div>.',
-
-        'Warning: Text content did not match. Server: "1" Client: "2"',
-      ],
-      {withoutStack: 1},
+      'Warning: Text content did not match. Server: "1" Client: "2"',
     );
-    expect(Scheduler).toHaveYielded([2, 'a:two']);
     expect(source.listenerCount).toBe(1);
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      expect(Scheduler).toHaveYielded([2, 'a:two']);
+    } else {
+      // Not sure about this...
+      expect(Scheduler).toHaveYielded(['a:two']);
+    }
   });
 });

From bc45c24d8c0ad3c517ae30a0554831c6c0982569 Mon Sep 17 00:00:00 2001
From: Marco Salazar <salazarm@fb.com>
Date: Tue, 7 Dec 2021 15:22:36 -0500
Subject: [PATCH 2/5] remove missed comment

---
 packages/react-dom/src/client/ReactDOMRoot.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react-dom/src/client/ReactDOMRoot.js b/packages/react-dom/src/client/ReactDOMRoot.js
index a6c4fa0293301..6e44db326a98d 100644
--- a/packages/react-dom/src/client/ReactDOMRoot.js
+++ b/packages/react-dom/src/client/ReactDOMRoot.js
@@ -21,7 +21,6 @@ export type RootType = {
 };
 
 export type CreateRootOptions = {
-  // END OF TODO
   unstable_strictMode?: boolean,
   unstable_concurrentUpdatesByDefault?: boolean,
   identifierPrefix?: string,

From ff40073017ea3424257b7c1b4c53096a968c0e0f Mon Sep 17 00:00:00 2001
From: Marco Salazar <salazarm@fb.com>
Date: Tue, 7 Dec 2021 15:35:09 -0500
Subject: [PATCH 3/5] lint

---
 .../src/__tests__/ReactDOMFizzServer-test.js  |  8 ++--
 ...DOMServerPartialHydration-test.internal.js | 41 +++++++++----------
 ...MServerSelectiveHydration-test.internal.js | 16 ++++----
 .../DOMPluginEventSystem-test.internal.js     |  2 +-
 .../src/__tests__/ReactScope-test.internal.js |  2 +-
 .../useMutableSourceHydration-test.js         |  1 -
 6 files changed, 33 insertions(+), 37 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index fc8eb68bf5687..d8db609f3f2cf 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -465,7 +465,7 @@ describe('ReactDOMFizzServer', () => {
     expect(loggedErrors).toEqual([]);
 
     // Attempt to hydrate the content.
-    const root = ReactDOM.hydrateRoot(container, <App isClient={true} />);
+    ReactDOM.hydrateRoot(container, <App isClient={true} />);
     Scheduler.unstable_flushAll();
 
     // We're still loading because we're waiting for the server to stream more content.
@@ -628,7 +628,7 @@ describe('ReactDOMFizzServer', () => {
     expect(loggedErrors).toEqual([]);
 
     // Attempt to hydrate the content.
-    const root = ReactDOM.hydrateRoot(container, <App />);
+    ReactDOM.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
 
     // We're still loading because we're waiting for the server to stream more content.
@@ -766,7 +766,7 @@ describe('ReactDOMFizzServer', () => {
     // We're still showing a fallback.
 
     // Attempt to hydrate the content.
-    const root = ReactDOM.hydrateRoot(container, <App />);
+    ReactDOM.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
 
     // We're still loading because we're waiting for the server to stream more content.
@@ -1455,7 +1455,7 @@ describe('ReactDOMFizzServer', () => {
     // We're still showing a fallback.
 
     // Attempt to hydrate the content.
-    const root = ReactDOM.hydrateRoot(container, <App isClient={true} />);
+    ReactDOM.hydrateRoot(container, <App isClient={true} />);
     Scheduler.unstable_flushAll();
 
     // We're still loading because we're waiting for the server to stream more content.
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index 5f7cc20590b0b..1c65501f7b382 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -155,7 +155,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    const root = ReactDOM.hydrateRoot(container, <App />);
+    ReactDOM.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
@@ -1205,10 +1205,7 @@ describe('ReactDOMServerPartialHydration', () => {
     const container = document.createElement('div');
     container.innerHTML = finalHTML;
 
-    const root = ReactDOM.hydrateRoot(
-      container,
-      <App text="Hello" className="hello" />,
-    );
+    ReactDOM.hydrateRoot(container, <App text="Hello" className="hello" />);
 
     await act(async () => {
       suspend = true;
@@ -1438,7 +1435,7 @@ describe('ReactDOMServerPartialHydration', () => {
 
     // On the client we have the data available quickly for some reason.
     suspend = false;
-    const root = ReactDOM.hydrateRoot(container, <App />);
+    ReactDOM.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
@@ -1493,7 +1490,7 @@ describe('ReactDOMServerPartialHydration', () => {
 
     // On the client we have the data available quickly for some reason.
     suspend = false;
-    const root = ReactDOM.hydrateRoot(container, <App />);
+    ReactDOM.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
     // This will have exceeded the suspended time so we should timeout.
     jest.advanceTimersByTime(500);
@@ -1553,7 +1550,7 @@ describe('ReactDOMServerPartialHydration', () => {
 
     // On the client we have the data available quickly for some reason.
     suspend = false;
-    const root = ReactDOM.hydrateRoot(container, <App />);
+    ReactDOM.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
     // This will have exceeded the suspended time so we should timeout.
     jest.advanceTimersByTime(500);
@@ -1861,7 +1858,7 @@ describe('ReactDOMServerPartialHydration', () => {
     const container = document.createElement('div');
     container.innerHTML = html;
 
-    const root = ReactDOM.hydrateRoot(container, <App />);
+    ReactDOM.hydrateRoot(container, <App />);
 
     suspend = true;
     Scheduler.unstable_flushAll();
@@ -1919,7 +1916,7 @@ describe('ReactDOMServerPartialHydration', () => {
     const span = container.getElementsByTagName('span')[1];
 
     suspend = false;
-    const root = ReactDOM.hydrateRoot(container, <App />);
+    ReactDOM.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
@@ -1961,7 +1958,7 @@ describe('ReactDOMServerPartialHydration', () => {
 
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
-    const root = ReactDOM.hydrateRoot(container, <App />);
+    ReactDOM.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
@@ -2105,7 +2102,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    const root = ReactDOM.hydrateRoot(container, <App />);
+    ReactDOM.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
@@ -2192,7 +2189,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // hydrating anyway.
     suspend = true;
     isServerRendering = false;
-    const root = ReactDOM.hydrateRoot(container, <App />);
+    ReactDOM.hydrateRoot(container, <App />);
 
     // We'll do one click before hydrating.
     a.click();
@@ -2282,7 +2279,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    const root = ReactDOM.hydrateRoot(container, <App />);
+    ReactDOM.hydrateRoot(container, <App />);
 
     // We'll do one click before hydrating.
     await act(async () => {
@@ -2377,7 +2374,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // hydrating anyway.
     suspend = true;
     isServerRendering = false;
-    const root = ReactDOM.hydrateRoot(container, <App />);
+    ReactDOM.hydrateRoot(container, <App />);
 
     // We'll do one click before hydrating.
     a.click();
@@ -2464,7 +2461,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    const root = ReactDOM.hydrateRoot(container, <App />);
+    ReactDOM.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
@@ -2552,7 +2549,7 @@ describe('ReactDOMServerPartialHydration', () => {
     suspend = true;
 
     // Hydrate asynchronously.
-    const root = ReactDOM.hydrateRoot(childContainer, <App />);
+    ReactDOM.hydrateRoot(childContainer, <App />);
     jest.runAllTimers();
     Scheduler.unstable_flushAll();
 
@@ -2650,7 +2647,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // hydrating anyway.
     suspend1 = true;
     suspend2 = true;
-    const root = ReactDOM.hydrateRoot(container, <App />);
+    ReactDOM.hydrateRoot(container, <App />);
 
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
@@ -2822,7 +2819,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    const root = ReactDOM.hydrateRoot(container, <App />);
+    ReactDOM.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
@@ -2887,7 +2884,7 @@ describe('ReactDOMServerPartialHydration', () => {
     const span = container.getElementsByTagName('span')[0];
     expect(span.innerHTML).toBe('Hidden child');
 
-    const root = ReactDOM.hydrateRoot(container, <App />);
+    ReactDOM.hydrateRoot(container, <App />);
 
     Scheduler.unstable_flushAll();
     expect(ref.current).toBe(span);
@@ -2916,7 +2913,7 @@ describe('ReactDOMServerPartialHydration', () => {
     const span = container.getElementsByTagName('span')[0];
     expect(span.innerHTML).toBe('Hidden child');
 
-    const root = ReactDOM.hydrateRoot(container, <App />);
+    ReactDOM.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
     expect(ref.current).toBe(span);
     expect(span.innerHTML).toBe('Hidden child');
@@ -2941,7 +2938,7 @@ describe('ReactDOMServerPartialHydration', () => {
 
     const span = container.getElementsByTagName('span')[0];
 
-    const root = ReactDOM.hydrateRoot(container, <App />);
+    ReactDOM.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
     expect(ref.current).toBe(span);
     expect(ref.current.innerHTML).toBe('Hidden child');
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
index 8f9f7a4ac7422..435e90d9b1820 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
@@ -165,7 +165,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     const span = container.getElementsByTagName('span')[1];
 
-    const root = ReactDOM.hydrateRoot(container, <App />);
+    ReactDOM.hydrateRoot(container, <App />);
 
     // Nothing has been hydrated so far.
     expect(Scheduler).toHaveYielded([]);
@@ -243,7 +243,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     // A and D will be suspended. We'll click on D which should take
     // priority, after we unsuspend.
-    const root = ReactDOM.hydrateRoot(container, <App />);
+    ReactDOM.hydrateRoot(container, <App />);
 
     // Nothing has been hydrated so far.
     expect(Scheduler).toHaveYielded([]);
@@ -341,7 +341,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     // A and D will be suspended. We'll click on D which should take
     // priority, after we unsuspend.
-    const root = ReactDOM.hydrateRoot(container, <App />);
+    ReactDOM.hydrateRoot(container, <App />);
 
     // Nothing has been hydrated so far.
     expect(Scheduler).toHaveYielded([]);
@@ -440,7 +440,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     isServerRendering = false;
 
-    const root = ReactDOM.hydrateRoot(container, <App />);
+    ReactDOM.hydrateRoot(container, <App />);
 
     // Nothing has been hydrated so far.
     expect(Scheduler).toHaveYielded([]);
@@ -525,7 +525,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     // A and D will be suspended. We'll click on D which should take
     // priority, after we unsuspend.
-    const root = ReactDOM.hydrateRoot(container, <App />);
+    ReactDOM.hydrateRoot(container, <App />);
 
     // Nothing has been hydrated so far.
     expect(Scheduler).toHaveYielded([]);
@@ -623,7 +623,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     // A and D will be suspended. We'll click on D which should take
     // priority, after we unsuspend.
-    const root = ReactDOM.hydrateRoot(container, <App />);
+    ReactDOM.hydrateRoot(container, <App />);
 
     // Nothing has been hydrated so far.
     expect(Scheduler).toHaveYielded([]);
@@ -732,7 +732,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     // A and D will be suspended. We'll click on D which should take
     // priority, after we unsuspend.
-    const root = ReactDOM.hydrateRoot(container, <App />);
+    ReactDOM.hydrateRoot(container, <App />);
 
     // Nothing has been hydrated so far.
     expect(Scheduler).toHaveYielded([]);
@@ -1365,7 +1365,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     // A and D will be suspended. We'll click on D which should take
     // priority, after we unsuspend.
-    const root = ReactDOM.hydrateRoot(container, <App />);
+    ReactDOM.hydrateRoot(container, <App />);
 
     // Nothing has been hydrated so far.
     expect(Scheduler).toHaveYielded([]);
diff --git a/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js b/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
index e49961ea8fa4a..248c07020e551 100644
--- a/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
+++ b/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
@@ -629,7 +629,7 @@ describe('DOMPluginEventSystem', () => {
           suspend = true;
 
           // Hydrate asynchronously.
-          const root = ReactDOM.hydrateRoot(childContainer, <App />);
+          ReactDOM.hydrateRoot(childContainer, <App />);
           jest.runAllTimers();
           Scheduler.unstable_flushAll();
 
diff --git a/packages/react-reconciler/src/__tests__/ReactScope-test.internal.js b/packages/react-reconciler/src/__tests__/ReactScope-test.internal.js
index 2bcadfbed0256..9dd7d85b5b40d 100644
--- a/packages/react-reconciler/src/__tests__/ReactScope-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactScope-test.internal.js
@@ -312,7 +312,7 @@ describe('ReactScope', () => {
       // On the client we don't have all data yet but we want to start
       // hydrating anyway.
       suspend = true;
-      const root = ReactDOM.hydrateRoot(container2, <App />);
+      ReactDOM.hydrateRoot(container2, <App />);
       Scheduler.unstable_flushAll();
       jest.runAllTimers();
 
diff --git a/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js b/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
index 27304a72a7b30..4c13ef7c35dfa 100644
--- a/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
+++ b/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
@@ -417,7 +417,6 @@ describe('useMutableSourceHydration', () => {
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
       expect(Scheduler).toHaveYielded([2, 'a:two']);
     } else {
-      // Not sure about this...
       expect(Scheduler).toHaveYielded(['a:two']);
     }
   });

From ea169ca3371db26cccbeb220db43cdb00f2630fe Mon Sep 17 00:00:00 2001
From: salazarm <salazarm@users.noreply.github.com>
Date: Tue, 7 Dec 2021 15:50:41 -0500
Subject: [PATCH 4/5] warning

---
 packages/react-dom/src/client/ReactDOMRoot.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/react-dom/src/client/ReactDOMRoot.js b/packages/react-dom/src/client/ReactDOMRoot.js
index 6e44db326a98d..ba6b28572b564 100644
--- a/packages/react-dom/src/client/ReactDOMRoot.js
+++ b/packages/react-dom/src/client/ReactDOMRoot.js
@@ -144,6 +144,13 @@ export function createRoot(
   let concurrentUpdatesByDefaultOverride = false;
   let identifierPrefix = '';
   if (options !== null && options !== undefined) {
+    if (__DEV__) {
+      if (options.hydrate) {
+        console.warn(
+          'hydrate through createRoot is deprecated. Use ReactDOM.hydrateRoot(container, <App />) instead.',
+        );
+      }
+    }
     if (options.unstable_strictMode === true) {
       isStrictMode = true;
     }

From 7eb0abae2f06f34461b96c8f1ad6773bc5285cfd Mon Sep 17 00:00:00 2001
From: salazarm <salazarm@users.noreply.github.com>
Date: Tue, 7 Dec 2021 15:58:05 -0500
Subject: [PATCH 5/5] circumvent flow

---
 packages/react-dom/src/client/ReactDOMRoot.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-dom/src/client/ReactDOMRoot.js b/packages/react-dom/src/client/ReactDOMRoot.js
index ba6b28572b564..800eeba0d018d 100644
--- a/packages/react-dom/src/client/ReactDOMRoot.js
+++ b/packages/react-dom/src/client/ReactDOMRoot.js
@@ -145,7 +145,7 @@ export function createRoot(
   let identifierPrefix = '';
   if (options !== null && options !== undefined) {
     if (__DEV__) {
-      if (options.hydrate) {
+      if ((options: any).hydrate) {
         console.warn(
           'hydrate through createRoot is deprecated. Use ReactDOM.hydrateRoot(container, <App />) instead.',
         );