test: Upgrade react to 18 on branch smartshift-thomasuster-1690413021

apps/meteor/client/startup/appRoot.tsx

@@ -1,5 +1,5 @@
 import React, { StrictMode } from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import AppRoot from '../views/root/AppRoot';
 
@@ -16,10 +16,10 @@ const createContainer = (): Element => {
 };
 
 const container = createContainer();
+const root = createRoot(container);
 
-render(
+root.render(
 	<StrictMode>
 		<AppRoot />
-	</StrictMode>,
-	container,
-);
+	</StrictMode>
+);

apps/meteor/client/views/omnichannel/businessHours/BusinessHoursRouter.js

@@ -1,6 +1,6 @@
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useRoute, useRouteParameter } from '@rocket.chat/ui-contexts';
-import React, { useEffect } from 'react';
+import React, { useInsertionEffect } from 'react';
 
 import { businessHourManager } from '../../../../app/livechat/client/views/app/business-hours/BusinessHours';
 import { useReactiveValue } from '../../../hooks/useReactiveValue';
@@ -19,7 +19,7 @@ const BusinessHoursRouter = () => {
 
 	const router = useRoute('omnichannel-businessHours');
 
-	useEffect(() => {
+	useInsertionEffect(() => {
 		if (isSingleBH) {
 			router.push({
 				context: 'edit',
@@ -39,4 +39,4 @@ const BusinessHoursRouter = () => {
 	return <BusinessHoursPage />;
 };
 
-export default BusinessHoursRouter;
+export default BusinessHoursRouter;

packages/livechat/src/components/Screen/index.js

@@ -1,4 +1,4 @@
-import { useEffect } from 'preact/hooks';
+import { useInsertionEffect } from 'preact/hooks';
 
 import ChatIcon from '../../icons/chat.svg';
 import CloseIcon from '../../icons/close.svg';
@@ -38,7 +38,7 @@ const ChatButton = ({ text, minimized, badge, onClick, triggered = false, agent
 );
 
 const CssVar = ({ theme }) => {
-	useEffect(() => {
+	useInsertionEffect(() => {
 		if (window.CSS && CSS.supports('color', 'var(--color)')) {
 			return;
 		}
@@ -147,4 +147,4 @@ export const Screen = ({
 Screen.Content = ScreenContent;
 Screen.Footer = ScreenFooter;
 
-export default Screen;
+export default Screen;

packages/livechat/svg-component-loader.js

@@ -8,7 +8,7 @@ var content = module.exports.content;
 module.exports = function (props) {
 	var ref = hooks.useRef();
 
-	hooks.useEffect(function () {
+	hooks.useInsertionEffect(function () {
 		var div = document.createElement('div');
 		div.innerHTML = '<svg>' + content + '</svg>';
 
@@ -22,4 +22,4 @@ module.exports = function (props) {
 
 	return preact.h('svg', Object.assign({ ref: ref }, attributes, props));
 };
-`;
+`;

packages/uikit-playground/src/main.tsx

@@ -1,16 +1,17 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import '@rocket.chat/icons/dist/rocketchat.css';
 
 import './index.css';
 import App from './App';
 import { Provider } from './Context';
 
-ReactDOM.render(
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(
   <React.StrictMode>
     <Provider>
       <App />
     </Provider>
-  </React.StrictMode>,
-  document.getElementById('root'),
-);
+  </React.StrictMode>
+);