Dev helpers: Use React 18 createRoot API (#98260)

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 QueryUserSettings from 'calypso/components/data/query-user-settings';
@@ -61,9 +61,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>
 	);