Revert "Update ReactDom.render and ReactDom.hydrate to React 18 under…

… /client…" (#95704)

This reverts commit d3a850d.

client/boot/common.js

@@ -8,10 +8,11 @@ import { getLanguageSlugs } from '@automattic/i18n-utils';
 import { getToken } from '@automattic/oauth-token';
 import { JETPACK_PRICING_PAGE } from '@automattic/urls';
 import debugFactory from 'debug';
+import ReactDom from 'react-dom';
 import Modal from 'react-modal';
 import store from 'store';
 import emailVerification from 'calypso/components/email-verification';
-import { ProviderWrappedLayout, render, getRootDomElement } from 'calypso/controller';
+import { ProviderWrappedLayout } from 'calypso/controller';
 import isA8CForAgencies from 'calypso/lib/a8c-for-agencies/is-a8c-for-agencies';
 import { initializeAnalytics } from 'calypso/lib/analytics/init';
 import getSuperProps from 'calypso/lib/analytics/super-props';
@@ -216,7 +217,7 @@ const utils = () => {
 	accessibleFocus();
 
 	// Configure app element that React Modal will aria-hide when modal is open
-	Modal.setAppElement( getRootDomElement() );
+	Modal.setAppElement( document.getElementById( 'wpcom' ) );
 };
 
 const configureReduxStore = ( currentUser, reduxStore ) => {
@@ -402,7 +403,10 @@ const setupMiddlewares = ( currentUser, reduxStore, reactQueryClient ) => {
 };
 
 function renderLayout( reduxStore, reactQueryClient ) {
-	render( <ProviderWrappedLayout store={ reduxStore } queryClient={ reactQueryClient } /> );
+	ReactDom.render(
+		<ProviderWrappedLayout store={ reduxStore } queryClient={ reactQueryClient } />,
+		document.getElementById( 'wpcom' )
+	);
 }
 
 const boot = async ( currentUser, registerRoutes ) => {

client/controller/index.node.js

@@ -90,7 +90,6 @@ export const redirectIfJetpackNonAtomic = () => {};
 export const redirectToHostingPromoIfNotAtomic = () => {};
 // eslint-disable-next-line no-unused-vars
 export const render = ( context ) => {};
-export const getRootDomElement = () => {};
 export const ProviderWrappedLayout = () => null;
 export const notFound = () => null;
 export const setSelectedSiteIdByOrigin = () => {};

client/controller/index.web.js

@@ -40,7 +40,7 @@ import { hydrate, render } from './web-util.js';
  * Re-export
  */
 export { setLocaleMiddleware, setSectionMiddleware } from './shared.js';
-export { hydrate, render, getRootDomElement } from './web-util.js';
+export { hydrate, render } from './web-util.js';
 
 export const ProviderWrappedLayout = ( {
 	store,

client/controller/web-util.js

@@ -1,18 +1,9 @@
-import { createRoot, hydrateRoot } from 'react-dom/client';
-
-export function getRootDomElement() {
-	return document.getElementById( 'wpcom' );
-}
-
-let wpcomRootNode;
+import ReactDom from 'react-dom';
 
 export function render( context ) {
-	if ( wpcomRootNode == null ) {
-		wpcomRootNode = createRoot( getRootDomElement() );
-	}
-	wpcomRootNode.render( context.layout );
+	ReactDom.render( context.layout, document.getElementById( 'wpcom' ) );
 }
 
 export function hydrate( context ) {
-	wpcomRootNode = hydrateRoot( getRootDomElement(), context.layout );
+	ReactDom.hydrate( context.layout, document.getElementById( 'wpcom' ) );
 }

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

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

client/lib/auth-helper/index.jsx

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

client/lib/features-helper/index.js

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

client/lib/preferences-helper/index.js

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

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 { createRoot } from 'react-dom/client';
+import ReactDom from 'react-dom';
 import { setStoredItem, getStoredItem } from 'calypso/lib/browser-storage';
 
 import './style.scss';
@@ -59,4 +59,4 @@ function ReactQueryDevtoolsHelper() {
 	);
 }
 
-export default ( element ) => createRoot( element ).render( <ReactQueryDevtoolsHelper /> );
+export default ( element ) => ReactDom.render( <ReactQueryDevtoolsHelper />, element );

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 { createRoot } from 'react-dom/client';
+import ReactDom from 'react-dom';
 import useStoreSandboxStatusQuery from 'calypso/data/store-sandbox/use-store-sandbox-status';
 import wp from 'calypso/lib/wp';
 
@@ -74,8 +74,9 @@ export function StoreSandboxHelper() {
 	);
 }
 export default ( element: HTMLElement ) =>
-	createRoot( element ).render(
+	ReactDom.render(
 		<QueryClientProvider client={ new QueryClient() }>
 			<StoreSandboxHelper />
-		</QueryClientProvider>
+		</QueryClientProvider>,
+		element
 	);