Upgrade to React@18 (#5172)

* upgrade to react@18
read more: https://reactjs.org/blog/2022/03/29/react-v18.html

src/renderer/bootstrap.tsx

@@ -12,7 +12,7 @@ import * as ReactRouter from "react-router";
 import * as ReactRouterDom from "react-router-dom";
 import * as LensExtensionsCommonApi from "../extensions/common-api";
 import * as LensExtensionsRendererApi from "../extensions/renderer-api";
-import { render } from "react-dom";
+import { createRoot } from "react-dom/client";
 import { delay } from "../common/utils";
 import { isMac, isDevelopment } from "../common/vars";
 import { HelmRepoManager } from "../main/helm/helm-repo-manager";
@@ -69,6 +69,7 @@ export async function bootstrap(di: DiContainer) {
   bindEvents();
 
   const rootElem = document.getElementById("app");
+  const rootNode = createRoot(rootElem);
   const logPrefix = `[BOOTSTRAP-${process.isMainFrame ? "ROOT" : "CLUSTER"}-FRAME]:`;
 
   // TODO: Remove temporal dependencies to make timing of initialization not important
@@ -152,7 +153,7 @@ export async function bootstrap(di: DiContainer) {
   }
 
   try {
-    await initializeApp(rootElem);
+    await initializeApp(() => rootNode.unmount());
   } catch (error) {
     console.error(`[BOOTSTRAP]: view initialization error: ${error}`, {
       origin: location.href,
@@ -160,16 +161,12 @@ export async function bootstrap(di: DiContainer) {
     });
   }
 
-  const history = di.inject(historyInjectable);
-
-  render(
+  rootNode.render(
     <DiContextProvider value={{ di }}>
-      <Router history={history}>
+      <Router history={di.inject(historyInjectable)}>
         {DefaultProps(App)}
       </Router>
     </DiContextProvider>,
-
-    rootElem,
   );
 }
 

src/renderer/components/menu/menu.tsx

@@ -144,7 +144,7 @@ export class Menu extends React.Component<MenuProps, State> {
     }
   }
 
-  refreshPosition = () => {
+  refreshPosition = () => requestAnimationFrame(() => {
     if (!this.props.usePortal || !this.opener || !this.elem) {
       return;
     }
@@ -187,7 +187,7 @@ export class Menu extends React.Component<MenuProps, State> {
         left: renderMenuLeft ? menuOnLeftSidePosition : menuOnRightSidePosition,
       },
     });
-  };
+  });
 
   open() {
     if (this.isOpen) {

src/renderer/frames/cluster-frame/init-cluster-frame/init-cluster-frame.ts

@@ -10,7 +10,6 @@ import { Notifications } from "../../../components/notifications";
 import type { AppEvent } from "../../../../common/app-event-bus/event-bus";
 import type { CatalogEntity } from "../../../../common/catalog";
 import { when } from "mobx";
-import { unmountComponentAtNode } from "react-dom";
 import type { ClusterFrameContext } from "../../../cluster-frame-context/cluster-frame-context";
 import { KubeObjectStore } from "../../../../common/k8s-api/kube-object.store";
 import { requestSetClusterFrameId } from "../../../ipc";
@@ -30,7 +29,7 @@ const logPrefix = "[CLUSTER-FRAME]:";
 
 export const initClusterFrame =
   ({ hostedCluster, loadExtensions, catalogEntityRegistry, frameRoutingId, emitEvent, clusterFrameContext }: Dependencies) =>
-    async (rootElem: HTMLElement) => {
+    async (unmountRoot: () => void) => {
 
       // TODO: Make catalogEntityRegistry already initialized when passed as dependency
       catalogEntityRegistry.init();
@@ -80,7 +79,7 @@ export const initClusterFrame =
           `${logPrefix} Unload dashboard, clusterId=${(hostedCluster.id)}, frameId=${frameRoutingId}`,
         );
 
-        unmountComponentAtNode(rootElem);
+        unmountRoot();
       };
 
       // TODO: Make context dependency of KubeObjectStore

src/renderer/frames/root-frame/init-root-frame/init-root-frame.ts

@@ -5,7 +5,6 @@
 import { delay } from "../../../../common/utils";
 import { broadcastMessage } from "../../../../common/ipc";
 import logger from "../../../../common/logger";
-import { unmountComponentAtNode } from "react-dom";
 import type { ExtensionLoading } from "../../../../extensions/extension-loader";
 import type { CatalogEntityRegistry } from "../../../api/catalog-entity-registry";
 import { bundledExtensionsLoaded } from "../../../../common/ipc/extension-handling";
@@ -34,10 +33,9 @@ export const initRootFrame =
     lensProtocolRouterRenderer,
     ipcRenderer,
     registerIpcListeners,
-
     catalogEntityRegistry,
   }: Dependencies) =>
-    async (rootElem: HTMLElement) => {
+    async (unmountRoot: () => void) => {
       catalogEntityRegistry.init();
 
       try {
@@ -72,6 +70,6 @@ export const initRootFrame =
       window.addEventListener("beforeunload", () => {
         logger.info(`${logPrefix} Unload app`);
 
-        unmountComponentAtNode(rootElem);
+        unmountRoot();
       });
     };