Merge pull request #1517 from mchangrh/react-18

React 18

package-lock.json

@@ -27,15 +27,15 @@
       ],
       "license": "LGPL-3.0-or-later",
       "dependencies": {
-        "react": "^17.0.2",
+        "react": "^18.2.0",
-        "react-dom": "^17.0.2"
+        "react-dom": "^18.2.0"
       },
       "devDependencies": {
         "@types/chrome": "^0.0.197",
         "@types/firefox-webext-browser": "^94.0.1",
         "@types/jest": "^29.1.2",
-        "@types/react": "^17.0.47",
+        "@types/react": "^18.0.21",
-        "@types/react-dom": "^17.0.17",
+        "@types/react-dom": "^18.0.6",
         "@types/selenium-webdriver": "^4.1.5",
         "@types/wicg-mediasession": "^1.1.4",
         "@typescript-eslint/eslint-plugin": "^5.39.0",
@@ -1942,9 +1942,9 @@
       "dev": true
     },
     "node_modules/@types/react": {
-      "version": "17.0.47",
+      "version": "18.0.21",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.47.tgz",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.21.tgz",
-      "integrity": "sha512-mk0BL8zBinf2ozNr3qPnlu1oyVTYq+4V7WA76RgxUAtf0Em/Wbid38KN6n4abEkvO4xMTBWmnP1FtQzgkEiJoA==",
+      "integrity": "sha512-7QUCOxvFgnD5Jk8ZKlUAhVcRj7GuJRjnjjiY/IUBWKgOlnvDvTMLD4RTF7NPyVmbRhNrbomZiOepg7M/2Kj1mA==",
       "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
@@ -1953,12 +1953,12 @@
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "17.0.17",
+      "version": "18.0.6",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.17.tgz",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.6.tgz",
-      "integrity": "sha512-VjnqEmqGnasQKV0CWLevqMTXBYG9GbwuE6x3VetERLh0cq2LTptFE73MrQi2S7GkKXCf2GgwItB/melLnxfnsg==",
+      "integrity": "sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==",
       "dev": true,
       "dependencies": {
-        "@types/react": "^17"
+        "@types/react": "*"
       }
     },
     "node_modules/@types/responselike": {
@@ -10299,6 +10299,7 @@
     "node_modules/object-assign": {
       "version": "4.1.1",
       "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -11071,26 +11072,26 @@
       }
     },
     "node_modules/react": {
-      "version": "17.0.2",
+      "version": "18.2.0",
-      "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
       "dependencies": {
-        "loose-envify": "^1.1.0",
+        "loose-envify": "^1.1.0"
-        "object-assign": "^4.1.1"
       },
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/react-dom": {
-      "version": "17.0.2",
+      "version": "18.2.0",
-      "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
       "dependencies": {
         "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
+        "scheduler": "^0.23.0"
-        "scheduler": "^0.20.2"
       },
       "peerDependencies": {
-        "react": "17.0.2"
+        "react": "^18.2.0"
       }
     },
     "node_modules/react-is": {
@@ -11471,11 +11472,11 @@
       }
     },
     "node_modules/scheduler": {
-      "version": "0.20.2",
+      "version": "0.23.0",
-      "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
       "dependencies": {
-        "loose-envify": "^1.1.0",
+        "loose-envify": "^1.1.0"
-        "object-assign": "^4.1.1"
       }
     },
     "node_modules/schema-utils": {
@@ -15065,9 +15066,9 @@
       "dev": true
     },
     "@types/react": {
-      "version": "17.0.47",
+      "version": "18.0.21",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.47.tgz",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.21.tgz",
-      "integrity": "sha512-mk0BL8zBinf2ozNr3qPnlu1oyVTYq+4V7WA76RgxUAtf0Em/Wbid38KN6n4abEkvO4xMTBWmnP1FtQzgkEiJoA==",
+      "integrity": "sha512-7QUCOxvFgnD5Jk8ZKlUAhVcRj7GuJRjnjjiY/IUBWKgOlnvDvTMLD4RTF7NPyVmbRhNrbomZiOepg7M/2Kj1mA==",
       "dev": true,
       "requires": {
         "@types/prop-types": "*",
@@ -15076,12 +15077,12 @@
       }
     },
     "@types/react-dom": {
-      "version": "17.0.17",
+      "version": "18.0.6",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.17.tgz",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.6.tgz",
-      "integrity": "sha512-VjnqEmqGnasQKV0CWLevqMTXBYG9GbwuE6x3VetERLh0cq2LTptFE73MrQi2S7GkKXCf2GgwItB/melLnxfnsg==",
+      "integrity": "sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==",
       "dev": true,
       "requires": {
-        "@types/react": "^17"
+        "@types/react": "*"
       }
     },
     "@types/responselike": {
@@ -21217,7 +21218,8 @@
     },
     "object-assign": {
       "version": "4.1.1",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+      "dev": true
     },
     "object-inspect": {
       "version": "1.12.0",
@@ -21792,20 +21794,20 @@
       }
     },
     "react": {
-      "version": "17.0.2",
+      "version": "18.2.0",
-      "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
       "requires": {
-        "loose-envify": "^1.1.0",
+        "loose-envify": "^1.1.0"
-        "object-assign": "^4.1.1"
       }
     },
     "react-dom": {
-      "version": "17.0.2",
+      "version": "18.2.0",
-      "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
       "requires": {
         "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
+        "scheduler": "^0.23.0"
-        "scheduler": "^0.20.2"
       }
     },
     "react-is": {
@@ -22099,11 +22101,11 @@
       }
     },
     "scheduler": {
-      "version": "0.20.2",
+      "version": "0.23.0",
-      "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
       "requires": {
-        "loose-envify": "^1.1.0",
+        "loose-envify": "^1.1.0"
-        "object-assign": "^4.1.1"
       }
     },
     "schema-utils": {

package.json

@@ -4,15 +4,15 @@
   "description": "",
   "main": "background.js",
   "dependencies": {
-    "react": "^17.0.2",
+    "react": "^18.2.0",
-    "react-dom": "^17.0.2"
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@types/chrome": "^0.0.197",
     "@types/firefox-webext-browser": "^94.0.1",
     "@types/jest": "^29.1.2",
-    "@types/react": "^17.0.47",
+    "@types/react": "^18.0.21",
-    "@types/react-dom": "^17.0.17",
+    "@types/react-dom": "^18.0.6",
     "@types/selenium-webdriver": "^4.1.5",
     "@types/wicg-mediasession": "^1.1.4",
     "@typescript-eslint/eslint-plugin": "^5.39.0",

src/components/NoticeComponent.tsx

@@ -36,6 +36,7 @@ export interface NoticeProps {
     zIndex?: number,
     style?: React.CSSProperties
     biggerCloseButton?: boolean;
+    children?: React.ReactNode
 }
 
 export interface NoticeState {

src/components/NoticeTextSectionComponent.tsx

@@ -4,7 +4,8 @@ export interface NoticeTextSelectionProps {
     icon?: string,
     text: string,
     idSuffix: string,
-    onClick?: (event: React.MouseEvent) => unknown
+    onClick?: (event: React.MouseEvent) => unknown,
+    children?: React.ReactNode
 }
 
 export interface NoticeTextSelectionState {

src/components/SponsorTimeEditComponent.tsx

@@ -23,6 +23,7 @@ export interface SponsorTimeEditProps {
     submissionNotice: SubmissionNoticeComponent;
     categoryList?: Category[];
     categoryChangeListener?: (index: number, category: Category) => void;
+    children?: React.ReactNode;
 }
 
 export interface SponsorTimeEditState {

src/components/options/CategorySkipOptionsComponent.tsx

@@ -13,6 +13,7 @@ export interface CategorySkipOptionsProps {
     category: Category;
     defaultColor?: string;
     defaultPreviewColor?: string;
+    children?: React.ReactNode;
 }
 
 export interface CategorySkipOptionsState {

src/components/options/KeybindComponent.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createRoot, Root } from 'react-dom/client';
 import Config from "../../config";
 import { Keybind } from "../../types";
 import KeybindDialogComponent from "./KeybindDialogComponent";
@@ -14,6 +14,7 @@ export interface KeybindState {
 }
 
 let dialog;
+let root: Root;
 
 class KeybindComponent extends React.Component<KeybindProps, KeybindState> {
     constructor(props: KeybindProps) {
@@ -56,11 +57,12 @@ class KeybindComponent extends React.Component<KeybindProps, KeybindState> {
         dialog = parent.document.createElement("div");
         dialog.id = "keybind-dialog";
         parent.document.body.prepend(dialog);
-        ReactDOM.render(<KeybindDialogComponent option={this.props.option} closeListener={(updateWith) => this.closeEditDialog(updateWith)} />, dialog);
+        root = createRoot(dialog);
+        root.render(<KeybindDialogComponent option={this.props.option} closeListener={(updateWith) => this.closeEditDialog(updateWith)} />);
     }
 
     closeEditDialog(updateWith: Keybind): void {
-        ReactDOM.unmountComponentAtNode(dialog);
+        root.unmount();
         dialog.remove();
         if (updateWith != null)
             this.setState({keybind: updateWith});

src/components/options/UnsubmittedVideoListItem.tsx

@@ -5,6 +5,7 @@ import { exportTimes, exportTimesAsHashParam } from "../../utils/exporter";
 
 export interface UnsubmittedVideosListItemProps {
     videoID: string;
+    children?: React.ReactNode;
 }
 
 export interface UnsubmittedVideosListItemState {

src/options.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createRoot } from 'react-dom/client';
 
 import Config from "./config";
 import * as CompileConfig from "../config.json";
@@ -258,7 +258,8 @@ async function init() {
                 break;
             }
             case "keybind-change": {
-                ReactDOM.render(React.createElement(KeybindComponent, {option: option}), optionsElements[i].querySelector("div"));
+                const root = createRoot(optionsElements[i].querySelector("div"));
+                root.render(React.createElement(KeybindComponent, {option: option}));
                 break;
             }
             case "display": {

src/render/CategoryChooser.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createRoot } from 'react-dom/client';
+
 import CategoryChooserComponent from "../components/options/CategoryChooserComponent";
 
 class CategoryChooser {
@@ -9,9 +10,9 @@ class CategoryChooser {
     constructor(element: Element) {
         this.ref = React.createRef();
 
-        ReactDOM.render(
+        const root = createRoot(element);
-            <CategoryChooserComponent ref={this.ref} />,
+        root.render(
-            element
+            <CategoryChooserComponent ref={this.ref} />
         );
     }
 

src/render/ChapterVote.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createRoot, Root } from 'react-dom/client';
 import ChapterVoteComponent, { ChapterVoteState } from "../components/ChapterVoteComponent";
 import { VoteResponse } from "../messageTypes";
 import { Category, SegmentUUID, SponsorTime } from "../types";
@@ -7,6 +7,7 @@ import { Category, SegmentUUID, SponsorTime } from "../types";
 export class ChapterVote {
     container: HTMLElement;
     ref: React.RefObject<ChapterVoteComponent>;
+    root: Root;
 
     unsavedState: ChapterVoteState;
 
@@ -19,10 +20,8 @@ export class ChapterVote {
         this.container.id = "chapterVote";
         this.container.style.height = "100%";
 
-        ReactDOM.render(
+        this.root = createRoot(this.container);
-            <ChapterVoteComponent ref={this.ref} vote={vote} />,
+        this.root.render(<ChapterVoteComponent ref={this.ref} vote={vote} />);
-            this.container
-        );
     }
 
     getContainer(): HTMLElement {
@@ -30,7 +29,7 @@ export class ChapterVote {
     }
 
     close(): void {
-        ReactDOM.unmountComponentAtNode(this.container);
+        this.root.unmount();
         this.container.remove();
     }
 

src/render/GenericNotice.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createRoot, Root } from 'react-dom/client';
 import NoticeComponent from "../components/NoticeComponent";
 
 import Utils from "../utils";
@@ -35,6 +35,7 @@ export default class GenericNotice {
     noticeElement: HTMLDivElement;
     noticeRef: React.MutableRefObject<NoticeComponent>;
     idSuffix: string;
+    root: Root;
 
     constructor(contentContainer: ContentContainer, idSuffix: string, options: NoticeOptions) {
         this.noticeRef = React.createRef();
@@ -49,11 +50,13 @@ export default class GenericNotice {
 
         referenceNode.prepend(this.noticeElement);
 
+        this.root = createRoot(this.noticeElement);
+
         this.update(options);
     }
 
     update(options: NoticeOptions): void {
-        ReactDOM.render(
+        this.root.render(
             <NoticeComponent
                 noticeTitle={options.title}
                 idSuffix={this.idSuffix}
@@ -92,8 +95,7 @@ export default class GenericNotice {
                         </>
                     : null}
 
-            </NoticeComponent>,
+            </NoticeComponent>
-            this.noticeElement
         );
     }
 
@@ -137,7 +139,7 @@ export default class GenericNotice {
     }
 
     close(): void {
-        ReactDOM.unmountComponentAtNode(this.noticeElement);
+        this.root.unmount();
 
         this.noticeElement.remove();
     }

src/render/RectangleTooltip.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createRoot, Root } from 'react-dom/client';
 
 export interface RectangleTooltipProps {
     text: string, 
@@ -20,7 +20,7 @@ export interface RectangleTooltipProps {
 export class RectangleTooltip {
     text: string;   
     container: HTMLDivElement;
-
+    root: Root;
     timer: NodeJS.Timeout;
     
     constructor(props: RectangleTooltipProps) {
@@ -47,7 +47,8 @@ export class RectangleTooltip {
             this.timer = setTimeout(() => this.close(), props.timeout * 1000);
         }
 
-        ReactDOM.render(
+        this.root = createRoot(this.container);
+        this.root.render(
             <div style={{
                 bottom: props.bottomOffset, 
                 left: props.leftOffset,
@@ -81,13 +82,12 @@ export class RectangleTooltip {
 
                         {chrome.i18n.getMessage("GotIt")}
                     </button>
-            </div>,
+            </div>
-            this.container
         )
     }
 
     close(): void {
-        ReactDOM.unmountComponentAtNode(this.container);
+        this.root.unmount();
         this.container.remove();
 
         if (this.timer) clearTimeout(this.timer);

src/render/SkipNotice.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createRoot, Root } from 'react-dom/client';
 
 import Utils from "../utils";
 const utils = new Utils();
@@ -18,6 +18,7 @@ class SkipNotice {
     noticeElement: HTMLDivElement;
 
     skipNoticeRef: React.MutableRefObject<SkipNoticeComponent>;
+    root: Root;
 
     constructor(segments: SponsorTime[], autoSkip = false, contentContainer: ContentContainer, unskipTime: number = null, startReskip = false) {
         this.skipNoticeRef = React.createRef();
@@ -41,7 +42,8 @@ class SkipNotice {
 
         referenceNode.prepend(this.noticeElement);
 
-        ReactDOM.render(
+        this.root = createRoot(this.noticeElement);
+        this.root.render(
             <SkipNoticeComponent segments={segments} 
                 autoSkip={autoSkip} 
                 startReskip={startReskip}
@@ -50,8 +52,7 @@ class SkipNotice {
                 closeListener={() => this.close()}
                 smaller={Config.config.noticeVisibilityMode >= NoticeVisbilityMode.MiniForAll 
                     || (Config.config.noticeVisibilityMode >= NoticeVisbilityMode.MiniForAutoSkip && autoSkip)}
-                unskipTime={unskipTime} />,
+                unskipTime={unskipTime} />
-            this.noticeElement
         );
     }
 
@@ -62,7 +63,7 @@ class SkipNotice {
     }
 
     close(): void {
-        ReactDOM.unmountComponentAtNode(this.noticeElement);
+        this.root.unmount();
 
         this.noticeElement.remove();
 

src/render/SubmissionNotice.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createRoot, Root } from 'react-dom/client';
 
 import Utils from "../utils";
 const utils = new Utils();
@@ -17,6 +17,8 @@ class SubmissionNotice {
 
     noticeElement: HTMLDivElement;
 
+    root: Root;
+
     constructor(contentContainer: ContentContainer, callback: () => unknown) {
         this.noticeRef = React.createRef();
 
@@ -30,13 +32,13 @@ class SubmissionNotice {
 
         referenceNode.prepend(this.noticeElement);
 
-        ReactDOM.render(
+        this.root = createRoot(this.noticeElement);
+        this.root.render(
             <SubmissionNoticeComponent
                 contentContainer={contentContainer}
                 callback={callback} 
                 ref={this.noticeRef}
-                closeListener={() => this.close(false)} />,
+                closeListener={() => this.close(false)} />
-            this.noticeElement
         );
     }
 
@@ -46,7 +48,7 @@ class SubmissionNotice {
 
     close(callRef = true): void {
         if (callRef) this.noticeRef.current.cancel();
-        ReactDOM.unmountComponentAtNode(this.noticeElement);
+        this.root.unmount();
 
         this.noticeElement.remove();
     }

src/render/Tooltip.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createRoot, Root } from 'react-dom/client';
 import { ButtonListener } from "../types";
 
 export interface TooltipProps {
@@ -26,6 +26,7 @@ export class Tooltip {
     container: HTMLDivElement;
 
     timer: NodeJS.Timeout;
+    root: Root;
     
     constructor(props: TooltipProps) {
         props.bottomOffset ??= "70px";
@@ -55,7 +56,8 @@ export class Tooltip {
 
         const backgroundColor = `rgba(28, 28, 28, ${props.opacity})`;
 
-        ReactDOM.render(
+        this.root = createRoot(this.container);
+        this.root.render(
             <div style={{bottom: props.bottomOffset, left: props.leftOffset, right: props.rightOffset, backgroundColor}} 
                 className={"sponsorBlockTooltip" + (props.displayTriangle ? " sbTriangle" : "") + ` ${props.extraClass}`}>
                 <div>
@@ -93,8 +95,7 @@ export class Tooltip {
                         {chrome.i18n.getMessage("GotIt")}
                     </button>
                 : null}
-            </div>,
+            </div>
-            this.container
         )
     }
 
@@ -120,7 +121,7 @@ export class Tooltip {
     }
 
     close(): void {
-        ReactDOM.unmountComponentAtNode(this.container);
+        this.root.unmount();
         this.container.remove();
 
         if (this.timer) clearTimeout(this.timer);

src/render/UnsubmittedVideos.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createRoot } from 'react-dom/client';
 import UnsubmittedVideosComponent from "../components/options/UnsubmittedVideosComponent";
 
 class UnsubmittedVideos {
@@ -9,9 +9,9 @@ class UnsubmittedVideos {
     constructor(element: Element) {
         this.ref = React.createRef();
 
-        ReactDOM.render(
+        const root = createRoot(element);
-            <UnsubmittedVideosComponent ref={this.ref} />,
+        root.render(
-            element
+            <UnsubmittedVideosComponent ref={this.ref} />
         );
     }