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-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(
-    <AppFrame logger={logger} persistor={persistor} />,
-    document.getElementById('root'),
-  );
+  const root = createRoot(document.getElementById('root')!);
+  root.render(<AppFrame logger={logger} persistor={persistor} />);
 
   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": [
     {