feat(react 18): upgrade to react 18.

package.json

@@ -79,15 +79,15 @@
         "@swc/core": "^1.3.107",
         "@swc/jest": "^0.2.36",
         "@testing-library/jest-dom": "^6.4.2",
-        "@testing-library/react": "12.1.2",
+        "@testing-library/react": "^15.0.5",
         "@types/chrome": "0.0.260",
         "@types/jest": "^29.5.11",
         "@types/jsdom": "^21.1.6",
         "@types/lodash": "^4.14.202",
         "@types/luxon": "^3.4.2",
         "@types/node": "^16.11.7",
-        "@types/react": "^16.14.25",
-        "@types/react-dom": "^16.9.15",
+        "@types/react": "^18.3.1",
+        "@types/react-dom": "^18.3.0",
         "@types/react-helmet": "^6.1.11",
         "@types/react-router-dom": "^5.3.3",
         "@types/serve-static": "^1.15.5",
@@ -151,7 +151,7 @@
         "webpack-node-externals": "^3.0.0"
     },
     "dependencies": {
-        "@fluentui/react": "^8.96.1",
+        "@fluentui/react": "^8.118.1",
         "@microsoft/applicationinsights-web": "^2.8.15",
         "@testing-library/user-event": "^14.5.2",
         "ajv": "^8.12.0",
@@ -160,9 +160,9 @@
         "idb-keyval": "^6.2.1",
         "lodash": "^4.17.21",
         "luxon": "^3.4.4",
-        "react": "^16.14.0",
-        "react-dom": "^16.14.0",
-        "react-helmet": "^6.1.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "react-helmet-async": "^2.0.5",
         "react-resize-detector": "^9.1.1",
         "react-router-dom": "^6.21.3",
         "tabbable": "^6.2.0",

packages/report/package.json

@@ -18,14 +18,14 @@
         "url": "https://github.com/Microsoft/accessibility-insights-web"
     },
     "dependencies": {
-        "@fluentui/react": "^8.96.1",
+        "@fluentui/react": "^8.118.1",
         "axe-core": "4.8.4",
         "classnames": "^2.5.1",
         "lodash": "^4.17.21",
         "luxon": "^3.4.4",
-        "react": "^16.14.0",
-        "react-dom": "^16.14.0",
-        "react-helmet": "^6.1.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "react-helmet-async": "^2.0.5",
         "uuid": "^9.0.1"
     }
 }

packages/ui/package.json

@@ -22,9 +22,9 @@
         "classnames": "^2.5.1",
         "lodash": "^4.17.21",
         "luxon": "^3.4.4",
-        "react": "^16.14.0",
-        "react-dom": "^16.14.0",
-        "react-helmet": "^6.1.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "react-helmet-async": "^2.0.5",
         "react-resize-detector": "^9.1.1",
         "uuid": "^9.0.1"
     }

src/DetailsView/components/assessment-instance-table.tsx

@@ -14,7 +14,7 @@ import { AssessmentDefaultMessageGenerator } from 'assessments/assessment-defaul
 import { InstanceTableHeaderType, InstanceTableRow } from 'assessments/types/instance-table-data';
 import { InsightsCommandButton } from 'common/components/controls/insights-command-button';
 import { ManualTestStatus } from 'common/types/store-data/manual-test-status';
