Update React to v18

CHANGELOG.md

@@ -11,6 +11,7 @@
 <a name="breaking_changes_1.29.0">[Breaking Changes:](#breaking_changes_1.29.0)</a>
 
 - [core] `updateThemePreference` and `updateThemeFromPreference` removed from `CommonFrontendContribution`. Corresponding functionality as been moved to the respective theme service. `load` removed from `IconThemeService` [#11473](https://github.com/eclipse-theia/theia/issues/11473)
+- [core] updated `react` and `react-dom` dependencies to version 18, which introduce new root API for rendering (replaces ReactDOM.render). Since React no longer supports render callbacks, the `onRender` field from `ReactDialog` and `ReactWidget` was removed. [#11455](https://github.com/eclipse-theia/theia/pull/11455) - Contributed on behalf of STMicroelectronics
 
 ## v1.28.0 - 7/28/2022
 

doc/Migration.md

@@ -19,6 +19,26 @@ For example:
 }
 ```
 
+### v1.29.0
+
+#### React 18 update
+
+The `react` and `react-dom` dependencies were upgraded to version 18. Some relevant changes include:
+
+ - `ReactDOM.render` is now deprecated and is replaced by `createRoot` from `react-dom/client`
+ - the new API no longer supports render callbacks
+ - updates in promises, setTimeout, event handlers are automatically batched
+
+ Because the currently used version of `react-virtualized` still depends on React 16, a `resolutions` block is needed in the `package.json` for the React 18 dependencies:
+
+ ```json
+"resolutions": {
+    "@types/react": "18.0.15",
+    "@types/react-dom": "18.0.6"
+    ...
+  }
+ ```
+
 ### v1.24.0
 
 #### node-gyp 8.4.1

package.json

@@ -7,7 +7,9 @@
     "node": ">=14"
   },
   "resolutions": {
-    "**/@types/node": "14"
+    "**/@types/node": "14",
+    "@types/react": "18.0.15",
+    "@types/react-dom": "18.0.6"
   },
   "devDependencies": {
     "@types/chai": "4.3.0",

packages/core/README.md

@@ -95,7 +95,8 @@ export class SomeClass {
     - `fs-extra` (from [`fs-extra@^4.0.2`](https://www.npmjs.com/package/fs-extra))
     - `fuzzy` (from [`fuzzy@^0.1.3`](https://www.npmjs.com/package/fuzzy))
     - `inversify` (from [`inversify@^5.1.1`](https://www.npmjs.com/package/inversify))
-    - `react-dom` (from [`react-dom@^16.8.0`](https://www.npmjs.com/package/react-dom))
+    - `react-dom` (from [`react-dom@^18.2.0`](https://www.npmjs.com/package/react-dom))
+    - `react-dom/client` (from [`react-dom@^18.2.0`](https://www.npmjs.com/package/react-dom))
     - `react-virtualized` (from [`react-virtualized@^9.20.0`](https://www.npmjs.com/package/react-virtualized))
     - `vscode-languageserver-protocol` (from [`vscode-languageserver-protocol@~3.15.3`](https://www.npmjs.com/package/vscode-languageserver-protocol))
     - `vscode-uri` (from [`vscode-uri@^2.1.1`](https://www.npmjs.com/package/vscode-uri))
@@ -105,7 +106,7 @@ export class SomeClass {
     - `lodash.throttle` (from [`lodash.throttle@^4.1.1`](https://www.npmjs.com/package/lodash.throttle))
     - `nsfw` (from [`nsfw@^2.1.2`](https://www.npmjs.com/package/nsfw))
     - `markdown-it` (from [`markdown-it@^12.3.2`](https://www.npmjs.com/package/markdown-it))
-    - `react` (from [`react@^16.8.0`](https://www.npmjs.com/package/react))
+    - `react` (from [`react@^18.2.0`](https://www.npmjs.com/package/react))
     - `ws` (from [`ws@^7.1.2`](https://www.npmjs.com/package/ws))
     - `yargs` (from [`yargs@^15.3.1`](https://www.npmjs.com/package/yargs))
 

packages/core/package.json

@@ -26,8 +26,8 @@
     "@types/lodash.debounce": "4.0.3",
     "@types/lodash.throttle": "^4.1.3",
     "@types/markdown-it": "^12.2.3",
-    "@types/react": "^16.8.0",
-    "@types/react-dom": "^16.8.0",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
     "@types/react-virtualized": "^9.18.3",
     "@types/route-parser": "^0.1.1",
     "@types/safer-buffer": "^2.1.0",
@@ -58,8 +58,8 @@
     "nsfw": "^2.1.2",
     "p-debounce": "^2.1.0",
     "perfect-scrollbar": "^1.3.0",
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-tooltip": "^4.2.21",
     "react-virtualized": "^9.20.0",
     "reflect-metadata": "^0.1.10",
@@ -110,6 +110,7 @@
         "fuzzy",
         "inversify",
         "react-dom",
+        "react-dom/client",
         "react-virtualized",
         "vscode-languageserver-protocol",
         "vscode-uri"

packages/core/shared/react-dom/client/index.d.ts

@@ -0,0 +1 @@
+export * from 'react-dom/client';

packages/core/shared/react-dom/client/index.js

@@ -0,0 +1 @@
+module.exports = require('react-dom/client');

packages/core/src/browser/breadcrumbs/breadcrumbs-renderer.tsx

@@ -23,7 +23,6 @@ import PerfectScrollbar from 'perfect-scrollbar';
 import URI from '../../common/uri';
 import { Emitter, Event } from '../../common';
 import { BreadcrumbPopupContainer } from './breadcrumb-popup-container';
-import { DisposableCollection } from '../../common/disposable';
 import { CorePreferences } from '../core-preferences';
 import { Breadcrumb, Styles } from './breadcrumbs-constants';
 import { LabelProvider } from '../label-provider';
@@ -56,7 +55,6 @@ export class BreadcrumbsRenderer extends ReactRenderer {
     protected breadcrumbs: Breadcrumb[] = [];
     protected popup: BreadcrumbPopupContainer | undefined;
     protected scrollbar: PerfectScrollbar | undefined;
-    protected toDispose: DisposableCollection = new DisposableCollection();
 
     get active(): boolean {
         return !!this.breadcrumbs.length;

packages/core/src/browser/dialogs/react-dialog.tsx

@@ -15,28 +15,27 @@
 // *****************************************************************************
 
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { injectable, inject } from 'inversify';
-import { Disposable, DisposableCollection } from '../../common';
+import { Disposable } from '../../common';
 import { Message } from '../widgets';
 import { AbstractDialog, DialogProps } from '../dialogs';
+import { createRoot, Root } from 'react-dom/client';
 
 @injectable()
 export abstract class ReactDialog<T> extends AbstractDialog<T> {
-    protected readonly onRender = new DisposableCollection();
+    protected contentNodeRoot: Root;
 
     constructor(
         @inject(DialogProps) props: DialogProps
     ) {
         super(props);
-        this.toDispose.push(Disposable.create(() => {
-            ReactDOM.unmountComponentAtNode(this.contentNode);
-        }));
+        this.contentNodeRoot = createRoot(this.contentNode);
+        this.toDispose.push(Disposable.create(() => this.contentNodeRoot.unmount()));
     }
 
     protected override onUpdateRequest(msg: Message): void {
         super.onUpdateRequest(msg);
-        ReactDOM.render(<>{this.render()}</>, this.contentNode, () => this.onRender.dispose());
+        this.contentNodeRoot.render(<>{this.render()}</>);
     }
 
     /**

packages/core/src/browser/shell/tab-bar-toolbar/tab-bar-toolbar.tsx

@@ -52,8 +52,11 @@ export class TabBarToolbar extends ReactWidget {
         super();
         this.addClass(TabBarToolbar.Styles.TAB_BAR_TOOLBAR);
         this.hide();
+        this.onRender = this.onRender.bind(this);
     }
 
+    protected onRender = () => this.show();
+
     updateItems(items: Array<TabBarToolbarItem | ReactTabBarToolbarItem>, current: Widget | undefined): void {
         this.inline.clear();
         this.more.clear();
@@ -68,11 +71,6 @@ export class TabBarToolbar extends ReactWidget {
         if (!items.length) {
             this.hide();
         }
-        this.onRender.push(Disposable.create(() => {
-            if (items.length) {
-                this.show();
-            }
-        }));
         this.update();
     }
 
@@ -129,6 +127,7 @@ export class TabBarToolbar extends ReactWidget {
         const toolbarItemClassNames = this.getToolbarItemClassNames(command?.id ?? item.command);
         if (item.menuPath && !item.command) { toolbarItemClassNames.push('enabled'); }
         return <div key={item.id}
+            ref={this.onRender}
             className={toolbarItemClassNames.join(' ')}
             onMouseDown={this.onMouseDownEvent}
             onMouseUp={this.onMouseUpEvent}

packages/core/src/browser/tooltip-service.tsx

@@ -19,7 +19,6 @@ import * as React from 'react';
 import ReactTooltip from 'react-tooltip';
 import { ReactRenderer, RendererHost } from './widgets/react-renderer';
 import { CorePreferences } from './core-preferences';
-import { DisposableCollection } from '../common/disposable';
 import { v4 } from 'uuid';
 
 export const TooltipService = Symbol('TooltipService');
@@ -55,7 +54,6 @@ export class TooltipServiceImpl extends ReactRenderer implements TooltipService
 
     public readonly tooltipId: string;
     protected rendered = false;
-    protected toDispose: DisposableCollection = new DisposableCollection();
 
     constructor(
         @inject(RendererHost) @optional() host?: RendererHost

packages/core/src/browser/tree/tree-widget.tsx

@@ -42,6 +42,7 @@ import { MaybePromise } from '../../common/types';
 import { LabelProvider } from '../label-provider';
 import { CorePreferences } from '../core-preferences';
 import { TreeFocusService } from './tree-focus-service';
+import { useEffect } from 'react';
 
 const debounce = require('lodash.debounce');
 
@@ -467,6 +468,11 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
         return this.model.root;
     }
 
+    protected ScrollingRowRenderer: React.FC<{ rows: TreeWidget.NodeRow[] }> = ({ rows }) => {
+        useEffect(() => this.scrollToSelected());
+        return <>{rows.map(row => <div key={row.index}>{this.renderNodeRow(row)}</div>)}</>;
+    };
+
     protected view: TreeWidget.View | undefined;
     /**
      * Render the tree widget.
@@ -476,8 +482,7 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
         if (model.root) {
             const rows = Array.from(this.rows.values());
             if (this.props.virtualized === false) {
-                this.onRender.push(Disposable.create(() => this.scrollToSelected()));
-                return rows.map(row => <div key={row.index}>{this.renderNodeRow(row)}</div>);
+                return <this.ScrollingRowRenderer rows={rows} />;
             }
             return <TreeWidget.View
                 ref={view => this.view = (view || undefined)}

packages/core/src/browser/widgets/alert-message.tsx

@@ -36,6 +36,7 @@ const AlertMessageIcon = {
 export interface AlertMessageProps {
     type: MessageType;
     header: string;
+    children?: React.ReactNode
 }
 
 export class AlertMessage extends React.Component<AlertMessageProps> {

packages/core/src/browser/widgets/react-renderer.tsx

@@ -16,27 +16,32 @@
 
 import { inject, injectable, optional } from 'inversify';
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import { Disposable } from '../../common';
+import { createRoot, Root } from 'react-dom/client';
+import { Disposable, DisposableCollection } from '../../common';
 
 export type RendererHost = HTMLElement;
 export const RendererHost = Symbol('RendererHost');
 
 @injectable()
 export class ReactRenderer implements Disposable {
+    protected readonly toDispose = new DisposableCollection();
     readonly host: HTMLElement;
+    protected hostRoot: Root;
+
     constructor(
         @inject(RendererHost) @optional() host?: RendererHost
     ) {
         this.host = host || document.createElement('div');
+        this.hostRoot = createRoot(this.host);
+        this.toDispose.push(Disposable.create(() => this.hostRoot.unmount()));
     }
 
     dispose(): void {
-        ReactDOM.unmountComponentAtNode(this.host);
+        this.toDispose.dispose();
     }
 
     render(): void {
-        ReactDOM.render(<React.Fragment>{this.doRender()}</React.Fragment>, this.host);
+        this.hostRoot.render(<React.Fragment>{this.doRender()}</React.Fragment>);
     }
 
     protected doRender(): React.ReactNode {

packages/core/src/browser/widgets/react-widget.tsx

@@ -14,32 +14,31 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
 // *****************************************************************************
 
-import * as ReactDOM from 'react-dom';
 import * as React from 'react';
 import { injectable, unmanaged } from 'inversify';
-import { DisposableCollection, Disposable } from '../../common';
+import { Disposable } from '../../common';
 import { BaseWidget, Message } from './widget';
 import { Widget } from '@phosphor/widgets';
+import { createRoot, Root } from 'react-dom/client';
 
 @injectable()
 export abstract class ReactWidget extends BaseWidget {
 
-    protected readonly onRender = new DisposableCollection();
+    protected nodeRoot: Root;
 
     constructor(@unmanaged() options?: Widget.IOptions) {
         super(options);
         this.scrollOptions = {
             suppressScrollX: true,
             minScrollbarLength: 35,
         };
-        this.toDispose.push(Disposable.create(() => {
-            ReactDOM.unmountComponentAtNode(this.node);
-        }));
+        this.nodeRoot = createRoot(this.node);
+        this.toDispose.push(Disposable.create(() => this.nodeRoot.unmount()));
     }
 
     protected override onUpdateRequest(msg: Message): void {
         super.onUpdateRequest(msg);
-        ReactDOM.render(<React.Fragment>{this.render()}</React.Fragment>, this.node, () => this.onRender.dispose());
+        this.nodeRoot.render(<React.Fragment>{this.render()}</React.Fragment>);
     }
 
     /**

packages/debug/src/browser/editor/debug-breakpoint-widget.tsx

@@ -15,7 +15,7 @@
 // *****************************************************************************
 
 import * as React from '@theia/core/shared/react';
-import * as ReactDOM from '@theia/core/shared/react-dom';
+import { createRoot, Root } from '@theia/core/shared/react-dom/client';
 import { DebugProtocol } from 'vscode-debugprotocol';
 import { injectable, postConstruct, inject } from '@theia/core/shared/inversify';
 import { Disposable, DisposableCollection, nls } from '@theia/core';
@@ -55,6 +55,7 @@ export class DebugBreakpointWidget implements Disposable {
     protected readonly editorProvider: MonacoEditorProvider;
 
     protected selectNode: HTMLDivElement;
+    protected selectNodeRoot: Root;
 
     protected zone: MonacoEditorZoneWidget;
 
@@ -99,6 +100,8 @@ export class DebugBreakpointWidget implements Disposable {
         const selectNode = this.selectNode = document.createElement('div');
         selectNode.classList.add('theia-debug-breakpoint-select');
         this.zone.containerNode.appendChild(selectNode);
+        this.selectNodeRoot = createRoot(this.selectNode);
+        this.toDispose.push(Disposable.create(() => this.selectNodeRoot.unmount()));
 
         const inputNode = document.createElement('div');
         inputNode.classList.add('theia-debug-breakpoint-input');
@@ -148,7 +151,6 @@ export class DebugBreakpointWidget implements Disposable {
             this.zone.layout(heightInLines);
             this.updatePlaceholder();
         }));
-        this.toDispose.push(Disposable.create(() => ReactDOM.unmountComponentAtNode(selectNode)));
     }
 
     dispose(): void {
@@ -213,14 +215,14 @@ export class DebugBreakpointWidget implements Disposable {
         if (this._input) {
             this._input.getControl().setValue(this._values[this.context] || '');
         }
-        ReactDOM.render(<SelectComponent
+        this.selectNodeRoot.render(<SelectComponent
             defaultValue={this.context} onChange={this.updateInput}
             options={[
                 { value: 'condition', label: nls.localizeByDefault('Expression') },
                 { value: 'hitCondition', label: nls.localizeByDefault('Hit Count') },
                 { value: 'logMessage', label: nls.localizeByDefault('Log Message') },
             ]}
-        />, this.selectNode);
+        />);
     }
 
     protected readonly updateInput = (option: SelectOption) => {