Migrate to React 18

Summary:
Sadly, we have to use the experimental version of React to decapitate React Devtools.
See https://fb.workplace.com/groups/react.devtools/posts/3135684459978453/?comment_id=3135711763309056&reply_comment_id=3135760513304181

On the bright side, Replay.io and Code Sandbox also use experimental React without any problem.

Reviewed By: lblasa

Differential Revision: D34926473

fbshipit-source-id: 5cd63cc065c2535f0583464c7b5e37891dadaf14

desktop/flipper-plugin/src/__tests__/test-utils.node.tsx

@@ -355,6 +355,9 @@ test('plugins can handle import errors', async () => {
           "An error occurred when importing data for plugin 'TestPlugin': 'Error: Oops",
           [Error: Oops],
         ],
+        Array [
+          "Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot",
+        ],
       ]
     `);
   } finally {

desktop/flipper-plugin/tsconfig.json

@@ -4,7 +4,7 @@
     "outDir": "lib",
     "rootDir": "src",
     "lib": ["dom", "ES2019"],
-    "types": ["jest", "../types/jest-extensions"]
+    "types": ["jest", "../types/jest-extensions", "react/next", "react-dom/next"]
   },
   "references": [
     {

desktop/flipper-ui-browser/tsconfig.json

@@ -4,7 +4,7 @@
     "outDir": "lib",
     "rootDir": "src",
     "lib": ["dom", "ES2019"],
-    "types": ["../types/flipperGlobals"]
+    "types": ["../types/flipperGlobals", "react/next", "react-dom/next"]
   },
   "references": [
     {

desktop/flipper-ui-core/package.json

@@ -30,15 +30,15 @@
     "lodash": "^4.17.21",
     "lodash.memoize": "^4.1.2",
     "p-map": "^4.0.0",
-    "react": "17.0.2",
+    "react": "^0.0.0-experimental-14c2be8da-20220304",
     "react-async": "^10.0.0",
     "react-debounce-render": "^7.0.1",
-    "react-dom": "^17.0.1",
+    "react-dom": "^0.0.0-experimental-14c2be8da-20220304",
     "react-element-to-jsx-string": "^14.3.4",
     "react-markdown": "^6.0.3",
     "react-player": "^2.10.0",
     "react-redux": "^7.2.6",
-    "react-test-renderer": "^17.0.1",
+    "react-test-renderer": "^0.0.0-experimental-2bf7c02f0-20220314",
     "react-virtualized-auto-sizer": "^1.0.6",
     "react-window": "^1.8.6",
     "redux": "^4.1.2",
@@ -52,6 +52,8 @@
     "@testing-library/react": "^12.1.4",
     "@types/deep-equal": "^1.0.1",
     "@types/lodash.memoize": "^4.1.6",
+    "@types/react": "^17.0.39",
+    "@types/react-dom": "^17.0.12",
     "@types/react-test-renderer": "^17.0.1",
     "@types/react-virtualized-auto-sizer": "^1.0.1",
     "@types/react-window": "^1.8.5",

desktop/flipper-ui-core/src/startFlipperDesktop.tsx

@@ -8,7 +8,7 @@
  */
 
 import {Provider} from 'react-redux';
-import ReactDOM from 'react-dom';
+import {createRoot} from 'react-dom/client';
 
 import {init as initLogger} from './fb-stubs/Logger';
 import {SandyApp} from './sandy-chrome/SandyApp';
@@ -164,10 +164,8 @@ function init(flipperServer: FlipperServer) {
 
   connectFlipperServerToStore(flipperServer, store, logger);
 
-  ReactDOM.render(
+  const root = createRoot(document.getElementById('root')!);
-    <AppFrame logger={logger} persistor={persistor} />,
+  root.render(<AppFrame logger={logger} persistor={persistor} />);
-    document.getElementById('root'),
-  );
 
   enableConsoleHook();
 

desktop/flipper-ui-core/tsconfig.json

@@ -6,7 +6,7 @@
     "esModuleInterop": true,
     "emitDeclarationOnly": true,
     "lib": ["dom", "es2019"],
-    "types": ["../types/ReactDebounceRender", "../types/flipperGlobals"]
+    "types": ["react/next", "react-dom/next", "../types/ReactDebounceRender", "../types/flipperGlobals"]
   },
   "references": [
     {

desktop/plugins/tsconfig.json

@@ -11,7 +11,9 @@
       "../types/ReactDebounceRender",
       "../types/json-format-highlight",
       "../types/memoize-weak",
-      "../types/XmlBeautifier"
+      "../types/XmlBeautifier",
+      "react/next",
+      "react-dom/next"
     ]
   },
   "include": ["public/", "fb/"],

desktop/yarn.lock

@@ -2728,7 +2728,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-dom@^17.0.13":
+"@types/react-dom@^17.0.12", "@types/react-dom@^17.0.13":
   version "17.0.13"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.13.tgz#a3323b974ee4280070982b3112351bb1952a7809"
   integrity sha512-wEP+B8hzvy6ORDv1QBhcQia4j6ea4SFIBttHYpXKPFZRviBvknq0FRh3VrIxeXUmsPkwuXVZrVGG7KUVONmXCQ==
@@ -2766,7 +2766,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@17.0.39":
+"@types/react@*", "@types/react@17.0.39", "@types/react@^17.0.39":
   version "17.0.39"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.39.tgz#d0f4cde092502a6db00a1cded6e6bf2abb7633ce"
   integrity sha512-UVavlfAxDd/AgAacMa60Azl7ygyQNRwC/DsHZmKgNvPmRR5p70AJ5Q9EAmL2NWOJmeV+vVUI4IAP7GZrN8h8Ug==
@@ -10416,14 +10416,13 @@ react-debounce-render@^7.0.1:
     hoist-non-react-statics "^3.3.2"
     lodash.debounce "^4.0.8"
 
-react-dom@^17.0.1:
+react-dom@^0.0.0-experimental-14c2be8da-20220304:
-  version "17.0.2"
+  version "0.0.0-experimental-14c2be8da-20220304"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-0.0.0-experimental-14c2be8da-20220304.tgz#fb2372884b98f0f3951022425b56643142aa8086"
-  integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
+  integrity sha512-JpSxGu7O64k06pgzJHZTEFLHB/TMY00QngL1Xi2Nb0f+TvIB3t0bpJD2nZlyOpHIZfNPW5plGTS/XUUgawF2pQ==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
+    scheduler "0.0.0-experimental-14c2be8da-20220304"
-    scheduler "^0.20.2"
 
 react-element-to-jsx-string@^14.3.4:
   version "14.3.4"
@@ -10448,6 +10447,11 @@ react-inspector@^5.1.0:
     is-dom "^1.0.0"
     prop-types "^15.0.0"
 
+react-is@0.0.0-experimental-2bf7c02f0-20220314:
+  version "0.0.0-experimental-2bf7c02f0-20220314"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-0.0.0-experimental-2bf7c02f0-20220314.tgz#6d99e4a3ba89084565e45641717a1b7af84f7f90"
+  integrity sha512-WdzbJs3ugXn+2K0lZtRReQ+ONDrJ3EeoSEWwdlrFEVF2VWwXztOnNIZGLc1EgP7WA3wBrHV2/isJY1wRs3tVug==
+
 react-is@17.0.2, "react-is@^16.12.0 || ^17.0.0", react-is@^17.0.0, react-is@^17.0.1, react-is@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
@@ -10523,15 +10527,14 @@ react-shallow-renderer@^16.13.1:
     object-assign "^4.1.1"
     react-is "^16.12.0 || ^17.0.0"
 
-react-test-renderer@^17.0.1:
+react-test-renderer@^0.0.0-experimental-2bf7c02f0-20220314:
-  version "17.0.2"
+  version "0.0.0-experimental-2bf7c02f0-20220314"
-  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-17.0.2.tgz#4cd4ae5ef1ad5670fc0ef776e8cc7e1231d9866c"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-0.0.0-experimental-2bf7c02f0-20220314.tgz#6b64c9d7bcd70157a01d71fdb3ef0d03208def8b"
-  integrity sha512-yaQ9cB89c17PUb0x6UfWRs7kQCorVdHlutU1boVPEsB8IDZH6n9tHxMacc3y0JoXOJUsZb/t/Mb8FUWMKaM7iQ==
+  integrity sha512-5Ebiv1FEXKky/s85kep84GAc8zGQgkRu5oQIHN+ZzXL054f/1EmpcVffddEjGaUYcoX1QWK3LrHrCh71rhAJtw==
   dependencies:
-    object-assign "^4.1.1"
+    react-is "0.0.0-experimental-2bf7c02f0-20220314"
-    react-is "^17.0.2"
     react-shallow-renderer "^16.13.1"
-    scheduler "^0.20.2"
+    scheduler "0.0.0-experimental-2bf7c02f0-20220314"
 
 react-virtual@^2.10.4:
   version "2.10.4"
@@ -10553,13 +10556,12 @@ react-window@^1.8.6:
     "@babel/runtime" "^7.0.0"
     memoize-one ">=3.1.1 <6"
 
-react@17.0.2:
+react@^0.0.0-experimental-14c2be8da-20220304:
-  version "17.0.2"
+  version "0.0.0-experimental-14c2be8da-20220304"
-  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
+  resolved "https://registry.yarnpkg.com/react/-/react-0.0.0-experimental-14c2be8da-20220304.tgz#a8a7a99d81f9313f9f6c1bdf13233a31fff35e32"
-  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
+  integrity sha512-vKXFJCe7tNRzWpsrR55OZCHypfBPmo7P51tAER7rjsg7Kn0oILnhERyfKHyWos8dSudf7aOZdPb1DWVBk7v7sw==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
 reactcss@^1.2.0:
   version "1.2.3"
@@ -11058,13 +11060,19 @@ saxes@^5.0.1:
   dependencies:
     xmlchars "^2.2.0"
 
-scheduler@^0.20.2:
+scheduler@0.0.0-experimental-14c2be8da-20220304:
-  version "0.20.2"
+  version "0.0.0-experimental-14c2be8da-20220304"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.0.0-experimental-14c2be8da-20220304.tgz#9144f2a7acf9315e754cdf566fa1b8a5853a9876"
-  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
+  integrity sha512-/2/ars7jto7FA643UmaBWKyIlofeYoWNVggZw94rCBBH7OGnVIPt3q4ajbj8kwu/VlW1HZ7cyX+jWBxVJ4KgSA==
+  dependencies:
+    loose-envify "^1.1.0"
+
+scheduler@0.0.0-experimental-2bf7c02f0-20220314:
+  version "0.0.0-experimental-2bf7c02f0-20220314"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.0.0-experimental-2bf7c02f0-20220314.tgz#0c47b7356b64040f285806f72b27f9fb4790232b"
+  integrity sha512-RVBx9wfkLek9qsdlWRb5QRdtz4E5wouRbSWrSoNyQXUL96so75ZXhe6E5iNLhDnjOoP9m/s1Ga00KunDUYjcFg==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
 scroll-into-view-if-needed@^2.2.25:
   version "2.2.26"