-import { has } from 'lodash';
+import { hasIn } from 'lodash';
 import * as React from 'react';
 import {
     AssessmentNavState,
@@ -137,7 +137,7 @@ export class AssessmentInstanceTable extends React.Component<AssessmentInstanceT
     private isAnyInstanceStatusUnknown(items: InstanceTableRow[], step: string): boolean {
         return items.some(
             item =>
-                has(item.instance.testStepResults, step) &&
+                hasIn(item.instance.testStepResults, step) &&
                 item.instance.testStepResults[step].status === ManualTestStatus.UNKNOWN,
         );
     }

src/DetailsView/details-view-initializer.ts

@@ -81,7 +81,7 @@ import {
     TabStopsFailedCounterIncludingNoInstance,
     TabStopsFailedCounterInstancesOnly,
 } from 'DetailsView/tab-stops-failed-counter';
-import * as ReactDOM from 'react-dom';
+import * as ReactDOMClient from 'react-dom/client';
 import { ReportExportServiceProviderImpl } from 'report-export/report-export-service-provider-impl';
 import { AssessmentJsonExportGenerator } from 'reports/assessment-json-export-generator';
 import { AssessmentReportHtmlGenerator } from 'reports/assessment-report-html-generator';
@@ -735,7 +735,7 @@ if (tabId != null) {
             const renderer = new DetailsViewRenderer(
                 deps,
                 dom,
-                ReactDOM.render,
+                ReactDOMClient.createRoot,
                 documentElementSetter,
             );
 
@@ -751,7 +751,7 @@ if (tabId != null) {
         .catch(() => {
             const renderer = createNullifiedRenderer(
                 document,
-                ReactDOM.render,
+                ReactDOMClient.createRoot,
                 createDefaultLogger(),
             );
             renderer.render();
@@ -760,7 +760,7 @@ if (tabId != null) {
 
 function createNullifiedRenderer(
     doc: Document,
-    render: typeof ReactDOM.render,
+    createRoot: typeof ReactDOMClient.createRoot,
     logger: Logger,
 ): NoContentAvailableViewRenderer {
     // using an instance of an actual store (instead of a StoreProxy) so we can get the default state.
@@ -773,5 +773,5 @@ function createNullifiedRenderer(
         getNarrowModeThresholds: getNarrowModeThresholdsForWeb,
     };
 
-    return new NoContentAvailableViewRenderer(deps, doc, render, documentElementSetter);
+    return new NoContentAvailableViewRenderer(deps, doc, createRoot, documentElementSetter);
 }

src/DetailsView/details-view-renderer.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import * as ReactDOMClient from 'react-dom/client';
 import { Theme, ThemeDeps } from '../common/components/theme';
 import { config } from '../common/configuration';
 import { DocumentManipulator } from '../common/document-manipulator';
@@ -12,21 +12,20 @@ export class DetailsViewRenderer {
     constructor(
         private readonly deps: DetailsViewRendererDeps,
         private readonly dom: Document,
-        private readonly renderer: typeof ReactDOM.render,
+        private readonly createRoot: typeof ReactDOMClient.createRoot,
         private readonly documentManipulator: DocumentManipulator,
     ) {}
 
     public render(): void {
-        const detailsViewContainer = this.dom.querySelector('#details-container');
+        const detailsViewContainer = this.dom.querySelector('#details-container') as Element;
         const iconPath = '../' + config.getOption('icon128');
         this.documentManipulator.setShortcutIcon(iconPath);
-
-        this.renderer(
+        const root = this.createRoot(detailsViewContainer);
+        root.render(
             <>
                 <Theme deps={this.deps} />
                 <DetailsView deps={this.deps} />
             </>,
-            detailsViewContainer,
         );
     }
 }

src/DetailsView/no-content-available-view-renderer.tsx

@@ -6,22 +6,22 @@ import {
     NoContentAvailableViewDeps,
 } from 'DetailsView/components/no-content-available/no-content-available-view';
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import * as ReactDOMClient from 'react-dom/client';
 import { config } from '../common/configuration';
 
 export class NoContentAvailableViewRenderer {
     constructor(
         private readonly deps: NoContentAvailableViewDeps,
         private readonly dom: Document,
-        private readonly renderer: typeof ReactDOM.render,
+        private readonly createRoot: typeof ReactDOMClient.createRoot,
         private readonly documentManipulator: DocumentManipulator,
     ) {}
 
     public render(): void {
-        const detailsViewContainer = this.dom.querySelector('#details-container');
+        const detailsViewContainer = this.dom.querySelector('#details-container') as Element;
         const iconPath = '../' + config.getOption('icon128');
         this.documentManipulator.setShortcutIcon(iconPath);
-
-        this.renderer(<NoContentAvailableView deps={this.deps} />, detailsViewContainer);
+        const root = this.createRoot(detailsViewContainer);
+        root.render(<NoContentAvailableView deps={this.deps} />);
     }
 }

src/assessments/common/property-bag-column-renderer.tsx

@@ -50,7 +50,8 @@ export function propertyBagColumnRenderer<TPropertyBag extends ColumnValueBag>(
         propertyMap: DictionaryStringTo<string>,
     ) => {
         if (isEmpty(propertyMap)) {
-            return <React.Fragment>{config.defaultValue}</React.Fragment>;
+            const value: any = config.defaultValue;
+            return <React.Fragment>{value}</React.Fragment>;
         }
 
         return Object.keys(propertyMap).map(key => {

src/common/components/with-store-subscription.tsx

@@ -14,7 +14,7 @@ export type WithStoreSubscriptionDeps<T> = {
 };
 
 export function withStoreSubscription<P extends WithStoreSubscriptionProps<S>, S>(
-    WrappedComponent: React.ComponentType<P>,
+    WrappedComponent: React.ComponentType<React.PropsWithChildren<P>>,
 ): React.ComponentClass<Pick<P, Exclude<keyof P, keyof { storeState: S }>>, Partial<S>> & {
     displayName: string;
 } {

src/common/extensibility/react-extension-point.tsx

@@ -20,14 +20,14 @@ type ExtensionPoint<C> = {
     apply: (component: C) => Extension<C>;
 };
 
-type ReactExtension<P> = Extension<React.FC<P>> & {
+type ReactExtension<P> = Extension<React.FC<React.PropsWithChildren<P>>> & {
     extensionType: 'reactComponent';
 };
 
-type ReactExtensionPoint<P extends {}> = ExtensionPoint<React.FC<P>> & {
+type ReactExtensionPoint<P extends {}> = ExtensionPoint<React.FC<React.PropsWithChildren<P>>> & {
     extensionType: 'reactComponent';
-    create: (component: React.FC<P>) => ReactExtension<P>;
-    component: React.FC<P & { extensions: AnyExtension[] }>;
+    create: (component: React.FC<React.PropsWithChildren<P>>) => ReactExtension<P>;
+    component: React.FC<React.PropsWithChildren<P & { extensions: AnyExtension[] }>>;
 };
 
 function isReactExtension(extension: Extension<any>): extension is ReactExtension<any> {
@@ -55,7 +55,7 @@ export function reactExtensionPoint<P extends {}>(
         return result;
     });
 
-    function create(extensionComponent: React.FC<P>): ReactExtension<P> {
+    function create(extensionComponent: React.FC<React.PropsWithChildren<P>>): ReactExtension<P> {
         const Wrap = extensionComponent;
         const wrapComponent = NamedFC<P>(extensionPointKey, props => <Wrap {...props} />);
         wrapComponent.displayName = extensionPointKey;

src/common/react/named-fc.ts

@@ -2,11 +2,13 @@
 // Licensed under the MIT License.
 import * as React from 'react';
 
-export type ReactFCWithDisplayName<P = {}> = React.FC<P> & { displayName: string };
+export type ReactFCWithDisplayName<P = {}> = React.FC<React.PropsWithChildren<P>> & {
+    displayName: string;
+};
 
 export function NamedFC<P = {}>(
     displayName: string,
-    component: React.FC<P>,
+    component: React.FC<React.PropsWithChildren<P>>,
 ): ReactFCWithDisplayName<P> {
     component.displayName = displayName;
 

src/common/types/link-component-type.ts

@@ -2,4 +2,4 @@
 // Licensed under the MIT License.
 import { ILinkProps } from '@fluentui/react';
 
-export type LinkComponentType = React.FC<ILinkProps>;
+export type LinkComponentType = React.FC<React.PropsWithChildren<ILinkProps>>;

src/debug-tools/initializer/debug-tools-init.tsx

@@ -30,7 +30,7 @@ import { defaultDateFormatter } from 'debug-tools/components/telemetry-viewer/te
 import { TelemetryListener } from 'debug-tools/controllers/telemetry-listener';
 import { DebugToolsNavStore } from 'debug-tools/stores/debug-tools-nav-store';
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import UAParser from 'ua-parser-js';
 
 export const initializeDebugTools = () => {
@@ -108,8 +108,8 @@ const createStoreProxies = (storeUpdateMessageHub: StoreUpdateMessageHub) => {
 
 const render = (deps: DebugToolsViewDeps) => {
     const container = document.querySelector('#debug-tools-container');
-
-    ReactDOM.render(<DebugToolsView deps={deps} />, container);
+    const root = createRoot(container);
+    root.render(<DebugToolsView deps={deps} />);
 };
 
 initializeDebugTools();

src/injected/dialog-renderer-impl.tsx

@@ -26,7 +26,7 @@ import { IssueFilingUrlStringUtils } from 'issue-filing/common/issue-filing-url-
 import { PlainTextFormatter } from 'issue-filing/common/markup/plain-text-formatter';
 import { AxeResultToIssueFilingDataConverter } from 'issue-filing/rule-result-to-issue-filing-data';
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import * as ReactDOMClient from 'react-dom/client';
 import { Target } from 'scanner/iruleresults';
 import { DictionaryStringTo } from 'types/common-types';
 import { rootContainerId } from './constants';
@@ -43,7 +43,7 @@ export class DialogRendererImpl implements DialogRenderer {
 
     constructor(
         private readonly dom: Document,
-        private readonly renderer: typeof ReactDOM.render,
+        private readonly createRoot: typeof ReactDOMClient.createRoot,
         private readonly frameMessenger: SingleFrameMessenger,
         private readonly htmlElementUtils: HTMLElementUtils,
         private readonly windowUtils: WindowUtils,
@@ -101,8 +101,8 @@ export class DialogRendererImpl implements DialogRenderer {
                 userConfigMessageCreator: mainWindowContext.getUserConfigMessageCreator(),
                 LinkComponent: NewTabLink,
             };
-
-            this.renderer(
+            const root = this.createRoot(dialogContainer);
+            root.render(
                 <LayeredDetailsDialogComponent
                     deps={deps}
                     failedRules={failedRules}
@@ -114,7 +114,6 @@ export class DialogRendererImpl implements DialogRenderer {
                     devToolsShortcut={getPlatform(this.windowUtils).devToolsShortcut}
                     devToolActionMessageCreator={mainWindowContext.getDevToolActionMessageCreator()}
                 />,
-                dialogContainer,
             );
             return null;
         } else {

src/injected/visualization/issues-formatter.ts

@@ -5,7 +5,7 @@ import { NavigatorUtils } from 'common/navigator-utils';
 import { HtmlElementAxeResults } from 'common/types/store-data/visualization-scan-result-data';
 import { DialogRendererImpl } from 'injected/dialog-renderer-impl';
 import { SingleFrameMessenger } from 'injected/frameCommunicators/single-frame-messenger';
-import * as ReactDOM from 'react-dom';
+import * as ReactDOMClient from 'react-dom/client';
 
 import { BrowserAdapter } from '../../common/browser-adapters/browser-adapter';
 import { HTMLElementUtils } from '../../common/html-element-utils';
@@ -31,7 +31,7 @@ export class IssuesFormatter implements Formatter {
     ) {
         this.dialogRenderer = new DialogRendererImpl(
             document,
-            ReactDOM.render,
+            ReactDOMClient.createRoot,
             frameMessenger,
             htmlElementUtils,
             windowUtils,

src/popup/components/diagnostic-view-toggle.tsx

@@ -46,7 +46,7 @@ export class DiagnosticViewToggle extends React.Component<
 
     // Must be consistent with internal react naming for same property to work
     // tslint:disable-next-line: variable-name
-    private _isMounted: boolean;
+    protected _isMounted: boolean;
 
     constructor(props: DiagnosticViewToggleProps) {
         super(props);

src/popup/incompatible-browser-renderer.tsx

@@ -2,21 +2,21 @@
 // Licensed under the MIT License.
 import { title } from 'content/strings/application';
 import * as React from 'react';
-import ReactDOM from 'react-dom';
+import * as ReactDOMClient from 'react-dom/client';
 
 import { NewTabLink } from '../common/components/new-tab-link';
 import { Header } from './components/header';
 
 export class IncompatibleBrowserRenderer {
     constructor(
-        private readonly renderer: typeof ReactDOM.render,
+        private readonly createRoot: typeof ReactDOMClient.createRoot,
         private readonly dom: Document,
     ) {}
 
     public render(): void {
-        const container = this.dom.querySelector('#popup-container');
-
-        this.renderer(
+        const container = this.dom.querySelector('#popup-container') as Element;
+        const root = this.createRoot(container);
+        root.render(
             <>
                 <div className="ms-Fabric unsupported-browser-info-panel">
                     <Header title={title} />
@@ -38,7 +38,6 @@ export class IncompatibleBrowserRenderer {
                     </div>
                 </div>
             </>,
-            container,
         );
     }
 }