Upgrade react to version 18

package.json

@@ -125,7 +125,8 @@
     "@types/mini-css-extract-plugin": "^2.5.1",
     "@types/nanoid": "^3.0.0",
     "@types/offscreencanvas": "^2019.6.4",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^18.2.21",
+    "@types/react-dom": "^18.2.7",
     "@types/react-window": "^1.8.5",
     "@types/strman": "^2.0.0",
     "@types/wavesurfer.js": "^6.0.0",
@@ -175,8 +176,8 @@
     "postcss-preset-env": "^7.4.1",
     "prettier": "^1.19.1",
     "raw-loader": "^4.0.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-hot-loader": "^4.13.0",
     "react-konva": "^17.0.2-0",
     "react-rating": "^1.6.2",

src/LabelStudio.js

@@ -1,4 +1,4 @@
-import { render, unmountComponentAtNode } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import App from './components/App/App';
 import { configureStore } from './configureStore';
 import { LabelStudio as LabelStudioReact } from './Component';
@@ -14,6 +14,7 @@ import { destroy } from 'mobx-state-tree';
 import { destroy as destroySharedStore } from './mixins/SharedChoiceStore/mixin';
 import { cleanDomAfterReact, findReactKey } from './utils/reactCleaner';
 import { FF_LSDV_4620_3_ML, isFF } from './utils/feature-flags';
+import { StrictMode } from 'react';
 
 configure({
   isolateGlobalState: true,
@@ -60,6 +61,7 @@ export class LabelStudio {
   async createApp() {
     const { store, getRoot } = await configureStore(this.options, this.events);
     const rootElement = getRoot(this.root);
+    const appRoot = createRoot(rootElement);
 
     this.store = store;
     window.Htx = this.store;
@@ -68,30 +70,50 @@ export class LabelStudio {
 
     const renderApp = () => {
       if (isRendered) {
-        clearRenderedApp();
+        unmountApp();
       }
-      render((
-        <App
-          store={this.store}
-          panels={registerPanels(this.options.panels) ?? []}
-        />
-      ), rootElement);
+      appRoot.render(
+        <StrictMode>
+          <App
+            store={this.store}
+            panels={registerPanels(this.options.panels) ?? []}
+          />
+        </StrictMode>
+      )
     };
 
-    const clearRenderedApp = () => {
-      const childNodes = [...rootElement.childNodes];
-      // cleanDomAfterReact needs this key to be sure that cleaning affects only current react subtree
-      const reactKey = findReactKey(childNodes[0]);
+    const PERFORM_REACT_CLEANUP = true;
+
+    const cleanupReactNodes = (callback) => {
+      let childNodes, reactKey;
+
+      if (PERFORM_REACT_CLEANUP) {
+        childNodes = Array.from(rootElement.childNodes);
+        console.log(childNodes);
+
+        // cleanDomAfterReact needs this key to be sure that cleaning affects
+        // only current react subtree
+        reactKey = findReactKey(childNodes[0]);
+      }
+
+      callback();
 
-      unmountComponentAtNode(rootElement);
       /*
         Unmounting doesn't help with clearing React's fibers
         but removing the manually helps
         @see https://github.com/facebook/react/pull/20290 (similar problem)
         That's maybe not relevant in version 18
        */
-      cleanDomAfterReact(childNodes, reactKey);
-      cleanDomAfterReact([rootElement], reactKey);
+      if (childNodes && reactKey) {
+        cleanDomAfterReact(childNodes, reactKey);
+        cleanDomAfterReact([rootElement], reactKey);
+      }
+    }
+
+    const unmountApp = () => {
+      cleanupReactNodes(() => {
+        appRoot.unmount();
+      });
     };
 
     renderApp();
@@ -100,12 +122,12 @@ export class LabelStudio {
         return isRendered;
       },
       render: renderApp,
-      clear: clearRenderedApp,
+      clear: unmountApp,
     });
 
     this.destroy = () => {
       if (isFF(FF_LSDV_4620_3_ML)) {
-        clearRenderedApp();
+        unmountApp();
       }
       destroySharedStore();
       if (isFF(FF_LSDV_4620_3_ML)) {

src/utils/reactCleaner.js

@@ -8,7 +8,8 @@ export function cutFibers(object) {
     const isSvg = obj.elementType === 'svg';
 
     // preventing processing svgs due to the problem with props,
-    // props sometimes come from the global variables, so it's tricky to clean them without breaking icons itself
+    // props sometimes come from the global variables, so it's
+    // tricky to clean them without breaking icons itself
     if (isSvg) continue;
 
     for (const key of keys) {

yarn.lock

@@ -3459,9 +3459,10 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-dom@^17.0.11":
-  version "17.0.13"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.13.tgz#a3323b974ee4280070982b3112351bb1952a7809"
+"@types/react-dom@^18.2.7":
+  version "18.2.7"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.7.tgz#67222a08c0a6ae0a0da33c3532348277c70abb63"
+  integrity sha512-GRaAEriuT4zp9N4p1i8BDBYmEyfo+xQ3yHjJU4eiK5NDa1RmUZG+unZABUTK4/Ox/M+GaHwb6Ow8rUITrtjszA==
   dependencies:
     "@types/react" "*"
 
@@ -3497,6 +3498,15 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
+"@types/react@^18.2.21":
+  version "18.2.21"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.21.tgz#774c37fd01b522d0b91aed04811b58e4e0514ed9"
+  integrity sha512-neFKG/sBAwGxHgXiIxnbm3/AAVQ/cMRS93hvBpg8xYRbeQSPVABp9U2bRnPf0iI4+Ucdv3plSxKK+3CW2ENJxA==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
 "@types/retry@^0.12.0":
   version "0.12.1"
   resolved "https://registry.yarnpkg.com/@types/retry/-/retry-0.12.1.tgz#d8f1c0d0dc23afad6dc16a9e993a0865774b4065"
@@ -9963,13 +9973,13 @@ react-beautiful-dnd@^13.1.1:
     redux "^4.0.4"
     use-memo-one "^1.1.1"
 
-react-dom@^17.0.2:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
+react-dom@^18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
+  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    scheduler "^0.20.2"
+    scheduler "^0.23.0"
 
 react-hot-loader@^4.13.0:
   version "4.13.0"
@@ -10087,12 +10097,12 @@ react-window@^1.8.6:
     "@babel/runtime" "^7.0.0"
     memoize-one ">=3.1.1 <6"
 
-react@^17.0.2:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
+react@^18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
+  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
 read-pkg-up@^7.0.1:
   version "7.0.1"