Share the root node via a singleton-like function, getRootNode(), and

also extract `getRootDomElement()` to further reduce duplications.

client/boot/common.js

@@ -202,6 +202,8 @@ const unsavedFormsMiddleware = () => {
 	page.exit( '*', checkFormHandler );
 };
 
+export const getRootDomElement = () => document.getElementById( 'wpcom' );
+
 const utils = () => {
 	debug( 'Executing Calypso utils.' );
 
@@ -217,7 +219,7 @@ const utils = () => {
 	accessibleFocus();
 
 	// Configure app element that React Modal will aria-hide when modal is open
-	Modal.setAppElement( document.getElementById( 'wpcom' ) );
+	Modal.setAppElement( getRootDomElement() );
 };
 
 const configureReduxStore = ( currentUser, reduxStore ) => {
@@ -402,8 +404,17 @@ const setupMiddlewares = ( currentUser, reduxStore, reactQueryClient ) => {
 	}
 };
 
+let wpcomRootNode;
+export const getRootNode = () => {
+	if ( wpcomRootNode == null ) {
+		wpcomRootNode = createRoot( getRootDomElement() );
+	}
+
+	return wpcomRootNode;
+};
+
 function renderLayout( reduxStore, reactQueryClient ) {
-	createRoot( document.getElementById( 'wpcom' ) ).render(
+	getRootNode().render(
 		<ProviderWrappedLayout store={ reduxStore } queryClient={ reactQueryClient } />
 	);
 }

client/controller/web-util.js

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