Revert "Avoid warning by calling createRoot in main.ts"

This reverts commit 8d39025.

Author: Kevin Logan

Diff for: src/app/header/header-wrapper.component.tsx

@@ -13,7 +13,7 @@ import {
 } from "@angular/core";
 import * as React from "react";
 import * as ReactDOM from "react-dom";
-import { Root, createRoot } from "react-dom/client";
+import { createRoot } from "react-dom/client";
 import { Header } from "./Header";
 const containerElementName = "reactHeaderComponentContainer";
 
@@ -35,43 +35,38 @@ export class HeaderWrapperComponent
 
   constructor() {}
   ngOnChanges(changes: SimpleChanges): void {
-    // note: It works, but I get this warning from changed events (from the @Input update approach)
-    // Warning: You are calling ReactDOMClient.createRoot() on a container that has already been passed to createRoot() before. Instead, call root.render() on the existing root instead if you want to update it.
-    // I've decided to ignore it since the render is efficient
-    //   If you call render on the same root more than once, React will update the DOM as necessary to reflect the latest JSX you passed. React will decide which parts of the DOM can be reused and which need to be recreated by “matching it up” with the previously rendered tree. Calling render on the same root again is similar to calling the set function on the root component: React avoids unnecessary DOM updates.
-    //   see https://react.dev/learn/preserving-and-resetting-state
-    // these can be avoided by using the document.addEventListener approach
-    // it is also avoided with calling createRoot in the main.ts file
-    console.log("changed");
-    HeaderWrapperComponent.render(undefined);
+    console.log('changed');
+    this.render();
   }
-
+  
   ngAfterViewInit() {
-    console.log("afterViewInit");
-    HeaderWrapperComponent.render(undefined);
+    console.log('afterViewInit');
+    this.render();
   }
 
   ngOnDestroy() {
     ReactDOM.unmountComponentAtNode(this.containerRef.nativeElement);
   }
 
-  static reactHeaderRoot: Root;
-  public static render(reactHeaderRoot: Root | undefined) {
-    // set in main.ts
-    if (reactHeaderRoot) HeaderWrapperComponent.reactHeaderRoot = reactHeaderRoot;
-    if (HeaderWrapperComponent.reactHeaderRoot)
-      HeaderWrapperComponent.reactHeaderRoot.render(
-        <React.StrictMode>
-          <Header
-            {...{
-              headerComponents: [
-                // without the ts-ignore, this won't compile
-                /* @ts-ignore */
-                <notification-web-component counter={this.appNotificationCounter}></notification-web-component>,
-              ],
-            }}
-          />
-        </React.StrictMode>
-      );
+  private render() {
+    // note: I do get this warning from ngAfterViewInit and changed events
+    // Warning: You are calling ReactDOMClient.createRoot() on a container that has already been passed to createRoot() before. Instead, call root.render() on the existing root instead if you want to update it.
+    // I've decided to ignore it since the render is efficient
+    //   If you call render on the same root more than once, React will update the DOM as necessary to reflect the latest JSX you passed. React will decide which parts of the DOM can be reused and which need to be recreated by “matching it up” with the previously rendered tree. Calling render on the same root again is similar to calling the set function on the root component: React avoids unnecessary DOM updates.
+    //   see https://react.dev/learn/preserving-and-resetting-state
+    const root = createRoot(this.containerRef.nativeElement as HTMLElement);
+    root.render(
+      <React.StrictMode>
+        <Header
+          {...{
+            headerComponents: [
+              // without the ts-ignore, this won't compile
+              /* @ts-ignore */
+              <notification-web-component counter={this.appNotificationCounter}></notification-web-component>,
+            ],
+          }}
+        />
+      </React.StrictMode>
+    );
   }
 }

Diff for: src/main.ts

@@ -1,24 +1,7 @@
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 import { AppModule } from './app/app.module';
-import { createRoot } from 'react-dom/client';
-import { HeaderWrapperComponent } from './app/header/header-wrapper.component';
 
 
 platformBrowserDynamic().bootstrapModule(AppModule)
   .catch(err => console.error(err));
-
-  // this is a way to avoid the 
-  // Warning: You are calling ReactDOMClient.createRoot() on a container that has already been passed to createRoot() before. Instead, call root.render() on the existing root instead if you want to update it.
-  // from @input changes
-  // poll dom until this element is available
-  function pollForHeader() {
-    if (document.querySelector('app-header-wrapper')) {
-      const header = document.querySelector('app-header-wrapper') as Element;
-      const root = createRoot(header); 
-      HeaderWrapperComponent.render(root);
-    } else {
-      setTimeout(pollForHeader, 100);
-    }
-  }
-  pollForHeader();