Update to React18 APIs for separate-container example (#22956)

examples/version-migration/separate-container/.eslintrc.cjs

@@ -5,9 +5,5 @@
 
 module.exports = {
 	extends: [require.resolve("@fluidframework/eslint-config-fluid"), "prettier"],
-	rules: {
-		// TODO: AB#18875 - Re-enable react/no-deprecated once we replace uses of the deprecated ReactDOM.render()
-		// with the new React 18 createRoot().
-		"react/no-deprecated": "off",
-	},
+	rules: {},
 };

examples/version-migration/separate-container/src/dataTransform.ts

@@ -3,7 +3,6 @@
  * Licensed under the MIT License.
  */
 
-// eslint-disable-next-line import/no-internal-modules
 import type { DataTransformationCallback } from "@fluid-example/migration-tools/internal";
 
 export interface IParsedInventoryItemData {

examples/version-migration/separate-container/src/modelVersion1/appModel.ts

@@ -3,7 +3,6 @@
  * Licensed under the MIT License.
  */
 
-// eslint-disable-next-line import/no-internal-modules
 import type { IMigratableModel } from "@fluid-example/migration-tools/internal";
 import { AttachState } from "@fluidframework/container-definitions";
 import { IContainer } from "@fluidframework/container-definitions/internal";

examples/version-migration/separate-container/src/modelVersion1/containerCode.ts

@@ -7,7 +7,6 @@ import { getDataStoreEntryPoint } from "@fluid-example/example-utils";
 import {
 	type IMigratableModel,
 	instantiateMigratableRuntime,
-	// eslint-disable-next-line import/no-internal-modules
 } from "@fluid-example/migration-tools/internal";
 import type {
 	IContainer,

examples/version-migration/separate-container/src/modelVersion2/appModel.ts

@@ -3,7 +3,6 @@
  * Licensed under the MIT License.
  */
 
-// eslint-disable-next-line import/no-internal-modules
 import type { IMigratableModel } from "@fluid-example/migration-tools/internal";
 import { AttachState } from "@fluidframework/container-definitions";
 import { IContainer } from "@fluidframework/container-definitions/internal";

examples/version-migration/separate-container/src/modelVersion2/containerCode.ts

@@ -7,7 +7,6 @@ import { getDataStoreEntryPoint } from "@fluid-example/example-utils";
 import {
 	type IMigratableModel,
 	instantiateMigratableRuntime,
-	// eslint-disable-next-line import/no-internal-modules
 } from "@fluid-example/migration-tools/internal";
 import type {
 	IContainer,

examples/version-migration/separate-container/src/start.ts

@@ -7,9 +7,7 @@ import type {
 	IMigratableModel,
 	IMigrationTool,
 	IVersionedModel,
-	// eslint-disable-next-line import/no-internal-modules
 } from "@fluid-example/migration-tools/internal";
-// eslint-disable-next-line import/no-internal-modules
 import { MigratableModelLoader, Migrator } from "@fluid-example/migration-tools/internal";
 import { RouterliciousDocumentServiceFactory } from "@fluidframework/routerlicious-driver/internal";
 import {
@@ -18,8 +16,8 @@ import {
 	createTinyliciousCreateNewRequest,
 } from "@fluidframework/tinylicious-driver/internal";
 import { createElement } from "react";
-// eslint-disable-next-line import/no-deprecated -- TODO: AB#18875, migrate to React 18 APIs
-import { render, unmountComponentAtNode } from "react-dom";
+// eslint-disable-next-line import/no-internal-modules
+import { createRoot, type Root } from "react-dom/client";
 
 import { inventoryListDataTransformationCallback } from "./dataTransform.js";
 import { DemoCodeLoader } from "./demoCodeLoader.js";
@@ -42,29 +40,27 @@ const isIInventoryListAppModel = (
 
 const getUrlForContainerId = (containerId: string): string => `/#${containerId}`;
 
+let appRoot: Root | undefined;
+let debugRoot: Root | undefined;
+
 const renderModel = (model: IVersionedModel, migrationTool: IMigrationTool): void => {
-	const appDiv = document.querySelector("#app") as HTMLDivElement;
-	// eslint-disable-next-line import/no-deprecated -- TODO: AB#18875, migrate to React 18 APIs
-	unmountComponentAtNode(appDiv);
 	// This demo uses the same view for both versions 1 & 2 - if we wanted to use different views for different model
 	// versions, we could check its version here and select the appropriate view.  Or we could even write ourselves a
 	// view code loader to pull in the view dynamically based on the version we discover.
 	if (isIInventoryListAppModel(model)) {
-		// eslint-disable-next-line import/no-deprecated -- TODO: AB#18875, migrate to React 18 APIs
-		render(createElement(InventoryListAppView, { model, migrationTool }), appDiv);
+		const appDiv = document.querySelector("#app") as HTMLDivElement;
+		appRoot ??= createRoot(appDiv);
+		appRoot.render(createElement(InventoryListAppView, { model, migrationTool }));
 
 		// The DebugView is just for demo purposes, to manually control code proposal and inspect the state.
 		const debugDiv = document.querySelector("#debug") as HTMLDivElement;
-		// eslint-disable-next-line import/no-deprecated -- TODO: AB#18875, migrate to React 18 APIs
-		unmountComponentAtNode(debugDiv);
-		// eslint-disable-next-line import/no-deprecated -- TODO: AB#18875, migrate to React 18 APIs
-		render(
+		debugRoot ??= createRoot(debugDiv);
+		debugRoot.render(
 			createElement(DebugView, {
 				model,
 				migrationTool,
 				getUrlForContainerId,
 			}),
-			debugDiv,
 		);
 	} else {
 		throw new Error(`Don't know how to render version ${model.version}`);

examples/version-migration/separate-container/src/view/appView.tsx

@@ -3,7 +3,6 @@
  * Licensed under the MIT License.
  */
 
-// eslint-disable-next-line import/no-internal-modules
 import type { IMigrationTool } from "@fluid-example/migration-tools/internal";
 import React, { useEffect, useState } from "react";
 

examples/version-migration/separate-container/src/view/debugView.tsx

@@ -7,7 +7,6 @@ import type {
 	IMigratableModel,
 	IMigrationTool,
 	MigrationState,
-	// eslint-disable-next-line import/no-internal-modules
 } from "@fluid-example/migration-tools/internal";
 import React, { useEffect, useState } from "react";