Update all the instances of ReactDom.render to createRoot() under

`/client`

client/boot/common.js

@@ -7,7 +7,7 @@ import { geolocateCurrencySymbol } from '@automattic/format-currency';
 import { getLanguageSlugs } from '@automattic/i18n-utils';
 import { JETPACK_PRICING_PAGE } from '@automattic/urls';
 import debugFactory from 'debug';
-import ReactDom from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import Modal from 'react-modal';
 import store from 'store';
 import emailVerification from 'calypso/components/email-verification';
@@ -403,9 +403,8 @@ const setupMiddlewares = ( currentUser, reduxStore, reactQueryClient ) => {
 };
 
 function renderLayout( reduxStore, reactQueryClient ) {
-	ReactDom.render(
-		<ProviderWrappedLayout store={ reduxStore } queryClient={ reactQueryClient } />,
-		document.getElementById( 'wpcom' )
+	createRoot( document.getElementById( 'wpcom' ) ).render(
+		<ProviderWrappedLayout store={ reduxStore } queryClient={ reactQueryClient } />
 	);
 }
 

client/controller/web-util.js

@@ -1,9 +1,9 @@
-import ReactDom from 'react-dom';
+import { createRoot, hydrateRoot } from 'react-dom/client';
 
 export function render( context ) {
-	ReactDom.render( context.layout, document.getElementById( 'wpcom' ) );
+	createRoot( document.getElementById( 'wpcom' ) ).render( context.layout );
 }
 
 export function hydrate( context ) {
-	ReactDom.hydrate( context.layout, document.getElementById( 'wpcom' ) );
+	hydrateRoot( document.getElementById( 'wpcom' ), context.layout );
 }

client/lib/account-settings-helper/index.jsx

@@ -1,5 +1,5 @@
 import languages from '@automattic/languages';
-import ReactDom from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { useInView } from 'react-intersection-observer';
 import { Provider, useDispatch, useSelector } from 'react-redux';
 import ColorSchemePicker from 'calypso/blocks/color-scheme-picker';
@@ -66,9 +66,8 @@ export function AccountSettingsHelper() {
 	);
 }
 export default ( element, store ) =>
-	ReactDom.render(
+	createRoot( element ).render(
 		<Provider store={ store }>
 			<AccountSettingsHelper />
-		</Provider>,
-		element
+		</Provider>
 	);

client/lib/auth-helper/index.jsx

@@ -1,5 +1,5 @@
 import config from '@automattic/calypso-config';
-import ReactDom from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import './style.scss';
 
@@ -40,4 +40,4 @@ function AuthHelper() {
 	);
 }
 
-export default ( element ) => ReactDom.render( <AuthHelper />, element );
+export default ( element ) => createRoot( element ).render( <AuthHelper /> );

client/lib/features-helper/index.js

@@ -1,4 +1,4 @@
-import ReactDom from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import FeatureList from './feature-list';
 
 import './style.scss';
@@ -7,5 +7,5 @@ import './style.scss';
  * @param element HTML Element
  */
 export default function injectFeatureHelper( element ) {
-	ReactDom.render( <FeatureList />, element );
+	createRoot( element ).render( <FeatureList /> );
 }

client/lib/preferences-helper/index.js

@@ -1,14 +1,13 @@
-import ReactDom from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import PreferenceList from './preference-list';
 
 import './style.scss';
 
 export default function injectPreferenceHelper( element, store ) {
-	ReactDom.render(
+	createRoot( element ).render(
 		<Provider store={ store }>
 			<PreferenceList />
-		</Provider>,
-		element
+		</Provider>
 	);
 }

client/lib/react-query-devtools-helper/index.jsx

@@ -1,7 +1,7 @@
 import config from '@automattic/calypso-config';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { useEffect, useState } from 'react';
-import ReactDom from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { setStoredItem, getStoredItem } from 'calypso/lib/browser-storage';
 
 import './style.scss';
@@ -59,4 +59,4 @@ function ReactQueryDevtoolsHelper() {
 	);
 }
 
-export default ( element ) => ReactDom.render( <ReactQueryDevtoolsHelper />, element );
+export default ( element ) => createRoot( element ).render( <ReactQueryDevtoolsHelper /> );

client/lib/store-sandbox-helper/index.tsx

@@ -1,7 +1,7 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ToggleControl } from '@wordpress/components';
 import { useState, useEffect } from 'react';
-import ReactDom from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import useStoreSandboxStatusQuery from 'calypso/data/store-sandbox/use-store-sandbox-status';
 import wp from 'calypso/lib/wp';
 
@@ -74,9 +74,8 @@ export function StoreSandboxHelper() {
 	);
 }
 export default ( element: HTMLElement ) =>
-	ReactDom.render(
+	createRoot( element ).render(
 		<QueryClientProvider client={ new QueryClient() }>
 			<StoreSandboxHelper />
-		</QueryClientProvider>,
-		element
+		</QueryClientProvider>
 	);