{"patch":"diff --git a\/fixtures\/ssr\/src\/index.js b\/fixtures\/ssr\/src\/index.js\nindex 0af0c3127a..8bef3639ae 100644\n--- a\/fixtures\/ssr\/src\/index.js\n+++ b\/fixtures\/ssr\/src\/index.js\n@@ -1,7 +1,6 @@\n import React from 'react';\n-import {createRoot} from 'react-dom';\n+import {hydrateRoot} from 'react-dom';\n \n import App from '.\/components\/App';\n \n-let root = createRoot(document, {hydrate: true});\n-root.render();\n+let root = hydrateRoot(document, );\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js\nindex ca592002ad..d8db609f3f 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js\n@@ -465,8 +465,7 @@ describe('ReactDOMFizzServer', () => {\n expect(loggedErrors).toEqual([]);\n \n \/\/ Attempt to hydrate the content.\n- const root = ReactDOM.createRoot(container, {hydrate: true});\n- root.render();\n+ ReactDOM.hydrateRoot(container, );\n Scheduler.unstable_flushAll();\n \n \/\/ We're still loading because we're waiting for the server to stream more content.\n@@ -629,8 +628,7 @@ describe('ReactDOMFizzServer', () => {\n expect(loggedErrors).toEqual([]);\n \n \/\/ Attempt to hydrate the content.\n- const root = ReactDOM.createRoot(container, {hydrate: true});\n- root.render();\n+ ReactDOM.hydrateRoot(container, );\n Scheduler.unstable_flushAll();\n \n \/\/ We're still loading because we're waiting for the server to stream more content.\n@@ -701,8 +699,7 @@ describe('ReactDOMFizzServer', () => {\n pipe(writable);\n });\n \n- const root = ReactDOM.createRoot(container, {hydrate: true});\n- root.render();\n+ const root = ReactDOM.hydrateRoot(container, );\n Scheduler.unstable_flushAll();\n \n \/\/ We're not hydrated yet.\n@@ -769,8 +766,7 @@ describe('ReactDOMFizzServer', () => {\n \/\/ We're still showing a fallback.\n \n \/\/ Attempt to hydrate the content.\n- const root = ReactDOM.createRoot(container, {hydrate: true});\n- root.render();\n+ ReactDOM.hydrateRoot(container, );\n Scheduler.unstable_flushAll();\n \n \/\/ We're still loading because we're waiting for the server to stream more content.\n@@ -1459,8 +1455,7 @@ describe('ReactDOMFizzServer', () => {\n \/\/ We're still showing a fallback.\n \n \/\/ Attempt to hydrate the content.\n- const root = ReactDOM.createRoot(container, {hydrate: true});\n- root.render();\n+ ReactDOM.hydrateRoot(container, );\n Scheduler.unstable_flushAll();\n \n \/\/ We're still loading because we're waiting for the server to stream more content.\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerPartialHydration-test.internal.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerPartialHydration-test.internal.js\nindex 780228a427..1c65501f7b 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerPartialHydration-test.internal.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerPartialHydration-test.internal.js\n@@ -155,8 +155,7 @@ describe('ReactDOMServerPartialHydration', () => {\n \/\/ On the client we don't have all data yet but we want to start\n \/\/ hydrating anyway.\n suspend = true;\n- const root = ReactDOM.createRoot(container, {hydrate: true});\n- root.render();\n+ ReactDOM.hydrateRoot(container, );\n Scheduler.unstable_flushAll();\n jest.runAllTimers();\n \n@@ -383,20 +382,15 @@ describe('ReactDOMServerPartialHydration', () => {\n \/\/ hydrating anyway.\n suspend = true;\n suspend2 = true;\n- const root = ReactDOM.createRoot(container, {\n- hydrate: true,\n- hydrationOptions: {\n- onHydrated(node) {\n- hydrated.push(node);\n- },\n- onDeleted(node) {\n- deleted.push(node);\n- },\n+ const root = ReactDOM.hydrateRoot(container, , {\n+ onHydrated(node) {\n+ hydrated.push(node);\n+ },\n+ onDeleted(node) {\n+ deleted.push(node);\n },\n });\n- act(() => {\n- root.render();\n- });\n+ Scheduler.unstable_flushAll();\n \n expect(hydrated.length).toBe(0);\n expect(deleted.length).toBe(0);\n@@ -514,17 +508,12 @@ describe('ReactDOMServerPartialHydration', () => {\n \/\/ On the client we don't have all data yet but we want to start\n \/\/ hydrating anyway.\n suspend = true;\n- const root = ReactDOM.createRoot(container, {\n- hydrate: true,\n- hydrationOptions: {\n- onDeleted(node) {\n- deleted.push(node);\n- },\n+ const root = ReactDOM.hydrateRoot(container, , {\n+ onDeleted(node) {\n+ deleted.push(node);\n },\n });\n- act(() => {\n- root.render();\n- });\n+ Scheduler.unstable_flushAll();\n \n expect(deleted.length).toBe(0);\n \n@@ -580,7 +569,7 @@ describe('ReactDOMServerPartialHydration', () => {\n }).toErrorDev(\n 'Warning: Cannot hydrate Suspense in legacy mode. Switch from ' +\n 'ReactDOM.hydrate(element, container) to ' +\n- 'ReactDOM.createRoot(container, { hydrate: true })' +\n+ 'ReactDOM.hydrateRoot(container, )' +\n '.render(element) or remove the Suspense components from the server ' +\n 'rendered components.' +\n '\\n in Suspense (at **)' +\n@@ -660,8 +649,7 @@ describe('ReactDOMServerPartialHydration', () => {\n suspend = true;\n \n act(() => {\n- const root = ReactDOM.createRoot(container, {hydrate: true});\n- root.render();\n+ ReactDOM.hydrateRoot(container, );\n });\n \n expect(container.firstChild.firstChild.tagName).not.toBe('DIV');\n@@ -717,8 +705,7 @@ describe('ReactDOMServerPartialHydration', () => {\n \/\/ hydrating anyway.\n suspend = true;\n act(() => {\n- const root = ReactDOM.createRoot(container, {hydrate: true});\n- root.render();\n+ ReactDOM.hydrateRoot(container, );\n });\n \n expect(container.firstChild.children[1].textContent).toBe('Middle');\n@@ -767,8 +754,10 @@ describe('ReactDOMServerPartialHydration', () => {\n \/\/ On the client we don't have all data yet but we want to start\n \/\/ hydrating anyway.\n suspend = true;\n- const root = ReactDOM.createRoot(container, {hydrate: true});\n- root.render();\n+ const root = ReactDOM.hydrateRoot(\n+ container,\n+ ,\n+ );\n Scheduler.unstable_flushAll();\n jest.runAllTimers();\n \n@@ -839,8 +828,10 @@ describe('ReactDOMServerPartialHydration', () => {\n \/\/ On the client we don't have all data yet but we want to start\n \/\/ hydrating anyway.\n suspend = true;\n- const root = ReactDOM.createRoot(container, {hydrate: true});\n- root.render();\n+ const root = ReactDOM.hydrateRoot(\n+ container,\n+ ,\n+ );\n Scheduler.unstable_flushAll();\n jest.runAllTimers();\n \n@@ -910,8 +901,10 @@ describe('ReactDOMServerPartialHydration', () => {\n \/\/ On the client we don't have all data yet but we want to start\n \/\/ hydrating anyway.\n suspend = true;\n- const root = ReactDOM.createRoot(container, {hydrate: true});\n- root.render();\n+ const root = ReactDOM.hydrateRoot(\n+ container,\n+ ,\n+ );\n Scheduler.unstable_flushAll();\n jest.runAllTimers();\n \n@@ -983,8 +976,10 @@ describe('ReactDOMServerPartialHydration', () => {\n \/\/ On the client we don't have all data yet but we want to start\n \/\/ hydrating anyway.\n suspend = true;\n- const root = ReactDOM.createRoot(container, {hydrate: true});\n- root.render();\n+ const root = ReactDOM.hydrateRoot(\n+ container,\n+ ,\n+ );\n Scheduler.unstable_flushAll();\n jest.runAllTimers();\n \n@@ -1055,8 +1050,10 @@ describe('ReactDOMServerPartialHydration', () => {\n \/\/ On the client we don't have all data yet but we want to start\n \/\/ hydrating anyway.\n suspend = true;\n- const root = ReactDOM.createRoot(container, {hydrate: true});\n- root.render();\n+ const root = ReactDOM.hydrateRoot(\n+ container,\n+ ,\n+ );\n Scheduler.unstable_flushAll();\n jest.runAllTimers();\n \n@@ -1126,8 +1123,10 @@ describe('ReactDOMServerPartialHydration', () => {\n \/\/ On the client we don't have all data yet but we want to start\n \/\/ hydrating anyway.\n suspend = true;\n- const root = ReactDOM.createRoot(container, {hydrate: true});\n- root.render();\n+ const root = ReactDOM.hydrateRoot(\n+ container,\n+ ,\n+ );\n Scheduler.unstable_flushAll();\n jest.runAllTimers();\n \n@@ -1206,11 +1205,10 @@ describe('ReactDOMServerPartialHydration', () => {\n const container = document.createElement('div');\n container.innerHTML = finalHTML;\n \n- const root = ReactDOM.createRoot(container, {hydrate: true});\n+ ReactDOM.hydrateRoot(container, );\n \n await act(async () => {\n suspend = true;\n- root.render();\n expect(Scheduler).toFlushAndYieldThrough(['Child']);\n \n \/\/ While we're part way through the hydration, we update the state.\n@@ -1277,8 +1275,8 @@ describe('ReactDOMServerPartialHydration', () => {\n \/\/ On the client we don't have all data yet but we want to start\n \/\/ hydrating anyway.\n suspend = true;\n- const root = ReactDOM.createRoot(container, {hydrate: true});\n- root.render(\n+ const root = ReactDOM.hydrateRoot(\n+ container,\n \n \n <\/Context.Provider>,\n@@ -1359,8 +1357,8 @@ describe('ReactDOMServerPartialHydration', () => {\n \/\/ On the client we don't have all data yet but we want to start\n \/\/ hydrating anyway.\n suspend = true;\n- const root = ReactDOM.createRoot(container, {hydrate: true});\n- root.render(\n+ const root = ReactDOM.hydrateRoot(\n+ container,\n \n \n <\/Context.Provider>,\n@@ -1437,8 +1435,7 @@ describe('ReactDOMServerPartialHydration', () => {\n \n \/\/ On the client we have the data available quickly for some reason.\n suspend = false;\n- const root = ReactDOM.createRoot(container, {hydrate: true});\n- root.render();\n+ ReactDOM.hydrateRoot(container, );\n Scheduler.unstable_flushAll();\n jest.runAllTimers();\n \n@@ -1493,8 +1490,7 @@ describe('ReactDOMServerPartialHydration', () => {\n \n \/\/ On the client we have the data available quickly for some reason.\n suspend = false;\n- const root = ReactDOM.createRoot(container, {hydrate: true});\n- root.render();\n+ ReactDOM.hydrateRoot(container, );\n Scheduler.unstable_flushAll();\n \/\/ This will have exceeded the suspended time so we should timeout.\n jest.advanceTimersByTime(500);\n@@ -1554,8 +1550,7 @@ describe('ReactDOMServerPartialHydration', () => {\n \n \/\/ On the client we have the data available quickly for some reason.\n suspend = false;\n- const root = ReactDOM.createRoot(container, {hydrate: true});\n- root.render();\n+ ReactDOM.hydrateRoot(container, );\n Scheduler.unstable_flushAll();\n \/\/ This will have exceeded the suspended time so we should timeout.\n jest.advanceTimersByTime(500);\n@@ -1621,12 +1616,9 @@ describe('ReactDOMServerPartialHydration', () => {\n \n const spanB = container.getElementsByTagName('span')[1];\n \n- const root = ReactDOM.createRoot(container, {hydrate: true});\n-\n+ const root = ReactDOM.hydrateRoot(container, );\n suspend = true;\n- act(() => {\n- root.render();\n- });\n+ Scheduler.unstable_flushAll();\n \n \/\/ We're not hydrated yet.\n expect(ref.current).toBe(null);\n@@ -1704,12 +1696,10 @@ describe('ReactDOMServerPartialHydration', () => {\n \n const spanA = container.getElementsByTagName('span')[0];\n \n- const root = ReactDOM.createRoot(container, {hydrate: true});\n+ const root = ReactDOM.hydrateRoot(container, );\n \n suspend = true;\n- act(() => {\n- root.render();\n- });\n+ Scheduler.unstable_flushAll();\n \n \/\/ We're not hydrated yet.\n expect(ref.current).toBe(null);\n@@ -1868,13 +1858,10 @@ describe('ReactDOMServerPartialHydration', () => {\n const container = document.createElement('div');\n container.innerHTML = html;\n \n- const root = ReactDOM.createRoot(container, {hydrate: true});\n+ ReactDOM.hydrateRoot(container, );\n \n suspend = true;\n-\n- await act(async () => {\n- root.render();\n- });\n+ Scheduler.unstable_flushAll();\n \n \/\/ We haven't hydrated the second child but the placeholder is still in the list.\n expect(container.textContent).toBe('ALoading B');\n@@ -1929,8 +1916,7 @@ describe('ReactDOMServerPartialHydration', () => {\n const span = container.getElementsByTagName('span')[1];\n \n suspend = false;\n- const root = ReactDOM.createRoot(container, {hydrate: true});\n- root.render();\n+ ReactDOM.hydrateRoot(container, );\n Scheduler.unstable_flushAll();\n jest.runAllTimers();\n \n@@ -1972,8 +1958,7 @@ describe('ReactDOMServerPartialHydration', () => {\n \n \/\/ On the client we don't have all data yet but we want to start\n \/\/ hydrating anyway.\n- const root = ReactDOM.createRoot(container, {hydrate: true});\n- root.render();\n+ ReactDOM.hydrateRoot(container, );\n Scheduler.unstable_flushAll();\n jest.runAllTimers();\n \n@@ -2025,8 +2010,8 @@ describe('ReactDOMServerPartialHydration', () => {\n \/\/ On the client we don't have all data yet but we want to start\n \/\/ hydrating anyway.\n suspend = true;\n- const root = ReactDOM.createRoot(container, {hydrate: true});\n- root.render(\n+ const root = ReactDOM.hydrateRoot(\n+ container,\n \n \n <\/ClassName.Provider>,\n@@ -2117,8 +2102,7 @@ describe('ReactDOMServerPartialHydration', () => {\n \/\/ On the client we don't have all data yet but we want to start\n \/\/ hydrating anyway.\n suspend = true;\n- const root = ReactDOM.createRoot(container, {hydrate: true});\n- root.render();\n+ ReactDOM.hydrateRoot(container, );\n Scheduler.unstable_flushAll();\n jest.runAllTimers();\n \n@@ -2205,8 +2189,7 @@ describe('ReactDOMServerPartialHydration', () => {\n \/\/ hydrating anyway.\n suspend = true;\n isServerRendering = false;\n- const root = ReactDOM.createRoot(container, {hydrate: true});\n- root.render();\n+ ReactDOM.hydrateRoot(container, );\n \n \/\/ We'll do one click before hydrating.\n a.click();\n@@ -2296,8 +2279,7 @@ describe('ReactDOMServerPartialHydration', () => {\n \/\/ On the client we don't have all data yet but we want to start\n \/\/ hydrating anyway.\n suspend = true;\n- const root = ReactDOM.createRoot(container, {hydrate: true});\n- root.render();\n+ ReactDOM.hydrateRoot(container, );\n \n \/\/ We'll do one click before hydrating.\n await act(async () => {\n@@ -2392,8 +2374,7 @@ describe('ReactDOMServerPartialHydration', () => {\n \/\/ hydrating anyway.\n suspend = true;\n isServerRendering = false;\n- const root = ReactDOM.createRoot(container, {hydrate: true});\n- root.render();\n+ ReactDOM.hydrateRoot(container, );\n \n \/\/ We'll do one click before hydrating.\n a.click();\n@@ -2480,8 +2461,7 @@ describe('ReactDOMServerPartialHydration', () => {\n \/\/ On the client we don't have all data yet but we want to start\n \/\/ hydrating anyway.\n suspend = true;\n- const root = ReactDOM.createRoot(container, {hydrate: true});\n- root.render();\n+ ReactDOM.hydrateRoot(container, );\n Scheduler.unstable_flushAll();\n jest.runAllTimers();\n \n@@ -2569,8 +2549,7 @@ describe('ReactDOMServerPartialHydration', () => {\n suspend = true;\n \n \/\/ Hydrate asynchronously.\n- const root = ReactDOM.createRoot(childContainer, {hydrate: true});\n- root.render();\n+ ReactDOM.hydrateRoot(childContainer, );\n jest.runAllTimers();\n Scheduler.unstable_flushAll();\n \n@@ -2668,8 +2647,7 @@ describe('ReactDOMServerPartialHydration', () => {\n \/\/ hydrating anyway.\n suspend1 = true;\n suspend2 = true;\n- const root = ReactDOM.createRoot(container, {hydrate: true});\n- root.render();\n+ ReactDOM.hydrateRoot(container, );\n \n Scheduler.unstable_flushAll();\n jest.runAllTimers();\n@@ -2755,8 +2733,7 @@ describe('ReactDOMServerPartialHydration', () => {\n container.innerHTML = finalHTML;\n \n suspend = true;\n- const root = ReactDOM.createRoot(container, {hydrate: true});\n- root.render();\n+ const root = ReactDOM.hydrateRoot(container, );\n expect(Scheduler).toFlushAndYield([]);\n \n expect(ref.current).toBe(null);\n@@ -2842,8 +2819,7 @@ describe('ReactDOMServerPartialHydration', () => {\n \/\/ On the client we don't have all data yet but we want to start\n \/\/ hydrating anyway.\n suspend = true;\n- const root = ReactDOM.createRoot(container, {hydrate: true});\n- root.render();\n+ ReactDOM.hydrateRoot(container, );\n Scheduler.unstable_flushAll();\n jest.runAllTimers();\n \n@@ -2908,8 +2884,8 @@ describe('ReactDOMServerPartialHydration', () => {\n const span = container.getElementsByTagName('span')[0];\n expect(span.innerHTML).toBe('Hidden child');\n \n- const root = ReactDOM.createRoot(container, {hydrate: true});\n- root.render();\n+ ReactDOM.hydrateRoot(container, );\n+\n Scheduler.unstable_flushAll();\n expect(ref.current).toBe(span);\n expect(span.innerHTML).toBe('Hidden child');\n@@ -2937,8 +2913,7 @@ describe('ReactDOMServerPartialHydration', () => {\n const span = container.getElementsByTagName('span')[0];\n expect(span.innerHTML).toBe('Hidden child');\n \n- const root = ReactDOM.createRoot(container, {hydrate: true});\n- root.render();\n+ ReactDOM.hydrateRoot(container, );\n Scheduler.unstable_flushAll();\n expect(ref.current).toBe(span);\n expect(span.innerHTML).toBe('Hidden child');\n@@ -2963,8 +2938,7 @@ describe('ReactDOMServerPartialHydration', () => {\n \n const span = container.getElementsByTagName('span')[0];\n \n- const root = ReactDOM.createRoot(container, {hydrate: true});\n- root.render();\n+ ReactDOM.hydrateRoot(container, );\n Scheduler.unstable_flushAll();\n expect(ref.current).toBe(span);\n expect(ref.current.innerHTML).toBe('Hidden child');\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerSelectiveHydration-test.internal.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerSelectiveHydration-test.internal.js\nindex 6c4dafbf5c..435e90d9b1 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerSelectiveHydration-test.internal.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerSelectiveHydration-test.internal.js\n@@ -165,8 +165,7 @@ describe('ReactDOMServerSelectiveHydration', () => {\n \n const span = container.getElementsByTagName('span')[1];\n \n- const root = ReactDOM.createRoot(container, {hydrate: true});\n- root.render();\n+ ReactDOM.hydrateRoot(container, );\n \n \/\/ Nothing has been hydrated so far.\n expect(Scheduler).toHaveYielded([]);\n@@ -244,8 +243,7 @@ describe('ReactDOMServerSelectiveHydration', () => {\n \n \/\/ A and D will be suspended. We'll click on D which should take\n \/\/ priority, after we unsuspend.\n- const root = ReactDOM.createRoot(container, {hydrate: true});\n- root.render();\n+ ReactDOM.hydrateRoot(container, );\n \n \/\/ Nothing has been hydrated so far.\n expect(Scheduler).toHaveYielded([]);\n@@ -343,8 +341,7 @@ describe('ReactDOMServerSelectiveHydration', () => {\n \n \/\/ A and D will be suspended. We'll click on D which should take\n \/\/ priority, after we unsuspend.\n- const root = ReactDOM.createRoot(container, {hydrate: true});\n- root.render();\n+ ReactDOM.hydrateRoot(container, );\n \n \/\/ Nothing has been hydrated so far.\n expect(Scheduler).toHaveYielded([]);\n@@ -443,9 +440,7 @@ describe('ReactDOMServerSelectiveHydration', () => {\n \n isServerRendering = false;\n \n- const root = ReactDOM.createRoot(container, {hydrate: true});\n-\n- root.render();\n+ ReactDOM.hydrateRoot(container, );\n \n \/\/ Nothing has been hydrated so far.\n expect(Scheduler).toHaveYielded([]);\n@@ -530,8 +525,7 @@ describe('ReactDOMServerSelectiveHydration', () => {\n \n \/\/ A and D will be suspended. We'll click on D which should take\n \/\/ priority, after we unsuspend.\n- const root = ReactDOM.createRoot(container, {hydrate: true});\n- root.render();\n+ ReactDOM.hydrateRoot(container, );\n \n \/\/ Nothing has been hydrated so far.\n expect(Scheduler).toHaveYielded([]);\n@@ -629,8 +623,7 @@ describe('ReactDOMServerSelectiveHydration', () => {\n \n \/\/ A and D will be suspended. We'll click on D which should take\n \/\/ priority, after we unsuspend.\n- const root = ReactDOM.createRoot(container, {hydrate: true});\n- root.render();\n+ ReactDOM.hydrateRoot(container, );\n \n \/\/ Nothing has been hydrated so far.\n expect(Scheduler).toHaveYielded([]);\n@@ -739,8 +732,7 @@ describe('ReactDOMServerSelectiveHydration', () => {\n \n \/\/ A and D will be suspended. We'll click on D which should take\n \/\/ priority, after we unsuspend.\n- const root = ReactDOM.createRoot(container, {hydrate: true});\n- root.render();\n+ ReactDOM.hydrateRoot(container, );\n \n \/\/ Nothing has been hydrated so far.\n expect(Scheduler).toHaveYielded([]);\n@@ -1373,8 +1365,7 @@ describe('ReactDOMServerSelectiveHydration', () => {\n \n \/\/ A and D will be suspended. We'll click on D which should take\n \/\/ priority, after we unsuspend.\n- const root = ReactDOM.createRoot(container, {hydrate: true});\n- root.render();\n+ ReactDOM.hydrateRoot(container, );\n \n \/\/ Nothing has been hydrated so far.\n expect(Scheduler).toHaveYielded([]);\n@@ -1489,10 +1480,8 @@ describe('ReactDOMServerSelectiveHydration', () => {\n const spanB = container.getElementsByTagName('span')[2];\n const spanC = container.getElementsByTagName('span')[4];\n \n- const root = ReactDOM.createRoot(container, {hydrate: true});\n act(() => {\n- root.render();\n-\n+ const root = ReactDOM.hydrateRoot(container, );\n \/\/ Hydrate the shell.\n expect(Scheduler).toFlushAndYieldThrough(['App', 'Commit']);\n \ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerSuspense-test.internal.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerSuspense-test.internal.js\nindex c2eb630e52..327b83b940 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerSuspense-test.internal.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerSuspense-test.internal.js\n@@ -163,8 +163,7 @@ describe('ReactDOMServerSuspense', () => {\n expect(divB.textContent).toBe('B');\n \n act(() => {\n- const root = ReactDOM.createRoot(parent, {hydrate: true});\n- root.render(example);\n+ ReactDOM.hydrateRoot(parent, example);\n });\n \n const parent2 = element.parentNode;\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactServerRenderingHydration-test.js b\/packages\/react-dom\/src\/__tests__\/ReactServerRenderingHydration-test.js\nindex 6e2ec3150d..0069946767 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactServerRenderingHydration-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactServerRenderingHydration-test.js\n@@ -403,8 +403,7 @@ describe('ReactDOMServerHydration', () => {\n const finalHTML = ReactDOMServer.renderToString(

);\n const container = document.createElement('div');\n container.innerHTML = finalHTML;\n- const root = ReactDOM.createRoot(container, {hydrate: true});\n- root.render(

);\n+ const root = ReactDOM.hydrateRoot(container,

);\n Scheduler.unstable_flushAll();\n root.render(null);\n Scheduler.unstable_flushAll();\ndiff --git a\/packages\/react-dom\/src\/client\/ReactDOMRoot.js b\/packages\/react-dom\/src\/client\/ReactDOMRoot.js\nindex 3c49a15fc1..800eeba0d0 100644\n--- a\/packages\/react-dom\/src\/client\/ReactDOMRoot.js\n+++ b\/packages\/react-dom\/src\/client\/ReactDOMRoot.js\n@@ -21,15 +21,6 @@ export type RootType = {\n };\n \n export type CreateRootOptions = {\n- \/\/ TODO: Remove these options.\n- hydrate?: boolean,\n- hydrationOptions?: {\n- onHydrated?: (suspenseNode: Comment) => void,\n- onDeleted?: (suspenseNode: Comment) => void,\n- mutableSources?: Array>,\n- ...\n- },\n- \/\/ END OF TODO\n unstable_strictMode?: boolean,\n unstable_concurrentUpdatesByDefault?: boolean,\n identifierPrefix?: string,\n@@ -149,21 +140,17 @@ export function createRoot(\n \n warnIfReactDOMContainerInDEV(container);\n \n- \/\/ TODO: Delete these options\n- const hydrate = options != null && options.hydrate === true;\n- const hydrationCallbacks =\n- (options != null && options.hydrationOptions) || null;\n- const mutableSources =\n- (options != null &&\n- options.hydrationOptions != null &&\n- options.hydrationOptions.mutableSources) ||\n- null;\n- \/\/ END TODO\n-\n let isStrictMode = false;\n let concurrentUpdatesByDefaultOverride = false;\n let identifierPrefix = '';\n if (options !== null && options !== undefined) {\n+ if (__DEV__) {\n+ if ((options: any).hydrate) {\n+ console.warn(\n+ 'hydrate through createRoot is deprecated. Use ReactDOM.hydrateRoot(container, ) instead.',\n+ );\n+ }\n+ }\n if (options.unstable_strictMode === true) {\n isStrictMode = true;\n }\n@@ -181,8 +168,8 @@ export function createRoot(\n const root = createContainer(\n container,\n ConcurrentRoot,\n- hydrate,\n- hydrationCallbacks,\n+ false,\n+ null,\n isStrictMode,\n concurrentUpdatesByDefaultOverride,\n identifierPrefix,\n@@ -193,15 +180,6 @@ export function createRoot(\n container.nodeType === COMMENT_NODE ? container.parentNode : container;\n listenToAllSupportedEvents(rootContainerElement);\n \n- \/\/ TODO: Delete this path\n- if (mutableSources) {\n- for (let i = 0; i < mutableSources.length; i++) {\n- const mutableSource = mutableSources[i];\n- registerMutableSourceForHydration(root, mutableSource);\n- }\n- }\n- \/\/ END TODO\n-\n return new ReactDOMRoot(root);\n }\n \ndiff --git a\/packages\/react-dom\/src\/events\/__tests__\/DOMPluginEventSystem-test.internal.js b\/packages\/react-dom\/src\/events\/__tests__\/DOMPluginEventSystem-test.internal.js\nindex 1b2bfbb0be..248c07020e 100644\n--- a\/packages\/react-dom\/src\/events\/__tests__\/DOMPluginEventSystem-test.internal.js\n+++ b\/packages\/react-dom\/src\/events\/__tests__\/DOMPluginEventSystem-test.internal.js\n@@ -629,8 +629,7 @@ describe('DOMPluginEventSystem', () => {\n suspend = true;\n \n \/\/ Hydrate asynchronously.\n- const root = ReactDOM.createRoot(childContainer, {hydrate: true});\n- root.render();\n+ ReactDOM.hydrateRoot(childContainer, );\n jest.runAllTimers();\n Scheduler.unstable_flushAll();\n \ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.new.js b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.new.js\nindex d66bba0dc2..02b2ec1a45 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.new.js\n@@ -2586,7 +2586,7 @@ function mountDehydratedSuspenseComponent(\n console.error(\n 'Cannot hydrate Suspense in legacy mode. Switch from ' +\n 'ReactDOM.hydrate(element, container) to ' +\n- 'ReactDOM.createRoot(container, { hydrate: true })' +\n+ 'ReactDOM.hydrateRoot(container, )' +\n '.render(element) or remove the Suspense components from ' +\n 'the server rendered components.',\n );\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.old.js b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.old.js\nindex 62d51046b3..8733ab0a4e 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.old.js\n@@ -2586,7 +2586,7 @@ function mountDehydratedSuspenseComponent(\n console.error(\n 'Cannot hydrate Suspense in legacy mode. Switch from ' +\n 'ReactDOM.hydrate(element, container) to ' +\n- 'ReactDOM.createRoot(container, { hydrate: true })' +\n+ 'ReactDOM.hydrateRoot(container, )' +\n '.render(element) or remove the Suspense components from ' +\n 'the server rendered components.',\n );\ndiff --git a\/packages\/react-reconciler\/src\/__tests__\/ReactScope-test.internal.js b\/packages\/react-reconciler\/src\/__tests__\/ReactScope-test.internal.js\nindex dedc8146d8..9dd7d85b5b 100644\n--- a\/packages\/react-reconciler\/src\/__tests__\/ReactScope-test.internal.js\n+++ b\/packages\/react-reconciler\/src\/__tests__\/ReactScope-test.internal.js\n@@ -312,8 +312,7 @@ describe('ReactScope', () => {\n \/\/ On the client we don't have all data yet but we want to start\n \/\/ hydrating anyway.\n suspend = true;\n- const root = ReactDOM.createRoot(container2, {hydrate: true});\n- root.render();\n+ ReactDOM.hydrateRoot(container2, );\n Scheduler.unstable_flushAll();\n jest.runAllTimers();\n \ndiff --git a\/packages\/react-reconciler\/src\/__tests__\/useMutableSourceHydration-test.js b\/packages\/react-reconciler\/src\/__tests__\/useMutableSourceHydration-test.js\nindex 61ebbe45e9..4c13ef7c35 100644\n--- a\/packages\/react-reconciler\/src\/__tests__\/useMutableSourceHydration-test.js\n+++ b\/packages\/react-reconciler\/src\/__tests__\/useMutableSourceHydration-test.js\n@@ -168,14 +168,10 @@ describe('useMutableSourceHydration', () => {\n expect(Scheduler).toHaveYielded(['only:one']);\n expect(source.listenerCount).toBe(0);\n \n- const root = ReactDOM.createRoot(container, {\n- hydrate: true,\n- hydrationOptions: {\n- mutableSources: [mutableSource],\n- },\n- });\n act(() => {\n- root.render();\n+ ReactDOM.hydrateRoot(container, , {\n+ mutableSources: [mutableSource],\n+ });\n });\n expect(Scheduler).toHaveYielded(['only:one']);\n expect(source.listenerCount).toBe(1);\n@@ -205,22 +201,16 @@ describe('useMutableSourceHydration', () => {\n expect(Scheduler).toHaveYielded(['only:one']);\n expect(source.listenerCount).toBe(0);\n \n- const root = ReactDOM.createRoot(container, {\n- hydrate: true,\n- hydrationOptions: {\n- mutableSources: [mutableSource],\n- },\n- });\n expect(() => {\n act(() => {\n- root.render();\n+ ReactDOM.hydrateRoot(container, , {\n+ mutableSources: [mutableSource],\n+ });\n \n source.value = 'two';\n });\n }).toErrorDev(\n- 'Warning: An error occurred during hydration. ' +\n- 'The server HTML was replaced with client content in

.',\n- {withoutStack: true},\n+ 'Warning: Text content did not match. Server: \"only:one\" Client: \"only:two\"',\n );\n expect(Scheduler).toHaveYielded(['only:two']);\n expect(source.listenerCount).toBe(1);\n@@ -258,20 +248,18 @@ describe('useMutableSourceHydration', () => {\n expect(Scheduler).toHaveYielded(['a:one', 'b:one']);\n expect(source.listenerCount).toBe(0);\n \n- const root = ReactDOM.createRoot(container, {\n- hydrate: true,\n- hydrationOptions: {\n- mutableSources: [mutableSource],\n- },\n- });\n expect(() => {\n act(() => {\n if (gate(flags => flags.enableSyncDefaultUpdates)) {\n React.startTransition(() => {\n- root.render();\n+ ReactDOM.hydrateRoot(container, , {\n+ mutableSources: [mutableSource],\n+ });\n });\n } else {\n- root.render();\n+ ReactDOM.hydrateRoot(container, , {\n+ mutableSources: [mutableSource],\n+ });\n }\n expect(Scheduler).toFlushAndYieldThrough(['a:one']);\n source.value = 'two';\n@@ -318,50 +306,34 @@ describe('useMutableSourceHydration', () => {\n container.innerHTML = htmlString;\n expect(Scheduler).toHaveYielded(['0:a:one', '1:b:one']);\n \n- const root = ReactDOM.createRoot(container, {\n- hydrate: true,\n- hydrationOptions: {\n- mutableSources: [mutableSource],\n- },\n- });\n expect(() => {\n act(() => {\n+ const fragment = (\n+ <>\n+ \n+ \n+ <\/>\n+ );\n if (gate(flags => flags.enableSyncDefaultUpdates)) {\n React.startTransition(() => {\n- root.render(\n- <>\n- \n- \n- <\/>,\n- );\n+ ReactDOM.hydrateRoot(container, fragment, {\n+ mutableSources: [mutableSource],\n+ });\n });\n } else {\n- root.render(\n- <>\n- \n- \n- <\/>,\n- );\n+ ReactDOM.hydrateRoot(container, fragment, {\n+ mutableSources: [mutableSource],\n+ });\n }\n expect(Scheduler).toFlushAndYieldThrough(['0:a:one']);\n source.valueB = 'b:two';\n@@ -409,21 +381,19 @@ describe('useMutableSourceHydration', () => {\n expect(Scheduler).toHaveYielded([1, 'a:one']);\n expect(source.listenerCount).toBe(0);\n \n- const root = ReactDOM.createRoot(container, {\n- hydrate: true,\n- hydrationOptions: {\n- mutableSources: [mutableSource],\n- },\n- });\n-\n expect(() => {\n act(() => {\n+ let root;\n if (gate(flags => flags.enableSyncDefaultUpdates)) {\n React.startTransition(() => {\n- root.render();\n+ root = ReactDOM.hydrateRoot(container, , {\n+ mutableSources: [mutableSource],\n+ });\n });\n } else {\n- root.render();\n+ root = ReactDOM.hydrateRoot(container, , {\n+ mutableSources: [mutableSource],\n+ });\n }\n expect(Scheduler).toFlushAndYieldThrough([1]);\n \n@@ -438,19 +408,16 @@ describe('useMutableSourceHydration', () => {\n dispatchAndSetCurrentEvent(arbitraryElement, mouseOverEvent);\n \n expect(Scheduler).toFlushAndYieldThrough([2]);\n-\n source.value = 'two';\n });\n }).toErrorDev(\n- [\n- 'Warning: An error occurred during hydration. ' +\n- 'The server HTML was replaced with client content in

.',\n-\n- 'Warning: Text content did not match. Server: \"1\" Client: \"2\"',\n- ],\n- {withoutStack: 1},\n+ 'Warning: Text content did not match. Server: \"1\" Client: \"2\"',\n );\n- expect(Scheduler).toHaveYielded([2, 'a:two']);\n expect(source.listenerCount).toBe(1);\n+ if (gate(flags => flags.enableSyncDefaultUpdates)) {\n+ expect(Scheduler).toHaveYielded([2, 'a:two']);\n+ } else {\n+ expect(Scheduler).toHaveYielded(['a:two']);\n+ }\n });\n });\n","commit":{"shortRevision":"5041c37d27","authorEmail":"salazarm@users.noreply.github.com","authoredAt":"2021-12-07T16:10:00-05:00","subject":"Remove hydrate option from createRoot (#22878)","authorName":"salazarm","revision":"5041c37d27ee8f80bf152951d20bf861f817c7c6"},"body":"* remove hydrate: true option\r\n\r\n* remove missed comment\r\n\r\n* lint\r\n\r\n* warning\r\n\r\n* circumvent flow","files":[{"path":"fixtures\/ssr\/src\/index.js","status":"M"},{"path":"packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js","status":"M"},{"path":"packages\/react-dom\/src\/__tests__\/ReactDOMServerPartialHydration-test.internal.js","status":"M"},{"path":"packages\/react-dom\/src\/__tests__\/ReactDOMServerSelectiveHydration-test.internal.js","status":"M"},{"path":"packages\/react-dom\/src\/__tests__\/ReactDOMServerSuspense-test.internal.js","status":"M"},{"path":"packages\/react-dom\/src\/__tests__\/ReactServerRenderingHydration-test.js","status":"M"},{"path":"packages\/react-dom\/src\/client\/ReactDOMRoot.js","status":"M"},{"path":"packages\/react-dom\/src\/events\/__tests__\/DOMPluginEventSystem-test.internal.js","status":"M"},{"path":"packages\/react-reconciler\/src\/ReactFiberBeginWork.new.js","status":"M"},{"path":"packages\/react-reconciler\/src\/ReactFiberBeginWork.old.js","status":"M"},{"path":"packages\/react-reconciler\/src\/__tests__\/ReactScope-test.internal.js","status":"M"},{"path":"packages\/react-reconciler\/src\/__tests__\/useMutableSourceHydration-test.js","status":"M"}],"parents":["c7917fe76982c499c81be9571de44fe1293ac893"]}

dillon1000/react

Files changed