fix: use createRoot instead of ReactDom.render

about_preload.js

@@ -9,9 +9,6 @@ const config = url.parse(window.location.toString(), true).query;
 const { locale } = config;
 const localeMessages = ipcRenderer.sendSync('locale-data');
 
-window.React = require('react');
-window.ReactDOM = require('react-dom');
-
 window.theme = config.theme;
 window.i18n = i18n.setupi18n(locale, localeMessages);
 

debug_log_preload.js

@@ -14,9 +14,6 @@ const localeMessages = ipcRenderer.sendSync('locale-data');
 
 window._ = require('lodash');
 
-window.React = require('react');
-window.ReactDOM = require('react-dom');
-
 window.getVersion = () => config.version;
 window.theme = config.theme;
 window.i18n = i18n.setupi18n(locale, localeMessages);

password_preload.js

@@ -9,9 +9,6 @@ const config = url.parse(window.location.toString(), true).query;
 const { locale } = config;
 const localeMessages = ipcRenderer.sendSync('locale-data');
 
-window.React = require('react');
-window.ReactDOM = require('react-dom');
-
 // If the app is locked we can't access the database to check the theme.
 window.theme = 'classic-dark';
 window.primaryColor = 'green';

preload.js

@@ -243,9 +243,6 @@ setInterval(() => {
   window.nodeSetImmediate(() => {});
 }, 1000);
 
-window.React = require('react');
-window.ReactDOM = require('react-dom');
-
 window.clipboard = clipboard;
 
 window.getSeedNodeList = () =>

ts/mains/about_start.tsx

@@ -1,6 +1,7 @@
-// const $body = $(document.body);
-
 import React from 'react';
+import { createRoot } from 'react-dom/client';
 import { AboutView } from '../components/AboutView';
 
-window.ReactDOM.render(<AboutView />, document.getElementById('root'));
+const container = document.getElementById('root');
+const root = createRoot(container!);
+root.render(<AboutView />);

ts/mains/debug_log_start.tsx

@@ -1,4 +1,7 @@
 import React from 'react';
+import { createRoot } from 'react-dom/client';
 import { DebugLogView } from '../components/DebugLogView';
 
-window.ReactDOM.render(<DebugLogView />, document.getElementById('root'));
+const container = document.getElementById('root');
+const root = createRoot(container!);
+root.render(<DebugLogView />);

ts/mains/main_renderer.tsx

@@ -1,6 +1,6 @@
 import Backbone from 'backbone';
 import _ from 'lodash';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import nativeEmojiData from '@emoji-mart/data';
 import { ipcRenderer } from 'electron';
@@ -310,12 +310,16 @@ async function start() {
     void getConversationController()
       .loadPromise()
       ?.then(() => {
-        ReactDOM.render(<SessionInboxView />, document.getElementById('root'));
+        const container = document.getElementById('root');
+        const root = createRoot(container!);
+        root.render(<SessionInboxView />);
       });
   }
 
   function showRegistrationView() {
-    ReactDOM.render(<SessionRegistrationView />, document.getElementById('root'));
+    const container = document.getElementById('root');
+    const root = createRoot(container!);
+    root.render(<SessionRegistrationView />);
     switchBodyToRtlIfNeeded();
   }
   DisappearingMessages.initExpiringMessageListener();

ts/mains/password_start.tsx

@@ -1,6 +1,7 @@
-// const $body = $(document.body);
-
 import React from 'react';
+import { createRoot } from 'react-dom/client';
 import { SessionPasswordPrompt } from '../components/SessionPasswordPrompt';
 
-window.ReactDOM.render(<SessionPasswordPrompt />, document.getElementById('root'));
+const container = document.getElementById('root');
+const root = createRoot(container!);
+root.render(<SessionPasswordPrompt />);