fix: Use createRoot instead of ReactDOM render

jfox-box · jfox-box · commit 32f304e7b88d · 2025-12-31T13:09:13.000-08:00
diff --git a/package.json b/package.json
@@ -332,11 +332,11 @@
         "mousetrap": "^1.6.3",
         "pikaday": "^1.8.0",
         "query-string": "5.1.1",
-        "react": "^17.0.1 || ^18.0.0",
+        "react": "^18.0.0 || ^19.0.0",
         "react-animate-height": "^3.2.3",
         "react-aria-components": "^1.10.1",
         "react-beautiful-dnd": "^13.1.1",
-        "react-dom": "^17.0.1 || ^18.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0",
         "react-draggable": "^4.5.0",
         "react-immutable-proptypes": "^2.1.0",
         "react-intl": ">=2.9.0",
diff --git a/src/elements/wrappers/ContentExplorer.js b/src/elements/wrappers/ContentExplorer.js
@@ -5,9 +5,7 @@
  */
 
 import * as React from 'react';
-// TODO switch to createRoot when upgrading to React 18
-// eslint-disable-next-line react/no-deprecated
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import ES6Wrapper from './ES6Wrapper';
 // $FlowFixMe
 import ContentExplorerReactComponent from '../content-explorer';
@@ -103,7 +101,10 @@ class ContentExplorer extends ES6Wrapper {
 
     /** @inheritdoc */
     render() {
-        render(
+        if (!this.root) {
+            this.root = createRoot(this.container);
+        }
+        this.root.render(
             <ContentExplorerReactComponent
                 language={this.language}
                 messages={this.messages}
@@ -121,7 +122,6 @@ class ContentExplorer extends ES6Wrapper {
                 onInteraction={this.onInteraction}
                 {...this.options}
             />,
-            this.container,
         );
     }
 }
diff --git a/src/elements/wrappers/ContentOpenWith.js b/src/elements/wrappers/ContentOpenWith.js
@@ -6,9 +6,7 @@
 
 import 'regenerator-runtime/runtime';
 import * as React from 'react';
-// TODO switch to createRoot when upgrading to React 18
-// eslint-disable-next-line react/no-deprecated
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import ES6Wrapper from './ES6Wrapper';
 import ContentOpenWithReactComponent from '../content-open-with';
 
@@ -33,7 +31,10 @@ class ContentOpenWith extends ES6Wrapper {
 
     /** @inheritdoc */
     render() {
-        render(
+        if (!this.root) {
+            this.root = createRoot(this.container);
+        }
+        this.root.render(
             <ContentOpenWithReactComponent
                 componentRef={this.setComponent}
                 fileId={this.id}
@@ -45,7 +46,6 @@ class ContentOpenWith extends ES6Wrapper {
                 token={this.token}
                 {...this.options}
             />,
-            this.container,
         );
     }
 }
diff --git a/src/elements/wrappers/ContentPicker.js b/src/elements/wrappers/ContentPicker.js
@@ -5,9 +5,7 @@
  */
 
 import * as React from 'react';
-// TODO switch to createRoot when upgrading to React 18
-// eslint-disable-next-line react/no-deprecated
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import ES6Wrapper from './ES6Wrapper';
 import ContentPickerPopup from '../content-picker/ContentPickerPopup';
 import ContentPickerReactComponent from '../content-picker/ContentPicker';
@@ -58,7 +56,10 @@ class ContentPicker extends ES6Wrapper {
     render() {
         const { modal, ...rest }: { modal?: ModalOptions } = this.options;
         const PickerComponent = modal ? ContentPickerPopup : ContentPickerReactComponent;
-        render(
+        if (!this.root) {
+            this.root = createRoot(this.container);
+        }
+        this.root.render(
             <PickerComponent
                 clientName={this.getClientName()}
                 componentRef={this.setComponent}
@@ -72,7 +73,6 @@ class ContentPicker extends ES6Wrapper {
                 type={this.getType()}
                 {...rest}
             />,
-            this.container,
         );
     }
 }
diff --git a/src/elements/wrappers/ContentPreview.js b/src/elements/wrappers/ContentPreview.js
@@ -5,9 +5,7 @@
  */
 
 import * as React from 'react';
-// TODO switch to createRoot when upgrading to React 18
-// eslint-disable-next-line react/no-deprecated
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import ES6Wrapper from './ES6Wrapper';
 import ContentPreviewResponsive from '../content-preview';
 
@@ -22,7 +20,10 @@ class ContentPreview extends ES6Wrapper {
 
     /** @inheritdoc */
     render() {
-        render(
+        if (!this.root) {
+            this.root = createRoot(this.container);
+        }
+        this.root.render(
             <ContentPreviewResponsive
                 componentRef={this.setComponent}
                 fileId={this.id}
@@ -32,7 +33,6 @@ class ContentPreview extends ES6Wrapper {
                 token={this.token}
                 {...this.options}
             />,
-            this.container,
         );
     }
 }
diff --git a/src/elements/wrappers/ContentSharing.js b/src/elements/wrappers/ContentSharing.js
@@ -6,9 +6,7 @@
 
 import * as React from 'react';
 import uniqueId from 'lodash/uniqueId';
-// TODO switch to createRoot when upgrading to React 18
-// eslint-disable-next-line react/no-deprecated
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import ES6Wrapper from './ES6Wrapper';
 import ContentSharingReactComponent from '../content-sharing';
 import { ITEM_TYPE_FILE } from '../../common/constants';
@@ -19,7 +17,10 @@ class ContentSharing extends ES6Wrapper {
     render() {
         const { itemType }: { itemType?: ItemType } = this.options;
 
-        render(
+        if (!this.root) {
+            this.root = createRoot(this.container);
+        }
+        this.root.render(
             <ContentSharingReactComponent
                 itemID={this.id}
                 itemType={itemType || ITEM_TYPE_FILE}
@@ -29,7 +30,6 @@ class ContentSharing extends ES6Wrapper {
                 uuid={uniqueId('contentSharing_')}
                 {...this.options}
             />,
-            this.container,
         );
     }
 }
diff --git a/src/elements/wrappers/ContentSidebar.js b/src/elements/wrappers/ContentSidebar.js
@@ -5,9 +5,7 @@
  */
 
 import * as React from 'react';
-// TODO switch to createRoot when upgrading to React 18
-// eslint-disable-next-line react/no-deprecated
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import ES6Wrapper from './ES6Wrapper';
 import ContentSidebarComponent from '../content-sidebar';
 
@@ -22,7 +20,10 @@ class ContentSidebar extends ES6Wrapper {
 
     /** @inheritdoc */
     render() {
-        render(
+        if (!this.root) {
+            this.root = createRoot(this.container);
+        }
+        this.root.render(
             <ContentSidebarComponent
                 componentRef={this.setComponent}
                 fileId={this.id}
@@ -32,7 +33,6 @@ class ContentSidebar extends ES6Wrapper {
                 token={this.token}
                 {...this.options}
             />,
-            this.container,
         );
     }
 }
diff --git a/src/elements/wrappers/ContentUploader.js b/src/elements/wrappers/ContentUploader.js
@@ -5,9 +5,7 @@
  */
 
 import * as React from 'react';
-// TODO switch to createRoot when upgrading to React 18
-// eslint-disable-next-line react/no-deprecated
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import ES6Wrapper from './ES6Wrapper';
 // $FlowFixMe
 import ContentUploaderPopup from '../content-uploader/ContentUploaderPopup';
@@ -72,7 +70,10 @@ class ContentUploader extends ES6Wrapper {
         const { modal, ...rest }: { modal?: ModalOptions } = this.options;
         const UploaderComponent = modal ? ContentUploaderPopup : WrappedContentUploaderComponent;
 
-        render(
+        if (!this.root) {
+            this.root = createRoot(this.container);
+        }
+        this.root.render(
             <UploaderComponent
                 language={this.language}
                 messages={this.messages}
@@ -87,7 +88,6 @@ class ContentUploader extends ES6Wrapper {
                 modal={((modal: any): ModalOptions)}
                 {...rest}
             />,
-            this.container,
         );
     }
 }
diff --git a/src/elements/wrappers/ES6Wrapper.js b/src/elements/wrappers/ES6Wrapper.js
@@ -5,7 +5,7 @@
  */
 
 import EventEmitter from 'events';
-import ReactDOM from 'react-dom';
+import type { Root } from 'react-dom/client';
 import i18n from '../common/i18n';
 import { DEFAULT_CONTAINER } from '../../constants';
 import type { Token, StringMap } from '../../common/types/core';
@@ -51,6 +51,11 @@ class ES6Wrapper extends EventEmitter {
      */
     component: any;
 
+    /**
+     * @property {Root}
+     */
+    root: Root;
+
     /**
      * Shows the content picker.
      *
@@ -81,8 +86,10 @@ class ES6Wrapper extends EventEmitter {
      */
     hide(): void {
         this.removeAllListeners();
-        // eslint-disable-next-line react/no-deprecated
-        ReactDOM.unmountComponentAtNode(this.container);
+        if (this.root) {
+            this.root.unmount();
+            this.root = null;
+        }
         if (this.container) {
             this.container.innerHTML = '';
         }
