diff --git a/.circleci/config.yml b/.circleci/config.yml
index 843e2f5fba4a4..a21dc532e69db 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -464,7 +464,7 @@ workflows:
             - setup
           commit_sha: << pipeline.parameters.prerelease_commit_sha >>
           release_channel: stable
-          dist_tag: "next,alpha"
+          dist_tag: "next,beta"
       - publish_prerelease:
           name: Publish to Experimental channel
           requires:
@@ -496,7 +496,7 @@ workflows:
             - setup
           commit_sha: << pipeline.git.revision >>
           release_channel: stable
-          dist_tag: "next,alpha"
+          dist_tag: "next,beta"
       - publish_prerelease:
           name: Publish to Experimental channel
           requires:
diff --git a/.eslintrc.js b/.eslintrc.js
index 6a0dc2dceae47..0bc90137a5c7d 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -26,11 +26,8 @@ module.exports = {
 
   parser: 'babel-eslint',
   parserOptions: {
-    ecmaVersion: 8,
+    ecmaVersion: 9,
     sourceType: 'script',
-    ecmaFeatures: {
-      experimentalObjectRestSpread: true,
-    },
   },
 
   // We're stricter than the default config, mostly. We'll override a few rules
@@ -113,7 +110,6 @@ module.exports = {
       {isProductionUserAppCode: true},
     ],
     'react-internal/no-to-warn-dev-within-to-throw': ERROR,
-    'react-internal/invariant-args': ERROR,
     'react-internal/warning-args': ERROR,
     'react-internal/no-production-logging': ERROR,
     'react-internal/no-cross-fork-imports': ERROR,
@@ -249,36 +245,36 @@ module.exports = {
         'packages/react-server-native-relay/**/*.js',
       ],
       globals: {
-        nativeFabricUIManager: true,
+        nativeFabricUIManager: 'readonly',
       },
     },
     {
       files: ['packages/react-server-dom-webpack/**/*.js'],
       globals: {
-        __webpack_chunk_load__: true,
-        __webpack_require__: true,
+        __webpack_chunk_load__: 'readonly',
+        __webpack_require__: 'readonly',
       },
     },
     {
       files: ['packages/scheduler/**/*.js'],
       globals: {
-        TaskController: true,
+        TaskController: 'readonly',
       },
     },
   ],
 
   globals: {
-    spyOnDev: true,
-    spyOnDevAndProd: true,
-    spyOnProd: true,
-    __EXPERIMENTAL__: true,
-    __EXTENSION__: true,
-    __PROFILE__: true,
-    __TEST__: true,
-    __UMD__: true,
-    __VARIANT__: true,
-    gate: true,
-    trustedTypes: true,
-    IS_REACT_ACT_ENVIRONMENT: true,
+    spyOnDev: 'readonly',
+    spyOnDevAndProd: 'readonly',
+    spyOnProd: 'readonly',
+    __EXPERIMENTAL__: 'readonly',
+    __EXTENSION__: 'readonly',
+    __PROFILE__: 'readonly',
+    __TEST__: 'readonly',
+    __UMD__: 'readonly',
+    __VARIANT__: 'readonly',
+    gate: 'readonly',
+    trustedTypes: 'readonly',
+    IS_REACT_ACT_ENVIRONMENT: 'readonly',
   },
 };
diff --git a/ReactVersions.js b/ReactVersions.js
index bdab35424e885..03c9db2332b73 100644
--- a/ReactVersions.js
+++ b/ReactVersions.js
@@ -22,7 +22,7 @@ const ReactVersion = '18.0.0';
 
 // The label used by the @next channel. Represents the upcoming release's
 // stability. Could be "alpha", "beta", "rc", etc.
-const nextChannelLabel = 'alpha';
+const nextChannelLabel = 'beta';
 
 const stablePackages = {
   'create-subscription': ReactVersion,
diff --git a/fixtures/attribute-behavior/.gitignore b/fixtures/attribute-behavior/.gitignore
index 49c5a75db9401..9190def2d174c 100644
--- a/fixtures/attribute-behavior/.gitignore
+++ b/fixtures/attribute-behavior/.gitignore
@@ -10,7 +10,7 @@
 /build
 /public/react.development.js
 /public/react-dom.development.js
-/public/react-dom-server.browser.development.js
+/public/react-dom-server-legacy.browser.development.js
 
 # misc
 .DS_Store
diff --git a/fixtures/attribute-behavior/AttributeTableSnapshot.md b/fixtures/attribute-behavior/AttributeTableSnapshot.md
index 5a57877f1b643..cbaadbca77699 100644
--- a/fixtures/attribute-behavior/AttributeTableSnapshot.md
+++ b/fixtures/attribute-behavior/AttributeTableSnapshot.md
@@ -526,23 +526,23 @@
 ## `amplitude` (on `<feFuncA>` inside `<svg>`)
 | Test Case | Flags | Result |
 | --- | --- | --- |
-| `amplitude=(string)`| (changed)| `<number: 0>` |
+| `amplitude=(string)`| (initial)| `<number: 1>` |
 | `amplitude=(empty string)`| (changed)| `<number: 0>` |
-| `amplitude=(array with string)`| (changed)| `<number: 0>` |
+| `amplitude=(array with string)`| (initial)| `<number: 1>` |
 | `amplitude=(empty array)`| (changed)| `<number: 0>` |
-| `amplitude=(object)`| (changed)| `<number: 0>` |
+| `amplitude=(object)`| (initial)| `<number: 1>` |
 | `amplitude=(numeric string)`| (changed)| `<number: 42>` |
 | `amplitude=(-1)`| (changed)| `<number: -1>` |
 | `amplitude=(0)`| (changed)| `<number: 0>` |
 | `amplitude=(integer)`| (initial)| `<number: 1>` |
-| `amplitude=(NaN)`| (changed, warning)| `<number: 0>` |
+| `amplitude=(NaN)`| (initial, warning)| `<number: 1>` |
 | `amplitude=(float)`| (changed)| `<number: 99.98999786376953>` |
 | `amplitude=(true)`| (initial, warning)| `<number: 1>` |
 | `amplitude=(false)`| (initial, warning)| `<number: 1>` |
-| `amplitude=(string 'true')`| (changed)| `<number: 0>` |
-| `amplitude=(string 'false')`| (changed)| `<number: 0>` |
-| `amplitude=(string 'on')`| (changed)| `<number: 0>` |
-| `amplitude=(string 'off')`| (changed)| `<number: 0>` |
+| `amplitude=(string 'true')`| (initial)| `<number: 1>` |
+| `amplitude=(string 'false')`| (initial)| `<number: 1>` |
+| `amplitude=(string 'on')`| (initial)| `<number: 1>` |
+| `amplitude=(string 'off')`| (initial)| `<number: 1>` |
 | `amplitude=(symbol)`| (initial, warning)| `<number: 1>` |
 | `amplitude=(function)`| (initial, warning)| `<number: 1>` |
 | `amplitude=(null)`| (initial)| `<number: 1>` |
@@ -830,17 +830,17 @@
 | `autoComplete=(empty string)`| (initial)| `<empty string>` |
 | `autoComplete=(array with string)`| (changed)| `"email"` |
 | `autoComplete=(empty array)`| (initial)| `<empty string>` |
-| `autoComplete=(object)`| (changed)| `"result of toString()"` |
-| `autoComplete=(numeric string)`| (changed)| `"42"` |
-| `autoComplete=(-1)`| (changed)| `"-1"` |
-| `autoComplete=(0)`| (changed)| `"0"` |
-| `autoComplete=(integer)`| (changed)| `"1"` |
-| `autoComplete=(NaN)`| (changed, warning)| `"NaN"` |
-| `autoComplete=(float)`| (changed)| `"99.99"` |
+| `autoComplete=(object)`| (initial)| `<empty string>` |
+| `autoComplete=(numeric string)`| (initial)| `<empty string>` |
+| `autoComplete=(-1)`| (initial)| `<empty string>` |
+| `autoComplete=(0)`| (initial)| `<empty string>` |
+| `autoComplete=(integer)`| (initial)| `<empty string>` |
+| `autoComplete=(NaN)`| (initial, warning)| `<empty string>` |
+| `autoComplete=(float)`| (initial)| `<empty string>` |
 | `autoComplete=(true)`| (initial, warning)| `<empty string>` |
 | `autoComplete=(false)`| (initial, warning)| `<empty string>` |
-| `autoComplete=(string 'true')`| (changed)| `"true"` |
-| `autoComplete=(string 'false')`| (changed)| `"false"` |
+| `autoComplete=(string 'true')`| (initial)| `<empty string>` |
+| `autoComplete=(string 'false')`| (initial)| `<empty string>` |
 | `autoComplete=(string 'on')`| (changed)| `"on"` |
 | `autoComplete=(string 'off')`| (changed)| `"off"` |
 | `autoComplete=(symbol)`| (initial, warning)| `<empty string>` |
@@ -1469,16 +1469,16 @@
 | `children=(string 'on')`| (initial)| `[]` |
 | `children=(string 'off')`| (initial)| `[]` |
 | `children=(symbol)`| (initial)| `[]` |
-| `children=(function)`| (initial, warning, ssr warning)| `[]` |
+| `children=(function)`| (initial, warning)| `[]` |
 | `children=(null)`| (initial)| `[]` |
 | `children=(undefined)`| (initial)| `[]` |
 
 ## `cite` (on `<blockquote>` inside `<div>`)
 | Test Case | Flags | Result |
 | --- | --- | --- |
-| `cite=(string)`| (changed)| `"http://reactjs.com/"` |
+| `cite=(string)`| (changed)| `"https://reactjs.com/"` |
 | `cite=(empty string)`| (changed)| `"http://localhost:3000/"` |
-| `cite=(array with string)`| (changed)| `"http://reactjs.com/"` |
+| `cite=(array with string)`| (changed)| `"https://reactjs.com/"` |
 | `cite=(empty array)`| (changed)| `"http://localhost:3000/"` |
 | `cite=(object)`| (changed)| `"http://localhost:3000/result%20of%20toString()"` |
 | `cite=(numeric string)`| (changed)| `"http://localhost:3000/42"` |
@@ -2560,7 +2560,7 @@
 | `defaultChecked=(-1)`| (changed)| `<boolean: true>` |
 | `defaultChecked=(0)`| (initial)| `<boolean: false>` |
 | `defaultChecked=(integer)`| (changed)| `<boolean: true>` |
-| `defaultChecked=(NaN)`| (initial, warning, ssr warning)| `<boolean: false>` |
+| `defaultChecked=(NaN)`| (initial, warning)| `<boolean: false>` |
 | `defaultChecked=(float)`| (changed)| `<boolean: true>` |
 | `defaultChecked=(true)`| (changed)| `<boolean: true>` |
 | `defaultChecked=(false)`| (initial)| `<boolean: false>` |
@@ -2593,9 +2593,9 @@
 | `defaultValue=(string 'false')`| (changed)| `"false"` |
 | `defaultValue=(string 'on')`| (changed)| `"on"` |
 | `defaultValue=(string 'off')`| (changed)| `"off"` |
-| `defaultValue=(symbol)`| (initial, ssr warning)| `<empty string>` |
-| `defaultValue=(function)`| (initial, ssr warning)| `<empty string>` |
-| `defaultValue=(null)`| (initial, ssr warning)| `<empty string>` |
+| `defaultValue=(symbol)`| (initial)| `<empty string>` |
+| `defaultValue=(function)`| (initial)| `<empty string>` |
+| `defaultValue=(null)`| (initial)| `<empty string>` |
 | `defaultValue=(undefined)`| (initial)| `<empty string>` |
 
 ## `defaultValuE` (on `<input>` inside `<div>`)
@@ -2676,23 +2676,23 @@
 ## `diffuseConstant` (on `<feDiffuseLighting>` inside `<svg>`)
 | Test Case | Flags | Result |
 | --- | --- | --- |
-| `diffuseConstant=(string)`| (changed)| `<number: 0>` |
+| `diffuseConstant=(string)`| (initial)| `<number: 1>` |
 | `diffuseConstant=(empty string)`| (changed)| `<number: 0>` |
-| `diffuseConstant=(array with string)`| (changed)| `<number: 0>` |
+| `diffuseConstant=(array with string)`| (initial)| `<number: 1>` |
 | `diffuseConstant=(empty array)`| (changed)| `<number: 0>` |
-| `diffuseConstant=(object)`| (changed)| `<number: 0>` |
+| `diffuseConstant=(object)`| (initial)| `<number: 1>` |
 | `diffuseConstant=(numeric string)`| (changed)| `<number: 42>` |
 | `diffuseConstant=(-1)`| (changed)| `<number: -1>` |
 | `diffuseConstant=(0)`| (changed)| `<number: 0>` |
 | `diffuseConstant=(integer)`| (initial)| `<number: 1>` |
-| `diffuseConstant=(NaN)`| (changed, warning)| `<number: 0>` |
+| `diffuseConstant=(NaN)`| (initial, warning)| `<number: 1>` |
 | `diffuseConstant=(float)`| (changed)| `<number: 99.98999786376953>` |
 | `diffuseConstant=(true)`| (initial, warning)| `<number: 1>` |
 | `diffuseConstant=(false)`| (initial, warning)| `<number: 1>` |
-| `diffuseConstant=(string 'true')`| (changed)| `<number: 0>` |
-| `diffuseConstant=(string 'false')`| (changed)| `<number: 0>` |
-| `diffuseConstant=(string 'on')`| (changed)| `<number: 0>` |
-| `diffuseConstant=(string 'off')`| (changed)| `<number: 0>` |
+| `diffuseConstant=(string 'true')`| (initial)| `<number: 1>` |
+| `diffuseConstant=(string 'false')`| (initial)| `<number: 1>` |
+| `diffuseConstant=(string 'on')`| (initial)| `<number: 1>` |
+| `diffuseConstant=(string 'off')`| (initial)| `<number: 1>` |
 | `diffuseConstant=(symbol)`| (initial, warning)| `<number: 1>` |
 | `diffuseConstant=(function)`| (initial, warning)| `<number: 1>` |
 | `diffuseConstant=(null)`| (initial)| `<number: 1>` |
@@ -2773,6 +2773,56 @@
 | `disabled=(null)`| (initial)| `<boolean: false>` |
 | `disabled=(undefined)`| (initial)| `<boolean: false>` |
 
+## `disablePictureInPicture` (on `<video>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `disablePictureInPicture=(string)`| (initial)| `<undefined>` |
+| `disablePictureInPicture=(empty string)`| (initial)| `<undefined>` |
+| `disablePictureInPicture=(array with string)`| (initial)| `<undefined>` |
+| `disablePictureInPicture=(empty array)`| (initial)| `<undefined>` |
+| `disablePictureInPicture=(object)`| (initial)| `<undefined>` |
+| `disablePictureInPicture=(numeric string)`| (initial)| `<undefined>` |
+| `disablePictureInPicture=(-1)`| (initial)| `<undefined>` |
+| `disablePictureInPicture=(0)`| (initial)| `<undefined>` |
+| `disablePictureInPicture=(integer)`| (initial)| `<undefined>` |
+| `disablePictureInPicture=(NaN)`| (initial, warning)| `<undefined>` |
+| `disablePictureInPicture=(float)`| (initial)| `<undefined>` |
+| `disablePictureInPicture=(true)`| (initial)| `<undefined>` |
+| `disablePictureInPicture=(false)`| (initial)| `<undefined>` |
+| `disablePictureInPicture=(string 'true')`| (initial, warning)| `<undefined>` |
+| `disablePictureInPicture=(string 'false')`| (initial, warning)| `<undefined>` |
+| `disablePictureInPicture=(string 'on')`| (initial)| `<undefined>` |
+| `disablePictureInPicture=(string 'off')`| (initial)| `<undefined>` |
+| `disablePictureInPicture=(symbol)`| (initial, warning)| `<undefined>` |
+| `disablePictureInPicture=(function)`| (initial, warning)| `<undefined>` |
+| `disablePictureInPicture=(null)`| (initial)| `<undefined>` |
+| `disablePictureInPicture=(undefined)`| (initial)| `<undefined>` |
+
+## `disableRemotePlayback` (on `<video>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `disableRemotePlayback=(string)`| (initial)| `<undefined>` |
+| `disableRemotePlayback=(empty string)`| (initial)| `<undefined>` |
+| `disableRemotePlayback=(array with string)`| (initial)| `<undefined>` |
+| `disableRemotePlayback=(empty array)`| (initial)| `<undefined>` |
+| `disableRemotePlayback=(object)`| (initial)| `<undefined>` |
+| `disableRemotePlayback=(numeric string)`| (initial)| `<undefined>` |
+| `disableRemotePlayback=(-1)`| (initial)| `<undefined>` |
+| `disableRemotePlayback=(0)`| (initial)| `<undefined>` |
+| `disableRemotePlayback=(integer)`| (initial)| `<undefined>` |
+| `disableRemotePlayback=(NaN)`| (initial, warning)| `<undefined>` |
+| `disableRemotePlayback=(float)`| (initial)| `<undefined>` |
+| `disableRemotePlayback=(true)`| (initial)| `<undefined>` |
+| `disableRemotePlayback=(false)`| (initial)| `<undefined>` |
+| `disableRemotePlayback=(string 'true')`| (initial, warning)| `<undefined>` |
+| `disableRemotePlayback=(string 'false')`| (initial, warning)| `<undefined>` |
+| `disableRemotePlayback=(string 'on')`| (initial)| `<undefined>` |
+| `disableRemotePlayback=(string 'off')`| (initial)| `<undefined>` |
+| `disableRemotePlayback=(symbol)`| (initial, warning)| `<undefined>` |
+| `disableRemotePlayback=(function)`| (initial, warning)| `<undefined>` |
+| `disableRemotePlayback=(null)`| (initial)| `<undefined>` |
+| `disableRemotePlayback=(undefined)`| (initial)| `<undefined>` |
+
 ## `display` (on `<svg>` inside `<div>`)
 | Test Case | Flags | Result |
 | --- | --- | --- |
@@ -2801,27 +2851,27 @@
 ## `divisor` (on `<feConvolveMatrix>` inside `<svg>`)
 | Test Case | Flags | Result |
 | --- | --- | --- |
-| `divisor=(string)`| (initial)| `<number: 0>` |
-| `divisor=(empty string)`| (initial)| `<number: 0>` |
-| `divisor=(array with string)`| (initial)| `<number: 0>` |
-| `divisor=(empty array)`| (initial)| `<number: 0>` |
-| `divisor=(object)`| (initial)| `<number: 0>` |
+| `divisor=(string)`| (initial)| `<number: 1>` |
+| `divisor=(empty string)`| (changed)| `<number: 0>` |
+| `divisor=(array with string)`| (initial)| `<number: 1>` |
+| `divisor=(empty array)`| (changed)| `<number: 0>` |
+| `divisor=(object)`| (initial)| `<number: 1>` |
 | `divisor=(numeric string)`| (changed)| `<number: 42>` |
 | `divisor=(-1)`| (changed)| `<number: -1>` |
-| `divisor=(0)`| (initial)| `<number: 0>` |
-| `divisor=(integer)`| (changed)| `<number: 1>` |
-| `divisor=(NaN)`| (initial, warning)| `<number: 0>` |
+| `divisor=(0)`| (changed)| `<number: 0>` |
+| `divisor=(integer)`| (initial)| `<number: 1>` |
+| `divisor=(NaN)`| (initial, warning)| `<number: 1>` |
 | `divisor=(float)`| (changed)| `<number: 99.98999786376953>` |
-| `divisor=(true)`| (initial, warning)| `<number: 0>` |
-| `divisor=(false)`| (initial, warning)| `<number: 0>` |
-| `divisor=(string 'true')`| (initial)| `<number: 0>` |
-| `divisor=(string 'false')`| (initial)| `<number: 0>` |
-| `divisor=(string 'on')`| (initial)| `<number: 0>` |
-| `divisor=(string 'off')`| (initial)| `<number: 0>` |
-| `divisor=(symbol)`| (initial, warning)| `<number: 0>` |
-| `divisor=(function)`| (initial, warning)| `<number: 0>` |
-| `divisor=(null)`| (initial)| `<number: 0>` |
-| `divisor=(undefined)`| (initial)| `<number: 0>` |
+| `divisor=(true)`| (initial, warning)| `<number: 1>` |
+| `divisor=(false)`| (initial, warning)| `<number: 1>` |
+| `divisor=(string 'true')`| (initial)| `<number: 1>` |
+| `divisor=(string 'false')`| (initial)| `<number: 1>` |
+| `divisor=(string 'on')`| (initial)| `<number: 1>` |
+| `divisor=(string 'off')`| (initial)| `<number: 1>` |
+| `divisor=(symbol)`| (initial, warning)| `<number: 1>` |
+| `divisor=(function)`| (initial, warning)| `<number: 1>` |
+| `divisor=(null)`| (initial)| `<number: 1>` |
+| `divisor=(undefined)`| (initial)| `<number: 1>` |
 
 ## `dominant-baseline` (on `<text>` inside `<svg>`)
 | Test Case | Flags | Result |
@@ -3251,23 +3301,23 @@
 ## `exponent` (on `<feFuncA>` inside `<svg>`)
 | Test Case | Flags | Result |
 | --- | --- | --- |
-| `exponent=(string)`| (changed)| `<number: 0>` |
+| `exponent=(string)`| (initial)| `<number: 1>` |
 | `exponent=(empty string)`| (changed)| `<number: 0>` |
-| `exponent=(array with string)`| (changed)| `<number: 0>` |
+| `exponent=(array with string)`| (initial)| `<number: 1>` |
 | `exponent=(empty array)`| (changed)| `<number: 0>` |
-| `exponent=(object)`| (changed)| `<number: 0>` |
+| `exponent=(object)`| (initial)| `<number: 1>` |
 | `exponent=(numeric string)`| (changed)| `<number: 42>` |
 | `exponent=(-1)`| (changed)| `<number: -1>` |
 | `exponent=(0)`| (changed)| `<number: 0>` |
 | `exponent=(integer)`| (initial)| `<number: 1>` |
-| `exponent=(NaN)`| (changed, warning)| `<number: 0>` |
+| `exponent=(NaN)`| (initial, warning)| `<number: 1>` |
 | `exponent=(float)`| (changed)| `<number: 99.98999786376953>` |
 | `exponent=(true)`| (initial, warning)| `<number: 1>` |
 | `exponent=(false)`| (initial, warning)| `<number: 1>` |
-| `exponent=(string 'true')`| (changed)| `<number: 0>` |
-| `exponent=(string 'false')`| (changed)| `<number: 0>` |
-| `exponent=(string 'on')`| (changed)| `<number: 0>` |
-| `exponent=(string 'off')`| (changed)| `<number: 0>` |
+| `exponent=(string 'true')`| (initial)| `<number: 1>` |
+| `exponent=(string 'false')`| (initial)| `<number: 1>` |
+| `exponent=(string 'on')`| (initial)| `<number: 1>` |
+| `exponent=(string 'off')`| (initial)| `<number: 1>` |
 | `exponent=(symbol)`| (initial, warning)| `<number: 1>` |
 | `exponent=(function)`| (initial, warning)| `<number: 1>` |
 | `exponent=(null)`| (initial)| `<number: 1>` |
@@ -4252,101 +4302,101 @@
 | Test Case | Flags | Result |
 | --- | --- | --- |
 | `fx=(string)`| (changed)| `<SVGLength: 10px>` |
-| `fx=(empty string)`| (initial)| `<SVGLength: 0>` |
+| `fx=(empty string)`| (initial)| `<SVGLength: 50%>` |
 | `fx=(array with string)`| (changed)| `<SVGLength: 10px>` |
-| `fx=(empty array)`| (initial)| `<SVGLength: 0>` |
-| `fx=(object)`| (initial)| `<SVGLength: 0>` |
+| `fx=(empty array)`| (initial)| `<SVGLength: 50%>` |
+| `fx=(object)`| (initial)| `<SVGLength: 50%>` |
 | `fx=(numeric string)`| (changed)| `<SVGLength: 42>` |
 | `fx=(-1)`| (changed)| `<SVGLength: -1>` |
-| `fx=(0)`| (initial)| `<SVGLength: 0>` |
+| `fx=(0)`| (changed)| `<SVGLength: 0>` |
 | `fx=(integer)`| (changed)| `<SVGLength: 1>` |
-| `fx=(NaN)`| (initial, warning)| `<SVGLength: 0>` |
+| `fx=(NaN)`| (initial, warning)| `<SVGLength: 50%>` |
 | `fx=(float)`| (changed)| `<SVGLength: 99.99>` |
-| `fx=(true)`| (initial, warning)| `<SVGLength: 0>` |
-| `fx=(false)`| (initial, warning)| `<SVGLength: 0>` |
-| `fx=(string 'true')`| (initial)| `<SVGLength: 0>` |
-| `fx=(string 'false')`| (initial)| `<SVGLength: 0>` |
-| `fx=(string 'on')`| (initial)| `<SVGLength: 0>` |
-| `fx=(string 'off')`| (initial)| `<SVGLength: 0>` |
-| `fx=(symbol)`| (initial, warning)| `<SVGLength: 0>` |
-| `fx=(function)`| (initial, warning)| `<SVGLength: 0>` |
-| `fx=(null)`| (initial)| `<SVGLength: 0>` |
-| `fx=(undefined)`| (initial)| `<SVGLength: 0>` |
+| `fx=(true)`| (initial, warning)| `<SVGLength: 50%>` |
+| `fx=(false)`| (initial, warning)| `<SVGLength: 50%>` |
+| `fx=(string 'true')`| (initial)| `<SVGLength: 50%>` |
+| `fx=(string 'false')`| (initial)| `<SVGLength: 50%>` |
+| `fx=(string 'on')`| (initial)| `<SVGLength: 50%>` |
+| `fx=(string 'off')`| (initial)| `<SVGLength: 50%>` |
+| `fx=(symbol)`| (initial, warning)| `<SVGLength: 50%>` |
+| `fx=(function)`| (initial, warning)| `<SVGLength: 50%>` |
+| `fx=(null)`| (initial)| `<SVGLength: 50%>` |
+| `fx=(undefined)`| (initial)| `<SVGLength: 50%>` |
 
 ## `fX` (on `<radialGradient>` inside `<svg>`)
 | Test Case | Flags | Result |
 | --- | --- | --- |
-| `fX=(string)`| (initial, warning, ssr mismatch)| `<SVGLength: 0>` |
-| `fX=(empty string)`| (initial, warning)| `<SVGLength: 0>` |
-| `fX=(array with string)`| (initial, warning, ssr mismatch)| `<SVGLength: 0>` |
-| `fX=(empty array)`| (initial, warning)| `<SVGLength: 0>` |
-| `fX=(object)`| (initial, warning)| `<SVGLength: 0>` |
-| `fX=(numeric string)`| (initial, warning, ssr mismatch)| `<SVGLength: 0>` |
-| `fX=(-1)`| (initial, warning, ssr mismatch)| `<SVGLength: 0>` |
-| `fX=(0)`| (initial, warning)| `<SVGLength: 0>` |
-| `fX=(integer)`| (initial, warning, ssr mismatch)| `<SVGLength: 0>` |
-| `fX=(NaN)`| (initial, warning)| `<SVGLength: 0>` |
-| `fX=(float)`| (initial, warning, ssr mismatch)| `<SVGLength: 0>` |
-| `fX=(true)`| (initial, warning)| `<SVGLength: 0>` |
-| `fX=(false)`| (initial, warning)| `<SVGLength: 0>` |
-| `fX=(string 'true')`| (initial, warning)| `<SVGLength: 0>` |
-| `fX=(string 'false')`| (initial, warning)| `<SVGLength: 0>` |
-| `fX=(string 'on')`| (initial, warning)| `<SVGLength: 0>` |
-| `fX=(string 'off')`| (initial, warning)| `<SVGLength: 0>` |
-| `fX=(symbol)`| (initial, warning)| `<SVGLength: 0>` |
-| `fX=(function)`| (initial, warning)| `<SVGLength: 0>` |
-| `fX=(null)`| (initial, warning)| `<SVGLength: 0>` |
-| `fX=(undefined)`| (initial, warning)| `<SVGLength: 0>` |
+| `fX=(string)`| (initial, warning, ssr mismatch)| `<SVGLength: 50%>` |
+| `fX=(empty string)`| (initial, warning)| `<SVGLength: 50%>` |
+| `fX=(array with string)`| (initial, warning, ssr mismatch)| `<SVGLength: 50%>` |
+| `fX=(empty array)`| (initial, warning)| `<SVGLength: 50%>` |
+| `fX=(object)`| (initial, warning)| `<SVGLength: 50%>` |
+| `fX=(numeric string)`| (initial, warning, ssr mismatch)| `<SVGLength: 50%>` |
+| `fX=(-1)`| (initial, warning, ssr mismatch)| `<SVGLength: 50%>` |
+| `fX=(0)`| (initial, warning, ssr mismatch)| `<SVGLength: 50%>` |
+| `fX=(integer)`| (initial, warning, ssr mismatch)| `<SVGLength: 50%>` |
+| `fX=(NaN)`| (initial, warning)| `<SVGLength: 50%>` |
+| `fX=(float)`| (initial, warning, ssr mismatch)| `<SVGLength: 50%>` |
+| `fX=(true)`| (initial, warning)| `<SVGLength: 50%>` |
+| `fX=(false)`| (initial, warning)| `<SVGLength: 50%>` |
+| `fX=(string 'true')`| (initial, warning)| `<SVGLength: 50%>` |
+| `fX=(string 'false')`| (initial, warning)| `<SVGLength: 50%>` |
+| `fX=(string 'on')`| (initial, warning)| `<SVGLength: 50%>` |
+| `fX=(string 'off')`| (initial, warning)| `<SVGLength: 50%>` |
+| `fX=(symbol)`| (initial, warning)| `<SVGLength: 50%>` |
+| `fX=(function)`| (initial, warning)| `<SVGLength: 50%>` |
+| `fX=(null)`| (initial, warning)| `<SVGLength: 50%>` |
+| `fX=(undefined)`| (initial, warning)| `<SVGLength: 50%>` |
 
 ## `fY` (on `<radialGradient>` inside `<svg>`)
 | Test Case | Flags | Result |
 | --- | --- | --- |
-| `fY=(string)`| (initial, warning, ssr mismatch)| `<SVGLength: 0>` |
-| `fY=(empty string)`| (initial, warning)| `<SVGLength: 0>` |
-| `fY=(array with string)`| (initial, warning, ssr mismatch)| `<SVGLength: 0>` |
-| `fY=(empty array)`| (initial, warning)| `<SVGLength: 0>` |
-| `fY=(object)`| (initial, warning)| `<SVGLength: 0>` |
-| `fY=(numeric string)`| (initial, warning, ssr mismatch)| `<SVGLength: 0>` |
-| `fY=(-1)`| (initial, warning, ssr mismatch)| `<SVGLength: 0>` |
-| `fY=(0)`| (initial, warning)| `<SVGLength: 0>` |
-| `fY=(integer)`| (initial, warning, ssr mismatch)| `<SVGLength: 0>` |
-| `fY=(NaN)`| (initial, warning)| `<SVGLength: 0>` |
-| `fY=(float)`| (initial, warning, ssr mismatch)| `<SVGLength: 0>` |
-| `fY=(true)`| (initial, warning)| `<SVGLength: 0>` |
-| `fY=(false)`| (initial, warning)| `<SVGLength: 0>` |
-| `fY=(string 'true')`| (initial, warning)| `<SVGLength: 0>` |
-| `fY=(string 'false')`| (initial, warning)| `<SVGLength: 0>` |
-| `fY=(string 'on')`| (initial, warning)| `<SVGLength: 0>` |
-| `fY=(string 'off')`| (initial, warning)| `<SVGLength: 0>` |
-| `fY=(symbol)`| (initial, warning)| `<SVGLength: 0>` |
-| `fY=(function)`| (initial, warning)| `<SVGLength: 0>` |
-| `fY=(null)`| (initial, warning)| `<SVGLength: 0>` |
-| `fY=(undefined)`| (initial, warning)| `<SVGLength: 0>` |
+| `fY=(string)`| (initial, warning, ssr mismatch)| `<SVGLength: 50%>` |
+| `fY=(empty string)`| (initial, warning)| `<SVGLength: 50%>` |
+| `fY=(array with string)`| (initial, warning, ssr mismatch)| `<SVGLength: 50%>` |
+| `fY=(empty array)`| (initial, warning)| `<SVGLength: 50%>` |
+| `fY=(object)`| (initial, warning)| `<SVGLength: 50%>` |
+| `fY=(numeric string)`| (initial, warning, ssr mismatch)| `<SVGLength: 50%>` |
+| `fY=(-1)`| (initial, warning, ssr mismatch)| `<SVGLength: 50%>` |
+| `fY=(0)`| (initial, warning, ssr mismatch)| `<SVGLength: 50%>` |
+| `fY=(integer)`| (initial, warning, ssr mismatch)| `<SVGLength: 50%>` |
+| `fY=(NaN)`| (initial, warning)| `<SVGLength: 50%>` |
+| `fY=(float)`| (initial, warning, ssr mismatch)| `<SVGLength: 50%>` |
+| `fY=(true)`| (initial, warning)| `<SVGLength: 50%>` |
+| `fY=(false)`| (initial, warning)| `<SVGLength: 50%>` |
+| `fY=(string 'true')`| (initial, warning)| `<SVGLength: 50%>` |
+| `fY=(string 'false')`| (initial, warning)| `<SVGLength: 50%>` |
+| `fY=(string 'on')`| (initial, warning)| `<SVGLength: 50%>` |
+| `fY=(string 'off')`| (initial, warning)| `<SVGLength: 50%>` |
+| `fY=(symbol)`| (initial, warning)| `<SVGLength: 50%>` |
+| `fY=(function)`| (initial, warning)| `<SVGLength: 50%>` |
+| `fY=(null)`| (initial, warning)| `<SVGLength: 50%>` |
+| `fY=(undefined)`| (initial, warning)| `<SVGLength: 50%>` |
 
 ## `fy` (on `<radialGradient>` inside `<svg>`)
 | Test Case | Flags | Result |
 | --- | --- | --- |
 | `fy=(string)`| (changed)| `<SVGLength: 20em>` |
-| `fy=(empty string)`| (initial)| `<SVGLength: 0>` |
+| `fy=(empty string)`| (initial)| `<SVGLength: 50%>` |
 | `fy=(array with string)`| (changed)| `<SVGLength: 20em>` |
-| `fy=(empty array)`| (initial)| `<SVGLength: 0>` |
-| `fy=(object)`| (initial)| `<SVGLength: 0>` |
+| `fy=(empty array)`| (initial)| `<SVGLength: 50%>` |
+| `fy=(object)`| (initial)| `<SVGLength: 50%>` |
 | `fy=(numeric string)`| (changed)| `<SVGLength: 42>` |
 | `fy=(-1)`| (changed)| `<SVGLength: -1>` |
-| `fy=(0)`| (initial)| `<SVGLength: 0>` |
+| `fy=(0)`| (changed)| `<SVGLength: 0>` |
 | `fy=(integer)`| (changed)| `<SVGLength: 1>` |
-| `fy=(NaN)`| (initial, warning)| `<SVGLength: 0>` |
+| `fy=(NaN)`| (initial, warning)| `<SVGLength: 50%>` |
 | `fy=(float)`| (changed)| `<SVGLength: 99.99>` |
-| `fy=(true)`| (initial, warning)| `<SVGLength: 0>` |
-| `fy=(false)`| (initial, warning)| `<SVGLength: 0>` |
-| `fy=(string 'true')`| (initial)| `<SVGLength: 0>` |
-| `fy=(string 'false')`| (initial)| `<SVGLength: 0>` |
-| `fy=(string 'on')`| (initial)| `<SVGLength: 0>` |
-| `fy=(string 'off')`| (initial)| `<SVGLength: 0>` |
-| `fy=(symbol)`| (initial, warning)| `<SVGLength: 0>` |
-| `fy=(function)`| (initial, warning)| `<SVGLength: 0>` |
-| `fy=(null)`| (initial)| `<SVGLength: 0>` |
-| `fy=(undefined)`| (initial)| `<SVGLength: 0>` |
+| `fy=(true)`| (initial, warning)| `<SVGLength: 50%>` |
+| `fy=(false)`| (initial, warning)| `<SVGLength: 50%>` |
+| `fy=(string 'true')`| (initial)| `<SVGLength: 50%>` |
+| `fy=(string 'false')`| (initial)| `<SVGLength: 50%>` |
+| `fy=(string 'on')`| (initial)| `<SVGLength: 50%>` |
+| `fy=(string 'off')`| (initial)| `<SVGLength: 50%>` |
+| `fy=(symbol)`| (initial, warning)| `<SVGLength: 50%>` |
+| `fy=(function)`| (initial, warning)| `<SVGLength: 50%>` |
+| `fy=(null)`| (initial)| `<SVGLength: 50%>` |
+| `fy=(undefined)`| (initial)| `<SVGLength: 50%>` |
 
 ## `G1` (on `<hkern>` inside `<svg>`)
 | Test Case | Flags | Result |
@@ -5198,6 +5248,56 @@
 | `imageRendering=(null)`| (initial)| `<null>` |
 | `imageRendering=(undefined)`| (initial)| `<null>` |
 
+## `imageSizes` (on `<link>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `imageSizes=(string)`| (changed)| `"a string"` |
+| `imageSizes=(empty string)`| (initial)| `<empty string>` |
+| `imageSizes=(array with string)`| (changed)| `"string"` |
+| `imageSizes=(empty array)`| (initial)| `<empty string>` |
+| `imageSizes=(object)`| (changed)| `"result of toString()"` |
+| `imageSizes=(numeric string)`| (changed)| `"42"` |
+| `imageSizes=(-1)`| (changed)| `"-1"` |
+| `imageSizes=(0)`| (changed)| `"0"` |
+| `imageSizes=(integer)`| (changed)| `"1"` |
+| `imageSizes=(NaN)`| (changed, warning)| `"NaN"` |
+| `imageSizes=(float)`| (changed)| `"99.99"` |
+| `imageSizes=(true)`| (initial, warning)| `<empty string>` |
+| `imageSizes=(false)`| (initial, warning)| `<empty string>` |
+| `imageSizes=(string 'true')`| (changed)| `"true"` |
+| `imageSizes=(string 'false')`| (changed)| `"false"` |
+| `imageSizes=(string 'on')`| (changed)| `"on"` |
+| `imageSizes=(string 'off')`| (changed)| `"off"` |
+| `imageSizes=(symbol)`| (initial, warning)| `<empty string>` |
+| `imageSizes=(function)`| (initial, warning)| `<empty string>` |
+| `imageSizes=(null)`| (initial)| `<empty string>` |
+| `imageSizes=(undefined)`| (initial)| `<empty string>` |
+
+## `imageSrcSet` (on `<link>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `imageSrcSet=(string)`| (changed)| `"a string"` |
+| `imageSrcSet=(empty string)`| (initial)| `<empty string>` |
+| `imageSrcSet=(array with string)`| (changed)| `"string"` |
+| `imageSrcSet=(empty array)`| (initial)| `<empty string>` |
+| `imageSrcSet=(object)`| (changed)| `"result of toString()"` |
+| `imageSrcSet=(numeric string)`| (changed)| `"42"` |
+| `imageSrcSet=(-1)`| (changed)| `"-1"` |
+| `imageSrcSet=(0)`| (changed)| `"0"` |
+| `imageSrcSet=(integer)`| (changed)| `"1"` |
+| `imageSrcSet=(NaN)`| (changed, warning)| `"NaN"` |
+| `imageSrcSet=(float)`| (changed)| `"99.99"` |
+| `imageSrcSet=(true)`| (initial, warning)| `<empty string>` |
+| `imageSrcSet=(false)`| (initial, warning)| `<empty string>` |
+| `imageSrcSet=(string 'true')`| (changed)| `"true"` |
+| `imageSrcSet=(string 'false')`| (changed)| `"false"` |
+| `imageSrcSet=(string 'on')`| (changed)| `"on"` |
+| `imageSrcSet=(string 'off')`| (changed)| `"off"` |
+| `imageSrcSet=(symbol)`| (initial, warning)| `<empty string>` |
+| `imageSrcSet=(function)`| (initial, warning)| `<empty string>` |
+| `imageSrcSet=(null)`| (initial)| `<empty string>` |
+| `imageSrcSet=(undefined)`| (initial)| `<empty string>` |
+
 ## `in` (on `<feBlend>` inside `<svg>`)
 | Test Case | Flags | Result |
 | --- | --- | --- |
@@ -6326,27 +6426,27 @@
 ## `marginHeight` (on `<frame>` inside `<frameset>`)
 | Test Case | Flags | Result |
 | --- | --- | --- |
-| `marginHeight=(string)`| (changed, warning, ssr error, ssr mismatch)| `"a string"` |
-| `marginHeight=(empty string)`| (initial, warning, ssr error, ssr mismatch)| `<empty string>` |
-| `marginHeight=(array with string)`| (changed, warning, ssr error, ssr mismatch)| `"string"` |
-| `marginHeight=(empty array)`| (initial, warning, ssr error, ssr mismatch)| `<empty string>` |
-| `marginHeight=(object)`| (changed, warning, ssr error, ssr mismatch)| `"result of toString()"` |
-| `marginHeight=(numeric string)`| (changed, warning, ssr error, ssr mismatch)| `"42"` |
-| `marginHeight=(-1)`| (changed, warning, ssr error, ssr mismatch)| `"-1"` |
-| `marginHeight=(0)`| (changed, warning, ssr error, ssr mismatch)| `"0"` |
-| `marginHeight=(integer)`| (changed, warning, ssr error, ssr mismatch)| `"1"` |
+| `marginHeight=(string)`| (changed, ssr error, ssr mismatch)| `"a string"` |
+| `marginHeight=(empty string)`| (initial, ssr error, ssr mismatch)| `<empty string>` |
+| `marginHeight=(array with string)`| (changed, ssr error, ssr mismatch)| `"string"` |
+| `marginHeight=(empty array)`| (initial, ssr error, ssr mismatch)| `<empty string>` |
+| `marginHeight=(object)`| (changed, ssr error, ssr mismatch)| `"result of toString()"` |
+| `marginHeight=(numeric string)`| (changed, ssr error, ssr mismatch)| `"42"` |
+| `marginHeight=(-1)`| (changed, ssr error, ssr mismatch)| `"-1"` |
+| `marginHeight=(0)`| (changed, ssr error, ssr mismatch)| `"0"` |
+| `marginHeight=(integer)`| (changed, ssr error, ssr mismatch)| `"1"` |
 | `marginHeight=(NaN)`| (changed, warning, ssr error, ssr mismatch)| `"NaN"` |
-| `marginHeight=(float)`| (changed, warning, ssr error, ssr mismatch)| `"99.99"` |
+| `marginHeight=(float)`| (changed, ssr error, ssr mismatch)| `"99.99"` |
 | `marginHeight=(true)`| (initial, warning, ssr error, ssr mismatch)| `<empty string>` |
 | `marginHeight=(false)`| (initial, warning, ssr error, ssr mismatch)| `<empty string>` |
-| `marginHeight=(string 'true')`| (changed, warning, ssr error, ssr mismatch)| `"true"` |
-| `marginHeight=(string 'false')`| (changed, warning, ssr error, ssr mismatch)| `"false"` |
-| `marginHeight=(string 'on')`| (changed, warning, ssr error, ssr mismatch)| `"on"` |
-| `marginHeight=(string 'off')`| (changed, warning, ssr error, ssr mismatch)| `"off"` |
+| `marginHeight=(string 'true')`| (changed, ssr error, ssr mismatch)| `"true"` |
+| `marginHeight=(string 'false')`| (changed, ssr error, ssr mismatch)| `"false"` |
+| `marginHeight=(string 'on')`| (changed, ssr error, ssr mismatch)| `"on"` |
+| `marginHeight=(string 'off')`| (changed, ssr error, ssr mismatch)| `"off"` |
 | `marginHeight=(symbol)`| (initial, warning, ssr error, ssr mismatch)| `<empty string>` |
 | `marginHeight=(function)`| (initial, warning, ssr error, ssr mismatch)| `<empty string>` |
-| `marginHeight=(null)`| (initial, warning, ssr error, ssr mismatch)| `<empty string>` |
-| `marginHeight=(undefined)`| (initial, warning, ssr error, ssr mismatch)| `<empty string>` |
+| `marginHeight=(null)`| (initial, ssr error, ssr mismatch)| `<empty string>` |
+| `marginHeight=(undefined)`| (initial, ssr error, ssr mismatch)| `<empty string>` |
 
 ## `marginWidth` (on `<frame>` inside `<frameset>`)
 | Test Case | Flags | Result |
@@ -6476,23 +6576,23 @@
 ## `markerHeight` (on `<marker>` inside `<svg>`)
 | Test Case | Flags | Result |
 | --- | --- | --- |
-| `markerHeight=(string)`| (changed)| `<SVGLength: 0>` |
-| `markerHeight=(empty string)`| (changed)| `<SVGLength: 0>` |
-| `markerHeight=(array with string)`| (changed)| `<SVGLength: 0>` |
-| `markerHeight=(empty array)`| (changed)| `<SVGLength: 0>` |
-| `markerHeight=(object)`| (changed)| `<SVGLength: 0>` |
+| `markerHeight=(string)`| (initial)| `<SVGLength: 3>` |
+| `markerHeight=(empty string)`| (initial)| `<SVGLength: 3>` |
+| `markerHeight=(array with string)`| (initial)| `<SVGLength: 3>` |
+| `markerHeight=(empty array)`| (initial)| `<SVGLength: 3>` |
+| `markerHeight=(object)`| (initial)| `<SVGLength: 3>` |
 | `markerHeight=(numeric string)`| (changed)| `<SVGLength: 42>` |
 | `markerHeight=(-1)`| (changed)| `<SVGLength: -1>` |
 | `markerHeight=(0)`| (changed)| `<SVGLength: 0>` |
 | `markerHeight=(integer)`| (changed)| `<SVGLength: 1>` |
-| `markerHeight=(NaN)`| (changed, warning)| `<SVGLength: 0>` |
+| `markerHeight=(NaN)`| (initial, warning)| `<SVGLength: 3>` |
 | `markerHeight=(float)`| (changed)| `<SVGLength: 99.99>` |
 | `markerHeight=(true)`| (initial, warning)| `<SVGLength: 3>` |
 | `markerHeight=(false)`| (initial, warning)| `<SVGLength: 3>` |
-| `markerHeight=(string 'true')`| (changed)| `<SVGLength: 0>` |
-| `markerHeight=(string 'false')`| (changed)| `<SVGLength: 0>` |
-| `markerHeight=(string 'on')`| (changed)| `<SVGLength: 0>` |
-| `markerHeight=(string 'off')`| (changed)| `<SVGLength: 0>` |
+| `markerHeight=(string 'true')`| (initial)| `<SVGLength: 3>` |
+| `markerHeight=(string 'false')`| (initial)| `<SVGLength: 3>` |
+| `markerHeight=(string 'on')`| (initial)| `<SVGLength: 3>` |
+| `markerHeight=(string 'off')`| (initial)| `<SVGLength: 3>` |
 | `markerHeight=(symbol)`| (initial, warning)| `<SVGLength: 3>` |
 | `markerHeight=(function)`| (initial, warning)| `<SVGLength: 3>` |
 | `markerHeight=(null)`| (initial)| `<SVGLength: 3>` |
@@ -6576,23 +6676,23 @@
 ## `markerWidth` (on `<marker>` inside `<svg>`)
 | Test Case | Flags | Result |
 | --- | --- | --- |
-| `markerWidth=(string)`| (changed)| `<SVGLength: 0>` |
-| `markerWidth=(empty string)`| (changed)| `<SVGLength: 0>` |
-| `markerWidth=(array with string)`| (changed)| `<SVGLength: 0>` |
-| `markerWidth=(empty array)`| (changed)| `<SVGLength: 0>` |
-| `markerWidth=(object)`| (changed)| `<SVGLength: 0>` |
+| `markerWidth=(string)`| (initial)| `<SVGLength: 3>` |
+| `markerWidth=(empty string)`| (initial)| `<SVGLength: 3>` |
+| `markerWidth=(array with string)`| (initial)| `<SVGLength: 3>` |
+| `markerWidth=(empty array)`| (initial)| `<SVGLength: 3>` |
+| `markerWidth=(object)`| (initial)| `<SVGLength: 3>` |
 | `markerWidth=(numeric string)`| (changed)| `<SVGLength: 42>` |
 | `markerWidth=(-1)`| (changed)| `<SVGLength: -1>` |
 | `markerWidth=(0)`| (changed)| `<SVGLength: 0>` |
 | `markerWidth=(integer)`| (changed)| `<SVGLength: 1>` |
-| `markerWidth=(NaN)`| (changed, warning)| `<SVGLength: 0>` |
+| `markerWidth=(NaN)`| (initial, warning)| `<SVGLength: 3>` |
 | `markerWidth=(float)`| (changed)| `<SVGLength: 99.99>` |
 | `markerWidth=(true)`| (initial, warning)| `<SVGLength: 3>` |
 | `markerWidth=(false)`| (initial, warning)| `<SVGLength: 3>` |
-| `markerWidth=(string 'true')`| (changed)| `<SVGLength: 0>` |
-| `markerWidth=(string 'false')`| (changed)| `<SVGLength: 0>` |
-| `markerWidth=(string 'on')`| (changed)| `<SVGLength: 0>` |
-| `markerWidth=(string 'off')`| (changed)| `<SVGLength: 0>` |
+| `markerWidth=(string 'true')`| (initial)| `<SVGLength: 3>` |
+| `markerWidth=(string 'false')`| (initial)| `<SVGLength: 3>` |
+| `markerWidth=(string 'on')`| (initial)| `<SVGLength: 3>` |
+| `markerWidth=(string 'off')`| (initial)| `<SVGLength: 3>` |
 | `markerWidth=(symbol)`| (initial, warning)| `<SVGLength: 3>` |
 | `markerWidth=(function)`| (initial, warning)| `<SVGLength: 3>` |
 | `markerWidth=(null)`| (initial)| `<SVGLength: 3>` |
@@ -7251,23 +7351,23 @@
 ## `numOctaves` (on `<feTurbulence>` inside `<svg>`)
 | Test Case | Flags | Result |
 | --- | --- | --- |
-| `numOctaves=(string)`| (changed)| `<number: 0>` |
+| `numOctaves=(string)`| (initial)| `<number: 1>` |
 | `numOctaves=(empty string)`| (changed)| `<number: 0>` |
-| `numOctaves=(array with string)`| (changed)| `<number: 0>` |
+| `numOctaves=(array with string)`| (initial)| `<number: 1>` |
 | `numOctaves=(empty array)`| (changed)| `<number: 0>` |
-| `numOctaves=(object)`| (changed)| `<number: 0>` |
+| `numOctaves=(object)`| (initial)| `<number: 1>` |
 | `numOctaves=(numeric string)`| (changed)| `<number: 42>` |
 | `numOctaves=(-1)`| (changed)| `<number: -1>` |
 | `numOctaves=(0)`| (changed)| `<number: 0>` |
 | `numOctaves=(integer)`| (initial)| `<number: 1>` |
-| `numOctaves=(NaN)`| (changed, warning)| `<number: 0>` |
-| `numOctaves=(float)`| (changed)| `<number: 0>` |
+| `numOctaves=(NaN)`| (initial, warning)| `<number: 1>` |
+| `numOctaves=(float)`| (initial)| `<number: 1>` |
 | `numOctaves=(true)`| (initial, warning)| `<number: 1>` |
 | `numOctaves=(false)`| (initial, warning)| `<number: 1>` |
-| `numOctaves=(string 'true')`| (changed)| `<number: 0>` |
-| `numOctaves=(string 'false')`| (changed)| `<number: 0>` |
-| `numOctaves=(string 'on')`| (changed)| `<number: 0>` |
-| `numOctaves=(string 'off')`| (changed)| `<number: 0>` |
+| `numOctaves=(string 'true')`| (initial)| `<number: 1>` |
+| `numOctaves=(string 'false')`| (initial)| `<number: 1>` |
+| `numOctaves=(string 'on')`| (initial)| `<number: 1>` |
+| `numOctaves=(string 'off')`| (initial)| `<number: 1>` |
 | `numOctaves=(symbol)`| (initial, warning)| `<number: 1>` |
 | `numOctaves=(function)`| (initial, warning)| `<number: 1>` |
 | `numOctaves=(null)`| (initial)| `<number: 1>` |
@@ -9276,23 +9376,23 @@
 ## `selected` (on `<option>` inside `<select>`)
 | Test Case | Flags | Result |
 | --- | --- | --- |
-| `selected=(string)`| (initial, warning, ssr warning)| `<boolean: true>` |
-| `selected=(empty string)`| (initial, warning, ssr warning)| `<boolean: true>` |
-| `selected=(array with string)`| (initial, warning, ssr warning)| `<boolean: true>` |
-| `selected=(empty array)`| (initial, warning, ssr warning)| `<boolean: true>` |
-| `selected=(object)`| (initial, warning, ssr warning)| `<boolean: true>` |
-| `selected=(numeric string)`| (initial, warning, ssr warning)| `<boolean: true>` |
-| `selected=(-1)`| (initial, warning, ssr warning)| `<boolean: true>` |
-| `selected=(0)`| (initial, warning, ssr warning)| `<boolean: true>` |
-| `selected=(integer)`| (initial, warning, ssr warning)| `<boolean: true>` |
+| `selected=(string)`| (initial, warning)| `<boolean: true>` |
+| `selected=(empty string)`| (initial, warning)| `<boolean: true>` |
+| `selected=(array with string)`| (initial, warning)| `<boolean: true>` |
+| `selected=(empty array)`| (initial, warning)| `<boolean: true>` |
+| `selected=(object)`| (initial, warning)| `<boolean: true>` |
+| `selected=(numeric string)`| (initial, warning)| `<boolean: true>` |
+| `selected=(-1)`| (initial, warning)| `<boolean: true>` |
+| `selected=(0)`| (initial, warning)| `<boolean: true>` |
+| `selected=(integer)`| (initial, warning)| `<boolean: true>` |
 | `selected=(NaN)`| (initial, warning)| `<boolean: true>` |
-| `selected=(float)`| (initial, warning, ssr warning)| `<boolean: true>` |
-| `selected=(true)`| (initial, warning, ssr warning)| `<boolean: true>` |
-| `selected=(false)`| (initial, warning, ssr warning)| `<boolean: true>` |
+| `selected=(float)`| (initial, warning)| `<boolean: true>` |
+| `selected=(true)`| (initial, warning)| `<boolean: true>` |
+| `selected=(false)`| (initial, warning)| `<boolean: true>` |
 | `selected=(string 'true')`| (initial, warning)| `<boolean: true>` |
 | `selected=(string 'false')`| (initial, warning)| `<boolean: true>` |
-| `selected=(string 'on')`| (initial, warning, ssr warning)| `<boolean: true>` |
-| `selected=(string 'off')`| (initial, warning, ssr warning)| `<boolean: true>` |
+| `selected=(string 'on')`| (initial, warning)| `<boolean: true>` |
+| `selected=(string 'off')`| (initial, warning)| `<boolean: true>` |
 | `selected=(symbol)`| (initial, warning)| `<boolean: true>` |
 | `selected=(function)`| (initial, warning)| `<boolean: true>` |
 | `selected=(null)`| (initial)| `<boolean: true>` |
@@ -9526,23 +9626,23 @@
 ## `specularConstant` (on `<feSpecularLighting>` inside `<svg>`)
 | Test Case | Flags | Result |
 | --- | --- | --- |
-| `specularConstant=(string)`| (changed)| `<number: 0>` |
+| `specularConstant=(string)`| (initial)| `<number: 1>` |
 | `specularConstant=(empty string)`| (changed)| `<number: 0>` |
-| `specularConstant=(array with string)`| (changed)| `<number: 0>` |
+| `specularConstant=(array with string)`| (initial)| `<number: 1>` |
 | `specularConstant=(empty array)`| (changed)| `<number: 0>` |
-| `specularConstant=(object)`| (changed)| `<number: 0>` |
+| `specularConstant=(object)`| (initial)| `<number: 1>` |
 | `specularConstant=(numeric string)`| (changed)| `<number: 42>` |
 | `specularConstant=(-1)`| (changed)| `<number: -1>` |
 | `specularConstant=(0)`| (changed)| `<number: 0>` |
 | `specularConstant=(integer)`| (initial)| `<number: 1>` |
-| `specularConstant=(NaN)`| (changed, warning)| `<number: 0>` |
+| `specularConstant=(NaN)`| (initial, warning)| `<number: 1>` |
 | `specularConstant=(float)`| (changed)| `<number: 99.98999786376953>` |
 | `specularConstant=(true)`| (initial, warning)| `<number: 1>` |
 | `specularConstant=(false)`| (initial, warning)| `<number: 1>` |
-| `specularConstant=(string 'true')`| (changed)| `<number: 0>` |
-| `specularConstant=(string 'false')`| (changed)| `<number: 0>` |
-| `specularConstant=(string 'on')`| (changed)| `<number: 0>` |
-| `specularConstant=(string 'off')`| (changed)| `<number: 0>` |
+| `specularConstant=(string 'true')`| (initial)| `<number: 1>` |
+| `specularConstant=(string 'false')`| (initial)| `<number: 1>` |
+| `specularConstant=(string 'on')`| (initial)| `<number: 1>` |
+| `specularConstant=(string 'off')`| (initial)| `<number: 1>` |
 | `specularConstant=(symbol)`| (initial, warning)| `<number: 1>` |
 | `specularConstant=(function)`| (initial, warning)| `<number: 1>` |
 | `specularConstant=(null)`| (initial)| `<number: 1>` |
@@ -10678,7 +10778,7 @@
 | --- | --- | --- |
 | `style=(string)`| (changed, error, warning, ssr error)| `` |
 | `style=(empty string)`| (changed, error, warning, ssr error)| `` |
-| `style=(array with string)`| (initial)| `[]` |
+| `style=(array with string)`| (changed, error, warning, ssr mismatch)| `` |
 | `style=(empty array)`| (initial)| `[]` |
 | `style=(object)`| (initial)| `[]` |
 | `style=(numeric string)`| (changed, error, warning, ssr error)| `` |
@@ -10751,23 +10851,23 @@
 ## `surfaceScale` (on `<feDiffuseLighting>` inside `<svg>`)
 | Test Case | Flags | Result |
 | --- | --- | --- |
-| `surfaceScale=(string)`| (changed)| `<number: 0>` |
+| `surfaceScale=(string)`| (initial)| `<number: 1>` |
 | `surfaceScale=(empty string)`| (changed)| `<number: 0>` |
-| `surfaceScale=(array with string)`| (changed)| `<number: 0>` |
+| `surfaceScale=(array with string)`| (initial)| `<number: 1>` |
 | `surfaceScale=(empty array)`| (changed)| `<number: 0>` |
-| `surfaceScale=(object)`| (changed)| `<number: 0>` |
+| `surfaceScale=(object)`| (initial)| `<number: 1>` |
 | `surfaceScale=(numeric string)`| (changed)| `<number: 42>` |
 | `surfaceScale=(-1)`| (changed)| `<number: -1>` |
 | `surfaceScale=(0)`| (changed)| `<number: 0>` |
 | `surfaceScale=(integer)`| (initial)| `<number: 1>` |
-| `surfaceScale=(NaN)`| (changed, warning)| `<number: 0>` |
+| `surfaceScale=(NaN)`| (initial, warning)| `<number: 1>` |
 | `surfaceScale=(float)`| (changed)| `<number: 99.98999786376953>` |
 | `surfaceScale=(true)`| (initial, warning)| `<number: 1>` |
 | `surfaceScale=(false)`| (initial, warning)| `<number: 1>` |
-| `surfaceScale=(string 'true')`| (changed)| `<number: 0>` |
-| `surfaceScale=(string 'false')`| (changed)| `<number: 0>` |
-| `surfaceScale=(string 'on')`| (changed)| `<number: 0>` |
-| `surfaceScale=(string 'off')`| (changed)| `<number: 0>` |
+| `surfaceScale=(string 'true')`| (initial)| `<number: 1>` |
+| `surfaceScale=(string 'false')`| (initial)| `<number: 1>` |
+| `surfaceScale=(string 'on')`| (initial)| `<number: 1>` |
+| `surfaceScale=(string 'off')`| (initial)| `<number: 1>` |
 | `surfaceScale=(symbol)`| (initial, warning)| `<number: 1>` |
 | `surfaceScale=(function)`| (initial, warning)| `<number: 1>` |
 | `surfaceScale=(null)`| (initial)| `<number: 1>` |
@@ -11810,7 +11910,7 @@
 | `value=(-1)`| (changed)| `"-1"` |
 | `value=(0)`| (changed)| `"0"` |
 | `value=(integer)`| (changed)| `"1"` |
-| `value=(NaN)`| (changed, warning, ssr warning)| `"NaN"` |
+| `value=(NaN)`| (changed, warning)| `"NaN"` |
 | `value=(float)`| (changed)| `"99.99"` |
 | `value=(true)`| (changed)| `"true"` |
 | `value=(false)`| (changed)| `"false"` |
@@ -11818,9 +11918,9 @@
 | `value=(string 'false')`| (changed)| `"false"` |
 | `value=(string 'on')`| (changed)| `"on"` |
 | `value=(string 'off')`| (changed)| `"off"` |
-| `value=(symbol)`| (initial, warning, ssr warning)| `<empty string>` |
-| `value=(function)`| (initial, warning, ssr warning)| `<empty string>` |
-| `value=(null)`| (initial, warning, ssr warning)| `<empty string>` |
+| `value=(symbol)`| (initial, warning)| `<empty string>` |
+| `value=(function)`| (initial, warning)| `<empty string>` |
+| `value=(null)`| (initial, warning)| `<empty string>` |
 | `value=(undefined)`| (initial)| `<empty string>` |
 
 ## `value` (on `<input>` inside `<div>`)
@@ -11845,7 +11945,7 @@
 | `value=(string 'off')`| (changed)| `"off"` |
 | `value=(symbol)`| (initial, warning)| `<empty string>` |
 | `value=(function)`| (initial, warning)| `<empty string>` |
-| `value=(null)`| (initial, warning, ssr warning)| `<empty string>` |
+| `value=(null)`| (initial, warning)| `<empty string>` |
 | `value=(undefined)`| (initial)| `<empty string>` |
 
 ## `value` (on `<input>` inside `<div>`)
@@ -11870,7 +11970,7 @@
 | `value=(string 'off')`| (initial)| `<empty string>` |
 | `value=(symbol)`| (initial, warning)| `<empty string>` |
 | `value=(function)`| (initial, warning)| `<empty string>` |
-| `value=(null)`| (initial, warning, ssr warning)| `<empty string>` |
+| `value=(null)`| (initial, warning)| `<empty string>` |
 | `value=(undefined)`| (initial)| `<empty string>` |
 
 ## `value` (on `<textarea>` inside `<div>`)
@@ -11880,22 +11980,22 @@
 | `value=(empty string)`| (initial)| `<empty string>` |
 | `value=(array with string)`| (changed)| `"string"` |
 | `value=(empty array)`| (initial)| `<empty string>` |
-| `value=(object)`| (changed)| `"result of toString()"` |
+| `value=(object)`| (changed, ssr error, ssr mismatch)| `"result of toString()"` |
 | `value=(numeric string)`| (changed)| `"42"` |
 | `value=(-1)`| (changed)| `"-1"` |
 | `value=(0)`| (changed)| `"0"` |
 | `value=(integer)`| (changed)| `"1"` |
-| `value=(NaN)`| (changed, warning, ssr warning)| `"NaN"` |
+| `value=(NaN)`| (changed, warning)| `"NaN"` |
 | `value=(float)`| (changed)| `"99.99"` |
-| `value=(true)`| (changed)| `"true"` |
-| `value=(false)`| (changed)| `"false"` |
+| `value=(true)`| (changed, ssr mismatch)| `"true"` |
+| `value=(false)`| (changed, ssr mismatch)| `"false"` |
 | `value=(string 'true')`| (changed)| `"true"` |
 | `value=(string 'false')`| (changed)| `"false"` |
 | `value=(string 'on')`| (changed)| `"on"` |
 | `value=(string 'off')`| (changed)| `"off"` |
-| `value=(symbol)`| (initial, warning, ssr error, ssr mismatch)| `<empty string>` |
-| `value=(function)`| (initial, warning, ssr mismatch)| `<empty string>` |
-| `value=(null)`| (initial, warning, ssr warning)| `<empty string>` |
+| `value=(symbol)`| (initial, warning)| `<empty string>` |
+| `value=(function)`| (initial, warning)| `<empty string>` |
+| `value=(null)`| (initial, warning)| `<empty string>` |
 | `value=(undefined)`| (initial)| `<empty string>` |
 
 ## `value` (on `<option>` inside `<select>`)
@@ -11918,7 +12018,7 @@
 | `value=(string 'false')`| (changed)| `"false"` |
 | `value=(string 'on')`| (changed)| `"on"` |
 | `value=(string 'off')`| (changed)| `"off"` |
-| `value=(symbol)`| (initial, warning)| `<empty string>` |
+| `value=(symbol)`| (initial, warning, ssr error, ssr mismatch)| `<empty string>` |
 | `value=(function)`| (initial, warning)| `<empty string>` |
 | `value=(null)`| (initial)| `<empty string>` |
 | `value=(undefined)`| (initial)| `<empty string>` |
diff --git a/fixtures/attribute-behavior/README.md b/fixtures/attribute-behavior/README.md
index 2411462f11aaa..51b3452e86d0f 100644
--- a/fixtures/attribute-behavior/README.md
+++ b/fixtures/attribute-behavior/README.md
@@ -8,7 +8,7 @@
 
 ## Instructions
 
-`cd fixtures/attribute-behavior && yarn install && yarn start`
+`yarn build --type=UMD_DEV react/index,react-dom && cd fixtures/attribute-behavior && yarn install && yarn start`
 
 ## Interpretation
 
@@ -16,9 +16,8 @@ Each row is an attribute which could be set on some DOM component. Some of
 them are invalid or mis-capitalized or mixed up versions of real ones.
 Each column is a value which can be passed to that attribute.
 Every cell has a box on the left and a box on the right.
-The left box shows the property (or attribute) assigned by React 15.\*, and the
-right box shows the property (or attribute) assigned by the latest version of
-React 16.
+The left box shows the property (or attribute) assigned by the latest stable release of React, and the
+right box shows the property (or attribute) assigned by the locally built version of React.
 
 Right now, we use a purple outline to call out cases where the assigned property
 (or attribute) has changed between React 15 and 16.
diff --git a/fixtures/attribute-behavior/package.json b/fixtures/attribute-behavior/package.json
index 4149300e1be58..e71f60ec2e112 100644
--- a/fixtures/attribute-behavior/package.json
+++ b/fixtures/attribute-behavior/package.json
@@ -12,7 +12,7 @@
   },
   "scripts": {
     "prestart":
-      "cp ../../build/node_modules/react/umd/react.development.js public/ && cp ../../build/node_modules/react-dom/umd/react-dom.development.js public/ && cp ../../build/node_modules/react-dom/umd/react-dom-server.browser.development.js public/",
+      "cp ../../build/node_modules/react/umd/react.development.js public/ && cp ../../build/node_modules/react-dom/umd/react-dom.development.js public/ && cp ../../build/node_modules/react-dom/umd/react-dom-server-legacy.browser.development.js public/",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
diff --git a/fixtures/attribute-behavior/src/App.js b/fixtures/attribute-behavior/src/App.js
index 7cb678b587389..36415c33817cd 100644
--- a/fixtures/attribute-behavior/src/App.js
+++ b/fixtures/attribute-behavior/src/App.js
@@ -213,6 +213,9 @@ function getCanonicalizedValue(value) {
 
 let _didWarn = false;
 function warn(str) {
+  if (str.includes('ReactDOM.render is no longer supported')) {
+    return;
+  }
   _didWarn = true;
 }
 const UNKNOWN_HTML_TAGS = new Set(['keygen', 'time', 'command']);
@@ -525,7 +528,7 @@ function ResultPopover(props) {
     <pre
       css={{
         padding: '1em',
-        width: '25em',
+        minWidth: '25em',
       }}>
       {JSON.stringify(
         {
@@ -723,9 +726,9 @@ class App extends React.Component {
     rowPatternHashes: null,
   };
 
-  renderCell = props => {
+  renderCell = ({key, ...props}) => {
     return (
-      <div style={props.style}>
+      <div key={key} style={props.style}>
         <CellContent
           toggleAttribute={this.toggleAttribute}
           completedHashes={this.state.completedHashes}
@@ -764,7 +767,7 @@ class App extends React.Component {
         'https://unpkg.com/react-dom@latest/umd/react-dom-server.browser.development.js',
       ReactNext: '/react.development.js',
       ReactDOMNext: '/react-dom.development.js',
-      ReactDOMServerNext: '/react-dom-server.browser.development.js',
+      ReactDOMServerNext: '/react-dom-server-legacy.browser.development.js',
     };
     const codePromises = Object.values(sources).map(src =>
       fetch(src).then(res => res.text())
diff --git a/fixtures/attribute-behavior/src/attributes.js b/fixtures/attribute-behavior/src/attributes.js
index d534613a89965..6fc61700d3a4e 100644
--- a/fixtures/attribute-behavior/src/attributes.js
+++ b/fixtures/attribute-behavior/src/attributes.js
@@ -937,6 +937,8 @@ const attributes = [
     tagName: 'svg',
     read: getSVGAttribute('image-rendering'),
   },
+  {name: 'imageSizes', tagName: 'link', read: getProperty('imageSizes')},
+  {name: 'imageSrcSet', tagName: 'link', read: getProperty('imageSrcset')},
   {
     name: 'in',
     read: getSVGAttribute('in'),
diff --git a/package.json b/package.json
index e4ea1c83be801..c57c892b15730 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-syntax-import-meta": "^7.10.4",
     "@babel/plugin-syntax-jsx": "^7.10.4",
+    "@babel/plugin-syntax-typescript": "^7.14.5",
     "@babel/plugin-transform-arrow-functions": "^7.10.4",
     "@babel/plugin-transform-async-to-generator": "^7.10.4",
     "@babel/plugin-transform-block-scoped-functions": "^7.10.4",
@@ -35,7 +36,6 @@
     "@babel/preset-flow": "^7.10.4",
     "@babel/preset-react": "^7.10.4",
     "@babel/traverse": "^7.11.0",
-    "web-streams-polyfill": "^3.1.1",
     "abort-controller": "^3.0.0",
     "art": "0.10.1",
     "babel-eslint": "^10.0.3",
@@ -96,6 +96,7 @@
     "through2": "^3.0.1",
     "tmp": "^0.1.0",
     "typescript": "^3.7.5",
+    "web-streams-polyfill": "^3.1.1",
     "webpack": "^4.41.2",
     "yargs": "^15.3.1"
   },
@@ -108,7 +109,7 @@
   "scripts": {
     "build": "node ./scripts/rollup/build.js",
     "build-combined": "node ./scripts/rollup/build-all-release-channels.js",
-    "build-for-devtools": "cross-env RELEASE_CHANNEL=experimental yarn build react/index,react/jsx,react-dom,react-is,react-debug-tools,scheduler,react-test-renderer,react-refresh --type=NODE && cp -r ./build/node_modules build/oss-experimental/",
+    "build-for-devtools": "cross-env RELEASE_CHANNEL=experimental yarn build react/index,react/jsx,react-dom/index,react-dom/test,react-is,react-debug-tools,scheduler,react-test-renderer,react-refresh --type=NODE && cp -r ./build/node_modules build/oss-experimental/",
     "build-for-devtools-dev": "yarn build-for-devtools --type=NODE_DEV",
     "build-for-devtools-prod": "yarn build-for-devtools --type=NODE_PROD",
     "linc": "node ./scripts/tasks/linc.js",
@@ -145,5 +146,8 @@
     "download-build": "node ./scripts/release/download-experimental-build.js",
     "download-build-for-head": "node ./scripts/release/download-experimental-build.js --commit=$(git rev-parse HEAD)",
     "download-build-in-codesandbox-ci": "cd scripts/release && yarn install && cd ../../ && yarn download-build-for-head || yarn build-combined --type=node react/index react-dom scheduler"
+  },
+  "resolutions": {
+    "react-is": "npm:react-is"
   }
 }
diff --git a/packages/eslint-plugin-react-hooks/CHANGELOG.md b/packages/eslint-plugin-react-hooks/CHANGELOG.md
index b3e5d1736cb4c..6a560c6012f41 100644
--- a/packages/eslint-plugin-react-hooks/CHANGELOG.md
+++ b/packages/eslint-plugin-react-hooks/CHANGELOG.md
@@ -1,3 +1,11 @@
+## 4.3.0
+
+* Support ESLint 8. ([@MichaelDeBoey](https://github.com/MichaelDeBoey) in [#22248](https://github.com/facebook/react/pull/22248))
+* Fix a crash with an empty effect. ([@ChrisRu](https://github.com/ChrisRu) in [#20385](https://github.com/facebook/react/pull/20385))
+* Improve the error message. ([@callmetwan](https://github.com/callmetwan) in [#20692](https://github.com/facebook/react/pull/20692))
+* Handle optional chained methods as dependency. ([@AriPerkkio](https://github.com/AriPerkkio) in [#20247](https://github.com/facebook/react/pull/20247))
+* Assume the new `useTransition` signature in the rule. ([@rickhanlonii](https://github.com/rickhanlonii) in [#20976](https://github.com/facebook/react/pull/20976))
+
 ## 4.2.0
 
 * No changes, this was an automated release together with React 17.
diff --git a/packages/eslint-plugin-react-hooks/package.json b/packages/eslint-plugin-react-hooks/package.json
index 1cda188fc5dc7..6bf810a7712bf 100644
--- a/packages/eslint-plugin-react-hooks/package.json
+++ b/packages/eslint-plugin-react-hooks/package.json
@@ -1,7 +1,7 @@
 {
   "name": "eslint-plugin-react-hooks",
   "description": "ESLint rules for React Hooks",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/facebook/react.git",
diff --git a/packages/react-art/src/ReactART.js b/packages/react-art/src/ReactART.js
index a29f9cd23714d..9d1b6a16c2038 100644
--- a/packages/react-art/src/ReactART.js
+++ b/packages/react-art/src/ReactART.js
@@ -66,7 +66,15 @@ class Surface extends React.Component {
 
     this._surface = Mode.Surface(+width, +height, this._tagRef);
 
-    this._mountNode = createContainer(this._surface, LegacyRoot, false, null);
+    this._mountNode = createContainer(
+      this._surface,
+      LegacyRoot,
+      false,
+      null,
+      false,
+      false,
+      '',
+    );
     updateContainer(this.props.children, this._mountNode, this);
   }
 
diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js
index 1ef01e8ffc026..ab3250d7cff7a 100644
--- a/packages/react-devtools-core/src/standalone.js
+++ b/packages/react-devtools-core/src/standalone.js
@@ -41,13 +41,17 @@ import type {InspectedElement} from 'react-devtools-shared/src/devtools/views/Co
 
 installHook(window);
 
-export type StatusListener = (message: string) => void;
+export type StatusTypes = 'server-connected' | 'devtools-connected' | 'error';
+export type StatusListener = (message: string, status: StatusTypes) => void;
 export type OnDisconnectedCallback = () => void;
 
 let node: HTMLElement = ((null: any): HTMLElement);
 let nodeWaitingToConnectHTML: string = '';
 let projectRoots: Array<string> = [];
-let statusListener: StatusListener = (message: string) => {};
+let statusListener: StatusListener = (
+  message: string,
+  status?: StatusTypes,
+) => {};
 let disconnectedCallback: OnDisconnectedCallback = () => {};
 
 // TODO (Webpack 5) Hopefully we can remove this prop after the Webpack 5 migration.
@@ -260,6 +264,7 @@ function initialize(socket: WebSocket) {
   });
 
   log('Connected');
+  statusListener('DevTools initialized.', 'devtools-connected');
   reload();
 }
 
@@ -372,12 +377,15 @@ function startServer(
 
   httpServer.on('error', event => {
     onError(event);
-    statusListener('Failed to start the server.');
+    statusListener('Failed to start the server.', 'error');
     startServerTimeoutID = setTimeout(() => startServer(port), 1000);
   });
 
   httpServer.listen(port, () => {
-    statusListener('The server is listening on the port ' + port + '.');
+    statusListener(
+      'The server is listening on the port ' + port + '.',
+      'server-connected',
+    );
   });
 
   return {
diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
index 015472fa2e89c..2d67aa2cd7bde 100644
--- a/packages/react-devtools-extensions/src/main.js
+++ b/packages/react-devtools-extensions/src/main.js
@@ -156,7 +156,9 @@ function createPanelIfReactLoaded() {
           supportsTimeline: isChrome,
           supportsTraceUpdates: true,
         });
-        store.profilerStore.profilingData = profilingData;
+        if (!isProfiling) {
+          store.profilerStore.profilingData = profilingData;
+        }
 
         // Initialize the backend only once the Store has been initialized.
         // Otherwise the Store may miss important initial tree op codes.
diff --git a/packages/react-devtools-inline/README.md b/packages/react-devtools-inline/README.md
index 35b0127f41d54..b7b3f8373adc9 100644
--- a/packages/react-devtools-inline/README.md
+++ b/packages/react-devtools-inline/README.md
@@ -66,7 +66,7 @@ const DevTools = initialize(contentWindow);
 
 ### Supporting named hooks
 
-DevTools can display hook "names" for an inspected component, although determining the "names" requires loading the source (and source-maps), parsing the code, and infering the names based on which variables hook values get assigned to. Because the code for this is non-trivial, it's lazy-loaded only if the feature is enabled.
+DevTools can display hook "names" for an inspected component, although determining the "names" requires loading the source (and source-maps), parsing the code, and inferring the names based on which variables hook values get assigned to. Because the code for this is non-trivial, it's lazy-loaded only if the feature is enabled.
 
 To configure this package to support this functionality, you'll need to provide a prop that dynamically imports the extra functionality:
 ```js
diff --git a/packages/react-devtools-inline/__tests__/__e2e__/inspecting-props.test.js b/packages/react-devtools-inline/__tests__/__e2e__/inspecting-props.test.js
new file mode 100644
index 0000000000000..9fbbce0f47df6
--- /dev/null
+++ b/packages/react-devtools-inline/__tests__/__e2e__/inspecting-props.test.js
@@ -0,0 +1,50 @@
+'use strict';
+
+const {test, expect} = require('@playwright/test');
+const config = require('../../playwright.config');
+test.use(config);
+
+test.describe('Testing Todo-List App', () => {
+  let page, frameElementHandle, frame;
+  test.beforeAll(async ({browser}) => {
+    page = await browser.newPage();
+    await page.goto('http://localhost:8080/', {waitUntil: 'domcontentloaded'});
+    await page.waitForSelector('iframe#target');
+    frameElementHandle = await page.$('#target');
+    frame = await frameElementHandle.contentFrame();
+  });
+
+  test('The Todo List should contain 3 items by default', async () => {
+    const list = frame.locator('.listitem');
+    await expect(list).toHaveCount(3);
+  });
+
+  test('Add another item Fourth to list', async () => {
+    await frame.type('.input', 'Fourth');
+    await frame.click('button.iconbutton');
+    const listItems = await frame.locator('.label');
+    await expect(listItems).toHaveText(['First', 'Second', 'Third', 'Fourth']);
+  });
+
+  test('Inspecting list elements with devtools', async () => {
+    // Component props are used as string in devtools.
+    const listItemsProps = [
+      '',
+      '{id: 1, isComplete: true, text: "First"}',
+      '{id: 2, isComplete: true, text: "Second"}',
+      '{id: 3, isComplete: false, text: "Third"}',
+      '{id: 4, isComplete: false, text: "Fourth"}',
+    ];
+    const countOfItems = await frame.$$eval('.listitem', el => el.length);
+    // For every item in list click on devtools inspect icon
+    // click on the list item to quickly navigate to the list item component in devtools
+    // comparing displayed props with the array of props.
+    for (let i = 1; i <= countOfItems; ++i) {
+      await page.click('[class^=ToggleContent]', {delay: 100});
+      await frame.click(`.listitem:nth-child(${i})`, {delay: 50});
+      await page.waitForSelector('span.Value___tNzum');
+      const text = await page.innerText('span[class^=Value]');
+      await expect(text).toEqual(listItemsProps[i]);
+    }
+  });
+});
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index b814eacd4d193..f6468fea3c28a 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -19,7 +19,8 @@
   "scripts": {
     "build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
     "prepublish": "yarn run build",
-    "start": "cross-env NODE_ENV=development webpack --config webpack.config.js --watch"
+    "start": "cross-env NODE_ENV=development webpack --config webpack.config.js --watch",
+    "test:e2e": "playwright test --config=playwright.config.js"
   },
   "dependencies": {
     "source-map-js": "^0.6.2",
@@ -33,6 +34,7 @@
     "@babel/preset-env": "^7.11.0",
     "@babel/preset-flow": "^7.10.4",
     "@babel/preset-react": "^7.10.4",
+    "@playwright/test": "^1.16.3",
     "babel-core": "^7.0.0-bridge",
     "babel-eslint": "^9.0.0",
     "babel-loader": "^8.0.4",
diff --git a/packages/react-devtools-inline/playwright.config.js b/packages/react-devtools-inline/playwright.config.js
new file mode 100644
index 0000000000000..58c951723270f
--- /dev/null
+++ b/packages/react-devtools-inline/playwright.config.js
@@ -0,0 +1,11 @@
+const config = {
+  use: {
+    headless: false,
+    browserName: 'chromium',
+    launchOptions: {
+      slowMo: 100,
+    },
+  },
+};
+
+module.exports = config;
diff --git a/packages/react-devtools-inline/webpack.config.js b/packages/react-devtools-inline/webpack.config.js
index ab7bcb8be3650..07f23f8ef34ea 100644
--- a/packages/react-devtools-inline/webpack.config.js
+++ b/packages/react-devtools-inline/webpack.config.js
@@ -33,6 +33,14 @@ const babelOptions = {
   ),
 };
 
+const builtModulesDir = resolve(
+  __dirname,
+  '..',
+  '..',
+  'build',
+  'oss-experimental',
+);
+
 module.exports = {
   mode: __DEV__ ? 'development' : 'production',
   devtool: __DEV__ ? 'eval-cheap-source-map' : 'source-map',
@@ -49,12 +57,10 @@ module.exports = {
     libraryTarget: 'commonjs2',
   },
   externals: {
-    react: 'react',
-    // TODO: Once this package is published, remove the external
-    // 'react-debug-tools': 'react-debug-tools',
-    'react-dom': 'react-dom',
-    'react-is': 'react-is',
-    scheduler: 'scheduler',
+    react: resolve(builtModulesDir, 'react'),
+    'react-dom': resolve(builtModulesDir, 'react-dom/unstable_testing'),
+    'react-is': resolve(builtModulesDir, 'react-is'),
+    scheduler: resolve(builtModulesDir, 'scheduler'),
   },
   node: {
     // source-maps package has a dependency on 'fs'
diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
index 92555b0761cd2..f07f405a85f2e 100644
--- a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
+++ b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
@@ -1700,94 +1700,6 @@ Object {
 }
 `;
 
-exports[`ProfilingCache should collect data for each root (including ones added or mounted after profiling started): Data for root Parent 3`] = `
-Object {
-  "commitData": Array [
-    Object {
-      "changeDescriptions": Map {},
-      "duration": 0,
-      "effectDuration": 0,
-      "fiberActualDurations": Map {},
-      "fiberSelfDurations": Map {},
-      "passiveEffectDuration": 0,
-      "priorityLevel": "Immediate",
-      "timestamp": 34,
-      "updaters": Array [
-        Object {
-          "displayName": "render()",
-          "hocDisplayNames": null,
-          "id": 7,
-          "key": null,
-          "type": 11,
-        },
-      ],
-    },
-  ],
-  "displayName": "Parent",
-  "initialTreeBaseDurations": Map {
-    7 => 11,
-    8 => 11,
-    10 => 0,
-    11 => 1,
-  },
-  "operations": Array [
-    Array [
-      1,
-      7,
-      0,
-      2,
-      4,
-      11,
-      10,
-      8,
-      7,
-    ],
-  ],
-  "rootID": 7,
-  "snapshots": Map {
-    7 => Object {
-      "children": Array [
-        8,
-      ],
-      "displayName": null,
-      "hocDisplayNames": null,
-      "id": 7,
-      "key": null,
-      "type": 11,
-    },
-    8 => Object {
-      "children": Array [
-        10,
-        11,
-      ],
-      "displayName": "Parent",
-      "hocDisplayNames": null,
-      "id": 8,
-      "key": null,
-      "type": 5,
-    },
-    10 => Object {
-      "children": Array [],
-      "displayName": "Child",
-      "hocDisplayNames": null,
-      "id": 10,
-      "key": "0",
-      "type": 5,
-    },
-    11 => Object {
-      "children": Array [],
-      "displayName": "Child",
-      "hocDisplayNames": Array [
-        "Memo",
-      ],
-      "id": 11,
-      "key": null,
-      "type": 8,
-    },
-  },
-}
-`;
-
 exports[`ProfilingCache should collect data for each root (including ones added or mounted after profiling started): imported data 1`] = `
 Object {
   "dataForRoots": Array [
@@ -2330,115 +2242,6 @@ Object {
       "rootID": 13,
       "snapshots": Array [],
     },
-    Object {
-      "commitData": Array [
-        Object {
-          "changeDescriptions": Array [],
-          "duration": 0,
-          "effectDuration": 0,
-          "fiberActualDurations": Array [],
-          "fiberSelfDurations": Array [],
-          "passiveEffectDuration": 0,
-          "priorityLevel": "Immediate",
-          "timestamp": 34,
-          "updaters": Array [
-            Object {
-              "displayName": "render()",
-              "hocDisplayNames": null,
-              "id": 7,
-              "key": null,
-              "type": 11,
-            },
-          ],
-        },
-      ],
-      "displayName": "Parent",
-      "initialTreeBaseDurations": Array [
-        Array [
-          7,
-          11,
-        ],
-        Array [
-          8,
-          11,
-        ],
-        Array [
-          10,
-          0,
-        ],
-        Array [
-          11,
-          1,
-        ],
-      ],
-      "operations": Array [
-        Array [
-          1,
-          7,
-          0,
-          2,
-          4,
-          11,
-          10,
-          8,
-          7,
-        ],
-      ],
-      "rootID": 7,
-      "snapshots": Array [
-        Array [
-          7,
-          Object {
-            "children": Array [
-              8,
-            ],
-            "displayName": null,
-            "hocDisplayNames": null,
-            "id": 7,
-            "key": null,
-            "type": 11,
-          },
-        ],
-        Array [
-          8,
-          Object {
-            "children": Array [
-              10,
-              11,
-            ],
-            "displayName": "Parent",
-            "hocDisplayNames": null,
-            "id": 8,
-            "key": null,
-            "type": 5,
-          },
-        ],
-        Array [
-          10,
-          Object {
-            "children": Array [],
-            "displayName": "Child",
-            "hocDisplayNames": null,
-            "id": 10,
-            "key": "0",
-            "type": 5,
-          },
-        ],
-        Array [
-          11,
-          Object {
-            "children": Array [],
-            "displayName": "Child",
-            "hocDisplayNames": Array [
-              "Memo",
-            ],
-            "id": 11,
-            "key": null,
-            "type": 8,
-          },
-        ],
-      ],
-    },
   ],
   "version": 5,
 }
diff --git a/packages/react-devtools-shared/src/__tests__/profilerChangeDescriptions-test.js b/packages/react-devtools-shared/src/__tests__/profilerChangeDescriptions-test.js
new file mode 100644
index 0000000000000..eee3a66b03a55
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/profilerChangeDescriptions-test.js
@@ -0,0 +1,151 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+describe('Profiler change descriptions', () => {
+  let React;
+  let legacyRender;
+  let store: Store;
+  let utils;
+
+  beforeEach(() => {
+    utils = require('./utils');
+    utils.beforeEachProfiling();
+
+    legacyRender = utils.legacyRender;
+
+    store = global.store;
+    store.collapseNodesByDefault = false;
+    store.recordChangeDescriptions = true;
+
+    React = require('react');
+  });
+
+  it('should identify useContext as the cause for a re-render', () => {
+    const Context = React.createContext(0);
+
+    function Child() {
+      const context = React.useContext(Context);
+      return context;
+    }
+
+    function areEqual() {
+      return true;
+    }
+
+    const MemoizedChild = React.memo(Child, areEqual);
+    const ForwardRefChild = React.forwardRef(function RefForwardingComponent(
+      props,
+      ref,
+    ) {
+      return <Child />;
+    });
+
+    let forceUpdate = null;
+
+    const App = function App() {
+      const [val, dispatch] = React.useReducer(x => x + 1, 0);
+
+      forceUpdate = dispatch;
+
+      return (
+        <Context.Provider value={val}>
+          <Child />
+          <MemoizedChild />
+          <ForwardRefChild />
+        </Context.Provider>
+      );
+    };
+
+    const container = document.createElement('div');
+
+    utils.act(() => store.profilerStore.startProfiling());
+    utils.act(() => legacyRender(<App />, container));
+    utils.act(() => forceUpdate());
+    utils.act(() => store.profilerStore.stopProfiling());
+
+    const rootID = store.roots[0];
+    const commitData = store.profilerStore.getCommitData(rootID, 1);
+
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <App>
+          ▾ <Context.Provider>
+              <Child>
+            ▾ <Child> [Memo]
+                <Child>
+            ▾ <RefForwardingComponent> [ForwardRef]
+                <Child>
+    `);
+
+    let element = store.getElementAtIndex(2);
+    expect(element.displayName).toBe('Child');
+    expect(element.hocDisplayNames).toBeNull();
+    expect(commitData.changeDescriptions.get(element.id))
+      .toMatchInlineSnapshot(`
+      Object {
+        "context": true,
+        "didHooksChange": false,
+        "hooks": null,
+        "isFirstMount": false,
+        "props": Array [],
+        "state": null,
+      }
+    `);
+
+    element = store.getElementAtIndex(3);
+    expect(element.displayName).toBe('Child');
+    expect(element.hocDisplayNames).toEqual(['Memo']);
+    expect(commitData.changeDescriptions.get(element.id)).toBeUndefined();
+
+    element = store.getElementAtIndex(4);
+    expect(element.displayName).toBe('Child');
+    expect(element.hocDisplayNames).toBeNull();
+    expect(commitData.changeDescriptions.get(element.id))
+      .toMatchInlineSnapshot(`
+      Object {
+        "context": true,
+        "didHooksChange": false,
+        "hooks": null,
+        "isFirstMount": false,
+        "props": Array [],
+        "state": null,
+      }
+    `);
+
+    element = store.getElementAtIndex(5);
+    expect(element.displayName).toBe('RefForwardingComponent');
+    expect(element.hocDisplayNames).toEqual(['ForwardRef']);
+    expect(commitData.changeDescriptions.get(element.id))
+      .toMatchInlineSnapshot(`
+      Object {
+        "context": null,
+        "didHooksChange": false,
+        "hooks": null,
+        "isFirstMount": false,
+        "props": Array [],
+        "state": null,
+      }
+    `);
+
+    element = store.getElementAtIndex(6);
+    expect(element.displayName).toBe('Child');
+    expect(element.hocDisplayNames).toBeNull();
+    expect(commitData.changeDescriptions.get(element.id))
+      .toMatchInlineSnapshot(`
+      Object {
+        "context": true,
+        "didHooksChange": false,
+        "hooks": null,
+        "isFirstMount": false,
+        "props": Array [],
+        "state": null,
+      }
+    `);
+  });
+});
diff --git a/packages/react-devtools-shared/src/__tests__/profilerStore-test.js b/packages/react-devtools-shared/src/__tests__/profilerStore-test.js
index ea81b1dceef1e..06ce6a9dc4c8f 100644
--- a/packages/react-devtools-shared/src/__tests__/profilerStore-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilerStore-test.js
@@ -124,6 +124,57 @@ describe('ProfilerStore', () => {
     expect(data.operations).toHaveLength(1);
   });
 
+  it('should filter empty commits alt', () => {
+    let commitCount = 0;
+
+    const inputRef = React.createRef();
+    const Example = () => {
+      const [, setTouched] = React.useState(false);
+
+      const handleBlur = () => {
+        setTouched(true);
+      };
+
+      require('scheduler').unstable_advanceTime(1);
+
+      React.useLayoutEffect(() => {
+        commitCount++;
+      });
+
+      return <input ref={inputRef} onBlur={handleBlur} />;
+    };
+
+    const container = document.createElement('div');
+
+    // This element has to be in the <body> for the event system to work.
+    document.body.appendChild(container);
+
+    // It's important that this test uses legacy sync mode.
+    // The root API does not trigger this particular failing case.
+    legacyRender(<Example />, container);
+
+    expect(commitCount).toBe(1);
+    commitCount = 0;
+
+    utils.act(() => store.profilerStore.startProfiling());
+
+    // Focus and blur.
+    const target = inputRef.current;
+    target.focus();
+    target.blur();
+    target.focus();
+    target.blur();
+    expect(commitCount).toBe(1);
+
+    utils.act(() => store.profilerStore.stopProfiling());
+
+    // Only one commit should have been recorded (in response to the "change" event).
+    const root = store.roots[0];
+    const data = store.profilerStore.getDataForRoot(root);
+    expect(data.commitData).toHaveLength(1);
+    expect(data.operations).toHaveLength(1);
+  });
+
   it('should throw if component filters are modified while profiling', () => {
     utils.act(() => store.profilerStore.startProfiling());
 
diff --git a/packages/react-devtools-shared/src/__tests__/profilingCache-test.js b/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
index bbb5c6ffaf03f..00605d857a153 100644
--- a/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
@@ -108,7 +108,10 @@ describe('ProfilingCache', () => {
       });
     }
 
-    expect(allProfilingDataForRoots).toHaveLength(3);
+    // No profiling data gets logged for the 2nd root (container B)
+    // because it doesn't render anything while profiling.
+    // (Technically it unmounts but we don't profile root unmounts.)
+    expect(allProfilingDataForRoots).toHaveLength(2);
 
     utils.exportImportHelper(bridge, store);
 
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 9d2005522da4b..8a89a5406c6ef 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -1253,8 +1253,10 @@ export function attach(
 
   function updateContextsForFiber(fiber: Fiber) {
     switch (getElementTypeForFiber(fiber)) {
-      case ElementTypeFunction:
       case ElementTypeClass:
+      case ElementTypeForwardRef:
+      case ElementTypeFunction:
+      case ElementTypeMemo:
         if (idToContextsMap !== null) {
           const id = getFiberIDThrows(fiber);
           const contexts = getContextsForFiber(fiber);
@@ -1292,7 +1294,9 @@ export function attach(
           }
         }
         return [legacyContext, modernContext];
+      case ElementTypeForwardRef:
       case ElementTypeFunction:
+      case ElementTypeMemo:
         const dependencies = fiber.dependencies;
         if (dependencies && dependencies.firstContext) {
           modernContext = dependencies.firstContext;
@@ -1341,12 +1345,18 @@ export function attach(
             }
           }
           break;
+        case ElementTypeForwardRef:
         case ElementTypeFunction:
+        case ElementTypeMemo:
           if (nextModernContext !== NO_CONTEXT) {
             let prevContext = prevModernContext;
             let nextContext = nextModernContext;
 
             while (prevContext && nextContext) {
+              // Note this only works for versions of React that support this key (e.v. 18+)
+              // For older versions, there's no good way to read the current context value after render has completed.
+              // This is because React maintains a stack of context values during render,
+              // but by the time DevTools is called, render has finished and the stack is empty.
               if (!is(prevContext.memoizedValue, nextContext.memoizedValue)) {
                 return true;
               }
@@ -1546,6 +1556,19 @@ export function attach(
   }
 
   function flushOrQueueOperations(operations: OperationsArray): void {
+    if (operations.length === 3) {
+      // This operations array is a no op: [renderer ID, root ID, string table size (0)]
+      // We can usually skip sending updates like this across the bridge, unless we're Profiling.
+      // In that case, even though the tree didn't change– some Fibers may have still rendered.
+      if (
+        !isProfiling ||
+        currentCommitProfilingMetadata == null ||
+        currentCommitProfilingMetadata.durations.length === 0
+      ) {
+        return;
+      }
+    }
+
     if (pendingOperationsQueue !== null) {
       pendingOperationsQueue.push(operations);
     } else {
@@ -2608,18 +2631,26 @@ export function attach(
     }
 
     if (isProfiling && isProfilingSupported) {
-      const commitProfilingMetadata = ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).get(
-        currentRootID,
-      );
-      if (commitProfilingMetadata != null) {
-        commitProfilingMetadata.push(
-          ((currentCommitProfilingMetadata: any): CommitProfilingData),
-        );
-      } else {
-        ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).set(
+      // Make sure at least one Fiber performed work during this commit.
+      // If not, don't send it to the frontend; showing an empty commit in the Profiler is confusing.
+      if (
+        currentCommitProfilingMetadata != null &&
+        currentCommitProfilingMetadata.durations.length > 0
+      ) {
+        const commitProfilingMetadata = ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).get(
           currentRootID,
-          [((currentCommitProfilingMetadata: any): CommitProfilingData)],
         );
+
+        if (commitProfilingMetadata != null) {
+          commitProfilingMetadata.push(
+            ((currentCommitProfilingMetadata: any): CommitProfilingData),
+          );
+        } else {
+          ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).set(
+            currentRootID,
+            [((currentCommitProfilingMetadata: any): CommitProfilingData)],
+          );
+        }
       }
     }
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Button.js b/packages/react-devtools-shared/src/devtools/views/Button.js
index 0d706fc2ebd6b..aa006cbbc7227 100644
--- a/packages/react-devtools-shared/src/devtools/views/Button.js
+++ b/packages/react-devtools-shared/src/devtools/views/Button.js
@@ -8,10 +8,9 @@
  */
 
 import * as React from 'react';
-import Tooltip from '@reach/tooltip';
 
 import styles from './Button.css';
-import tooltipStyles from './Tooltip.css';
+import Tooltip from './Components/reach-ui/tooltip';
 
 type Props = {
   children: React$Node,
@@ -35,11 +34,7 @@ export default function Button({
   );
 
   if (title) {
-    button = (
-      <Tooltip className={tooltipStyles.Tooltip} label={title}>
-        {button}
-      </Tooltip>
-    );
+    button = <Tooltip label={title}>{button}</Tooltip>;
   }
 
   return button;
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/ComponentSearchInput.js b/packages/react-devtools-shared/src/devtools/views/Components/ComponentSearchInput.js
new file mode 100644
index 0000000000000..3180a7ebb0702
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/ComponentSearchInput.js
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import * as React from 'react';
+import {useContext} from 'react';
+import {TreeDispatcherContext, TreeStateContext} from './TreeContext';
+
+import SearchInput from '../SearchInput';
+
+type Props = {||};
+
+export default function ComponentSearchInput(props: Props) {
+  const {searchIndex, searchResults, searchText} = useContext(TreeStateContext);
+  const dispatch = useContext(TreeDispatcherContext);
+
+  const search = text => dispatch({type: 'SET_SEARCH_TEXT', payload: text});
+  const goToNextResult = () => dispatch({type: 'GO_TO_NEXT_SEARCH_RESULT'});
+  const goToPreviousResult = () =>
+    dispatch({type: 'GO_TO_PREVIOUS_SEARCH_RESULT'});
+
+  return (
+    <SearchInput
+      goToNextResult={goToNextResult}
+      goToPreviousResult={goToPreviousResult}
+      placeholder="Search (text or /regex/)"
+      search={search}
+      searchIndex={searchIndex}
+      searchResultsCount={searchResults.length}
+      searchText={searchText}
+    />
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js b/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js
index d7efafee6c522..cc9c43fd775ff 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js
@@ -16,8 +16,6 @@ import {
   useRef,
   useState,
 } from 'react';
-import Tooltip from '@reach/tooltip';
-import {Menu, MenuList, MenuButton, MenuItem} from '@reach/menu-button';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import Toggle from '../Toggle';
@@ -26,6 +24,13 @@ import {OwnersListContext} from './OwnersListContext';
 import {TreeDispatcherContext, TreeStateContext} from './TreeContext';
 import {useIsOverflowing} from '../hooks';
 import {StoreContext} from '../context';
+import Tooltip from '../Components/reach-ui/tooltip';
+import {
+  Menu,
+  MenuList,
+  MenuButton,
+  MenuItem,
+} from '../Components/reach-ui/menu-button';
 
 import type {SerializedElement} from './types';
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Tree.js b/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
index 061ea131a9bf3..3126bfc8f0d3f 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
@@ -27,7 +27,7 @@ import {BridgeContext, StoreContext, OptionsContext} from '../context';
 import Element from './Element';
 import InspectHostNodesToggle from './InspectHostNodesToggle';
 import OwnersStack from './OwnersStack';
-import SearchInput from './SearchInput';
+import ComponentSearchInput from './ComponentSearchInput';
 import SettingsModalContextToggle from 'react-devtools-shared/src/devtools/views/Settings/SettingsModalContextToggle';
 import SelectedTreeHighlight from './SelectedTreeHighlight';
 import TreeFocusedContext from './TreeFocusedContext';
@@ -343,7 +343,7 @@ export default function Tree(props: Props) {
             </Fragment>
           )}
           <Suspense fallback={<Loading />}>
-            {ownerID !== null ? <OwnersStack /> : <SearchInput />}
+            {ownerID !== null ? <OwnersStack /> : <ComponentSearchInput />}
           </Suspense>
           {showInlineWarningsAndErrors &&
             ownerID === null &&
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js b/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js
index 93e680bc751af..f6854468dc6eb 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js
@@ -829,7 +829,7 @@ type Props = {|
   defaultSelectedElementIndex?: ?number,
 |};
 
-// TODO Remove TreeContextController wrapper element once global ConsearchText.write API exists.
+// TODO Remove TreeContextController wrapper element once global Context.write API exists.
 function TreeContextController({
   children,
   defaultInspectedElementID,
diff --git a/packages/react-devtools-shared/src/devtools/views/Tooltip.css b/packages/react-devtools-shared/src/devtools/views/Components/reach-ui/Tooltip.css
similarity index 100%
rename from packages/react-devtools-shared/src/devtools/views/Tooltip.css
rename to packages/react-devtools-shared/src/devtools/views/Components/reach-ui/Tooltip.css
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/reach-ui/menu-button.js b/packages/react-devtools-shared/src/devtools/views/Components/reach-ui/menu-button.js
new file mode 100644
index 0000000000000..cee8021a191f3
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/reach-ui/menu-button.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import * as React from 'react';
+import {
+  Menu,
+  MenuList as ReachMenuList,
+  MenuButton,
+  MenuItem,
+} from '@reach/menu-button';
+import useThemeStyles from '../../useThemeStyles';
+
+const MenuList = ({children, ...props}: {children: React$Node, ...}) => {
+  const style = useThemeStyles();
+  return (
+    <ReachMenuList style={style} {...props}>
+      {children}
+    </ReachMenuList>
+  );
+};
+
+export {MenuItem, MenuButton, MenuList, Menu};
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/reach-ui/tooltip.js b/packages/react-devtools-shared/src/devtools/views/Components/reach-ui/tooltip.js
new file mode 100644
index 0000000000000..d3f07258c8b5b
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/reach-ui/tooltip.js
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import * as React from 'react';
+import ReachTooltip from '@reach/tooltip';
+import tooltipStyles from './Tooltip.css';
+import useThemeStyles from '../../useThemeStyles';
+
+const Tooltip = ({
+  children,
+  className = '',
+  ...props
+}: {
+  children: React$Node,
+  className: string,
+  ...
+}) => {
+  const style = useThemeStyles();
+  return (
+    <ReachTooltip
+      className={`${tooltipStyles.Tooltip} ${className}`}
+      style={style}
+      {...props}>
+      {children}
+    </ReachTooltip>
+  );
+};
+
+export default Tooltip;
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js
index f57b4ba8e1731..8fbebfeba86dc 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js
@@ -20,19 +20,19 @@ export default function ClearProfilingDataButton() {
   const {didRecordCommits, isProfiling, selectedTabID} = useContext(
     ProfilerContext,
   );
-  const {clearTimelineData, timelineData} = useContext(TimelineContext);
+  const {file, setFile} = useContext(TimelineContext);
   const {profilerStore} = store;
 
   let doesHaveData = false;
   if (selectedTabID === 'timeline') {
-    doesHaveData = timelineData !== null;
+    doesHaveData = file !== null;
   } else {
     doesHaveData = didRecordCommits;
   }
 
   const clear = () => {
     if (selectedTabID === 'timeline') {
-      clearTimelineData();
+      setFile(null);
     } else {
       profilerStore.clear();
     }
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.css b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.css
index 6763564e52a29..12089b71fdc6a 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.css
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.css
@@ -115,3 +115,9 @@
 .Link {
   color: var(--color-button);
 }
+
+.TimlineSearchInputContainer {
+  flex: 1 1;
+  display: flex;
+  align-items: center;
+}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
index 0bd6b0375e076..fbe8c4ac20c03 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
@@ -28,6 +28,7 @@ import SettingsModalContextToggle from 'react-devtools-shared/src/devtools/views
 import {SettingsModalContextController} from 'react-devtools-shared/src/devtools/views/Settings/SettingsModalContext';
 import portaledContent from '../portaledContent';
 import {StoreContext} from '../context';
+import {TimelineContext} from 'react-devtools-timeline/src/TimelineContext';
 
 import styles from './Profiler.css';
 
@@ -43,19 +44,19 @@ function Profiler(_: {||}) {
     supportsProfiling,
   } = useContext(ProfilerContext);
 
+  const {searchInputContainerRef} = useContext(TimelineContext);
+
   const {supportsTimeline} = useContext(StoreContext);
 
-  let isLegacyProfilerSelected = false;
+  const isLegacyProfilerSelected = selectedTabID !== 'timeline';
 
   let view = null;
   if (didRecordCommits || selectedTabID === 'timeline') {
     switch (selectedTabID) {
       case 'flame-chart':
-        isLegacyProfilerSelected = true;
         view = <CommitFlamegraph />;
         break;
       case 'ranked-chart':
-        isLegacyProfilerSelected = true;
         view = <CommitRanked />;
         break;
       case 'timeline':
@@ -121,6 +122,12 @@ function Profiler(_: {||}) {
             />
             <RootSelector />
             <div className={styles.Spacer} />
+            {!isLegacyProfilerSelected && (
+              <div
+                ref={searchInputContainerRef}
+                className={styles.TimlineSearchInputContainer}
+              />
+            )}
             <SettingsModalContextToggle />
             {isLegacyProfilerSelected && didRecordCommits && (
               <Fragment>
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
index 574da0639e973..afa3b91f2a12e 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
@@ -29,7 +29,7 @@ export default function ProfilingImportExportButtons() {
   const {isProfiling, profilingData, rootID, selectedTabID} = useContext(
     ProfilerContext,
   );
-  const {importTimelineData} = useContext(TimelineContext);
+  const {setFile} = useContext(TimelineContext);
   const store = useContext(StoreContext);
   const {profilerStore} = store;
 
@@ -111,7 +111,8 @@ export default function ProfilingImportExportButtons() {
   const importTimelineDataWrapper = event => {
     const input = inputRef.current;
     if (input !== null && input.files.length > 0) {
-      importTimelineData(input.files[0]);
+      const file = input.files[0];
+      setFile(file);
     }
   };
 
@@ -122,6 +123,7 @@ export default function ProfilingImportExportButtons() {
         ref={inputRef}
         className={styles.Input}
         type="file"
+        accept=".json"
         onChange={
           selectedTabID === 'timeline'
             ? importTimelineDataWrapper
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/SearchInput.css b/packages/react-devtools-shared/src/devtools/views/SearchInput.css
similarity index 100%
rename from packages/react-devtools-shared/src/devtools/views/Components/SearchInput.css
rename to packages/react-devtools-shared/src/devtools/views/SearchInput.css
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/SearchInput.js b/packages/react-devtools-shared/src/devtools/views/SearchInput.js
similarity index 60%
rename from packages/react-devtools-shared/src/devtools/views/Components/SearchInput.js
rename to packages/react-devtools-shared/src/devtools/views/SearchInput.js
index 736d39fc75244..1ef69ba72669f 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/SearchInput.js
+++ b/packages/react-devtools-shared/src/devtools/views/SearchInput.js
@@ -8,44 +8,48 @@
  */
 
 import * as React from 'react';
-import {useCallback, useContext, useEffect, useRef} from 'react';
-import {TreeDispatcherContext, TreeStateContext} from './TreeContext';
-import Button from '../Button';
-import ButtonIcon from '../ButtonIcon';
-import Icon from '../Icon';
+import {useEffect, useRef} from 'react';
+import Button from './Button';
+import ButtonIcon from './ButtonIcon';
+import Icon from './Icon';
 
 import styles from './SearchInput.css';
 
-type Props = {||};
-
-export default function SearchInput(props: Props) {
-  const {searchIndex, searchResults, searchText} = useContext(TreeStateContext);
-  const dispatch = useContext(TreeDispatcherContext);
+type Props = {|
+  goToNextResult: () => void,
+  goToPreviousResult: () => void,
+  placeholder: string,
+  search: (text: string) => void,
+  searchIndex: number,
+  searchResultsCount: number,
+  searchText: string,
+|};
 
+export default function SearchInput({
+  goToNextResult,
+  goToPreviousResult,
+  placeholder,
+  search,
+  searchIndex,
+  searchResultsCount,
+  searchText,
+}: Props) {
   const inputRef = useRef<HTMLInputElement | null>(null);
 
-  const handleTextChange = useCallback(
-    ({currentTarget}) =>
-      dispatch({type: 'SET_SEARCH_TEXT', payload: currentTarget.value}),
-    [dispatch],
-  );
-  const resetSearch = useCallback(
-    () => dispatch({type: 'SET_SEARCH_TEXT', payload: ''}),
-    [dispatch],
-  );
+  const resetSearch = () => search('');
 
-  const handleInputKeyPress = useCallback(
-    ({key, shiftKey}) => {
-      if (key === 'Enter') {
-        if (shiftKey) {
-          dispatch({type: 'GO_TO_PREVIOUS_SEARCH_RESULT'});
-        } else {
-          dispatch({type: 'GO_TO_NEXT_SEARCH_RESULT'});
-        }
+  const handleChange = ({currentTarget}) => {
+    search(currentTarget.value);
+  };
+  const handleKeyPress = ({key, shiftKey}) => {
+    if (key === 'Enter') {
+      if (shiftKey) {
+        goToPreviousResult();
+      } else {
+        goToNextResult();
       }
-    },
-    [dispatch],
-  );
+    }
+  };
 
   // Auto-focus search input
   useEffect(() => {
@@ -53,7 +57,7 @@ export default function SearchInput(props: Props) {
       return () => {};
     }
 
-    const handleWindowKey = (event: KeyboardEvent) => {
+    const handleKeyDown = (event: KeyboardEvent) => {
       const {key, metaKey} = event;
       if (key === 'f' && metaKey) {
         if (inputRef.current !== null) {
@@ -68,33 +72,33 @@ export default function SearchInput(props: Props) {
     // Here we use portals to render individual tabs (e.g. Profiler),
     // and the root document might belong to a different window.
     const ownerDocument = inputRef.current.ownerDocument;
-    ownerDocument.addEventListener('keydown', handleWindowKey);
+    ownerDocument.addEventListener('keydown', handleKeyDown);
 
-    return () => ownerDocument.removeEventListener('keydown', handleWindowKey);
-  }, [inputRef]);
+    return () => ownerDocument.removeEventListener('keydown', handleKeyDown);
+  }, []);
 
   return (
     <div className={styles.SearchInput}>
       <Icon className={styles.InputIcon} type="search" />
       <input
         className={styles.Input}
-        onChange={handleTextChange}
-        onKeyPress={handleInputKeyPress}
-        placeholder="Search (text or /regex/)"
+        onChange={handleChange}
+        onKeyPress={handleKeyPress}
+        placeholder={placeholder}
         ref={inputRef}
         value={searchText}
       />
       {!!searchText && (
         <React.Fragment>
           <span className={styles.IndexLabel}>
-            {Math.min(searchIndex + 1, searchResults.length)} |{' '}
-            {searchResults.length}
+            {Math.min(searchIndex + 1, searchResultsCount)} |{' '}
+            {searchResultsCount}
           </span>
           <div className={styles.LeftVRule} />
           <Button
             className={styles.IconButton}
             disabled={!searchText}
-            onClick={() => dispatch({type: 'GO_TO_PREVIOUS_SEARCH_RESULT'})}
+            onClick={goToPreviousResult}
             title={
               <React.Fragment>
                 Scroll to previous search result (<kbd>Shift</kbd> +{' '}
@@ -106,7 +110,7 @@ export default function SearchInput(props: Props) {
           <Button
             className={styles.IconButton}
             disabled={!searchText}
-            onClick={() => dispatch({type: 'GO_TO_NEXT_SEARCH_RESULT'})}
+            onClick={goToNextResult}
             title={
               <React.Fragment>
                 Scroll to next search result (<kbd>Enter</kbd>)
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
index 7f8cfe614b0cc..09c815b49b974 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
@@ -248,28 +248,6 @@ function SettingsContextController({
   );
 }
 
-function setStyleVariable(
-  name: string,
-  value: string,
-  documentElements: DocumentElements,
-) {
-  documentElements.forEach(documentElement =>
-    documentElement.style.setProperty(name, value),
-  );
-}
-
-function updateStyleHelper(
-  themeKey: string,
-  style: string,
-  documentElements: DocumentElements,
-) {
-  setStyleVariable(
-    `--${style}`,
-    `var(--${themeKey}-${style})`,
-    documentElements,
-  );
-}
-
 export function updateDisplayDensity(
   displayDensity: DisplayDensity,
   documentElements: DocumentElements,
@@ -296,12 +274,6 @@ export function updateThemeVariables(
     // $FlowFixMe scrollbarColor is missing in CSSStyleDeclaration
     documentElement.style.scrollbarColor = `var(${`--${theme}-color-scroll-thumb`}) var(${`--${theme}-color-scroll-track`})`;
   });
-
-  // The ThemeProvider works by writing DOM style variables to an HTMLDivElement.
-  // Because Portals render in a different DOM subtree, these variables don't propagate.
-  // So we need to also set @reach/tooltip specific styles on the root.
-  updateStyleHelper(theme, 'color-tooltip-background', documentElements);
-  updateStyleHelper(theme, 'color-tooltip-text', documentElements);
 }
 
 export {SettingsContext, SettingsContextController};
diff --git a/packages/react-devtools-shared/src/devtools/views/TabBar.js b/packages/react-devtools-shared/src/devtools/views/TabBar.js
index c195710a42b49..32bd32827f14f 100644
--- a/packages/react-devtools-shared/src/devtools/views/TabBar.js
+++ b/packages/react-devtools-shared/src/devtools/views/TabBar.js
@@ -9,11 +9,10 @@
 
 import * as React from 'react';
 import {Fragment, useCallback} from 'react';
-import Tooltip from '@reach/tooltip';
 import Icon from './Icon';
 
 import styles from './TabBar.css';
-import tooltipStyles from './Tooltip.css';
+import Tooltip from './Components/reach-ui/tooltip';
 
 import type {IconType} from './Icon';
 
@@ -127,7 +126,7 @@ export default function TabBar({
 
         if (title) {
           button = (
-            <Tooltip key={id} className={tooltipStyles.Tooltip} label={title}>
+            <Tooltip key={id} label={title}>
               {button}
             </Tooltip>
           );
diff --git a/packages/react-devtools-shared/src/devtools/views/ThemeProvider.js b/packages/react-devtools-shared/src/devtools/views/ThemeProvider.js
index 8fb93469ad4a4..a353b4c6eec66 100644
--- a/packages/react-devtools-shared/src/devtools/views/ThemeProvider.js
+++ b/packages/react-devtools-shared/src/devtools/views/ThemeProvider.js
@@ -8,22 +8,18 @@
  */
 
 import * as React from 'react';
-import {useContext, useMemo} from 'react';
-import {SettingsContext} from './Settings/SettingsContext';
-import {THEME_STYLES} from '../../constants';
+import useThemeStyles from './useThemeStyles';
 
 export default function ThemeProvider({children}: {|children: React$Node|}) {
-  const {theme, displayDensity, browserTheme} = useContext(SettingsContext);
+  const themeStyle = useThemeStyles();
 
-  const style = useMemo(
-    () => ({
+  const style = React.useMemo(() => {
+    return {
+      ...themeStyle,
       width: '100%',
       height: '100%',
-      ...THEME_STYLES[displayDensity],
-      ...THEME_STYLES[theme === 'auto' ? browserTheme : theme],
-    }),
-    [theme, browserTheme, displayDensity],
-  );
+    };
+  }, [themeStyle]);
 
   return <div style={style}>{children}</div>;
 }
diff --git a/packages/react-devtools-shared/src/devtools/views/Toggle.js b/packages/react-devtools-shared/src/devtools/views/Toggle.js
index c5961a9bbfc5c..20e78fee772aa 100644
--- a/packages/react-devtools-shared/src/devtools/views/Toggle.js
+++ b/packages/react-devtools-shared/src/devtools/views/Toggle.js
@@ -9,10 +9,9 @@
 
 import * as React from 'react';
 import {useCallback} from 'react';
-import Tooltip from '@reach/tooltip';
 
 import styles from './Toggle.css';
-import tooltipStyles from './Tooltip.css';
+import Tooltip from './Components/reach-ui/tooltip';
 
 type Props = {
   children: React$Node,
@@ -58,11 +57,7 @@ export default function Toggle({
   );
 
   if (title) {
-    toggle = (
-      <Tooltip className={tooltipStyles.Tooltip} label={title}>
-        {toggle}
-      </Tooltip>
-    );
+    toggle = <Tooltip label={title}>{toggle}</Tooltip>;
   }
 
   return toggle;
diff --git a/packages/react-devtools-shared/src/devtools/views/root.css b/packages/react-devtools-shared/src/devtools/views/root.css
index 9bb749ff23703..cbf8ece0066af 100644
--- a/packages/react-devtools-shared/src/devtools/views/root.css
+++ b/packages/react-devtools-shared/src/devtools/views/root.css
@@ -1,36 +1,10 @@
 :root {
-  /**
-   * The light and dark theme styles below should be kept in sync with 'react-devtools-shared/src/constants'
-   * They are repeated here because they're used by e.g. tooltips or context menus
-   * which get rendered outside of the DOM subtree (where normal theme/styles are written).
-   */
-
-  /* Light theme */
-  --light-color-scroll-thumb: #c2c2c2;
-  --light-color-scroll-track: #fafafa;
-  --light-color-tooltip-background: rgba(0, 0, 0, 0.9);
-  --light-color-tooltip-text: #ffffff;
-
-  /* Dark theme */
-  --dark-color-scroll-thumb: #afb3b9;
-  --dark-color-scroll-track: #313640;
-  --dark-color-tooltip-background: rgba(255, 255, 255, 0.95);
-  --dark-color-tooltip-text: #000000;
-
   /* Font smoothing */
   --font-smoothing: auto;
 
-  /* Compact density */
-  --compact-line-height-data: 18px;
-  --compact-root-font-size: 16px;
-
-  /* Comfortable density */
-  --comfortable-line-height-data: 22px;
-  --comfortable-root-font-size: 20px;
-
   /* GitHub.com system fonts */
   --font-family-monospace: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo,
     Courier, monospace;
   --font-family-sans: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica,
     Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
-}
\ No newline at end of file
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/useThemeStyles.js b/packages/react-devtools-shared/src/devtools/views/useThemeStyles.js
new file mode 100644
index 0000000000000..009cf1a50d575
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/useThemeStyles.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import {useContext, useMemo} from 'react';
+import {SettingsContext} from './Settings/SettingsContext';
+import {THEME_STYLES} from '../../constants';
+
+const useThemeStyles = () => {
+  const {theme, displayDensity, browserTheme} = useContext(SettingsContext);
+
+  const style = useMemo(
+    () => ({
+      ...THEME_STYLES[displayDensity],
+      ...THEME_STYLES[theme === 'auto' ? browserTheme : theme],
+    }),
+    [theme, browserTheme, displayDensity],
+  );
+
+  return style;
+};
+
+export default useThemeStyles;
diff --git a/packages/react-devtools-shared/src/registerDevToolsEventLogger.js b/packages/react-devtools-shared/src/registerDevToolsEventLogger.js
index d475bc3e7de3d..8ce5314499048 100644
--- a/packages/react-devtools-shared/src/registerDevToolsEventLogger.js
+++ b/packages/react-devtools-shared/src/registerDevToolsEventLogger.js
@@ -25,6 +25,7 @@ export function registerDevToolsEventLogger(surface: string) {
             event: event,
             context: {
               surface,
+              version: process.env.DEVTOOLS_VERSION,
             },
           },
           '*',
diff --git a/packages/react-devtools-shell/webpack.config.js b/packages/react-devtools-shell/webpack.config.js
index 18c55d1d8b740..fb3df7240fb3e 100644
--- a/packages/react-devtools-shell/webpack.config.js
+++ b/packages/react-devtools-shell/webpack.config.js
@@ -55,7 +55,7 @@ const config = {
       react: resolve(builtModulesDir, 'react'),
       'react-debug-tools': resolve(builtModulesDir, 'react-debug-tools'),
       'react-devtools-feature-flags': resolveFeatureFlags('shell'),
-      'react-dom': resolve(builtModulesDir, 'react-dom'),
+      'react-dom': resolve(builtModulesDir, 'react-dom/unstable_testing'),
       'react-is': resolve(builtModulesDir, 'react-is'),
       scheduler: resolve(builtModulesDir, 'scheduler'),
     },
@@ -107,7 +107,7 @@ const config = {
             options: {
               sourceMap: true,
               modules: true,
-              localIdentName: '[local]___[hash:base64:5]',
+              localIdentName: '[local]',
             },
           },
         ],
diff --git a/packages/react-devtools-timeline/src/CanvasPage.js b/packages/react-devtools-timeline/src/CanvasPage.js
index ab5c828280c0a..0b1257003d89e 100644
--- a/packages/react-devtools-timeline/src/CanvasPage.js
+++ b/packages/react-devtools-timeline/src/CanvasPage.js
@@ -62,6 +62,7 @@ import ContextMenuItem from 'react-devtools-shared/src/devtools/ContextMenu/Cont
 import useContextMenu from 'react-devtools-shared/src/devtools/ContextMenu/useContextMenu';
 import {getBatchRange} from './utils/getBatchRange';
 import {MAX_ZOOM_LEVEL, MIN_ZOOM_LEVEL} from './view-base/constants';
+import {TimelineSearchContext} from './TimelineSearchContext';
 
 import styles from './CanvasPage.css';
 
@@ -170,6 +171,35 @@ function AutoSizedCanvas({
     [],
   );
 
+  const {searchIndex, searchRegExp, searchResults} = useContext(
+    TimelineSearchContext,
+  );
+
+  // This effect searches timeline data and scrolls to the next match wen search criteria change.
+  useLayoutEffect(() => {
+    viewState.updateSearchRegExpState(searchRegExp);
+
+    const componentMeasureSearchResult =
+      searchResults.length > 0 ? searchResults[searchIndex] : null;
+    if (componentMeasureSearchResult != null) {
+      const scrollState = moveStateToRange({
+        state: viewState.horizontalScrollState,
+        rangeStart: componentMeasureSearchResult.timestamp,
+        rangeEnd:
+          componentMeasureSearchResult.timestamp +
+          componentMeasureSearchResult.duration,
+        contentLength: data.duration,
+        minContentLength: data.duration * MIN_ZOOM_LEVEL,
+        maxContentLength: data.duration * MAX_ZOOM_LEVEL,
+        containerLength: width,
+      });
+
+      viewState.updateHorizontalScrollState(scrollState);
+    }
+
+    surfaceRef.current.displayIfNeeded();
+  }, [searchIndex, searchRegExp, searchResults, viewState]);
+
   const surfaceRef = useRef(new Surface(resetHoveredEvent));
   const userTimingMarksViewRef = useRef(null);
   const nativeEventsViewRef = useRef(null);
@@ -334,6 +364,7 @@ function AutoSizedCanvas({
         surface,
         defaultFrame,
         data,
+        viewState,
       );
       componentMeasuresViewRef.current = componentMeasuresView;
       componentMeasuresViewWrapper = createViewHelper(
@@ -753,8 +784,10 @@ function AutoSizedCanvas({
         <EventTooltip
           canvasRef={canvasRef}
           data={data}
+          height={height}
           hoveredEvent={hoveredEvent}
           origin={mouseLocation}
+          width={width}
         />
       )}
     </Fragment>
diff --git a/packages/react-devtools-timeline/src/EventTooltip.js b/packages/react-devtools-timeline/src/EventTooltip.js
index d3ca5d5625f13..1cb4b3d8bbf2e 100644
--- a/packages/react-devtools-timeline/src/EventTooltip.js
+++ b/packages/react-devtools-timeline/src/EventTooltip.js
@@ -34,8 +34,10 @@ const MAX_TOOLTIP_TEXT_LENGTH = 60;
 type Props = {|
   canvasRef: {|current: HTMLCanvasElement | null|},
   data: ReactProfilerData,
+  height: number,
   hoveredEvent: ReactHoverContextInfo | null,
   origin: Point,
+  width: number,
 |};
 
 function getSchedulingEventLabel(event: SchedulingEvent): string | null {
@@ -71,8 +73,10 @@ function getReactMeasureLabel(type): string | null {
 export default function EventTooltip({
   canvasRef,
   data,
+  height,
   hoveredEvent,
   origin,
+  width,
 }: Props) {
   const ref = useSmartTooltip({
     canvasRef,
@@ -111,7 +115,9 @@ export default function EventTooltip({
       <TooltipSchedulingEvent data={data} schedulingEvent={schedulingEvent} />
     );
   } else if (snapshot !== null) {
-    content = <TooltipSnapshot snapshot={snapshot} />;
+    content = (
+      <TooltipSnapshot height={height} snapshot={snapshot} width={width} />
+    );
   } else if (suspenseEvent !== null) {
     content = <TooltipSuspenseEvent suspenseEvent={suspenseEvent} />;
   } else if (measure !== null) {
@@ -333,12 +339,34 @@ const TooltipSchedulingEvent = ({
   );
 };
 
-const TooltipSnapshot = ({snapshot}: {|snapshot: Snapshot|}) => {
+const TooltipSnapshot = ({
+  height,
+  snapshot,
+  width,
+}: {|
+  height: number,
+  snapshot: Snapshot,
+  width: number,
+|}) => {
+  const aspectRatio = snapshot.width / snapshot.height;
+
+  // Zoomed in view should not be any bigger than the DevTools viewport.
+  let safeWidth = snapshot.width;
+  let safeHeight = snapshot.height;
+  if (safeWidth > width) {
+    safeWidth = width;
+    safeHeight = safeWidth / aspectRatio;
+  }
+  if (safeHeight > height) {
+    safeHeight = height;
+    safeWidth = safeHeight * aspectRatio;
+  }
+
   return (
     <img
       className={styles.Image}
       src={snapshot.imageSource}
-      style={{width: snapshot.width / 2, height: snapshot.height / 2}}
+      style={{height: safeHeight, width: safeWidth}}
     />
   );
 };
diff --git a/packages/react-devtools-timeline/src/ImportButton.js b/packages/react-devtools-timeline/src/ImportButton.js
index 6f018bf30934c..12eb6623fbe67 100644
--- a/packages/react-devtools-timeline/src/ImportButton.js
+++ b/packages/react-devtools-timeline/src/ImportButton.js
@@ -46,6 +46,7 @@ export default function ImportButton({children = null, onFileSelect}: Props) {
         ref={inputRef}
         className={styles.Input}
         type="file"
+        accept=".json"
         onChange={handleFiles}
         tabIndex={-1}
       />
diff --git a/packages/react-devtools-timeline/src/Timeline.js b/packages/react-devtools-timeline/src/Timeline.js
index 4b6d21f8a8f7a..290830840356e 100644
--- a/packages/react-devtools-timeline/src/Timeline.js
+++ b/packages/react-devtools-timeline/src/Timeline.js
@@ -7,9 +7,9 @@
  * @flow
  */
 
-import type {DataResource} from './createDataResourceFromImportedFile';
 import type {ViewState} from './types';
 
+import {isInternalFacebookBuild} from 'react-devtools-feature-flags';
 import * as React from 'react';
 import {
   Suspense,
@@ -24,13 +24,14 @@ import {updateColorsToMatchTheme} from './content-views/constants';
 import {TimelineContext} from './TimelineContext';
 import ImportButton from './ImportButton';
 import CanvasPage from './CanvasPage';
+import {importFile} from './timelineCache';
+import TimelineSearchInput from './TimelineSearchInput';
+import {TimelineSearchContextController} from './TimelineSearchContext';
 
 import styles from './Timeline.css';
 
 export function Timeline(_: {||}) {
-  const {importTimelineData, timelineData, viewState} = useContext(
-    TimelineContext,
-  );
+  const {file, setFile, viewState} = useContext(TimelineContext);
 
   const ref = useRef(null);
 
@@ -61,17 +62,17 @@ export function Timeline(_: {||}) {
 
   return (
     <div className={styles.Content} ref={ref}>
-      {timelineData ? (
+      {file ? (
         <Suspense fallback={<ProcessingData />}>
-          <DataResourceComponent
-            dataResource={timelineData}
+          <FileLoader
+            file={file}
             key={key}
-            onFileSelect={importTimelineData}
+            onFileSelect={setFile}
             viewState={viewState}
           />
         </Suspense>
       ) : (
-        <Welcome onFileSelect={importTimelineData} />
+        <Welcome onFileSelect={setFile} />
       )}
     </div>
   );
@@ -79,6 +80,19 @@ export function Timeline(_: {||}) {
 
 const Welcome = ({onFileSelect}: {|onFileSelect: (file: File) => void|}) => (
   <ol className={styles.WelcomeInstructionsList}>
+    {isInternalFacebookBuild && (
+      <li className={styles.WelcomeInstructionsListItem}>
+        Enable the
+        <a
+          className={styles.WelcomeInstructionsListItemLink}
+          href="https://fburl.com/react-devtools-scheduling-profiler-gk"
+          rel="noopener noreferrer"
+          target="_blank">
+          <code>react_enable_scheduling_profiler</code> GK
+        </a>
+        .
+      </li>
+    )}
     <li className={styles.WelcomeInstructionsListItem}>
       Open a website that's built with the
       <a
@@ -129,20 +143,32 @@ const CouldNotLoadProfile = ({error, onFileSelect}) => (
   </div>
 );
 
-const DataResourceComponent = ({
-  dataResource,
+const FileLoader = ({
+  file,
   onFileSelect,
   viewState,
 }: {|
-  dataResource: DataResource,
+  file: File | null,
   onFileSelect: (file: File) => void,
   viewState: ViewState,
 |}) => {
-  const dataOrError = dataResource.read();
+  if (file === null) {
+    return null;
+  }
+
+  const dataOrError = importFile(file);
   if (dataOrError instanceof Error) {
     return (
       <CouldNotLoadProfile error={dataOrError} onFileSelect={onFileSelect} />
     );
   }
-  return <CanvasPage profilerData={dataOrError} viewState={viewState} />;
+
+  return (
+    <TimelineSearchContextController
+      profilerData={dataOrError}
+      viewState={viewState}>
+      <TimelineSearchInput />
+      <CanvasPage profilerData={dataOrError} viewState={viewState} />
+    </TimelineSearchContextController>
+  );
 };
diff --git a/packages/react-devtools-timeline/src/TimelineContext.js b/packages/react-devtools-timeline/src/TimelineContext.js
index ebfac421e2c3e..cbf57a275c0c5 100644
--- a/packages/react-devtools-timeline/src/TimelineContext.js
+++ b/packages/react-devtools-timeline/src/TimelineContext.js
@@ -8,16 +8,19 @@
  */
 
 import * as React from 'react';
-import {createContext, useCallback, useMemo, useState} from 'react';
-import createDataResourceFromImportedFile from './createDataResourceFromImportedFile';
+import {createContext, useMemo, useRef, useState} from 'react';
 
-import type {HorizontalScrollStateChangeCallback, ViewState} from './types';
-import type {DataResource} from './createDataResourceFromImportedFile';
+import type {
+  HorizontalScrollStateChangeCallback,
+  SearchRegExpStateChangeCallback,
+  ViewState,
+} from './types';
+import type {RefObject} from 'shared/ReactTypes';
 
 export type Context = {|
-  clearTimelineData: () => void,
-  importTimelineData: (file: File) => void,
-  timelineData: DataResource | null,
+  file: File | null,
+  searchInputContainerRef: RefObject,
+  setFile: (file: File | null) => void,
   viewState: ViewState,
 |};
 
@@ -29,30 +32,28 @@ type Props = {|
 |};
 
 function TimelineContextController({children}: Props) {
-  const [timelineData, setTimelineData] = useState<DataResource | null>(null);
-
-  const clearTimelineData = useCallback(() => {
-    setTimelineData(null);
-  }, []);
-
-  const importTimelineData = useCallback((file: File) => {
-    setTimelineData(createDataResourceFromImportedFile(file));
-  }, []);
+  const searchInputContainerRef = useRef(null);
+  const [file, setFile] = useState<string | null>(null);
 
   // Recreate view state any time new profiling data is imported.
   const viewState = useMemo<ViewState>(() => {
     const horizontalScrollStateChangeCallbacks: Set<HorizontalScrollStateChangeCallback> = new Set();
+    const searchRegExpStateChangeCallbacks: Set<SearchRegExpStateChangeCallback> = new Set();
 
     const horizontalScrollState = {
       offset: 0,
       length: 0,
     };
 
-    return {
+    const state: ViewState = {
       horizontalScrollState,
       onHorizontalScrollStateChange: callback => {
         horizontalScrollStateChangeCallbacks.add(callback);
       },
+      onSearchRegExpStateChange: callback => {
+        searchRegExpStateChangeCallbacks.add(callback);
+      },
+      searchRegExp: null,
       updateHorizontalScrollState: scrollState => {
         if (
           horizontalScrollState.offset === scrollState.offset &&
@@ -68,18 +69,27 @@ function TimelineContextController({children}: Props) {
           callback(scrollState);
         });
       },
+      updateSearchRegExpState: (searchRegExp: RegExp | null) => {
+        state.searchRegExp = searchRegExp;
+
+        searchRegExpStateChangeCallbacks.forEach(callback => {
+          callback(searchRegExp);
+        });
+      },
       viewToMutableViewStateMap: new Map(),
     };
-  }, [timelineData]);
+
+    return state;
+  }, [file]);
 
   const value = useMemo(
     () => ({
-      clearTimelineData,
-      importTimelineData,
-      timelineData,
+      file,
+      searchInputContainerRef,
+      setFile,
       viewState,
     }),
-    [clearTimelineData, importTimelineData, timelineData, viewState],
+    [file, setFile, viewState],
   );
 
   return (
diff --git a/packages/react-devtools-timeline/src/TimelineSearchContext.js b/packages/react-devtools-timeline/src/TimelineSearchContext.js
new file mode 100644
index 0000000000000..46d05710ac091
--- /dev/null
+++ b/packages/react-devtools-timeline/src/TimelineSearchContext.js
@@ -0,0 +1,166 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import * as React from 'react';
+import {createContext, useMemo, useReducer} from 'react';
+
+import type {
+  ReactComponentMeasure,
+  ReactProfilerData,
+  ViewState,
+} from './types';
+
+type State = {|
+  profilerData: ReactProfilerData,
+  searchIndex: number,
+  searchRegExp: RegExp | null,
+  searchResults: Array<ReactComponentMeasure>,
+  searchText: string,
+|};
+
+type ACTION_GO_TO_NEXT_SEARCH_RESULT = {|
+  type: 'GO_TO_NEXT_SEARCH_RESULT',
+|};
+type ACTION_GO_TO_PREVIOUS_SEARCH_RESULT = {|
+  type: 'GO_TO_PREVIOUS_SEARCH_RESULT',
+|};
+type ACTION_SET_SEARCH_TEXT = {|
+  type: 'SET_SEARCH_TEXT',
+  payload: string,
+|};
+
+type Action =
+  | ACTION_GO_TO_NEXT_SEARCH_RESULT
+  | ACTION_GO_TO_PREVIOUS_SEARCH_RESULT
+  | ACTION_SET_SEARCH_TEXT;
+
+type Dispatch = (action: Action) => void;
+
+const EMPTY_ARRAY = [];
+
+function reducer(state: State, action: Action): State {
+  let {searchIndex, searchRegExp, searchResults, searchText} = state;
+
+  switch (action.type) {
+    case 'GO_TO_NEXT_SEARCH_RESULT':
+      if (searchResults.length > 0) {
+        if (searchIndex === -1 || searchIndex + 1 === searchResults.length) {
+          searchIndex = 0;
+        } else {
+          searchIndex++;
+        }
+      }
+      break;
+    case 'GO_TO_PREVIOUS_SEARCH_RESULT':
+      if (searchResults.length > 0) {
+        if (searchIndex === -1 || searchIndex === 0) {
+          searchIndex = searchResults.length - 1;
+        } else {
+          searchIndex--;
+        }
+      }
+      break;
+    case 'SET_SEARCH_TEXT':
+      searchText = action.payload;
+      searchRegExp = null;
+      searchResults = [];
+
+      if (searchText !== '') {
+        const safeSearchText = searchText.replace(
+          /[.*+?^${}()|[\]\\]/g,
+          '\\$&',
+        );
+        searchRegExp = new RegExp(`^${safeSearchText}`, 'i');
+
+        // If something is zoomed in on already, and the new search still contains it,
+        // don't change the selection (even if overall search results set changes).
+        let prevSelectedMeasure = null;
+        if (searchIndex >= 0 && searchResults.length > searchIndex) {
+          prevSelectedMeasure = searchResults[searchIndex];
+        }
+
+        const componentMeasures = state.profilerData.componentMeasures;
+
+        let prevSelectedMeasureIndex = -1;
+
+        for (let i = 0; i < componentMeasures.length; i++) {
+          const componentMeasure = componentMeasures[i];
+          if (componentMeasure.componentName.match(searchRegExp)) {
+            searchResults.push(componentMeasure);
+
+            if (componentMeasure === prevSelectedMeasure) {
+              prevSelectedMeasureIndex = searchResults.length - 1;
+            }
+          }
+        }
+
+        searchIndex =
+          prevSelectedMeasureIndex >= 0 ? prevSelectedMeasureIndex : 0;
+      }
+      break;
+  }
+
+  return {
+    profilerData: state.profilerData,
+    searchIndex,
+    searchRegExp,
+    searchResults,
+    searchText,
+  };
+}
+
+export type Context = {|
+  profilerData: ReactProfilerData,
+
+  // Search state
+  dispatch: Dispatch,
+  searchIndex: number,
+  searchRegExp: null,
+  searchResults: Array<ReactComponentMeasure>,
+  searchText: string,
+|};
+
+const TimelineSearchContext = createContext<Context>(((null: any): Context));
+TimelineSearchContext.displayName = 'TimelineSearchContext';
+
+type Props = {|
+  children: React$Node,
+  profilerData: ReactProfilerData,
+  viewState: ViewState,
+|};
+
+function TimelineSearchContextController({
+  children,
+  profilerData,
+  viewState,
+}: Props) {
+  const [state, dispatch] = useReducer<State, State, Action>(reducer, {
+    profilerData,
+    searchIndex: -1,
+    searchRegExp: null,
+    searchResults: EMPTY_ARRAY,
+    searchText: '',
+  });
+
+  const value = useMemo(
+    () => ({
+      ...state,
+      dispatch,
+    }),
+    [state],
+  );
+
+  return (
+    <TimelineSearchContext.Provider value={value}>
+      {children}
+    </TimelineSearchContext.Provider>
+  );
+}
+
+export {TimelineSearchContext, TimelineSearchContextController};
diff --git a/packages/react-devtools-timeline/src/TimelineSearchInput.js b/packages/react-devtools-timeline/src/TimelineSearchInput.js
new file mode 100644
index 0000000000000..5a4515d1b826c
--- /dev/null
+++ b/packages/react-devtools-timeline/src/TimelineSearchInput.js
@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import * as React from 'react';
+import {useContext} from 'react';
+import {createPortal} from 'react-dom';
+import SearchInput from 'react-devtools-shared/src/devtools/views/SearchInput';
+import {TimelineContext} from './TimelineContext';
+import {TimelineSearchContext} from './TimelineSearchContext';
+
+type Props = {||};
+
+export default function TimelineSearchInput(props: Props) {
+  const {searchInputContainerRef} = useContext(TimelineContext);
+  const {dispatch, searchIndex, searchResults, searchText} = useContext(
+    TimelineSearchContext,
+  );
+
+  if (searchInputContainerRef.current === null) {
+    return null;
+  }
+
+  const search = text => dispatch({type: 'SET_SEARCH_TEXT', payload: text});
+  const goToNextResult = () => dispatch({type: 'GO_TO_NEXT_SEARCH_RESULT'});
+  const goToPreviousResult = () =>
+    dispatch({type: 'GO_TO_PREVIOUS_SEARCH_RESULT'});
+
+  return createPortal(
+    <SearchInput
+      goToNextResult={goToNextResult}
+      goToPreviousResult={goToPreviousResult}
+      placeholder="Search components by name"
+      search={search}
+      searchIndex={searchIndex}
+      searchResultsCount={searchResults.length}
+      searchText={searchText}
+    />,
+    searchInputContainerRef.current,
+  );
+}
diff --git a/packages/react-devtools-timeline/src/constants.js b/packages/react-devtools-timeline/src/constants.js
index e29b8901d81fd..e9b18ab65716e 100644
--- a/packages/react-devtools-timeline/src/constants.js
+++ b/packages/react-devtools-timeline/src/constants.js
@@ -16,3 +16,5 @@ export const REACT_TOTAL_NUM_LANES = 31;
 
 // Increment this number any time a backwards breaking change is made to the profiler metadata.
 export const SCHEDULING_PROFILER_VERSION = 1;
+
+export const SNAPSHOT_MAX_HEIGHT = 60;
diff --git a/packages/react-devtools-timeline/src/content-views/ComponentMeasuresView.js b/packages/react-devtools-timeline/src/content-views/ComponentMeasuresView.js
index a241498a05a05..2194c79e87fca 100644
--- a/packages/react-devtools-timeline/src/content-views/ComponentMeasuresView.js
+++ b/packages/react-devtools-timeline/src/content-views/ComponentMeasuresView.js
@@ -7,7 +7,11 @@
  * @flow
  */
 
-import type {ReactComponentMeasure, ReactProfilerData} from '../types';
+import type {
+  ReactComponentMeasure,
+  ReactProfilerData,
+  ViewState,
+} from '../types';
 import type {
   Interaction,
   IntrinsicSize,
@@ -31,21 +35,37 @@ import {
   rectIntersectsRect,
   intersectionOfRects,
 } from '../view-base';
-import {COLORS, NATIVE_EVENT_HEIGHT, BORDER_SIZE} from './constants';
+import {BORDER_SIZE, COLORS, NATIVE_EVENT_HEIGHT} from './constants';
 
 const ROW_WITH_BORDER_HEIGHT = NATIVE_EVENT_HEIGHT + BORDER_SIZE;
 
 export class ComponentMeasuresView extends View {
+  _cachedSearchMatches: Map<string, boolean>;
+  _cachedSearchRegExp: RegExp | null = null;
   _hoveredComponentMeasure: ReactComponentMeasure | null = null;
   _intrinsicSize: IntrinsicSize;
   _profilerData: ReactProfilerData;
+  _viewState: ViewState;
 
   onHover: ((event: ReactComponentMeasure | null) => void) | null = null;
 
-  constructor(surface: Surface, frame: Rect, profilerData: ReactProfilerData) {
+  constructor(
+    surface: Surface,
+    frame: Rect,
+    profilerData: ReactProfilerData,
+    viewState: ViewState,
+  ) {
     super(surface, frame);
 
     this._profilerData = profilerData;
+    this._viewState = viewState;
+
+    this._cachedSearchMatches = new Map();
+    this._cachedSearchRegExp = null;
+
+    viewState.onSearchRegExpStateChange(() => {
+      this.setNeedsDisplay();
+    });
 
     this._intrinsicSize = {
       width: profilerData.duration,
@@ -150,6 +170,24 @@ export class ComponentMeasuresView extends View {
           break;
       }
     }
+
+    let isMatch = false;
+    const cachedSearchRegExp = this._cachedSearchRegExp;
+    if (cachedSearchRegExp !== null) {
+      const cachedSearchMatches = this._cachedSearchMatches;
+      const cachedValue = cachedSearchMatches.get(componentName);
+      if (cachedValue != null) {
+        isMatch = cachedValue;
+      } else {
+        isMatch = componentName.match(cachedSearchRegExp) !== null;
+        cachedSearchMatches.set(componentName, isMatch);
+      }
+    }
+
+    if (isMatch) {
+      context.fillStyle = COLORS.SEARCH_RESULT_FILL;
+    }
+
     context.fillRect(
       drawableRect.origin.x,
       drawableRect.origin.y,
@@ -174,6 +212,12 @@ export class ComponentMeasuresView extends View {
       visibleArea,
     } = this;
 
+    const searchRegExp = this._viewState.searchRegExp;
+    if (this._cachedSearchRegExp !== searchRegExp) {
+      this._cachedSearchMatches = new Map();
+      this._cachedSearchRegExp = searchRegExp;
+    }
+
     context.fillStyle = COLORS.BACKGROUND;
     context.fillRect(
       visibleArea.origin.x,
diff --git a/packages/react-devtools-timeline/src/content-views/SnapshotsView.js b/packages/react-devtools-timeline/src/content-views/SnapshotsView.js
index fbaa7c5d83570..b027acae37693 100644
--- a/packages/react-devtools-timeline/src/content-views/SnapshotsView.js
+++ b/packages/react-devtools-timeline/src/content-views/SnapshotsView.js
@@ -24,11 +24,12 @@ import {
   rectEqualToRect,
   View,
 } from '../view-base';
-import {BORDER_SIZE, COLORS, SNAPSHOT_HEIGHT} from './constants';
+import {BORDER_SIZE, COLORS, SNAPSHOT_SCRUBBER_SIZE} from './constants';
 
 type OnHover = (node: Snapshot | null) => void;
 
 export class SnapshotsView extends View {
+  _hoverLocation: Point | null = null;
   _intrinsicSize: Size;
   _profilerData: ReactProfilerData;
 
@@ -39,7 +40,7 @@ export class SnapshotsView extends View {
 
     this._intrinsicSize = {
       width: profilerData.duration,
-      height: SNAPSHOT_HEIGHT,
+      height: profilerData.snapshotHeight,
     };
     this._profilerData = profilerData;
   }
@@ -49,6 +50,7 @@ export class SnapshotsView extends View {
   }
 
   draw(context: CanvasRenderingContext2D) {
+    const snapshotHeight = this._profilerData.snapshotHeight;
     const {visibleArea} = this;
 
     context.fillStyle = COLORS.BACKGROUND;
@@ -72,8 +74,8 @@ export class SnapshotsView extends View {
         break;
       }
 
-      const scaledHeight = SNAPSHOT_HEIGHT;
-      const scaledWidth = (snapshot.width * SNAPSHOT_HEIGHT) / snapshot.height;
+      const scaledHeight = snapshotHeight;
+      const scaledWidth = (snapshot.width * snapshotHeight) / snapshot.height;
 
       const imageRect: Rect = {
         origin: {
@@ -96,6 +98,28 @@ export class SnapshotsView extends View {
 
       x += scaledWidth + BORDER_SIZE;
     }
+
+    const hoverLocation = this._hoverLocation;
+    if (hoverLocation !== null) {
+      const scrubberWidth = SNAPSHOT_SCRUBBER_SIZE + BORDER_SIZE * 2;
+      const scrubberOffset = scrubberWidth / 2;
+
+      context.fillStyle = COLORS.SCRUBBER_BORDER;
+      context.fillRect(
+        hoverLocation.x - scrubberOffset,
+        visibleArea.origin.y,
+        scrubberWidth,
+        visibleArea.size.height,
+      );
+
+      context.fillStyle = COLORS.SCRUBBER_BACKGROUND;
+      context.fillRect(
+        hoverLocation.x - scrubberOffset + BORDER_SIZE,
+        visibleArea.origin.y,
+        SNAPSHOT_SCRUBBER_SIZE,
+        visibleArea.size.height,
+      );
+    }
   }
 
   handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {
@@ -208,15 +232,29 @@ export class SnapshotsView extends View {
     }
 
     if (!rectContainsPoint(location, visibleArea)) {
+      if (this._hoverLocation !== null) {
+        this._hoverLocation = null;
+
+        this.setNeedsDisplay();
+      }
+
       onHover(null);
       return;
     }
 
     const snapshot = this._findClosestSnapshot(location.x);
     if (snapshot !== null) {
+      this._hoverLocation = location;
+
       onHover(snapshot);
     } else {
+      this._hoverLocation = null;
+
       onHover(null);
     }
+
+    // Any time the mouse moves within the boundaries of this view, we need to re-render.
+    // This is because we draw a scrubbing bar that shows the location corresponding to the current tooltip.
+    this.setNeedsDisplay();
   }
 }
diff --git a/packages/react-devtools-timeline/src/content-views/constants.js b/packages/react-devtools-timeline/src/content-views/constants.js
index 216234508f5e1..bf60a1fbf9a7a 100644
--- a/packages/react-devtools-timeline/src/content-views/constants.js
+++ b/packages/react-devtools-timeline/src/content-views/constants.js
@@ -24,7 +24,7 @@ export const REACT_MEASURE_HEIGHT = 14;
 export const BORDER_SIZE = 1 / DPR;
 export const FLAMECHART_FRAME_HEIGHT = 14;
 export const TEXT_PADDING = 3;
-export const SNAPSHOT_HEIGHT = 35;
+export const SNAPSHOT_SCRUBBER_SIZE = 3;
 
 export const INTERVAL_TIMES = [
   1,
@@ -89,6 +89,9 @@ export let COLORS = {
   REACT_THROWN_ERROR_HOVER: '',
   REACT_WORK_BORDER: '',
   SCROLL_CARET: '',
+  SCRUBBER_BACKGROUND: '',
+  SCRUBBER_BORDER: '',
+  SEARCH_RESULT_FILL: '',
   TEXT_COLOR: '',
   TEXT_DIM_COLOR: '',
   TIME_MARKER_LABEL: '',
@@ -230,6 +233,15 @@ export function updateColorsToMatchTheme(element: Element): boolean {
       '--color-timeline-react-work-border',
     ),
     SCROLL_CARET: computedStyle.getPropertyValue('--color-scroll-caret'),
+    SCRUBBER_BACKGROUND: computedStyle.getPropertyValue(
+      '--color-timeline-react-suspense-rejected',
+    ),
+    SEARCH_RESULT_FILL: computedStyle.getPropertyValue(
+      '--color-timeline-react-suspense-rejected',
+    ),
+    SCRUBBER_BORDER: computedStyle.getPropertyValue(
+      '--color-timeline-text-color',
+    ),
     TEXT_COLOR: computedStyle.getPropertyValue('--color-timeline-text-color'),
     TEXT_DIM_COLOR: computedStyle.getPropertyValue(
       '--color-timeline-text-dim-color',
diff --git a/packages/react-devtools-timeline/src/import-worker/__tests__/preprocessData-test.internal.js b/packages/react-devtools-timeline/src/import-worker/__tests__/preprocessData-test.internal.js
index 758afc1e15f2c..f902ddc57e14e 100644
--- a/packages/react-devtools-timeline/src/import-worker/__tests__/preprocessData-test.internal.js
+++ b/packages/react-devtools-timeline/src/import-worker/__tests__/preprocessData-test.internal.js
@@ -354,6 +354,7 @@ describe('preprocessData', () => {
           "otherUserTimingMarks": Array [],
           "reactVersion": "17.0.3",
           "schedulingEvents": Array [],
+          "snapshotHeight": 0,
           "snapshots": Array [],
           "startTime": 1,
           "suspenseEvents": Array [],
@@ -572,6 +573,7 @@ describe('preprocessData', () => {
               "warning": null,
             },
           ],
+          "snapshotHeight": 0,
           "snapshots": Array [],
           "startTime": 1,
           "suspenseEvents": Array [],
@@ -765,6 +767,7 @@ describe('preprocessData', () => {
               "warning": null,
             },
           ],
+          "snapshotHeight": 0,
           "snapshots": Array [],
           "startTime": 4,
           "suspenseEvents": Array [],
@@ -1129,6 +1132,7 @@ describe('preprocessData', () => {
               "warning": null,
             },
           ],
+          "snapshotHeight": 0,
           "snapshots": Array [],
           "startTime": 4,
           "suspenseEvents": Array [],
diff --git a/packages/react-devtools-timeline/src/import-worker/preprocessData.js b/packages/react-devtools-timeline/src/import-worker/preprocessData.js
index caf27e707563b..98e802793f6a8 100644
--- a/packages/react-devtools-timeline/src/import-worker/preprocessData.js
+++ b/packages/react-devtools-timeline/src/import-worker/preprocessData.js
@@ -29,7 +29,11 @@ import type {
   SchedulingEvent,
   SuspenseEvent,
 } from '../types';
-import {REACT_TOTAL_NUM_LANES, SCHEDULING_PROFILER_VERSION} from '../constants';
+import {
+  REACT_TOTAL_NUM_LANES,
+  SCHEDULING_PROFILER_VERSION,
+  SNAPSHOT_MAX_HEIGHT,
+} from '../constants';
 import InvalidProfileError from './InvalidProfileError';
 import {getBatchRange} from '../utils/getBatchRange';
 import ErrorStackParser from 'error-stack-parser';
@@ -1066,6 +1070,7 @@ export default async function preprocessData(
     reactVersion: null,
     schedulingEvents: [],
     snapshots: [],
+    snapshotHeight: 0,
     startTime: 0,
     suspenseEvents: [],
     thrownErrors: [],
@@ -1189,5 +1194,18 @@ export default async function preprocessData(
   // Since processing is done in a worker, async work must complete before data is serialized and returned.
   await Promise.all(state.asyncProcessingPromises);
 
+  // Now that all images have been loaded, let's figure out the display size we're going to use for our thumbnails:
+  // both the ones rendered to the canvas and the ones shown on hover.
+  if (profilerData.snapshots.length > 0) {
+    // NOTE We assume a static window size here, which is not necessarily true but should be for most cases.
+    // Regardless, Chrome also sets a single size/ratio and stick with it- so we'll do the same.
+    const snapshot = profilerData.snapshots[0];
+
+    profilerData.snapshotHeight = Math.min(
+      snapshot.height,
+      SNAPSHOT_MAX_HEIGHT,
+    );
+  }
+
   return profilerData;
 }
diff --git a/packages/react-devtools-timeline/src/timelineCache.js b/packages/react-devtools-timeline/src/timelineCache.js
new file mode 100644
index 0000000000000..4e0948a48193c
--- /dev/null
+++ b/packages/react-devtools-timeline/src/timelineCache.js
@@ -0,0 +1,105 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {Wakeable} from 'shared/ReactTypes';
+import type {ReactProfilerData} from './types';
+
+import {importFile as importFileWorker} from './import-worker';
+
+const Pending = 0;
+const Resolved = 1;
+const Rejected = 2;
+
+type PendingRecord = {|
+  status: 0,
+  value: Wakeable,
+|};
+
+type ResolvedRecord<T> = {|
+  status: 1,
+  value: T,
+|};
+
+type RejectedRecord = {|
+  status: 2,
+  value: Error,
+|};
+
+type Record<T> = PendingRecord | ResolvedRecord<T> | RejectedRecord;
+
+// This is intentionally a module-level Map, rather than a React-managed one.
+// Otherwise, refreshing the inspected element cache would also clear this cache.
+// Profiler file contents are static anyway.
+const fileNameToProfilerDataMap: Map<
+  string,
+  Record<ReactProfilerData>,
+> = new Map();
+
+function readRecord<T>(record: Record<T>): ResolvedRecord<T> | RejectedRecord {
+  if (record.status === Resolved) {
+    // This is just a type refinement.
+    return record;
+  } else if (record.status === Rejected) {
+    // This is just a type refinement.
+    return record;
+  } else {
+    throw record.value;
+  }
+}
+
+export function importFile(file: File): ReactProfilerData | Error {
+  const fileName = file.name;
+  let record = fileNameToProfilerDataMap.get(fileName);
+
+  if (!record) {
+    const callbacks = new Set();
+    const wakeable: Wakeable = {
+      then(callback) {
+        callbacks.add(callback);
+      },
+
+      // Optional property used by Timeline:
+      displayName: `Importing file "${fileName}"`,
+    };
+
+    const wake = () => {
+      // This assumes they won't throw.
+      callbacks.forEach(callback => callback());
+      callbacks.clear();
+    };
+
+    const newRecord: Record<ReactProfilerData> = (record = {
+      status: Pending,
+      value: wakeable,
+    });
+
+    importFileWorker(file).then(data => {
+      switch (data.status) {
+        case 'SUCCESS':
+          const resolvedRecord = ((newRecord: any): ResolvedRecord<ReactProfilerData>);
+          resolvedRecord.status = Resolved;
+          resolvedRecord.value = data.processedData;
+          break;
+        case 'INVALID_PROFILE_ERROR':
+        case 'UNEXPECTED_ERROR':
+          const thrownRecord = ((newRecord: any): RejectedRecord);
+          thrownRecord.status = Rejected;
+          thrownRecord.value = data.error;
+          break;
+      }
+
+      wake();
+    });
+
+    fileNameToProfilerDataMap.set(fileName, record);
+  }
+
+  const response = readRecord(record).value;
+  return response;
+}
diff --git a/packages/react-devtools-timeline/src/types.js b/packages/react-devtools-timeline/src/types.js
index cf504229b01c5..3e9867c8b8c65 100644
--- a/packages/react-devtools-timeline/src/types.js
+++ b/packages/react-devtools-timeline/src/types.js
@@ -170,6 +170,9 @@ export type Flamechart = FlamechartStackLayer[];
 export type HorizontalScrollStateChangeCallback = (
   scrollState: ScrollState,
 ) => void;
+export type SearchRegExpStateChangeCallback = (
+  searchRegExp: RegExp | null,
+) => void;
 
 // Imperative view state that corresponds to profiler data.
 // This state lives outside of React's lifecycle
@@ -179,7 +182,12 @@ export type ViewState = {|
   onHorizontalScrollStateChange: (
     callback: HorizontalScrollStateChangeCallback,
   ) => void,
+  onSearchRegExpStateChange: (
+    callback: SearchRegExpStateChangeCallback,
+  ) => void,
+  searchRegExp: RegExp | null,
   updateHorizontalScrollState: (scrollState: ScrollState) => void,
+  updateSearchRegExpState: (searchRegExp: RegExp | null) => void,
   viewToMutableViewStateMap: Map<string, mixed>,
 |};
 
@@ -202,6 +210,7 @@ export type ReactProfilerData = {|
   reactVersion: string | null,
   schedulingEvents: SchedulingEvent[],
   snapshots: Snapshot[],
+  snapshotHeight: number,
   startTime: number,
   suspenseEvents: SuspenseEvent[],
   thrownErrors: ThrownError[],
diff --git a/packages/react-devtools-timeline/src/view-base/View.js b/packages/react-devtools-timeline/src/view-base/View.js
index 0edac1120862b..3e2a5a06f1cd5 100644
--- a/packages/react-devtools-timeline/src/view-base/View.js
+++ b/packages/react-devtools-timeline/src/view-base/View.js
@@ -197,7 +197,9 @@ export class View {
       !sizeIsEmpty(this.visibleArea.size)
     ) {
       this.layoutSubviews();
-      if (this._needsDisplay) this._needsDisplay = false;
+      if (this._needsDisplay) {
+        this._needsDisplay = false;
+      }
       if (this._subviewsNeedDisplay) this._subviewsNeedDisplay = false;
 
       // Clip anything drawn by the view to prevent it from overflowing its visible area.
diff --git a/packages/react-devtools/CONTRIBUTING.md b/packages/react-devtools/CONTRIBUTING.md
index 06816532838fd..cf6ff53d053d7 100644
--- a/packages/react-devtools/CONTRIBUTING.md
+++ b/packages/react-devtools/CONTRIBUTING.md
@@ -1,5 +1,5 @@
 
-Intrested in contributing to React DevTools, but not sure where to start? This is the place!
+Interested in contributing to React DevTools, but not sure where to start? This is the place!
 
 # Install project dependencies
 To get started, check out the React repo:
diff --git a/packages/react-dom/index.classic.fb.js b/packages/react-dom/index.classic.fb.js
index a70dd4d0224ed..93cc883d0cded 100644
--- a/packages/react-dom/index.classic.fb.js
+++ b/packages/react-dom/index.classic.fb.js
@@ -34,6 +34,5 @@ export {
   unstable_isNewReconciler,
   unstable_renderSubtreeIntoContainer,
   unstable_runWithPriority, // DO NOT USE: Temporarily exposed to migrate off of Scheduler.runWithPriority.
-  unstable_scheduleHydration,
   version,
 } from './src/client/ReactDOM';
diff --git a/packages/react-dom/index.experimental.js b/packages/react-dom/index.experimental.js
index 5cb691740e714..d5db3d8a5940b 100644
--- a/packages/react-dom/index.experimental.js
+++ b/packages/react-dom/index.experimental.js
@@ -21,6 +21,5 @@ export {
   unstable_flushControlled,
   unstable_renderSubtreeIntoContainer,
   unstable_runWithPriority, // DO NOT USE: Temporarily exposed to migrate off of Scheduler.runWithPriority.
-  unstable_scheduleHydration,
   version,
 } from './src/client/ReactDOM';
diff --git a/packages/react-dom/index.js b/packages/react-dom/index.js
index 79438fff5733c..18dfcf43ca9d0 100644
--- a/packages/react-dom/index.js
+++ b/packages/react-dom/index.js
@@ -25,6 +25,5 @@ export {
   unstable_isNewReconciler,
   unstable_renderSubtreeIntoContainer,
   unstable_runWithPriority, // DO NOT USE: Temporarily exposed to migrate off of Scheduler.runWithPriority.
-  unstable_scheduleHydration,
   version,
 } from './src/client/ReactDOM';
diff --git a/packages/react-dom/index.modern.fb.js b/packages/react-dom/index.modern.fb.js
index b45b03e4ec1d1..866a5ebe31f62 100644
--- a/packages/react-dom/index.modern.fb.js
+++ b/packages/react-dom/index.modern.fb.js
@@ -18,6 +18,5 @@ export {
   unstable_flushControlled,
   unstable_isNewReconciler,
   unstable_runWithPriority, // DO NOT USE: Temporarily exposed to migrate off of Scheduler.runWithPriority.
-  unstable_scheduleHydration,
   version,
 } from './src/client/ReactDOM';
diff --git a/packages/react-dom/npm/testing.js b/packages/react-dom/npm/unstable_testing.js
similarity index 100%
rename from packages/react-dom/npm/testing.js
rename to packages/react-dom/npm/unstable_testing.js
diff --git a/packages/react-dom/package.json b/packages/react-dom/package.json
index f7918bcc83846..c60f4950dd6ca 100644
--- a/packages/react-dom/package.json
+++ b/packages/react-dom/package.json
@@ -34,6 +34,7 @@
     "server.browser.js",
     "server.node.js",
     "test-utils.js",
+    "unstable_testing.js",
     "cjs/",
     "umd/"
   ],
diff --git a/packages/react-dom/src/__tests__/CSSPropertyOperations-test.js b/packages/react-dom/src/__tests__/CSSPropertyOperations-test.js
index 53d0903c7e9a2..5f177b17202a6 100644
--- a/packages/react-dom/src/__tests__/CSSPropertyOperations-test.js
+++ b/packages/react-dom/src/__tests__/CSSPropertyOperations-test.js
@@ -224,7 +224,7 @@ describe('CSSPropertyOperations', () => {
     ReactDOM.render(<Comp />, root);
   });
 
-  it('should warn about style containing a Infinity value', () => {
+  it('should warn about style containing an Infinity value', () => {
     class Comp extends React.Component {
       static displayName = 'Comp';
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index abbbdc1578753..ca592002ad25e 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -42,7 +42,9 @@ describe('ReactDOMFizzServer', () => {
     }
     Stream = require('stream');
     Suspense = React.Suspense;
-    SuspenseList = React.SuspenseList;
+    if (gate(flags => flags.enableSuspenseList)) {
+      SuspenseList = React.SuspenseList;
+    }
 
     PropTypes = require('prop-types');
 
@@ -656,6 +658,7 @@ describe('ReactDOMFizzServer', () => {
     expect(ref.current).toBe(b);
   });
 
+  // @gate enableSuspenseList
   // @gate experimental
   it('shows inserted items before pending in a SuspenseList as fallbacks while hydrating', async () => {
     const ref = React.createRef();
@@ -1715,7 +1718,6 @@ describe('ReactDOMFizzServer', () => {
         <Suspense fallback="Loading...">
           <App />
         </Suspense>,
-
         {
           onError(x) {
             loggedErrors.push(x);
@@ -1726,56 +1728,58 @@ describe('ReactDOMFizzServer', () => {
     });
     expect(Scheduler).toHaveYielded(['server']);
 
-    const serverRenderedDiv = container.getElementsByTagName('div')[0];
-
     ReactDOM.hydrateRoot(container, <App />);
 
-    // The first paint uses the server snapshot
-    expect(Scheduler).toFlushUntilNextPaint(['server']);
-    expect(getVisibleChildren(container)).toEqual(<div>server</div>);
-    // Hydration succeeded
-    expect(ref.current).toEqual(serverRenderedDiv);
-
-    // Asynchronously we detect that the store has changed on the client,
-    // and patch up the inconsistency
-    expect(Scheduler).toFlushUntilNextPaint(['client']);
-    expect(getVisibleChildren(container)).toEqual(<div>client</div>);
-    expect(ref.current).toEqual(serverRenderedDiv);
+    if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
+      expect(() => {
+        // The first paint switches to client rendering due to mismatch
+        expect(Scheduler).toFlushUntilNextPaint(['client']);
+      }).toErrorDev(
+        'Warning: An error occurred during hydration. The server HTML was replaced with client content',
+        {withoutStack: true},
+      );
+      expect(getVisibleChildren(container)).toEqual(<div>client</div>);
+    } else {
+      const serverRenderedDiv = container.getElementsByTagName('div')[0];
+      // The first paint uses the server snapshot
+      expect(Scheduler).toFlushUntilNextPaint(['server']);
+      expect(getVisibleChildren(container)).toEqual(<div>server</div>);
+      // Hydration succeeded
+      expect(ref.current).toEqual(serverRenderedDiv);
+
+      // Asynchronously we detect that the store has changed on the client,
+      // and patch up the inconsistency
+      expect(Scheduler).toFlushUntilNextPaint(['client']);
+      expect(getVisibleChildren(container)).toEqual(<div>client</div>);
+      expect(ref.current).toEqual(serverRenderedDiv);
+    }
   });
 
   // The selector implementation uses the lazy ref initialization pattern
-  // @gate !(enableUseRefAccessWarning && __DEV__)
   // @gate experimental
   it('calls getServerSnapshot instead of getSnapshot (with selector and isEqual)', async () => {
     // Same as previous test, but with a selector that returns a complex object
     // that is memoized with a custom `isEqual` function.
     const ref = React.createRef();
-
     function getServerSnapshot() {
       return {env: 'server', other: 'unrelated'};
     }
-
     function getClientSnapshot() {
       return {env: 'client', other: 'unrelated'};
     }
-
     function selector({env}) {
       return {env};
     }
-
     function isEqual(a, b) {
       return a.env === b.env;
     }
-
     function subscribe() {
       return () => {};
     }
-
     function Child({text}) {
       Scheduler.unstable_yieldValue(text);
       return text;
     }
-
     function App() {
       const {env} = useSyncExternalStoreWithSelector(
         subscribe,
@@ -1790,14 +1794,12 @@ describe('ReactDOMFizzServer', () => {
         </div>
       );
     }
-
     const loggedErrors = [];
     await act(async () => {
       const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
         <Suspense fallback="Loading...">
           <App />
         </Suspense>,
-
         {
           onError(x) {
             loggedErrors.push(x);
@@ -1808,21 +1810,33 @@ describe('ReactDOMFizzServer', () => {
     });
     expect(Scheduler).toHaveYielded(['server']);
 
-    const serverRenderedDiv = container.getElementsByTagName('div')[0];
-
     ReactDOM.hydrateRoot(container, <App />);
 
-    // The first paint uses the server snapshot
-    expect(Scheduler).toFlushUntilNextPaint(['server']);
-    expect(getVisibleChildren(container)).toEqual(<div>server</div>);
-    // Hydration succeeded
-    expect(ref.current).toEqual(serverRenderedDiv);
-
-    // Asynchronously we detect that the store has changed on the client,
-    // and patch up the inconsistency
-    expect(Scheduler).toFlushUntilNextPaint(['client']);
-    expect(getVisibleChildren(container)).toEqual(<div>client</div>);
-    expect(ref.current).toEqual(serverRenderedDiv);
+    if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
+      // The first paint uses the client due to mismatch forcing client render
+      expect(() => {
+        // The first paint switches to client rendering due to mismatch
+        expect(Scheduler).toFlushUntilNextPaint(['client']);
+      }).toErrorDev(
+        'Warning: An error occurred during hydration. The server HTML was replaced with client content',
+        {withoutStack: true},
+      );
+      expect(getVisibleChildren(container)).toEqual(<div>client</div>);
+    } else {
+      const serverRenderedDiv = container.getElementsByTagName('div')[0];
+
+      // The first paint uses the server snapshot
+      expect(Scheduler).toFlushUntilNextPaint(['server']);
+      expect(getVisibleChildren(container)).toEqual(<div>server</div>);
+      // Hydration succeeded
+      expect(ref.current).toEqual(serverRenderedDiv);
+
+      // Asynchronously we detect that the store has changed on the client,
+      // and patch up the inconsistency
+      expect(Scheduler).toFlushUntilNextPaint(['client']);
+      expect(getVisibleChildren(container)).toEqual(<div>client</div>);
+      expect(ref.current).toEqual(serverRenderedDiv);
+    }
   });
 
   // @gate experimental
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationElements-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationElements-test.js
index c41170aa54e91..a856bd42edc1d 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationElements-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationElements-test.js
@@ -87,17 +87,8 @@ describe('ReactDOMServerIntegration', () => {
             {''}
           </div>,
         );
-        if (render === serverRender || render === streamRender) {
-          // For plain server markup result we should have no text nodes if
-          // they're all empty.
-          expect(e.childNodes.length).toBe(0);
-          expect(e.textContent).toBe('');
-        } else {
-          expect(e.childNodes.length).toBe(3);
-          expectTextNode(e.childNodes[0], '');
-          expectTextNode(e.childNodes[1], '');
-          expectTextNode(e.childNodes[2], '');
-        }
+        expect(e.childNodes.length).toBe(0);
+        expect(e.textContent).toBe('');
       });
 
       itRenders('a div with multiple whitespace children', async render => {
@@ -162,27 +153,14 @@ describe('ReactDOMServerIntegration', () => {
 
       itRenders('a leading blank child with a text sibling', async render => {
         const e = await render(<div>{''}foo</div>);
-        if (render === serverRender || render === streamRender) {
-          expect(e.childNodes.length).toBe(1);
-          expectTextNode(e.childNodes[0], 'foo');
-        } else {
-          expect(e.childNodes.length).toBe(2);
-          expectTextNode(e.childNodes[0], '');
-          expectTextNode(e.childNodes[1], 'foo');
-        }
+        expect(e.childNodes.length).toBe(1);
+        expectTextNode(e.childNodes[0], 'foo');
       });
 
       itRenders('a trailing blank child with a text sibling', async render => {
         const e = await render(<div>foo{''}</div>);
-        // with Fiber, there are just two text nodes.
-        if (render === serverRender || render === streamRender) {
-          expect(e.childNodes.length).toBe(1);
-          expectTextNode(e.childNodes[0], 'foo');
-        } else {
-          expect(e.childNodes.length).toBe(2);
-          expectTextNode(e.childNodes[0], 'foo');
-          expectTextNode(e.childNodes[1], '');
-        }
+        expect(e.childNodes.length).toBe(1);
+        expectTextNode(e.childNodes[0], 'foo');
       });
 
       itRenders('an element with two text children', async render => {
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index 505a100df3aa6..780228a4271cb 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -9,7 +9,7 @@
 
 'use strict';
 
-let React;
+let React = require('react');
 let ReactDOM;
 let ReactDOMServer;
 let Scheduler;
@@ -70,6 +70,17 @@ function dispatchMouseEvent(to, from) {
   }
 }
 
+class TestAppClass extends React.Component {
+  render() {
+    return (
+      <div>
+        <>{''}</>
+        <>{'Hello'}</>
+      </div>
+    );
+  }
+}
+
 describe('ReactDOMServerPartialHydration', () => {
   beforeEach(() => {
     jest.resetModuleRegistry();
@@ -84,7 +95,9 @@ describe('ReactDOMServerPartialHydration', () => {
     ReactDOMServer = require('react-dom/server');
     Scheduler = require('scheduler');
     Suspense = React.Suspense;
-    SuspenseList = React.SuspenseList;
+    if (gate(flags => flags.enableSuspenseList)) {
+      SuspenseList = React.SuspenseList;
+    }
 
     IdleEventPriority = require('react-reconciler/constants').IdleEventPriority;
   });
@@ -197,12 +210,16 @@ describe('ReactDOMServerPartialHydration', () => {
     // hydrating anyway.
     suspend = true;
     ReactDOM.hydrateRoot(container, <App />);
-    expect(() => {
+    if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
       Scheduler.unstable_flushAll();
-    }).toErrorDev(
-      // TODO: This error should not be logged in this case. It's a false positive.
-      'Did not expect server HTML to contain the text node "Hello" in <div>.',
-    );
+    } else {
+      expect(() => {
+        Scheduler.unstable_flushAll();
+      }).toErrorDev(
+        // TODO: This error should not be logged in this case. It's a false positive.
+        'Did not expect server HTML to contain the text node "Hello" in <div>.',
+      );
+    }
     jest.runAllTimers();
 
     // Expect the server-generated HTML to stay intact.
@@ -218,6 +235,102 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(container.textContent).toBe('HelloHello');
   });
 
+  // @gate enableClientRenderFallbackOnHydrationMismatch
+  it('falls back to client rendering boundary on mismatch', async () => {
+    let client = false;
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => {
+      resolve = () => {
+        suspend = false;
+        resolvePromise();
+      };
+    });
+    function Child() {
+      if (suspend) {
+        Scheduler.unstable_yieldValue('Suspend');
+        throw promise;
+      } else {
+        Scheduler.unstable_yieldValue('Hello');
+        return 'Hello';
+      }
+    }
+    function Component({shouldMismatch}) {
+      Scheduler.unstable_yieldValue('Component');
+      if (shouldMismatch && client) {
+        return <article>Mismatch</article>;
+      }
+      return <div>Component</div>;
+    }
+    function App() {
+      return (
+        <Suspense fallback="Loading...">
+          <Child />
+          <Component />
+          <Component />
+          <Component />
+          <Component shouldMismatch={true} />
+        </Suspense>
+      );
+    }
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+    expect(Scheduler).toHaveYielded([
+      'Hello',
+      'Component',
+      'Component',
+      'Component',
+      'Component',
+    ]);
+
+    expect(container.innerHTML).toBe(
+      '<!--$-->Hello<div>Component</div><div>Component</div><div>Component</div><div>Component</div><!--/$-->',
+    );
+
+    suspend = true;
+    client = true;
+
+    ReactDOM.hydrateRoot(container, <App />);
+    expect(Scheduler).toFlushAndYield([
+      'Suspend',
+      'Component',
+      'Component',
+      'Component',
+      'Component',
+    ]);
+    jest.runAllTimers();
+
+    // Unchanged
+    expect(container.innerHTML).toBe(
+      '<!--$-->Hello<div>Component</div><div>Component</div><div>Component</div><div>Component</div><!--/$-->',
+    );
+
+    suspend = false;
+    resolve();
+    await promise;
+
+    expect(Scheduler).toFlushAndYield([
+      // first pass, mismatches at end
+      'Hello',
+      'Component',
+      'Component',
+      'Component',
+      'Component',
+      // second pass as client render
+      'Hello',
+      'Component',
+      'Component',
+      'Component',
+      'Component',
+    ]);
+
+    // Client rendered - suspense comment nodes removed
+    expect(container.innerHTML).toBe(
+      'Hello<div>Component</div><div>Component</div><div>Component</div><article>Mismatch</article>',
+    );
+  });
+
   it('calls the hydration callbacks after hydration or deletion', async () => {
     let suspend = false;
     let resolve;
@@ -1455,6 +1568,7 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(ref.current).toBe(span);
   });
 
+  // @gate enableSuspenseList
   it('shows inserted items in a SuspenseList before content is hydrated', async () => {
     let suspend = false;
     let resolve;
@@ -1540,6 +1654,7 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(ref.current).toBe(spanB);
   });
 
+  // @gate enableSuspenseList
   it('shows is able to hydrate boundaries even if others in a list are pending', async () => {
     let suspend = false;
     let resolve;
@@ -1614,7 +1729,7 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(container.textContent).toBe('ALoading B');
   });
 
-  // @gate experimental || www
+  // @gate enableSuspenseList
   it('clears server boundaries when SuspenseList runs out of time hydrating', async () => {
     let suspend = false;
     let resolve;
@@ -1677,10 +1792,9 @@ describe('ReactDOMServerPartialHydration', () => {
     const b = container.getElementsByTagName('span')[1];
     expect(b.textContent).toBe('B');
 
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-
+    const root = ReactDOM.hydrateRoot(container, <App />);
     // Increase hydration priority to higher than "offscreen".
-    ReactDOM.unstable_scheduleHydration(b);
+    root.unstable_scheduleHydration(b);
 
     suspend = true;
 
@@ -1717,6 +1831,7 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(ref.current).toBe(b);
   });
 
+  // @gate enableSuspenseList
   it('clears server boundaries when SuspenseList suspends last row hydrating', async () => {
     let suspend = false;
     let resolve;
@@ -2854,4 +2969,112 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(ref.current).toBe(span);
     expect(ref.current.innerHTML).toBe('Hidden child');
   });
+
+  function itHydratesWithoutMismatch(msg, App) {
+    it('hydrates without mismatch ' + msg, () => {
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      const finalHTML = ReactDOMServer.renderToString(<App />);
+      container.innerHTML = finalHTML;
+
+      ReactDOM.hydrateRoot(container, <App />);
+      Scheduler.unstable_flushAll();
+    });
+  }
+
+  itHydratesWithoutMismatch('an empty string with neighbors', function App() {
+    return (
+      <div>
+        <div id="test">Test</div>
+        {'' && <div>Test</div>}
+        {'Test'}
+      </div>
+    );
+  });
+
+  itHydratesWithoutMismatch('an empty string', function App() {
+    return '';
+  });
+  itHydratesWithoutMismatch(
+    'an empty string simple in fragment',
+    function App() {
+      return (
+        <>
+          {''}
+          {'sup'}
+        </>
+      );
+    },
+  );
+  itHydratesWithoutMismatch(
+    'an empty string simple in suspense',
+    function App() {
+      return <Suspense>{'' && false}</Suspense>;
+    },
+  );
+
+  itHydratesWithoutMismatch('an empty string in class component', TestAppClass);
+
+  // @gate enableClientRenderFallbackOnHydrationMismatch
+  it('fallback to client render on hydration mismatch at root', async () => {
+    let isClient = false;
+    let suspend = true;
+    let resolve;
+    const promise = new Promise((res, rej) => {
+      resolve = () => {
+        suspend = false;
+        res();
+      };
+    });
+    function App() {
+      return (
+        <>
+          <Suspense fallback={<div>Loading</div>}>
+            <ChildThatSuspends id={1} />
+          </Suspense>
+          {isClient ? <span>client</span> : <div>server</div>}
+          <Suspense fallback={<div>Loading</div>}>
+            <ChildThatSuspends id={2} />
+          </Suspense>
+        </>
+      );
+    }
+    function ChildThatSuspends({id}) {
+      if (isClient && suspend) {
+        throw promise;
+      }
+      return <div>{id}</div>;
+    }
+
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    container.innerHTML = finalHTML;
+    isClient = true;
+
+    expect(() => {
+      act(() => {
+        ReactDOM.hydrateRoot(container, <App />);
+      });
+    }).toErrorDev(
+      'Warning: An error occurred during hydration. ' +
+        'The server HTML was replaced with client content in <div>.',
+      {withoutStack: true},
+    );
+
+    // We show fallback state when mismatch happens at root
+    expect(container.innerHTML).toEqual(
+      '<div>Loading</div><span>client</span><div>Loading</div>',
+    );
+
+    await act(async () => {
+      resolve();
+      await promise;
+    });
+
+    expect(container.innerHTML).toEqual(
+      '<div>1</div><span>client</span><div>2</div>',
+    );
+  });
 });
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
index 5c29513cf6bfd..6c4dafbf5c300 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
@@ -684,7 +684,6 @@ describe('ReactDOMServerSelectiveHydration', () => {
     let suspend = false;
     let resolve;
     const promise = new Promise(resolvePromise => (resolve = resolvePromise));
-
     function Child({text}) {
       if ((text === 'A' || text === 'D') && suspend) {
         throw promise;
@@ -724,11 +723,8 @@ describe('ReactDOMServerSelectiveHydration', () => {
         </div>
       );
     }
-
     const finalHTML = ReactDOMServer.renderToString(<App />);
-
     expect(Scheduler).toHaveYielded(['App', 'A', 'B', 'C', 'D']);
-
     const container = document.createElement('div');
     // We need this to be in the document since we'll dispatch events on it.
     document.body.appendChild(container);
@@ -746,6 +742,156 @@ describe('ReactDOMServerSelectiveHydration', () => {
     const root = ReactDOM.createRoot(container, {hydrate: true});
     root.render(<App />);
 
+    // Nothing has been hydrated so far.
+    expect(Scheduler).toHaveYielded([]);
+    // Click D
+    dispatchMouseHoverEvent(spanD, null);
+    dispatchClickEvent(spanD);
+    // Hover over B and then C.
+    dispatchMouseHoverEvent(spanB, spanD);
+    dispatchMouseHoverEvent(spanC, spanB);
+    expect(Scheduler).toHaveYielded(['App']);
+    await act(async () => {
+      suspend = false;
+      resolve();
+      await promise;
+    });
+    if (
+      gate(
+        flags =>
+          flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
+      )
+    ) {
+      // We should prioritize hydrating D first because we clicked it.
+      // but event isnt replayed
+      expect(Scheduler).toHaveYielded([
+        'D',
+        'B', // Ideally this should be later.
+        'C',
+        'Hover C',
+        'A',
+      ]);
+    } else {
+      // We should prioritize hydrating D first because we clicked it.
+      // Next we should hydrate C since that's the current hover target.
+      // To simplify implementation details we hydrate both B and C at
+      // the same time since B was already scheduled.
+      // This is ok because it will at least not continue for nested
+      // boundary. See the next test below.
+      expect(Scheduler).toHaveYielded([
+        'D',
+        'Clicked D',
+        'B', // Ideally this should be later.
+        'C',
+        'Hover C',
+        'A',
+      ]);
+    }
+
+    document.body.removeChild(container);
+  });
+
+  it('replays capture phase for continuous events and respects stopPropagation', async () => {
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+
+    function Child({text}) {
+      if ((text === 'A' || text === 'D') && suspend) {
+        throw promise;
+      }
+      Scheduler.unstable_yieldValue(text);
+      return (
+        <span
+          id={text}
+          onClickCapture={e => {
+            e.preventDefault();
+            Scheduler.unstable_yieldValue('Capture Clicked ' + text);
+          }}
+          onClick={e => {
+            e.preventDefault();
+            Scheduler.unstable_yieldValue('Clicked ' + text);
+          }}
+          onMouseEnter={e => {
+            e.preventDefault();
+            Scheduler.unstable_yieldValue('Mouse Enter ' + text);
+          }}
+          onMouseOut={e => {
+            e.preventDefault();
+            Scheduler.unstable_yieldValue('Mouse Out ' + text);
+          }}
+          onMouseOutCapture={e => {
+            e.preventDefault();
+            e.stopPropagation();
+            Scheduler.unstable_yieldValue('Mouse Out Capture ' + text);
+          }}
+          onMouseOverCapture={e => {
+            e.preventDefault();
+            e.stopPropagation();
+            Scheduler.unstable_yieldValue('Mouse Over Capture ' + text);
+          }}
+          onMouseOver={e => {
+            e.preventDefault();
+            Scheduler.unstable_yieldValue('Mouse Over ' + text);
+          }}>
+          <div
+            onMouseOverCapture={e => {
+              e.preventDefault();
+              Scheduler.unstable_yieldValue('Mouse Over Capture Inner ' + text);
+            }}>
+            {text}
+          </div>
+        </span>
+      );
+    }
+
+    function App() {
+      Scheduler.unstable_yieldValue('App');
+      return (
+        <div
+          onClickCapture={e => {
+            e.preventDefault();
+            Scheduler.unstable_yieldValue('Capture Clicked Parent');
+          }}
+          onMouseOverCapture={e => {
+            Scheduler.unstable_yieldValue('Mouse Over Capture Parent');
+          }}>
+          <Suspense fallback="Loading...">
+            <Child text="A" />
+          </Suspense>
+          <Suspense fallback="Loading...">
+            <Child text="B" />
+          </Suspense>
+          <Suspense fallback="Loading...">
+            <Child text="C" />
+          </Suspense>
+          <Suspense fallback="Loading...">
+            <Child text="D" />
+          </Suspense>
+        </div>
+      );
+    }
+
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+
+    expect(Scheduler).toHaveYielded(['App', 'A', 'B', 'C', 'D']);
+
+    const container = document.createElement('div');
+    // We need this to be in the document since we'll dispatch events on it.
+    document.body.appendChild(container);
+
+    container.innerHTML = finalHTML;
+
+    const spanB = document.getElementById('B').firstChild;
+    const spanC = document.getElementById('C').firstChild;
+    const spanD = document.getElementById('D').firstChild;
+
+    suspend = true;
+
+    // A and D will be suspended. We'll click on D which should take
+    // priority, after we unsuspend.
+    ReactDOM.hydrateRoot(container, <App />);
+
     // Nothing has been hydrated so far.
     expect(Scheduler).toHaveYielded([]);
 
@@ -776,7 +922,14 @@ describe('ReactDOMServerSelectiveHydration', () => {
         'D',
         'B', // Ideally this should be later.
         'C',
-        'Hover C',
+        // Mouse out events aren't replayed
+        // 'Mouse Out Capture B',
+        // 'Mouse Out B',
+        'Mouse Over Capture Parent',
+        'Mouse Over Capture C',
+        // Stop propagation stops these
+        // 'Mouse Over Capture Inner C',
+        // 'Mouse Over C',
         'A',
       ]);
     } else {
@@ -791,11 +944,371 @@ describe('ReactDOMServerSelectiveHydration', () => {
         'Clicked D',
         'B', // Ideally this should be later.
         'C',
-        'Hover C',
+        // Capture phase isn't replayed
+        // Mouseout isn't replayed
+        'Mouse Over C',
+        'Mouse Enter C',
         'A',
       ]);
     }
 
+    // This test shows existing quirk where stopPropagation on mouseout
+    // prevents mouseEnter from firing
+    dispatchMouseHoverEvent(spanC, spanB);
+    expect(Scheduler).toHaveYielded([
+      'Mouse Out Capture B',
+      // stopPropagation stops these
+      // 'Mouse Out B',
+      // 'Mouse Enter C',
+      'Mouse Over Capture Parent',
+      'Mouse Over Capture C',
+      // Stop propagation stops these
+      // 'Mouse Over Capture Inner C',
+      // 'Mouse Over C',
+    ]);
+
+    document.body.removeChild(container);
+  });
+
+  describe('can handle replaying events as part of multiple instances of React', () => {
+    let resolveInner;
+    let resolveOuter;
+    let innerPromise;
+    let outerPromise;
+    let OuterScheduler;
+    let InnerScheduler;
+    let innerDiv;
+
+    beforeEach(async () => {
+      document.body.innerHTML = '';
+      jest.resetModuleRegistry();
+      let OuterReactDOM;
+      let InnerReactDOM;
+      jest.isolateModules(() => {
+        OuterReactDOM = require('react-dom');
+        OuterScheduler = require('scheduler');
+      });
+      jest.isolateModules(() => {
+        InnerReactDOM = require('react-dom');
+        InnerScheduler = require('scheduler');
+      });
+
+      expect(OuterReactDOM).not.toBe(InnerReactDOM);
+      expect(OuterScheduler).not.toBe(InnerScheduler);
+
+      const outerContainer = document.createElement('div');
+      const innerContainer = document.createElement('div');
+
+      let suspendOuter = false;
+      outerPromise = new Promise(res => {
+        resolveOuter = () => {
+          suspendOuter = false;
+          res();
+        };
+      });
+
+      function Outer() {
+        if (suspendOuter) {
+          OuterScheduler.unstable_yieldValue('Suspend Outer');
+          throw outerPromise;
+        }
+        OuterScheduler.unstable_yieldValue('Outer');
+        const innerRoot = outerContainer.querySelector('#inner-root');
+        return (
+          <div
+            id="inner-root"
+            onMouseEnter={() => {
+              Scheduler.unstable_yieldValue('Outer Mouse Enter');
+            }}
+            dangerouslySetInnerHTML={{
+              __html: innerRoot ? innerRoot.innerHTML : '',
+            }}
+          />
+        );
+      }
+      const OuterApp = () => {
+        return (
+          <Suspense fallback={<div>Loading</div>}>
+            <Outer />
+          </Suspense>
+        );
+      };
+
+      let suspendInner = false;
+      innerPromise = new Promise(res => {
+        resolveInner = () => {
+          suspendInner = false;
+          res();
+        };
+      });
+      function Inner() {
+        if (suspendInner) {
+          InnerScheduler.unstable_yieldValue('Suspend Inner');
+          throw innerPromise;
+        }
+        InnerScheduler.unstable_yieldValue('Inner');
+        return (
+          <div
+            id="inner"
+            onMouseEnter={() => {
+              Scheduler.unstable_yieldValue('Inner Mouse Enter');
+            }}
+          />
+        );
+      }
+      const InnerApp = () => {
+        return (
+          <Suspense fallback={<div>Loading</div>}>
+            <Inner />
+          </Suspense>
+        );
+      };
+
+      document.body.appendChild(outerContainer);
+      const outerHTML = ReactDOMServer.renderToString(<OuterApp />);
+      outerContainer.innerHTML = outerHTML;
+
+      const innerWrapper = document.querySelector('#inner-root');
+      innerWrapper.appendChild(innerContainer);
+      const innerHTML = ReactDOMServer.renderToString(<InnerApp />);
+      innerContainer.innerHTML = innerHTML;
+
+      expect(OuterScheduler).toHaveYielded(['Outer']);
+      expect(InnerScheduler).toHaveYielded(['Inner']);
+
+      suspendOuter = true;
+      suspendInner = true;
+
+      OuterReactDOM.hydrateRoot(outerContainer, <OuterApp />);
+      InnerReactDOM.hydrateRoot(innerContainer, <InnerApp />);
+
+      expect(OuterScheduler).toFlushAndYield(['Suspend Outer']);
+      expect(InnerScheduler).toFlushAndYield(['Suspend Inner']);
+
+      innerDiv = document.querySelector('#inner');
+
+      dispatchClickEvent(innerDiv);
+
+      await act(async () => {
+        jest.runAllTimers();
+        Scheduler.unstable_flushAllWithoutAsserting();
+        OuterScheduler.unstable_flushAllWithoutAsserting();
+        InnerScheduler.unstable_flushAllWithoutAsserting();
+      });
+
+      expect(OuterScheduler).toHaveYielded(['Suspend Outer']);
+      if (
+        gate(
+          flags =>
+            flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
+        )
+      ) {
+        // InnerApp doesn't see the event because OuterApp calls stopPropagation in
+        // capture phase since the event is blocked on suspended component
+        expect(InnerScheduler).toHaveYielded([]);
+      } else {
+        // no stopPropagation
+        expect(InnerScheduler).toHaveYielded(['Suspend Inner']);
+      }
+
+      expect(Scheduler).toHaveYielded([]);
+    });
+    afterEach(async () => {
+      document.body.innerHTML = '';
+    });
+
+    // @gate enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay
+    it('Inner hydrates first then Outer', async () => {
+      dispatchMouseHoverEvent(innerDiv);
+
+      await act(async () => {
+        resolveInner();
+        await innerPromise;
+        jest.runAllTimers();
+        Scheduler.unstable_flushAllWithoutAsserting();
+        OuterScheduler.unstable_flushAllWithoutAsserting();
+        InnerScheduler.unstable_flushAllWithoutAsserting();
+      });
+
+      expect(OuterScheduler).toHaveYielded(['Suspend Outer']);
+      // Inner App renders because it is unblocked
+      expect(InnerScheduler).toHaveYielded(['Inner']);
+      // No event is replayed yet
+      expect(Scheduler).toHaveYielded([]);
+
+      dispatchMouseHoverEvent(innerDiv);
+      expect(OuterScheduler).toHaveYielded([]);
+      expect(InnerScheduler).toHaveYielded([]);
+      // No event is replayed yet
+      expect(Scheduler).toHaveYielded([]);
+
+      await act(async () => {
+        resolveOuter();
+        await outerPromise;
+        jest.runAllTimers();
+        Scheduler.unstable_flushAllWithoutAsserting();
+        OuterScheduler.unstable_flushAllWithoutAsserting();
+        InnerScheduler.unstable_flushAllWithoutAsserting();
+      });
+
+      // Nothing happens to inner app yet.
+      // Its blocked on the outer app replaying the event
+      expect(InnerScheduler).toHaveYielded([]);
+      // Outer hydrates and schedules Replay
+      expect(OuterScheduler).toHaveYielded(['Outer']);
+      // No event is replayed yet
+      expect(Scheduler).toHaveYielded([]);
+
+      // fire scheduled Replay
+      await act(async () => {
+        jest.runAllTimers();
+        Scheduler.unstable_flushAllWithoutAsserting();
+        OuterScheduler.unstable_flushAllWithoutAsserting();
+        InnerScheduler.unstable_flushAllWithoutAsserting();
+      });
+
+      // First Inner Mouse Enter fires then Outer Mouse Enter
+      expect(Scheduler).toHaveYielded([
+        'Inner Mouse Enter',
+        'Outer Mouse Enter',
+      ]);
+    });
+
+    // @gate enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay
+    it('Outer hydrates first then Inner', async () => {
+      dispatchMouseHoverEvent(innerDiv);
+
+      await act(async () => {
+        resolveOuter();
+        await outerPromise;
+        Scheduler.unstable_flushAllWithoutAsserting();
+        OuterScheduler.unstable_flushAllWithoutAsserting();
+        InnerScheduler.unstable_flushAllWithoutAsserting();
+      });
+
+      // Outer resolves and scheduled replay
+      expect(OuterScheduler).toHaveYielded(['Outer']);
+      // Inner App is still blocked
+      expect(InnerScheduler).toHaveYielded([]);
+
+      // Replay outer event
+      await act(async () => {
+        Scheduler.unstable_flushAllWithoutAsserting();
+        OuterScheduler.unstable_flushAllWithoutAsserting();
+        InnerScheduler.unstable_flushAllWithoutAsserting();
+      });
+
+      // Inner is still blocked so when Outer replays the event in capture phase
+      // inner ends up caling stopPropagation
+      expect(Scheduler).toHaveYielded([]);
+      expect(OuterScheduler).toHaveYielded([]);
+      expect(InnerScheduler).toHaveYielded(['Suspend Inner']);
+
+      dispatchMouseHoverEvent(innerDiv);
+      expect(OuterScheduler).toHaveYielded([]);
+      expect(InnerScheduler).toHaveYielded([]);
+      expect(Scheduler).toHaveYielded([]);
+
+      await act(async () => {
+        resolveInner();
+        await innerPromise;
+        Scheduler.unstable_flushAllWithoutAsserting();
+        OuterScheduler.unstable_flushAllWithoutAsserting();
+        InnerScheduler.unstable_flushAllWithoutAsserting();
+      });
+
+      // Inner hydrates
+      expect(InnerScheduler).toHaveYielded(['Inner']);
+      // Outer was hydrated earlier
+      expect(OuterScheduler).toHaveYielded([]);
+
+      await act(async () => {
+        Scheduler.unstable_flushAllWithoutAsserting();
+        OuterScheduler.unstable_flushAllWithoutAsserting();
+        InnerScheduler.unstable_flushAllWithoutAsserting();
+      });
+
+      // First Inner Mouse Enter fires then Outer Mouse Enter
+      expect(Scheduler).toHaveYielded([
+        'Inner Mouse Enter',
+        'Outer Mouse Enter',
+      ]);
+    });
+  });
+
+  // @gate enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay
+  it('replays event with null target when tree is dismounted', async () => {
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => {
+      resolve = () => {
+        suspend = false;
+        resolvePromise();
+      };
+    });
+
+    function Child() {
+      if (suspend) {
+        throw promise;
+      }
+      Scheduler.unstable_yieldValue('Child');
+      return (
+        <div
+          onMouseOver={() => {
+            Scheduler.unstable_yieldValue('on mouse over');
+          }}>
+          Child
+        </div>
+      );
+    }
+
+    function App() {
+      return (
+        <Suspense>
+          <Child />
+        </Suspense>
+      );
+    }
+
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    expect(Scheduler).toHaveYielded(['Child']);
+
+    const container = document.createElement('div');
+
+    document.body.appendChild(container);
+    container.innerHTML = finalHTML;
+    suspend = true;
+
+    ReactDOM.hydrateRoot(container, <App />);
+
+    const childDiv = container.firstElementChild;
+    dispatchMouseHoverEvent(childDiv);
+
+    // Not hydrated so event is saved for replay and stopPropagation is called
+    expect(Scheduler).toHaveYielded([]);
+
+    resolve();
+    Scheduler.unstable_flushNumberOfYields(1);
+    expect(Scheduler).toHaveYielded(['Child']);
+
+    Scheduler.unstable_scheduleCallback(
+      Scheduler.unstable_ImmediatePriority,
+      () => {
+        container.removeChild(childDiv);
+
+        const container2 = document.createElement('div');
+        container2.addEventListener('mouseover', () => {
+          Scheduler.unstable_yieldValue('container2 mouse over');
+        });
+        container2.appendChild(childDiv);
+      },
+    );
+    Scheduler.unstable_flushAllWithoutAsserting();
+
+    // Even though the tree is remove the event is still dispatched with native event handler
+    // on the container firing.
+    expect(Scheduler).toHaveYielded(['container2 mouse over']);
+
     document.body.removeChild(container);
   });
 
@@ -886,7 +1399,6 @@ describe('ReactDOMServerSelectiveHydration', () => {
     document.body.removeChild(container);
   });
 
-  // @gate experimental || www
   it('hydrates the last explicitly hydrated target at higher priority', async () => {
     function Child({text}) {
       Scheduler.unstable_yieldValue(text);
@@ -920,15 +1432,14 @@ describe('ReactDOMServerSelectiveHydration', () => {
     const spanB = container.getElementsByTagName('span')[1];
     const spanC = container.getElementsByTagName('span')[2];
 
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
+    const root = ReactDOM.hydrateRoot(container, <App />);
 
     // Nothing has been hydrated so far.
     expect(Scheduler).toHaveYielded([]);
 
     // Increase priority of B and then C.
-    ReactDOM.unstable_scheduleHydration(spanB);
-    ReactDOM.unstable_scheduleHydration(spanC);
+    root.unstable_scheduleHydration(spanB);
+    root.unstable_scheduleHydration(spanC);
 
     // We should prioritize hydrating C first because the last added
     // gets highest priority followed by the next added.
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
index 60ab2edbdcf2b..c2eb630e52acd 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
@@ -16,6 +16,7 @@ let ReactDOM;
 let ReactDOMServer;
 let ReactTestUtils;
 let act;
+let SuspenseList;
 
 function initModules() {
   // Reset warning cache.
@@ -26,6 +27,9 @@ function initModules() {
   ReactDOMServer = require('react-dom/server');
   ReactTestUtils = require('react-dom/test-utils');
   act = require('jest-react').act;
+  if (gate(flags => flags.enableSuspenseList)) {
+    SuspenseList = React.SuspenseList;
+  }
 
   // Make them available to the helpers.
   return {
@@ -137,16 +141,17 @@ describe('ReactDOMServerSuspense', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('server renders a SuspenseList component and its children', async () => {
     const example = (
-      <React.SuspenseList>
+      <SuspenseList>
         <React.Suspense fallback="Loading A">
           <div>A</div>
         </React.Suspense>
         <React.Suspense fallback="Loading B">
           <div>B</div>
         </React.Suspense>
-      </React.SuspenseList>
+      </SuspenseList>
     );
     const element = await serverRender(example);
     const parent = element.parentNode;
diff --git a/packages/react-dom/src/__tests__/ReactDOMTestSelectors-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMTestSelectors-test.internal.js
index e9b0cc6ea0e5b..29cf7a9870ec1 100644
--- a/packages/react-dom/src/__tests__/ReactDOMTestSelectors-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMTestSelectors-test.internal.js
@@ -56,7 +56,7 @@ describe('ReactDOMTestSelectors', () => {
   });
 
   describe('findAllNodes', () => {
-    // @gate www
+    // @gate www || experimental
     it('should support searching from the document root', () => {
       function Example() {
         return (
@@ -76,7 +76,7 @@ describe('ReactDOMTestSelectors', () => {
       expect(matches[0].id).toBe('match');
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should support searching from the container', () => {
       function Example() {
         return (
@@ -96,7 +96,7 @@ describe('ReactDOMTestSelectors', () => {
       expect(matches[0].id).toBe('match');
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should support searching from a previous match if the match had a data-testname', () => {
       function Outer() {
         return (
@@ -127,7 +127,7 @@ describe('ReactDOMTestSelectors', () => {
       expect(matches[0].id).toBe('inner');
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should not support searching from a previous match if the match did not have a data-testname', () => {
       function Outer() {
         return (
@@ -157,7 +157,7 @@ describe('ReactDOMTestSelectors', () => {
       );
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should support an multiple component types in the selector array', () => {
       function Outer() {
         return (
@@ -211,7 +211,7 @@ describe('ReactDOMTestSelectors', () => {
       expect(matches[0].id).toBe('match3');
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should find multiple matches', () => {
       function Example1() {
         return (
@@ -249,7 +249,7 @@ describe('ReactDOMTestSelectors', () => {
       ]);
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should ignore nested matches', () => {
       function Example() {
         return (
@@ -269,7 +269,7 @@ describe('ReactDOMTestSelectors', () => {
       expect(matches[0].id).toEqual('match1');
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should enforce the specific order of selectors', () => {
       function Outer() {
         return (
@@ -294,7 +294,7 @@ describe('ReactDOMTestSelectors', () => {
       ).toHaveLength(0);
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should not search within hidden subtrees', () => {
       const ref1 = React.createRef(null);
       const ref2 = React.createRef(null);
@@ -324,7 +324,7 @@ describe('ReactDOMTestSelectors', () => {
       expect(matches[0]).toBe(ref2.current);
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should support filtering by display text', () => {
       function Example() {
         return (
@@ -347,7 +347,7 @@ describe('ReactDOMTestSelectors', () => {
       expect(matches[0].id).toBe('match');
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should support filtering by explicit accessibiliy role', () => {
       function Example() {
         return (
@@ -372,7 +372,7 @@ describe('ReactDOMTestSelectors', () => {
       expect(matches[0].id).toBe('match');
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should support filtering by explicit secondary accessibiliy role', () => {
       const ref = React.createRef();
 
@@ -397,7 +397,7 @@ describe('ReactDOMTestSelectors', () => {
       expect(matches[0]).toBe(ref.current);
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should support filtering by implicit accessibiliy role', () => {
       function Example() {
         return (
@@ -420,7 +420,7 @@ describe('ReactDOMTestSelectors', () => {
       expect(matches[0].id).toBe('match');
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should support filtering by implicit accessibiliy role with attributes qualifications', () => {
       function Example() {
         return (
@@ -443,7 +443,7 @@ describe('ReactDOMTestSelectors', () => {
       expect(matches[0].id).toBe('match');
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should support searching ahead with the has() selector', () => {
       function Example() {
         return (
@@ -479,14 +479,14 @@ describe('ReactDOMTestSelectors', () => {
       expect(matches[0].id).toBe('match');
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should throw if no container can be found', () => {
       expect(() => findAllNodes(document.body, [])).toThrow(
         'Could not find React container within specified host subtree.',
       );
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should throw if an invalid host root is specified', () => {
       const ref = React.createRef();
       function Example() {
@@ -502,7 +502,7 @@ describe('ReactDOMTestSelectors', () => {
   });
 
   describe('getFindAllNodesFailureDescription', () => {
-    // @gate www
+    // @gate www || experimental
     it('should describe findAllNodes failures caused by the component type selector', () => {
       function Outer() {
         return <Middle />;
@@ -532,7 +532,7 @@ No matching component was found for:
       );
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should return null if findAllNodes was able to find a match', () => {
       function Example() {
         return (
@@ -568,7 +568,7 @@ No matching component was found for:
       };
     }
 
-    // @gate www
+    // @gate www || experimental
     it('should return a single rect for a component that returns a single root host element', () => {
       const ref = React.createRef();
 
@@ -602,7 +602,7 @@ No matching component was found for:
       });
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should return a multiple rects for multiple matches', () => {
       const outerRef = React.createRef();
       const innerRef = React.createRef();
@@ -652,7 +652,7 @@ No matching component was found for:
       });
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should return a multiple rects for single match that returns a fragment', () => {
       const refA = React.createRef();
       const refB = React.createRef();
@@ -702,7 +702,7 @@ No matching component was found for:
       });
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should merge overlapping rects', () => {
       const refA = React.createRef();
       const refB = React.createRef();
@@ -757,7 +757,7 @@ No matching component was found for:
       });
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should merge some types of adjacent rects (if they are the same in one dimension)', () => {
       const refA = React.createRef();
       const refB = React.createRef();
@@ -857,7 +857,7 @@ No matching component was found for:
       });
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should not search within hidden subtrees', () => {
       const refA = React.createRef();
       const refB = React.createRef();
@@ -914,7 +914,7 @@ No matching component was found for:
   });
 
   describe('focusWithin', () => {
-    // @gate www
+    // @gate www || experimental
     it('should return false if the specified component path has no matches', () => {
       function Example() {
         return <Child />;
@@ -935,7 +935,7 @@ No matching component was found for:
       expect(didFocus).toBe(false);
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should return false if there are no focusable elements within the matched subtree', () => {
       function Example() {
         return <Child />;
@@ -953,7 +953,7 @@ No matching component was found for:
       expect(didFocus).toBe(false);
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should return false if the only focusable elements are disabled', () => {
       function Example() {
         return (
@@ -971,7 +971,7 @@ No matching component was found for:
       expect(didFocus).toBe(false);
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should return false if the only focusable elements are hidden', () => {
       function Example() {
         return <button hidden={true}>not clickable</button>;
@@ -985,7 +985,7 @@ No matching component was found for:
       expect(didFocus).toBe(false);
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should successfully focus the first focusable element within the tree', () => {
       const secondRef = React.createRef(null);
 
@@ -1040,7 +1040,7 @@ No matching component was found for:
       expect(handleThirdFocus).not.toHaveBeenCalled();
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should successfully focus the first focusable element even if application logic interferes', () => {
       const ref = React.createRef(null);
 
@@ -1070,7 +1070,7 @@ No matching component was found for:
       expect(handleFocus).toHaveBeenCalledTimes(1);
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should not focus within hidden subtrees', () => {
       const secondRef = React.createRef(null);
 
@@ -1194,7 +1194,7 @@ No matching component was found for:
       window.IntersectionObserver = IntersectionObserver;
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should notify a listener when the underlying instance intersection changes', () => {
       const ref = React.createRef(null);
 
@@ -1231,7 +1231,7 @@ No matching component was found for:
       expect(handleVisibilityChange).toHaveBeenCalledWith([{rect, ratio: 0.5}]);
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should notify a listener of multiple targets when the underlying instance intersection changes', () => {
       const ref1 = React.createRef(null);
       const ref2 = React.createRef(null);
@@ -1308,7 +1308,7 @@ No matching component was found for:
       ]);
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should stop listening when its disconnected', () => {
       const ref = React.createRef(null);
 
@@ -1343,7 +1343,7 @@ No matching component was found for:
     });
 
     // This test reuires gating because it relies on the __DEV__ only commit hook to work.
-    // @gate www && __DEV__
+    // @gate www || experimental && __DEV__
     it('should update which targets its listening to after a commit', () => {
       const ref1 = React.createRef(null);
       const ref2 = React.createRef(null);
@@ -1422,7 +1422,7 @@ No matching component was found for:
       ]);
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should not observe components within hidden subtrees', () => {
       const ref1 = React.createRef(null);
       const ref2 = React.createRef(null);
diff --git a/packages/react-dom/src/__tests__/ReactDOMUseId-test.js b/packages/react-dom/src/__tests__/ReactDOMUseId-test.js
index dd7bbaa8b41fa..036c138d5e97a 100644
--- a/packages/react-dom/src/__tests__/ReactDOMUseId-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMUseId-test.js
@@ -94,7 +94,7 @@ describe('useId', () => {
 
   function normalizeTreeIdForTesting(id) {
     const [serverClientPrefix, base32, hookIndex] = id.split(':');
-    if (serverClientPrefix === 'r') {
+    if (serverClientPrefix.endsWith('r')) {
       // Client ids aren't stable. For testing purposes, strip out the counter.
       return (
         'CLIENT_GENERATED_ID' +
@@ -569,4 +569,66 @@ describe('useId', () => {
     // Should have hydrated successfully
     expect(span.current).toBe(dehydratedSpan);
   });
+
+  test('identifierPrefix option', async () => {
+    function Child() {
+      const id = useId();
+      return <div>{id}</div>;
+    }
+
+    function App({showMore}) {
+      return (
+        <>
+          <Child />
+          <Child />
+          {showMore && <Child />}
+        </>
+      );
+    }
+
+    await serverAct(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />, {
+        identifierPrefix: 'custom-prefix-',
+      });
+      pipe(writable);
+    });
+    let root;
+    await clientAct(async () => {
+      root = ReactDOM.hydrateRoot(container, <App />, {
+        identifierPrefix: 'custom-prefix-',
+      });
+    });
+    expect(container).toMatchInlineSnapshot(`
+      <div
+        id="container"
+      >
+        <div>
+          custom-prefix-R:1
+        </div>
+        <div>
+          custom-prefix-R:2
+        </div>
+      </div>
+    `);
+
+    // Mount a new, client-only id
+    await clientAct(async () => {
+      root.render(<App showMore={true} />);
+    });
+    expect(container).toMatchInlineSnapshot(`
+      <div
+        id="container"
+      >
+        <div>
+          custom-prefix-R:1
+        </div>
+        <div>
+          custom-prefix-R:2
+        </div>
+        <div>
+          custom-prefix-r:0
+        </div>
+      </div>
+    `);
+  });
 });
diff --git a/packages/react-dom/src/__tests__/ReactMultiChildText-test.js b/packages/react-dom/src/__tests__/ReactMultiChildText-test.js
index 2e99344289a7a..74c1d7bc3104e 100644
--- a/packages/react-dom/src/__tests__/ReactMultiChildText-test.js
+++ b/packages/react-dom/src/__tests__/ReactMultiChildText-test.js
@@ -53,6 +53,9 @@ const expectChildren = function(container, children) {
       const child = children[i];
 
       if (typeof child === 'string') {
+        if (child === '') {
+          continue;
+        }
         textNode = outerNode.childNodes[mountIndex];
         expect(textNode.nodeType).toBe(3);
         expect(textNode.data).toBe(child);
@@ -83,7 +86,7 @@ describe('ReactMultiChildText', () => {
         true, [],
         0, '0',
         1.2, '1.2',
-        '', '',
+        '', [],
         'foo', 'foo',
 
         [], [],
@@ -93,7 +96,7 @@ describe('ReactMultiChildText', () => {
         [true], [],
         [0], ['0'],
         [1.2], ['1.2'],
-        [''], [''],
+        [''], [],
         ['foo'], ['foo'],
         [<div />], [<div />],
 
diff --git a/packages/react-dom/src/__tests__/ReactWrongReturnPointer-test.js b/packages/react-dom/src/__tests__/ReactWrongReturnPointer-test.js
index 66cf344814dc8..ca5c9fac51624 100644
--- a/packages/react-dom/src/__tests__/ReactWrongReturnPointer-test.js
+++ b/packages/react-dom/src/__tests__/ReactWrongReturnPointer-test.js
@@ -24,7 +24,9 @@ beforeEach(() => {
   act = require('jest-react').act;
 
   Suspense = React.Suspense;
-  SuspenseList = React.SuspenseList;
+  if (gate(flags => flags.enableSuspenseList)) {
+    SuspenseList = React.SuspenseList;
+  }
 
   getCacheForType = React.unstable_getCacheForType;
 
@@ -197,6 +199,7 @@ test('warns in DEV if return pointer is inconsistent', async () => {
 });
 
 // @gate enableCache
+// @gate enableSuspenseList
 test('regression (#20932): return pointer is correct before entering deleted tree', async () => {
   // Based on a production bug. Designed to trigger a very specific
   // implementation path.
diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js
index 8e37995cb7364..87ba7bf36101d 100644
--- a/packages/react-dom/src/client/ReactDOM.js
+++ b/packages/react-dom/src/client/ReactDOM.js
@@ -56,7 +56,6 @@ import {
   setAttemptDiscreteHydration,
   setAttemptContinuousHydration,
   setAttemptHydrationAtCurrentPriority,
-  queueExplicitHydrationTarget,
   setGetCurrentUpdatePriority,
   setAttemptHydrationAtPriority,
 } from '../events/ReactDOMEventReplaying';
@@ -116,12 +115,6 @@ function createPortal(
   return createPortalImpl(children, container, null, key);
 }
 
-function scheduleHydration(target: Node) {
-  if (target) {
-    queueExplicitHydrationTarget(target);
-  }
-}
-
 function renderSubtreeIntoContainer(
   parentComponent: React$Component<any, any>,
   element: React$Element<any>,
@@ -196,7 +189,6 @@ export {
   createRoot,
   hydrateRoot,
   flushControlled as unstable_flushControlled,
-  scheduleHydration as unstable_scheduleHydration,
   // Disabled behind disableUnstableRenderSubtreeIntoContainer
   renderSubtreeIntoContainer as unstable_renderSubtreeIntoContainer,
   // enableCreateEventHandleAPI
diff --git a/packages/react-dom/src/client/ReactDOMLegacy.js b/packages/react-dom/src/client/ReactDOMLegacy.js
index ac12f18bee509..e3def8459e754 100644
--- a/packages/react-dom/src/client/ReactDOMLegacy.js
+++ b/packages/react-dom/src/client/ReactDOMLegacy.js
@@ -121,6 +121,7 @@ function legacyCreateRootFromDOMContainer(
     null, // hydrationCallbacks
     false, // isStrictMode
     false, // concurrentUpdatesByDefaultOverride,
+    '', // identiferPrefix
   );
   markContainerAsRoot(root.current, container);
 
diff --git a/packages/react-dom/src/client/ReactDOMRoot.js b/packages/react-dom/src/client/ReactDOMRoot.js
index 38f2100cb5418..3c49a15fc14dc 100644
--- a/packages/react-dom/src/client/ReactDOMRoot.js
+++ b/packages/react-dom/src/client/ReactDOMRoot.js
@@ -11,6 +11,8 @@ import type {Container} from './ReactDOMHostConfig';
 import type {MutableSource, ReactNodeList} from 'shared/ReactTypes';
 import type {FiberRoot} from 'react-reconciler/src/ReactInternalTypes';
 
+import {queueExplicitHydrationTarget} from '../events/ReactDOMEventReplaying';
+
 export type RootType = {
   render(children: ReactNodeList): void,
   unmount(): void,
@@ -30,6 +32,7 @@ export type CreateRootOptions = {
   // END OF TODO
   unstable_strictMode?: boolean,
   unstable_concurrentUpdatesByDefault?: boolean,
+  identifierPrefix?: string,
   ...
 };
 
@@ -41,6 +44,7 @@ export type HydrateRootOptions = {
   // Options for all roots
   unstable_strictMode?: boolean,
   unstable_concurrentUpdatesByDefault?: boolean,
+  identifierPrefix?: string,
   ...
 };
 
@@ -72,7 +76,9 @@ function ReactDOMRoot(internalRoot: FiberRoot) {
   this._internalRoot = internalRoot;
 }
 
-ReactDOMRoot.prototype.render = function(children: ReactNodeList): void {
+ReactDOMHydrationRoot.prototype.render = ReactDOMRoot.prototype.render = function(
+  children: ReactNodeList,
+): void {
   const root = this._internalRoot;
   if (root === null) {
     throw new Error('Cannot update an unmounted root.');
@@ -104,7 +110,7 @@ ReactDOMRoot.prototype.render = function(children: ReactNodeList): void {
   updateContainer(children, root, null, null);
 };
 
-ReactDOMRoot.prototype.unmount = function(): void {
+ReactDOMHydrationRoot.prototype.unmount = ReactDOMRoot.prototype.unmount = function(): void {
   if (__DEV__) {
     if (typeof arguments[0] === 'function') {
       console.error(
@@ -154,13 +160,22 @@ export function createRoot(
     null;
   // END TODO
 
-  const isStrictMode = options != null && options.unstable_strictMode === true;
-  let concurrentUpdatesByDefaultOverride = null;
-  if (allowConcurrentByDefault) {
-    concurrentUpdatesByDefaultOverride =
-      options != null && options.unstable_concurrentUpdatesByDefault != null
-        ? options.unstable_concurrentUpdatesByDefault
-        : null;
+  let isStrictMode = false;
+  let concurrentUpdatesByDefaultOverride = false;
+  let identifierPrefix = '';
+  if (options !== null && options !== undefined) {
+    if (options.unstable_strictMode === true) {
+      isStrictMode = true;
+    }
+    if (
+      allowConcurrentByDefault &&
+      options.unstable_concurrentUpdatesByDefault === true
+    ) {
+      concurrentUpdatesByDefaultOverride = true;
+    }
+    if (options.identifierPrefix !== undefined) {
+      identifierPrefix = options.identifierPrefix;
+    }
   }
 
   const root = createContainer(
@@ -170,6 +185,7 @@ export function createRoot(
     hydrationCallbacks,
     isStrictMode,
     concurrentUpdatesByDefaultOverride,
+    identifierPrefix,
   );
   markContainerAsRoot(root.current, container);
 
@@ -189,6 +205,16 @@ export function createRoot(
   return new ReactDOMRoot(root);
 }
 
+function ReactDOMHydrationRoot(internalRoot: FiberRoot) {
+  this._internalRoot = internalRoot;
+}
+function scheduleHydration(target: Node) {
+  if (target) {
+    queueExplicitHydrationTarget(target);
+  }
+}
+ReactDOMHydrationRoot.prototype.unstable_scheduleHydration = scheduleHydration;
+
 export function hydrateRoot(
   container: Container,
   initialChildren: ReactNodeList,
@@ -203,15 +229,25 @@ export function hydrateRoot(
   // For now we reuse the whole bag of options since they contain
   // the hydration callbacks.
   const hydrationCallbacks = options != null ? options : null;
+  // TODO: Delete this option
   const mutableSources = (options != null && options.hydratedSources) || null;
-  const isStrictMode = options != null && options.unstable_strictMode === true;
-
-  let concurrentUpdatesByDefaultOverride = null;
-  if (allowConcurrentByDefault) {
-    concurrentUpdatesByDefaultOverride =
-      options != null && options.unstable_concurrentUpdatesByDefault != null
-        ? options.unstable_concurrentUpdatesByDefault
-        : null;
+
+  let isStrictMode = false;
+  let concurrentUpdatesByDefaultOverride = false;
+  let identifierPrefix = '';
+  if (options !== null && options !== undefined) {
+    if (options.unstable_strictMode === true) {
+      isStrictMode = true;
+    }
+    if (
+      allowConcurrentByDefault &&
+      options.unstable_concurrentUpdatesByDefault === true
+    ) {
+      concurrentUpdatesByDefaultOverride = true;
+    }
+    if (options.identifierPrefix !== undefined) {
+      identifierPrefix = options.identifierPrefix;
+    }
   }
 
   const root = createContainer(
@@ -221,6 +257,7 @@ export function hydrateRoot(
     hydrationCallbacks,
     isStrictMode,
     concurrentUpdatesByDefaultOverride,
+    identifierPrefix,
   );
   markContainerAsRoot(root.current, container);
   // This can't be a comment node since hydration doesn't work on comment nodes anyway.
@@ -236,7 +273,7 @@ export function hydrateRoot(
   // Render the initial children
   updateContainer(initialChildren, root, null, null);
 
-  return new ReactDOMRoot(root);
+  return new ReactDOMHydrationRoot(root);
 }
 
 export function isValidContainer(node: any): boolean {
diff --git a/packages/react-dom/src/events/CurrentReplayingEvent.js b/packages/react-dom/src/events/CurrentReplayingEvent.js
new file mode 100644
index 0000000000000..c7091360de3bf
--- /dev/null
+++ b/packages/react-dom/src/events/CurrentReplayingEvent.js
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+import type {AnyNativeEvent} from '../events/PluginModuleType';
+
+// This exists to avoid circular dependency between ReactDOMEventReplaying
+// and DOMPluginEventSystem.
+
+let currentReplayingEvent = null;
+
+export function setReplayingEvent(event: AnyNativeEvent): void {
+  if (__DEV__) {
+    if (currentReplayingEvent !== null) {
+      console.error(
+        'Expected currently replaying event to be null. This error ' +
+          'is likely caused by a bug in React. Please file an issue.',
+      );
+    }
+  }
+  currentReplayingEvent = event;
+}
+
+export function resetReplayingEvent(): void {
+  if (__DEV__) {
+    if (currentReplayingEvent === null) {
+      console.error(
+        'Expected currently replaying event to not be null. This error ' +
+          'is likely caused by a bug in React. Please file an issue.',
+      );
+    }
+  }
+  currentReplayingEvent = null;
+}
+
+export function isReplayingEvent(event: AnyNativeEvent): boolean {
+  return event === currentReplayingEvent;
+}
diff --git a/packages/react-dom/src/events/DOMPluginEventSystem.js b/packages/react-dom/src/events/DOMPluginEventSystem.js
index 7f7f77183726a..e52b128c11daa 100644
--- a/packages/react-dom/src/events/DOMPluginEventSystem.js
+++ b/packages/react-dom/src/events/DOMPluginEventSystem.js
@@ -27,6 +27,7 @@ import {
   IS_EVENT_HANDLE_NON_MANAGED_NODE,
   IS_NON_DELEGATED,
 } from './EventSystemFlags';
+import {isReplayingEvent} from './CurrentReplayingEvent';
 
 import {
   HostRoot,
@@ -557,7 +558,8 @@ export function dispatchEventForPluginEventSystem(
       // for legacy FB support, where the expected behavior was to
       // match React < 16 behavior of delegated clicks to the doc.
       domEventName === 'click' &&
-      (eventSystemFlags & SHOULD_NOT_DEFER_CLICK_FOR_FB_SUPPORT_MODE) === 0
+      (eventSystemFlags & SHOULD_NOT_DEFER_CLICK_FOR_FB_SUPPORT_MODE) === 0 &&
+      !isReplayingEvent(nativeEvent)
     ) {
       deferClickToDocumentForLegacyFBSupport(domEventName, targetContainer);
       return;
diff --git a/packages/react-dom/src/events/EventSystemFlags.js b/packages/react-dom/src/events/EventSystemFlags.js
index 150a73d35ded4..2e2600dfb5062 100644
--- a/packages/react-dom/src/events/EventSystemFlags.js
+++ b/packages/react-dom/src/events/EventSystemFlags.js
@@ -13,11 +13,10 @@ export const IS_EVENT_HANDLE_NON_MANAGED_NODE = 1;
 export const IS_NON_DELEGATED = 1 << 1;
 export const IS_CAPTURE_PHASE = 1 << 2;
 export const IS_PASSIVE = 1 << 3;
-export const IS_REPLAYED = 1 << 4;
-export const IS_LEGACY_FB_SUPPORT_MODE = 1 << 5;
+export const IS_LEGACY_FB_SUPPORT_MODE = 1 << 4;
 
 export const SHOULD_NOT_DEFER_CLICK_FOR_FB_SUPPORT_MODE =
-  IS_LEGACY_FB_SUPPORT_MODE | IS_REPLAYED | IS_CAPTURE_PHASE;
+  IS_LEGACY_FB_SUPPORT_MODE | IS_CAPTURE_PHASE;
 
 // We do not want to defer if the event system has already been
 // set to LEGACY_FB_SUPPORT. LEGACY_FB_SUPPORT only gets set when
diff --git a/packages/react-dom/src/events/ReactDOMEventListener.js b/packages/react-dom/src/events/ReactDOMEventListener.js
index 86924e7c2673d..f228090221ff0 100644
--- a/packages/react-dom/src/events/ReactDOMEventListener.js
+++ b/packages/react-dom/src/events/ReactDOMEventListener.js
@@ -154,7 +154,29 @@ export function dispatchEvent(
   if (!_enabled) {
     return;
   }
+  if (enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay) {
+    dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay(
+      domEventName,
+      eventSystemFlags,
+      targetContainer,
+      nativeEvent,
+    );
+  } else {
+    dispatchEventOriginal(
+      domEventName,
+      eventSystemFlags,
+      targetContainer,
+      nativeEvent,
+    );
+  }
+}
 
+function dispatchEventOriginal(
+  domEventName: DOMEventName,
+  eventSystemFlags: EventSystemFlags,
+  targetContainer: EventTarget,
+  nativeEvent: AnyNativeEvent,
+) {
   // TODO: replaying capture phase events is currently broken
   // because we used to do it during top-level native bubble handlers
   // but now we use different bubble and capture handlers.
@@ -180,15 +202,20 @@ export function dispatchEvent(
     return;
   }
 
-  let blockedOn = attemptToDispatchEvent(
+  const blockedOn = findInstanceBlockingEvent(
     domEventName,
     eventSystemFlags,
     targetContainer,
     nativeEvent,
   );
-
   if (blockedOn === null) {
-    // We successfully dispatched this event.
+    dispatchEventForPluginEventSystem(
+      domEventName,
+      eventSystemFlags,
+      nativeEvent,
+      return_targetInst,
+      targetContainer,
+    );
     if (allowReplay) {
       clearIfContinuousEvent(domEventName, nativeEvent);
     }
@@ -196,10 +223,7 @@ export function dispatchEvent(
   }
 
   if (allowReplay) {
-    if (
-      !enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay &&
-      isDiscreteEventThatRequiresHydration(domEventName)
-    ) {
+    if (isDiscreteEventThatRequiresHydration(domEventName)) {
       // This this to be replayed later once the target is available.
       queueDiscreteEvent(
         blockedOn,
@@ -226,8 +250,58 @@ export function dispatchEvent(
     clearIfContinuousEvent(domEventName, nativeEvent);
   }
 
+  // This is not replayable so we'll invoke it but without a target,
+  // in case the event system needs to trace it.
+  dispatchEventForPluginEventSystem(
+    domEventName,
+    eventSystemFlags,
+    nativeEvent,
+    null,
+    targetContainer,
+  );
+}
+
+function dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay(
+  domEventName: DOMEventName,
+  eventSystemFlags: EventSystemFlags,
+  targetContainer: EventTarget,
+  nativeEvent: AnyNativeEvent,
+) {
+  let blockedOn = findInstanceBlockingEvent(
+    domEventName,
+    eventSystemFlags,
+    targetContainer,
+    nativeEvent,
+  );
+  if (blockedOn === null) {
+    dispatchEventForPluginEventSystem(
+      domEventName,
+      eventSystemFlags,
+      nativeEvent,
+      return_targetInst,
+      targetContainer,
+    );
+    clearIfContinuousEvent(domEventName, nativeEvent);
+    return;
+  }
+
+  if (
+    queueIfContinuousEvent(
+      blockedOn,
+      domEventName,
+      eventSystemFlags,
+      targetContainer,
+      nativeEvent,
+    )
+  ) {
+    nativeEvent.stopPropagation();
+    return;
+  }
+  // We need to clear only if we didn't queue because
+  // queueing is accumulative.
+  clearIfContinuousEvent(domEventName, nativeEvent);
+
   if (
-    enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay &&
     eventSystemFlags & IS_CAPTURE_PHASE &&
     isDiscreteEventThatRequiresHydration(domEventName)
   ) {
@@ -236,21 +310,30 @@ export function dispatchEvent(
       if (fiber !== null) {
         attemptSynchronousHydration(fiber);
       }
-      const nextBlockedOn = attemptToDispatchEvent(
+      const nextBlockedOn = findInstanceBlockingEvent(
         domEventName,
         eventSystemFlags,
         targetContainer,
         nativeEvent,
       );
+      if (nextBlockedOn === null) {
+        dispatchEventForPluginEventSystem(
+          domEventName,
+          eventSystemFlags,
+          nativeEvent,
+          return_targetInst,
+          targetContainer,
+        );
+      }
       if (nextBlockedOn === blockedOn) {
         break;
       }
       blockedOn = nextBlockedOn;
     }
-    if (blockedOn) {
+    if (blockedOn !== null) {
       nativeEvent.stopPropagation();
-      return;
     }
+    return;
   }
 
   // This is not replayable so we'll invoke it but without a target,
@@ -264,8 +347,11 @@ export function dispatchEvent(
   );
 }
 
-// Attempt dispatching an event. Returns a SuspenseInstance or Container if it's blocked.
-export function attemptToDispatchEvent(
+export let return_targetInst = null;
+
+// Returns a SuspenseInstance or Container if it's blocked.
+// The return_targetInst field above is conceptually part of the return value.
+export function findInstanceBlockingEvent(
   domEventName: DOMEventName,
   eventSystemFlags: EventSystemFlags,
   targetContainer: EventTarget,
@@ -273,6 +359,8 @@ export function attemptToDispatchEvent(
 ): null | Container | SuspenseInstance {
   // TODO: Warn if _enabled is false.
 
+  return_targetInst = null;
+
   const nativeEventTarget = getEventTarget(nativeEvent);
   let targetInst = getClosestInstanceFromNode(nativeEventTarget);
 
@@ -313,13 +401,7 @@ export function attemptToDispatchEvent(
       }
     }
   }
-  dispatchEventForPluginEventSystem(
-    domEventName,
-    eventSystemFlags,
-    nativeEvent,
-    targetInst,
-    targetContainer,
-  );
+  return_targetInst = targetInst;
   // We're not blocked on anything.
   return null;
 }
diff --git a/packages/react-dom/src/events/ReactDOMEventReplaying.js b/packages/react-dom/src/events/ReactDOMEventReplaying.js
index ed31f20e51185..744f5dfda9d9b 100644
--- a/packages/react-dom/src/events/ReactDOMEventReplaying.js
+++ b/packages/react-dom/src/events/ReactDOMEventReplaying.js
@@ -27,7 +27,12 @@ import {
   getContainerFromFiber,
   getSuspenseInstanceFromFiber,
 } from 'react-reconciler/src/ReactFiberTreeReflection';
-import {attemptToDispatchEvent} from './ReactDOMEventListener';
+import {
+  findInstanceBlockingEvent,
+  return_targetInst,
+} from './ReactDOMEventListener';
+import {setReplayingEvent, resetReplayingEvent} from './CurrentReplayingEvent';
+import {dispatchEventForPluginEventSystem} from './DOMPluginEventSystem';
 import {
   getInstanceFromNode,
   getClosestInstanceFromNode,
@@ -87,8 +92,6 @@ type PointerEvent = Event & {
   ...
 };
 
-import {IS_REPLAYED} from './EventSystemFlags';
-
 type QueuedReplayableEvent = {|
   blockedOn: null | Container | SuspenseInstance,
   domEventName: DOMEventName,
@@ -176,7 +179,7 @@ function createQueuedReplayableEvent(
   return {
     blockedOn,
     domEventName,
-    eventSystemFlags: eventSystemFlags | IS_REPLAYED,
+    eventSystemFlags,
     nativeEvent,
     targetContainers: [targetContainer],
   };
@@ -389,7 +392,7 @@ export function queueIfContinuousEvent(
 function attemptExplicitHydrationTarget(
   queuedTarget: QueuedHydrationTarget,
 ): void {
-  // TODO: This function shares a lot of logic with attemptToDispatchEvent.
+  // TODO: This function shares a lot of logic with findInstanceBlockingEvent.
   // Try to unify them. It's a bit tricky since it would require two return
   // values.
   const targetInst = getClosestInstanceFromNode(queuedTarget.target);
@@ -462,13 +465,34 @@ function attemptReplayContinuousQueuedEvent(
   const targetContainers = queuedEvent.targetContainers;
   while (targetContainers.length > 0) {
     const targetContainer = targetContainers[0];
-    const nextBlockedOn = attemptToDispatchEvent(
+    const nextBlockedOn = findInstanceBlockingEvent(
       queuedEvent.domEventName,
       queuedEvent.eventSystemFlags,
       targetContainer,
       queuedEvent.nativeEvent,
     );
-    if (nextBlockedOn !== null) {
+    if (nextBlockedOn === null) {
+      if (enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay) {
+        const nativeEvent = queuedEvent.nativeEvent;
+        const nativeEventClone = new nativeEvent.constructor(
+          nativeEvent.type,
+          (nativeEvent: any),
+        );
+        setReplayingEvent(nativeEventClone);
+        nativeEvent.target.dispatchEvent(nativeEventClone);
+        resetReplayingEvent();
+      } else {
+        setReplayingEvent(queuedEvent.nativeEvent);
+        dispatchEventForPluginEventSystem(
+          queuedEvent.domEventName,
+          queuedEvent.eventSystemFlags,
+          queuedEvent.nativeEvent,
+          return_targetInst,
+          targetContainer,
+        );
+        resetReplayingEvent();
+      }
+    } else {
       // We're still blocked. Try again later.
       const fiber = getInstanceFromNode(nextBlockedOn);
       if (fiber !== null) {
@@ -512,13 +536,25 @@ function replayUnblockedEvents() {
       const targetContainers = nextDiscreteEvent.targetContainers;
       while (targetContainers.length > 0) {
         const targetContainer = targetContainers[0];
-        const nextBlockedOn = attemptToDispatchEvent(
+        const nextBlockedOn = findInstanceBlockingEvent(
           nextDiscreteEvent.domEventName,
           nextDiscreteEvent.eventSystemFlags,
           targetContainer,
           nextDiscreteEvent.nativeEvent,
         );
-        if (nextBlockedOn !== null) {
+        if (nextBlockedOn === null) {
+          // This whole function is in !enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
+          // so we don't need the new replay behavior code branch.
+          setReplayingEvent(nextDiscreteEvent.nativeEvent);
+          dispatchEventForPluginEventSystem(
+            nextDiscreteEvent.domEventName,
+            nextDiscreteEvent.eventSystemFlags,
+            nextDiscreteEvent.nativeEvent,
+            return_targetInst,
+            targetContainer,
+          );
+          resetReplayingEvent();
+        } else {
           // We're still blocked. Try again later.
           nextDiscreteEvent.blockedOn = nextBlockedOn;
           break;
diff --git a/packages/react-dom/src/events/plugins/EnterLeaveEventPlugin.js b/packages/react-dom/src/events/plugins/EnterLeaveEventPlugin.js
index be5d94da806cc..ea7e3fac1cd57 100644
--- a/packages/react-dom/src/events/plugins/EnterLeaveEventPlugin.js
+++ b/packages/react-dom/src/events/plugins/EnterLeaveEventPlugin.js
@@ -13,7 +13,7 @@ import type {DispatchQueue} from '../DOMPluginEventSystem';
 import type {EventSystemFlags} from '../EventSystemFlags';
 
 import {registerDirectEvent} from '../EventRegistry';
-import {IS_REPLAYED} from 'react-dom/src/events/EventSystemFlags';
+import {isReplayingEvent} from '../CurrentReplayingEvent';
 import {SyntheticMouseEvent, SyntheticPointerEvent} from '../SyntheticEvent';
 import {
   getClosestInstanceFromNode,
@@ -54,7 +54,7 @@ function extractEvents(
   const isOutEvent =
     domEventName === 'mouseout' || domEventName === 'pointerout';
 
-  if (isOverEvent && (eventSystemFlags & IS_REPLAYED) === 0) {
+  if (isOverEvent && !isReplayingEvent(nativeEvent)) {
     // If this is an over event with a target, we might have already dispatched
     // the event in the out event of the other target. If this is replayed,
     // then it's because we couldn't dispatch against this target previously
diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index c5abe820757e9..5ea8d772732bd 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -67,6 +67,7 @@ export type ResponseState = {
   placeholderPrefix: PrecomputedChunk,
   segmentPrefix: PrecomputedChunk,
   boundaryPrefix: string,
+  idPrefix: string,
   nextSuspenseID: number,
   sentCompleteSegmentFunction: boolean,
   sentCompleteBoundaryFunction: boolean,
@@ -128,6 +129,7 @@ export function createResponseState(
     placeholderPrefix: stringToPrecomputedChunk(idPrefix + 'P:'),
     segmentPrefix: stringToPrecomputedChunk(idPrefix + 'S:'),
     boundaryPrefix: idPrefix + 'B:',
+    idPrefix: idPrefix + 'R:',
     nextSuspenseID: 0,
     sentCompleteSegmentFunction: false,
     sentCompleteBoundaryFunction: false,
@@ -232,6 +234,25 @@ export function assignSuspenseBoundaryID(
   );
 }
 
+export function makeId(
+  responseState: ResponseState,
+  treeId: string,
+  localId: number,
+): string {
+  const idPrefix = responseState.idPrefix;
+
+  let id = idPrefix + treeId;
+
+  // Unless this is the first id at this level, append a number at the end
+  // that represents the position of this useId hook among all the useId
+  // hooks for this fiber.
+  if (localId > 0) {
+    id += ':' + localId.toString(32);
+  }
+
+  return id;
+}
+
 function encodeHTMLTextNode(text: string): string {
   return escapeTextForBrowser(text);
 }
diff --git a/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
index 5b0798b737129..c3d09f481fb62 100644
--- a/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
@@ -34,6 +34,7 @@ export type ResponseState = {
   placeholderPrefix: PrecomputedChunk,
   segmentPrefix: PrecomputedChunk,
   boundaryPrefix: string,
+  idPrefix: string,
   nextSuspenseID: number,
   sentCompleteSegmentFunction: boolean,
   sentCompleteBoundaryFunction: boolean,
@@ -54,6 +55,7 @@ export function createResponseState(
     placeholderPrefix: responseState.placeholderPrefix,
     segmentPrefix: responseState.segmentPrefix,
     boundaryPrefix: responseState.boundaryPrefix,
+    idPrefix: responseState.idPrefix,
     nextSuspenseID: responseState.nextSuspenseID,
     sentCompleteSegmentFunction: responseState.sentCompleteSegmentFunction,
     sentCompleteBoundaryFunction: responseState.sentCompleteBoundaryFunction,
@@ -79,6 +81,7 @@ export {
   getChildFormatContext,
   UNINITIALIZED_SUSPENSE_BOUNDARY_ID,
   assignSuspenseBoundaryID,
+  makeId,
   pushStartInstance,
   pushEndInstance,
   pushStartCompletedSuspenseBoundary,
diff --git a/packages/react-dom/src/shared/possibleStandardNames.js b/packages/react-dom/src/shared/possibleStandardNames.js
index 06250d1036ec8..98a7e70831530 100644
--- a/packages/react-dom/src/shared/possibleStandardNames.js
+++ b/packages/react-dom/src/shared/possibleStandardNames.js
@@ -79,6 +79,8 @@ const possibleStandardNames = {
   'http-equiv': 'httpEquiv',
   icon: 'icon',
   id: 'id',
+  imagesizes: 'imageSizes',
+  imagesrcset: 'imageSrcSet',
   innerhtml: 'innerHTML',
   inputmode: 'inputMode',
   integrity: 'integrity',
diff --git a/packages/react-dom/testing.experimental.js b/packages/react-dom/testing.experimental.js
index f994d83fa7d22..8b0b366705e93 100644
--- a/packages/react-dom/testing.experimental.js
+++ b/packages/react-dom/testing.experimental.js
@@ -8,3 +8,15 @@
  */
 
 export * from './index.experimental.js';
+export {
+  createComponentSelector,
+  createHasPseudoClassSelector,
+  createRoleSelector,
+  createTestNameSelector,
+  createTextSelector,
+  getFindAllNodesFailureDescription,
+  findAllNodes,
+  findBoundingRects,
+  focusWithin,
+  observeVisibleRects,
+} from 'react-reconciler/src/ReactFiberReconciler';
diff --git a/packages/react-fetch/src/ReactFetchBrowser.js b/packages/react-fetch/src/ReactFetchBrowser.js
index 41df29c8afcc2..473a875c30b1e 100644
--- a/packages/react-fetch/src/ReactFetchBrowser.js
+++ b/packages/react-fetch/src/ReactFetchBrowser.js
@@ -32,8 +32,11 @@ type RejectedRecord = {|
 
 type Record = PendingRecord | ResolvedRecord | RejectedRecord;
 
+declare var globalThis: any;
+
 // TODO: this is a browser-only version. Add a separate Node entry point.
-const nativeFetch = window.fetch;
+const nativeFetch = (typeof globalThis !== 'undefined' ? globalThis : window)
+  .fetch;
 
 function getRecordMap(): Map<string, Record> {
   return unstable_getCacheForType(createRecordMap);
diff --git a/packages/react-interactions/events/src/dom/create-event-handle/Focus.js b/packages/react-interactions/events/src/dom/create-event-handle/Focus.js
index 214a25d0d30fc..19b0b9cbee401 100644
--- a/packages/react-interactions/events/src/dom/create-event-handle/Focus.js
+++ b/packages/react-interactions/events/src/dom/create-event-handle/Focus.js
@@ -69,7 +69,7 @@ function isValidKey(nativeEvent: KeyboardEvent): boolean {
 
 function isTextInput(nativeEvent: KeyboardEvent): boolean {
   const {key, target} = nativeEvent;
-  if (key === 'Tab' || key === 'Esacpe') {
+  if (key === 'Tab' || key === 'Escape') {
     return false;
   }
   const {isContentEditable, tagName} = (target: any);
diff --git a/packages/react-is/src/__tests__/ReactIs-test.js b/packages/react-is/src/__tests__/ReactIs-test.js
index b6adc66b00b53..6a5976e97194f 100644
--- a/packages/react-is/src/__tests__/ReactIs-test.js
+++ b/packages/react-is/src/__tests__/ReactIs-test.js
@@ -12,6 +12,7 @@
 let React;
 let ReactDOM;
 let ReactIs;
+let SuspenseList;
 
 describe('ReactIs', () => {
   beforeEach(() => {
@@ -20,6 +21,10 @@ describe('ReactIs', () => {
     React = require('react');
     ReactDOM = require('react-dom');
     ReactIs = require('react-is');
+
+    if (gate(flags => flags.enableSuspenseList)) {
+      SuspenseList = React.SuspenseList;
+    }
   });
 
   it('should return undefined for unknown/invalid types', () => {
@@ -186,10 +191,11 @@ describe('ReactIs', () => {
     expect(ReactIs.isSuspense(<div />)).toBe(false);
   });
 
+  // @gate enableSuspenseList
   it('should identify suspense list', () => {
-    expect(ReactIs.isValidElementType(React.SuspenseList)).toBe(true);
-    expect(ReactIs.typeOf(<React.SuspenseList />)).toBe(ReactIs.SuspenseList);
-    expect(ReactIs.isSuspenseList(<React.SuspenseList />)).toBe(true);
+    expect(ReactIs.isValidElementType(SuspenseList)).toBe(true);
+    expect(ReactIs.typeOf(<SuspenseList />)).toBe(ReactIs.SuspenseList);
+    expect(ReactIs.isSuspenseList(<SuspenseList />)).toBe(true);
     expect(ReactIs.isSuspenseList({type: ReactIs.SuspenseList})).toBe(false);
     expect(ReactIs.isSuspenseList('React.SuspenseList')).toBe(false);
     expect(ReactIs.isSuspenseList(<div />)).toBe(false);
diff --git a/packages/react-native-renderer/src/ReactFabric.js b/packages/react-native-renderer/src/ReactFabric.js
index 744c1c178397f..bf7754d6099c2 100644
--- a/packages/react-native-renderer/src/ReactFabric.js
+++ b/packages/react-native-renderer/src/ReactFabric.js
@@ -213,6 +213,7 @@ function render(
       null,
       false,
       null,
+      '',
     );
     roots.set(containerTag, root);
   }
diff --git a/packages/react-native-renderer/src/ReactNativeRenderer.js b/packages/react-native-renderer/src/ReactNativeRenderer.js
index a60683b47b2ee..fb539d8996811 100644
--- a/packages/react-native-renderer/src/ReactNativeRenderer.js
+++ b/packages/react-native-renderer/src/ReactNativeRenderer.js
@@ -202,7 +202,15 @@ function render(
   if (!root) {
     // TODO (bvaughn): If we decide to keep the wrapper component,
     // We could create a wrapper for containerTag as well to reduce special casing.
-    root = createContainer(containerTag, LegacyRoot, false, null, false, null);
+    root = createContainer(
+      containerTag,
+      LegacyRoot,
+      false,
+      null,
+      false,
+      null,
+      '',
+    );
     roots.set(containerTag, root);
   }
   updateContainer(element, root, null, callback);
diff --git a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager.js
index d4218ab247347..c0eb4c8317548 100644
--- a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager.js
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager.js
@@ -5,8 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-/* eslint-disable react-internal/invariant-args */
-
 'use strict';
 
 // Mock of the Native Hooks
diff --git a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactNativeViewConfigRegistry.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactNativeViewConfigRegistry.js
index ce0975ea950a5..dc1b818b34489 100644
--- a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactNativeViewConfigRegistry.js
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactNativeViewConfigRegistry.js
@@ -7,8 +7,6 @@
  * @flow strict-local
  */
 
-/* eslint-disable react-internal/invariant-args */
-
 'use strict';
 
 import type {
diff --git a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/UIManager.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/UIManager.js
index 346c4aa45c5f5..17ba978e8b37b 100644
--- a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/UIManager.js
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/UIManager.js
@@ -5,8 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-/* eslint-disable react-internal/invariant-args */
-
 'use strict';
 
 // Mock of the Native Hooks
diff --git a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
index 5b12d810bbe0f..20084731b5333 100644
--- a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
+++ b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
@@ -107,6 +107,14 @@ export function assignSuspenseBoundaryID(
   return responseState.nextSuspenseID++;
 }
 
+export function makeId(
+  responseState: ResponseState,
+  treeId: string,
+  localId: number,
+): string {
+  throw new Error('Not implemented');
+}
+
 const RAW_TEXT = stringToPrecomputedChunk('RCTRawText');
 
 export function pushTextInstance(
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index c5021d968939d..ef76b6610617f 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -973,6 +973,8 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
         false,
         null,
         null,
+        false,
+        '',
       );
       return {
         _Scheduler: Scheduler,
@@ -1000,6 +1002,8 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
         false,
         null,
         null,
+        false,
+        '',
       );
       return {
         _Scheduler: Scheduler,
diff --git a/packages/react-reconciler/src/ReactChildFiber.new.js b/packages/react-reconciler/src/ReactChildFiber.new.js
index 658b1f0e7b799..55246de7c59b7 100644
--- a/packages/react-reconciler/src/ReactChildFiber.new.js
+++ b/packages/react-reconciler/src/ReactChildFiber.new.js
@@ -492,7 +492,10 @@ function ChildReconciler(shouldTrackSideEffects) {
     newChild: any,
     lanes: Lanes,
   ): Fiber | null {
-    if (typeof newChild === 'string' || typeof newChild === 'number') {
+    if (
+      (typeof newChild === 'string' && newChild !== '') ||
+      typeof newChild === 'number'
+    ) {
       // Text nodes don't have keys. If the previous node is implicitly keyed
       // we can continue to replace it without aborting even if it is not a text
       // node.
@@ -568,7 +571,10 @@ function ChildReconciler(shouldTrackSideEffects) {
 
     const key = oldFiber !== null ? oldFiber.key : null;
 
-    if (typeof newChild === 'string' || typeof newChild === 'number') {
+    if (
+      (typeof newChild === 'string' && newChild !== '') ||
+      typeof newChild === 'number'
+    ) {
       // Text nodes don't have keys. If the previous node is implicitly keyed
       // we can continue to replace it without aborting even if it is not a text
       // node.
@@ -630,7 +636,10 @@ function ChildReconciler(shouldTrackSideEffects) {
     newChild: any,
     lanes: Lanes,
   ): Fiber | null {
-    if (typeof newChild === 'string' || typeof newChild === 'number') {
+    if (
+      (typeof newChild === 'string' && newChild !== '') ||
+      typeof newChild === 'number'
+    ) {
       // Text nodes don't have keys, so we neither have to check the old nor
       // new node for the key. If both are text nodes, they match.
       const matchedFiber = existingChildren.get(newIdx) || null;
@@ -1327,7 +1336,10 @@ function ChildReconciler(shouldTrackSideEffects) {
       throwOnInvalidObjectType(returnFiber, newChild);
     }
 
-    if (typeof newChild === 'string' || typeof newChild === 'number') {
+    if (
+      (typeof newChild === 'string' && newChild !== '') ||
+      typeof newChild === 'number'
+    ) {
       return placeSingleChild(
         reconcileSingleTextNode(
           returnFiber,
diff --git a/packages/react-reconciler/src/ReactChildFiber.old.js b/packages/react-reconciler/src/ReactChildFiber.old.js
index 0ef3b301e95a7..ae45c2eadcfa1 100644
--- a/packages/react-reconciler/src/ReactChildFiber.old.js
+++ b/packages/react-reconciler/src/ReactChildFiber.old.js
@@ -492,7 +492,10 @@ function ChildReconciler(shouldTrackSideEffects) {
     newChild: any,
     lanes: Lanes,
   ): Fiber | null {
-    if (typeof newChild === 'string' || typeof newChild === 'number') {
+    if (
+      (typeof newChild === 'string' && newChild !== '') ||
+      typeof newChild === 'number'
+    ) {
       // Text nodes don't have keys. If the previous node is implicitly keyed
       // we can continue to replace it without aborting even if it is not a text
       // node.
@@ -568,7 +571,10 @@ function ChildReconciler(shouldTrackSideEffects) {
 
     const key = oldFiber !== null ? oldFiber.key : null;
 
-    if (typeof newChild === 'string' || typeof newChild === 'number') {
+    if (
+      (typeof newChild === 'string' && newChild !== '') ||
+      typeof newChild === 'number'
+    ) {
       // Text nodes don't have keys. If the previous node is implicitly keyed
       // we can continue to replace it without aborting even if it is not a text
       // node.
@@ -630,7 +636,10 @@ function ChildReconciler(shouldTrackSideEffects) {
     newChild: any,
     lanes: Lanes,
   ): Fiber | null {
-    if (typeof newChild === 'string' || typeof newChild === 'number') {
+    if (
+      (typeof newChild === 'string' && newChild !== '') ||
+      typeof newChild === 'number'
+    ) {
       // Text nodes don't have keys, so we neither have to check the old nor
       // new node for the key. If both are text nodes, they match.
       const matchedFiber = existingChildren.get(newIdx) || null;
@@ -1327,7 +1336,10 @@ function ChildReconciler(shouldTrackSideEffects) {
       throwOnInvalidObjectType(returnFiber, newChild);
     }
 
-    if (typeof newChild === 'string' || typeof newChild === 'number') {
+    if (
+      (typeof newChild === 'string' && newChild !== '') ||
+      typeof newChild === 'number'
+    ) {
       return placeSingleChild(
         reconcileSingleTextNode(
           returnFiber,
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index feb38f00461a0..5805ffe8da769 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -884,7 +884,7 @@ function completeWork(
           // Schedule an effect to clear this container at the start of the next commit.
           // This handles the case of React rendering into a container with previous children.
           // It's also safe to do for updates too, because current.child would only be null
-          // if the previous render was null (so the the container would already be empty).
+          // if the previous render was null (so the container would already be empty).
           workInProgress.flags |= Snapshot;
         }
       }
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index ea4d71e8ba371..c5eb5f70f48d6 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -884,7 +884,7 @@ function completeWork(
           // Schedule an effect to clear this container at the start of the next commit.
           // This handles the case of React rendering into a container with previous children.
           // It's also safe to do for updates too, because current.child would only be null
-          // if the previous render was null (so the the container would already be empty).
+          // if the previous render was null (so the container would already be empty).
           workInProgress.flags |= Snapshot;
         }
       }
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 2ea341864642c..2c26859bafe70 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -2035,12 +2035,20 @@ export function getIsUpdatingOpaqueValueInRenderPhaseInDEV(): boolean | void {
 function mountId(): string {
   const hook = mountWorkInProgressHook();
 
+  const root = ((getWorkInProgressRoot(): any): FiberRoot);
+  // TODO: In Fizz, id generation is specific to each server config. Maybe we
+  // should do this in Fiber, too? Deferring this decision for now because
+  // there's no other place to store the prefix except for an internal field on
+  // the public createRoot object, which the fiber tree does not currently have
+  // a reference to.
+  const identifierPrefix = root.identifierPrefix;
+
   let id;
   if (getIsHydrating()) {
     const treeId = getTreeId();
 
     // Use a captial R prefix for server-generated ids.
-    id = 'R:' + treeId;
+    id = identifierPrefix + 'R:' + treeId;
 
     // Unless this is the first id at this level, append a number at the end
     // that represents the position of this useId hook among all the useId
@@ -2052,7 +2060,7 @@ function mountId(): string {
   } else {
     // Use a lowercase r prefix for client-generated ids.
     const globalClientId = globalClientIdCounter++;
-    id = 'r:' + globalClientId.toString(32);
+    id = identifierPrefix + 'r:' + globalClientId.toString(32);
   }
 
   hook.memoizedState = id;
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index ff6a9f652fb4d..077073bbeef3c 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -2035,12 +2035,20 @@ export function getIsUpdatingOpaqueValueInRenderPhaseInDEV(): boolean | void {
 function mountId(): string {
   const hook = mountWorkInProgressHook();
 
+  const root = ((getWorkInProgressRoot(): any): FiberRoot);
+  // TODO: In Fizz, id generation is specific to each server config. Maybe we
+  // should do this in Fiber, too? Deferring this decision for now because
+  // there's no other place to store the prefix except for an internal field on
+  // the public createRoot object, which the fiber tree does not currently have
+  // a reference to.
+  const identifierPrefix = root.identifierPrefix;
+
   let id;
   if (getIsHydrating()) {
     const treeId = getTreeId();
 
     // Use a captial R prefix for server-generated ids.
-    id = 'R:' + treeId;
+    id = identifierPrefix + 'R:' + treeId;
 
     // Unless this is the first id at this level, append a number at the end
     // that represents the position of this useId hook among all the useId
@@ -2052,7 +2060,7 @@ function mountId(): string {
   } else {
     // Use a lowercase r prefix for client-generated ids.
     const globalClientId = globalClientIdCounter++;
-    id = 'r:' + globalClientId.toString(32);
+    id = identifierPrefix + 'r:' + globalClientId.toString(32);
   }
 
   hook.memoizedState = id;
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
index eabc5e43116bb..614c6c9d946ca 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
@@ -8,6 +8,7 @@
  */
 
 import type {Fiber} from './ReactInternalTypes';
+import {NoMode, ConcurrentMode} from './ReactTypeOfMode';
 import type {
   Instance,
   TextInstance,
@@ -61,7 +62,10 @@ import {
   didNotFindHydratableTextInstance,
   didNotFindHydratableSuspenseInstance,
 } from './ReactFiberHostConfig';
-import {enableSuspenseServerRenderer} from 'shared/ReactFeatureFlags';
+import {
+  enableClientRenderFallbackOnHydrationMismatch,
+  enableSuspenseServerRenderer,
+} from 'shared/ReactFeatureFlags';
 import {OffscreenLane} from './ReactFiberLane.new';
 import {
   getSuspendedTreeContext,
@@ -323,12 +327,24 @@ function tryHydrate(fiber, nextInstance) {
   }
 }
 
+function throwOnHydrationMismatchIfConcurrentMode(fiber: Fiber) {
+  if (
+    enableClientRenderFallbackOnHydrationMismatch &&
+    (fiber.mode & ConcurrentMode) !== NoMode
+  ) {
+    throw new Error(
+      'An error occurred during hydration. The server HTML was replaced with client content',
+    );
+  }
+}
+
 function tryToClaimNextHydratableInstance(fiber: Fiber): void {
   if (!isHydrating) {
     return;
   }
   let nextInstance = nextHydratableInstance;
   if (!nextInstance) {
+    throwOnHydrationMismatchIfConcurrentMode(fiber);
     // Nothing to hydrate. Make it an insertion.
     insertNonHydratedInstance((hydrationParentFiber: any), fiber);
     isHydrating = false;
@@ -337,6 +353,7 @@ function tryToClaimNextHydratableInstance(fiber: Fiber): void {
   }
   const firstAttemptedInstance = nextInstance;
   if (!tryHydrate(fiber, nextInstance)) {
+    throwOnHydrationMismatchIfConcurrentMode(fiber);
     // If we can't hydrate this instance let's try the next one.
     // We use this as a heuristic. It's based on intuition and not data so it
     // might be flawed or unnecessary.
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
index 48e60581e0f28..b7bca8217d979 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
@@ -8,6 +8,7 @@
  */
 
 import type {Fiber} from './ReactInternalTypes';
+import {NoMode, ConcurrentMode} from './ReactTypeOfMode';
 import type {
   Instance,
   TextInstance,
@@ -61,7 +62,10 @@ import {
   didNotFindHydratableTextInstance,
   didNotFindHydratableSuspenseInstance,
 } from './ReactFiberHostConfig';
-import {enableSuspenseServerRenderer} from 'shared/ReactFeatureFlags';
+import {
+  enableClientRenderFallbackOnHydrationMismatch,
+  enableSuspenseServerRenderer,
+} from 'shared/ReactFeatureFlags';
 import {OffscreenLane} from './ReactFiberLane.old';
 import {
   getSuspendedTreeContext,
@@ -323,12 +327,24 @@ function tryHydrate(fiber, nextInstance) {
   }
 }
 
+function throwOnHydrationMismatchIfConcurrentMode(fiber: Fiber) {
+  if (
+    enableClientRenderFallbackOnHydrationMismatch &&
+    (fiber.mode & ConcurrentMode) !== NoMode
+  ) {
+    throw new Error(
+      'An error occurred during hydration. The server HTML was replaced with client content',
+    );
+  }
+}
+
 function tryToClaimNextHydratableInstance(fiber: Fiber): void {
   if (!isHydrating) {
     return;
   }
   let nextInstance = nextHydratableInstance;
   if (!nextInstance) {
+    throwOnHydrationMismatchIfConcurrentMode(fiber);
     // Nothing to hydrate. Make it an insertion.
     insertNonHydratedInstance((hydrationParentFiber: any), fiber);
     isHydrating = false;
@@ -337,6 +353,7 @@ function tryToClaimNextHydratableInstance(fiber: Fiber): void {
   }
   const firstAttemptedInstance = nextInstance;
   if (!tryHydrate(fiber, nextInstance)) {
+    throwOnHydrationMismatchIfConcurrentMode(fiber);
     // If we can't hydrate this instance let's try the next one.
     // We use this as a heuristic. It's based on intuition and not data so it
     // might be flawed or unnecessary.
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index 6c42165a30347..1b8b9502de3ee 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -241,6 +241,7 @@ export function createContainer(
   hydrationCallbacks: null | SuspenseHydrationCallbacks,
   isStrictMode: boolean,
   concurrentUpdatesByDefaultOverride: null | boolean,
+  identifierPrefix: string,
 ): OpaqueRoot {
   return createFiberRoot(
     containerInfo,
@@ -249,6 +250,7 @@ export function createContainer(
     hydrationCallbacks,
     isStrictMode,
     concurrentUpdatesByDefaultOverride,
+    identifierPrefix,
   );
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index 7693cc7fe4006..8649ff6989841 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -241,6 +241,7 @@ export function createContainer(
   hydrationCallbacks: null | SuspenseHydrationCallbacks,
   isStrictMode: boolean,
   concurrentUpdatesByDefaultOverride: null | boolean,
+  identifierPrefix: string,
 ): OpaqueRoot {
   return createFiberRoot(
     containerInfo,
@@ -249,6 +250,7 @@ export function createContainer(
     hydrationCallbacks,
     isStrictMode,
     concurrentUpdatesByDefaultOverride,
+    identifierPrefix,
   );
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberRoot.new.js b/packages/react-reconciler/src/ReactFiberRoot.new.js
index 803adee1e22dd..9e9feb45d9b03 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.new.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.new.js
@@ -30,7 +30,7 @@ import {initializeUpdateQueue} from './ReactUpdateQueue.new';
 import {LegacyRoot, ConcurrentRoot} from './ReactRootTags';
 import {createCache, retainCache} from './ReactFiberCacheComponent.new';
 
-function FiberRootNode(containerInfo, tag, hydrate) {
+function FiberRootNode(containerInfo, tag, hydrate, identifierPrefix) {
   this.tag = tag;
   this.containerInfo = containerInfo;
   this.pendingChildren = null;
@@ -56,6 +56,8 @@ function FiberRootNode(containerInfo, tag, hydrate) {
   this.entangledLanes = NoLanes;
   this.entanglements = createLaneMap(NoLanes);
 
+  this.identifierPrefix = identifierPrefix;
+
   if (enableCache) {
     this.pooledCache = null;
     this.pooledCacheLanes = NoLanes;
@@ -101,8 +103,14 @@ export function createFiberRoot(
   hydrationCallbacks: null | SuspenseHydrationCallbacks,
   isStrictMode: boolean,
   concurrentUpdatesByDefaultOverride: null | boolean,
+  identifierPrefix: string,
 ): FiberRoot {
-  const root: FiberRoot = (new FiberRootNode(containerInfo, tag, hydrate): any);
+  const root: FiberRoot = (new FiberRootNode(
+    containerInfo,
+    tag,
+    hydrate,
+    identifierPrefix,
+  ): any);
   if (enableSuspenseCallback) {
     root.hydrationCallbacks = hydrationCallbacks;
   }
diff --git a/packages/react-reconciler/src/ReactFiberRoot.old.js b/packages/react-reconciler/src/ReactFiberRoot.old.js
index 504dac966ef22..d8d061297854f 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.old.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.old.js
@@ -30,7 +30,7 @@ import {initializeUpdateQueue} from './ReactUpdateQueue.old';
 import {LegacyRoot, ConcurrentRoot} from './ReactRootTags';
 import {createCache, retainCache} from './ReactFiberCacheComponent.old';
 
-function FiberRootNode(containerInfo, tag, hydrate) {
+function FiberRootNode(containerInfo, tag, hydrate, identifierPrefix) {
   this.tag = tag;
   this.containerInfo = containerInfo;
   this.pendingChildren = null;
@@ -56,6 +56,8 @@ function FiberRootNode(containerInfo, tag, hydrate) {
   this.entangledLanes = NoLanes;
   this.entanglements = createLaneMap(NoLanes);
 
+  this.identifierPrefix = identifierPrefix;
+
   if (enableCache) {
     this.pooledCache = null;
     this.pooledCacheLanes = NoLanes;
@@ -101,8 +103,14 @@ export function createFiberRoot(
   hydrationCallbacks: null | SuspenseHydrationCallbacks,
   isStrictMode: boolean,
   concurrentUpdatesByDefaultOverride: null | boolean,
+  identifierPrefix: string,
 ): FiberRoot {
-  const root: FiberRoot = (new FiberRootNode(containerInfo, tag, hydrate): any);
+  const root: FiberRoot = (new FiberRootNode(
+    containerInfo,
+    tag,
+    hydrate,
+    identifierPrefix,
+  ): any);
   if (enableSuspenseCallback) {
     root.hydrationCallbacks = hydrationCallbacks;
   }
diff --git a/packages/react-reconciler/src/ReactFiberThrow.new.js b/packages/react-reconciler/src/ReactFiberThrow.new.js
index 85728d96bb730..cd9931687ba5a 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.new.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.new.js
@@ -268,158 +268,157 @@ function resetSuspendedComponent(sourceFiber: Fiber, rootRenderLanes: Lanes) {
   }
 }
 
-function markNearestSuspenseBoundaryShouldCapture(
-  returnFiber: Fiber,
-  sourceFiber: Fiber,
-  root: FiberRoot,
-  rootRenderLanes: Lanes,
-): Fiber | null {
+function getNearestSuspenseBoundaryToCapture(returnFiber: Fiber) {
+  let node = returnFiber;
   const hasInvisibleParentBoundary = hasSuspenseContext(
     suspenseStackCursor.current,
     (InvisibleParentSuspenseContext: SuspenseContext),
   );
-  let node = returnFiber;
   do {
     if (
       node.tag === SuspenseComponent &&
       shouldCaptureSuspense(node, hasInvisibleParentBoundary)
     ) {
-      // Found the nearest boundary.
-      const suspenseBoundary = node;
-
-      // This marks a Suspense boundary so that when we're unwinding the stack,
-      // it captures the suspended "exception" and does a second (fallback) pass.
-
-      if ((suspenseBoundary.mode & ConcurrentMode) === NoMode) {
-        // Legacy Mode Suspense
-        //
-        // If the boundary is in legacy mode, we should *not*
-        // suspend the commit. Pretend as if the suspended component rendered
-        // null and keep rendering. When the Suspense boundary completes,
-        // we'll do a second pass to render the fallback.
-        if (suspenseBoundary === returnFiber) {
-          // Special case where we suspended while reconciling the children of
-          // a Suspense boundary's inner Offscreen wrapper fiber. This happens
-          // when a React.lazy component is a direct child of a
-          // Suspense boundary.
-          //
-          // Suspense boundaries are implemented as multiple fibers, but they
-          // are a single conceptual unit. The legacy mode behavior where we
-          // pretend the suspended fiber committed as `null` won't work,
-          // because in this case the "suspended" fiber is the inner
-          // Offscreen wrapper.
-          //
-          // Because the contents of the boundary haven't started rendering
-          // yet (i.e. nothing in the tree has partially rendered) we can
-          // switch to the regular, concurrent mode behavior: mark the
-          // boundary with ShouldCapture and enter the unwind phase.
-          suspenseBoundary.flags |= ShouldCapture;
-        } else {
-          suspenseBoundary.flags |= DidCapture;
-          sourceFiber.flags |= ForceUpdateForLegacySuspense;
+      return node;
+    }
+    // This boundary already captured during this render. Continue to the next
+    // boundary.
+    node = node.return;
+  } while (node !== null);
+  return null;
+}
 
-          // We're going to commit this fiber even though it didn't complete.
-          // But we shouldn't call any lifecycle methods or callbacks. Remove
-          // all lifecycle effect tags.
-          sourceFiber.flags &= ~(LifecycleEffectMask | Incomplete);
+function markSuspenseBoundaryShouldCapture(
+  suspenseBoundary: Fiber,
+  returnFiber: Fiber,
+  sourceFiber: Fiber,
+  root: FiberRoot,
+  rootRenderLanes: Lanes,
+): Fiber | null {
+  // This marks a Suspense boundary so that when we're unwinding the stack,
+  // it captures the suspended "exception" and does a second (fallback) pass.
+  if ((suspenseBoundary.mode & ConcurrentMode) === NoMode) {
+    // Legacy Mode Suspense
+    //
+    // If the boundary is in legacy mode, we should *not*
+    // suspend the commit. Pretend as if the suspended component rendered
+    // null and keep rendering. When the Suspense boundary completes,
+    // we'll do a second pass to render the fallback.
+    if (suspenseBoundary === returnFiber) {
+      // Special case where we suspended while reconciling the children of
+      // a Suspense boundary's inner Offscreen wrapper fiber. This happens
+      // when a React.lazy component is a direct child of a
+      // Suspense boundary.
+      //
+      // Suspense boundaries are implemented as multiple fibers, but they
+      // are a single conceptual unit. The legacy mode behavior where we
+      // pretend the suspended fiber committed as `null` won't work,
+      // because in this case the "suspended" fiber is the inner
+      // Offscreen wrapper.
+      //
+      // Because the contents of the boundary haven't started rendering
+      // yet (i.e. nothing in the tree has partially rendered) we can
+      // switch to the regular, concurrent mode behavior: mark the
+      // boundary with ShouldCapture and enter the unwind phase.
+      suspenseBoundary.flags |= ShouldCapture;
+    } else {
+      suspenseBoundary.flags |= DidCapture;
+      sourceFiber.flags |= ForceUpdateForLegacySuspense;
 
-          if (supportsPersistence && enablePersistentOffscreenHostContainer) {
-            // Another legacy Suspense quirk. In persistent mode, if this is the
-            // initial mount, override the props of the host container to hide
-            // its contents.
-            const currentSuspenseBoundary = suspenseBoundary.alternate;
-            if (currentSuspenseBoundary === null) {
-              const offscreenFiber: Fiber = (suspenseBoundary.child: any);
-              const offscreenContainer = offscreenFiber.child;
-              if (offscreenContainer !== null) {
-                const children = offscreenContainer.memoizedProps.children;
-                const containerProps = getOffscreenContainerProps(
-                  'hidden',
-                  children,
-                );
-                offscreenContainer.pendingProps = containerProps;
-                offscreenContainer.memoizedProps = containerProps;
-              }
-            }
-          }
+      // We're going to commit this fiber even though it didn't complete.
+      // But we shouldn't call any lifecycle methods or callbacks. Remove
+      // all lifecycle effect tags.
+      sourceFiber.flags &= ~(LifecycleEffectMask | Incomplete);
 
-          if (sourceFiber.tag === ClassComponent) {
-            const currentSourceFiber = sourceFiber.alternate;
-            if (currentSourceFiber === null) {
-              // This is a new mount. Change the tag so it's not mistaken for a
-              // completed class component. For example, we should not call
-              // componentWillUnmount if it is deleted.
-              sourceFiber.tag = IncompleteClassComponent;
-            } else {
-              // When we try rendering again, we should not reuse the current fiber,
-              // since it's known to be in an inconsistent state. Use a force update to
-              // prevent a bail out.
-              const update = createUpdate(NoTimestamp, SyncLane);
-              update.tag = ForceUpdate;
-              enqueueUpdate(sourceFiber, update, SyncLane);
-            }
+      if (supportsPersistence && enablePersistentOffscreenHostContainer) {
+        // Another legacy Suspense quirk. In persistent mode, if this is the
+        // initial mount, override the props of the host container to hide
+        // its contents.
+        const currentSuspenseBoundary = suspenseBoundary.alternate;
+        if (currentSuspenseBoundary === null) {
+          const offscreenFiber: Fiber = (suspenseBoundary.child: any);
+          const offscreenContainer = offscreenFiber.child;
+          if (offscreenContainer !== null) {
+            const children = offscreenContainer.memoizedProps.children;
+            const containerProps = getOffscreenContainerProps(
+              'hidden',
+              children,
+            );
+            offscreenContainer.pendingProps = containerProps;
+            offscreenContainer.memoizedProps = containerProps;
           }
+        }
+      }
 
-          // The source fiber did not complete. Mark it with Sync priority to
-          // indicate that it still has pending work.
-          sourceFiber.lanes = mergeLanes(sourceFiber.lanes, SyncLane);
+      if (sourceFiber.tag === ClassComponent) {
+        const currentSourceFiber = sourceFiber.alternate;
+        if (currentSourceFiber === null) {
+          // This is a new mount. Change the tag so it's not mistaken for a
+          // completed class component. For example, we should not call
+          // componentWillUnmount if it is deleted.
+          sourceFiber.tag = IncompleteClassComponent;
+        } else {
+          // When we try rendering again, we should not reuse the current fiber,
+          // since it's known to be in an inconsistent state. Use a force update to
+          // prevent a bail out.
+          const update = createUpdate(NoTimestamp, SyncLane);
+          update.tag = ForceUpdate;
+          enqueueUpdate(sourceFiber, update, SyncLane);
         }
-        return suspenseBoundary;
       }
-      // Confirmed that the boundary is in a concurrent mode tree. Continue
-      // with the normal suspend path.
-      //
-      // After this we'll use a set of heuristics to determine whether this
-      // render pass will run to completion or restart or "suspend" the commit.
-      // The actual logic for this is spread out in different places.
-      //
-      // This first principle is that if we're going to suspend when we complete
-      // a root, then we should also restart if we get an update or ping that
-      // might unsuspend it, and vice versa. The only reason to suspend is
-      // because you think you might want to restart before committing. However,
-      // it doesn't make sense to restart only while in the period we're suspended.
-      //
-      // Restarting too aggressively is also not good because it starves out any
-      // intermediate loading state. So we use heuristics to determine when.
 
-      // Suspense Heuristics
-      //
-      // If nothing threw a Promise or all the same fallbacks are already showing,
-      // then don't suspend/restart.
-      //
-      // If this is an initial render of a new tree of Suspense boundaries and
-      // those trigger a fallback, then don't suspend/restart. We want to ensure
-      // that we can show the initial loading state as quickly as possible.
-      //
-      // If we hit a "Delayed" case, such as when we'd switch from content back into
-      // a fallback, then we should always suspend/restart. Transitions apply
-      // to this case. If none is defined, JND is used instead.
-      //
-      // If we're already showing a fallback and it gets "retried", allowing us to show
-      // another level, but there's still an inner boundary that would show a fallback,
-      // then we suspend/restart for 500ms since the last time we showed a fallback
-      // anywhere in the tree. This effectively throttles progressive loading into a
-      // consistent train of commits. This also gives us an opportunity to restart to
-      // get to the completed state slightly earlier.
-      //
-      // If there's ambiguity due to batching it's resolved in preference of:
-      // 1) "delayed", 2) "initial render", 3) "retry".
-      //
-      // We want to ensure that a "busy" state doesn't get force committed. We want to
-      // ensure that new initial loading states can commit as soon as possible.
-      suspenseBoundary.flags |= ShouldCapture;
-      // TODO: I think we can remove this, since we now use `DidCapture` in
-      // the begin phase to prevent an early bailout.
-      suspenseBoundary.lanes = rootRenderLanes;
-      return suspenseBoundary;
+      // The source fiber did not complete. Mark it with Sync priority to
+      // indicate that it still has pending work.
+      sourceFiber.lanes = mergeLanes(sourceFiber.lanes, SyncLane);
     }
-    // This boundary already captured during this render. Continue to the next
-    // boundary.
-    node = node.return;
-  } while (node !== null);
+    return suspenseBoundary;
+  }
+  // Confirmed that the boundary is in a concurrent mode tree. Continue
+  // with the normal suspend path.
+  //
+  // After this we'll use a set of heuristics to determine whether this
+  // render pass will run to completion or restart or "suspend" the commit.
+  // The actual logic for this is spread out in different places.
+  //
+  // This first principle is that if we're going to suspend when we complete
+  // a root, then we should also restart if we get an update or ping that
+  // might unsuspend it, and vice versa. The only reason to suspend is
+  // because you think you might want to restart before committing. However,
+  // it doesn't make sense to restart only while in the period we're suspended.
+  //
+  // Restarting too aggressively is also not good because it starves out any
+  // intermediate loading state. So we use heuristics to determine when.
 
-  // Could not find a Suspense boundary capable of capturing.
-  return null;
+  // Suspense Heuristics
+  //
+  // If nothing threw a Promise or all the same fallbacks are already showing,
+  // then don't suspend/restart.
+  //
+  // If this is an initial render of a new tree of Suspense boundaries and
+  // those trigger a fallback, then don't suspend/restart. We want to ensure
+  // that we can show the initial loading state as quickly as possible.
+  //
+  // If we hit a "Delayed" case, such as when we'd switch from content back into
+  // a fallback, then we should always suspend/restart. Transitions apply
+  // to this case. If none is defined, JND is used instead.
+  //
+  // If we're already showing a fallback and it gets "retried", allowing us to show
+  // another level, but there's still an inner boundary that would show a fallback,
+  // then we suspend/restart for 500ms since the last time we showed a fallback
+  // anywhere in the tree. This effectively throttles progressive loading into a
+  // consistent train of commits. This also gives us an opportunity to restart to
+  // get to the completed state slightly earlier.
+  //
+  // If there's ambiguity due to batching it's resolved in preference of:
+  // 1) "delayed", 2) "initial render", 3) "retry".
+  //
+  // We want to ensure that a "busy" state doesn't get force committed. We want to
+  // ensure that new initial loading states can commit as soon as possible.
+  suspenseBoundary.flags |= ShouldCapture;
+  // TODO: I think we can remove this, since we now use `DidCapture` in
+  // the begin phase to prevent an early bailout.
+  suspenseBoundary.lanes = rootRenderLanes;
+  return suspenseBoundary;
 }
 
 function throwException(
@@ -458,13 +457,16 @@ function throwException(
     }
 
     // Schedule the nearest Suspense to re-render the timed out view.
-    const suspenseBoundary = markNearestSuspenseBoundaryShouldCapture(
-      returnFiber,
-      sourceFiber,
-      root,
-      rootRenderLanes,
-    );
+    const suspenseBoundary = getNearestSuspenseBoundaryToCapture(returnFiber);
     if (suspenseBoundary !== null) {
+      suspenseBoundary.flags &= ~ForceClientRender;
+      markSuspenseBoundaryShouldCapture(
+        suspenseBoundary,
+        returnFiber,
+        sourceFiber,
+        root,
+        rootRenderLanes,
+      );
       attachWakeableListeners(
         suspenseBoundary,
         root,
@@ -487,20 +489,24 @@ function throwException(
   } else {
     // This is a regular error, not a Suspense wakeable.
     if (getIsHydrating() && sourceFiber.mode & ConcurrentMode) {
+      const suspenseBoundary = getNearestSuspenseBoundaryToCapture(returnFiber);
       // If the error was thrown during hydration, we may be able to recover by
       // discarding the dehydrated content and switching to a client render.
       // Instead of surfacing the error, find the nearest Suspense boundary
       // and render it again without hydration.
-      const suspenseBoundary = markNearestSuspenseBoundaryShouldCapture(
-        returnFiber,
-        sourceFiber,
-        root,
-        rootRenderLanes,
-      );
       if (suspenseBoundary !== null) {
-        // Set a flag to indicate that we should try rendering the normal
-        // children again, not the fallback.
-        suspenseBoundary.flags |= ForceClientRender;
+        if ((suspenseBoundary.flags & ShouldCapture) === NoFlags) {
+          // Set a flag to indicate that we should try rendering the normal
+          // children again, not the fallback.
+          suspenseBoundary.flags |= ForceClientRender;
+        }
+        markSuspenseBoundaryShouldCapture(
+          suspenseBoundary,
+          returnFiber,
+          sourceFiber,
+          root,
+          rootRenderLanes,
+        );
         return;
       }
     } else {
diff --git a/packages/react-reconciler/src/ReactFiberThrow.old.js b/packages/react-reconciler/src/ReactFiberThrow.old.js
index 27b0719ba8532..8f6d18a48dea3 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.old.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.old.js
@@ -268,158 +268,157 @@ function resetSuspendedComponent(sourceFiber: Fiber, rootRenderLanes: Lanes) {
   }
 }
 
-function markNearestSuspenseBoundaryShouldCapture(
-  returnFiber: Fiber,
-  sourceFiber: Fiber,
-  root: FiberRoot,
-  rootRenderLanes: Lanes,
-): Fiber | null {
+function getNearestSuspenseBoundaryToCapture(returnFiber: Fiber) {
+  let node = returnFiber;
   const hasInvisibleParentBoundary = hasSuspenseContext(
     suspenseStackCursor.current,
     (InvisibleParentSuspenseContext: SuspenseContext),
   );
-  let node = returnFiber;
   do {
     if (
       node.tag === SuspenseComponent &&
       shouldCaptureSuspense(node, hasInvisibleParentBoundary)
     ) {
-      // Found the nearest boundary.
-      const suspenseBoundary = node;
-
-      // This marks a Suspense boundary so that when we're unwinding the stack,
-      // it captures the suspended "exception" and does a second (fallback) pass.
-
-      if ((suspenseBoundary.mode & ConcurrentMode) === NoMode) {
-        // Legacy Mode Suspense
-        //
-        // If the boundary is in legacy mode, we should *not*
-        // suspend the commit. Pretend as if the suspended component rendered
-        // null and keep rendering. When the Suspense boundary completes,
-        // we'll do a second pass to render the fallback.
-        if (suspenseBoundary === returnFiber) {
-          // Special case where we suspended while reconciling the children of
-          // a Suspense boundary's inner Offscreen wrapper fiber. This happens
-          // when a React.lazy component is a direct child of a
-          // Suspense boundary.
-          //
-          // Suspense boundaries are implemented as multiple fibers, but they
-          // are a single conceptual unit. The legacy mode behavior where we
-          // pretend the suspended fiber committed as `null` won't work,
-          // because in this case the "suspended" fiber is the inner
-          // Offscreen wrapper.
-          //
-          // Because the contents of the boundary haven't started rendering
-          // yet (i.e. nothing in the tree has partially rendered) we can
-          // switch to the regular, concurrent mode behavior: mark the
-          // boundary with ShouldCapture and enter the unwind phase.
-          suspenseBoundary.flags |= ShouldCapture;
-        } else {
-          suspenseBoundary.flags |= DidCapture;
-          sourceFiber.flags |= ForceUpdateForLegacySuspense;
+      return node;
+    }
+    // This boundary already captured during this render. Continue to the next
+    // boundary.
+    node = node.return;
+  } while (node !== null);
+  return null;
+}
 
-          // We're going to commit this fiber even though it didn't complete.
-          // But we shouldn't call any lifecycle methods or callbacks. Remove
-          // all lifecycle effect tags.
-          sourceFiber.flags &= ~(LifecycleEffectMask | Incomplete);
+function markSuspenseBoundaryShouldCapture(
+  suspenseBoundary: Fiber,
+  returnFiber: Fiber,
+  sourceFiber: Fiber,
+  root: FiberRoot,
+  rootRenderLanes: Lanes,
+): Fiber | null {
+  // This marks a Suspense boundary so that when we're unwinding the stack,
+  // it captures the suspended "exception" and does a second (fallback) pass.
+  if ((suspenseBoundary.mode & ConcurrentMode) === NoMode) {
+    // Legacy Mode Suspense
+    //
+    // If the boundary is in legacy mode, we should *not*
+    // suspend the commit. Pretend as if the suspended component rendered
+    // null and keep rendering. When the Suspense boundary completes,
+    // we'll do a second pass to render the fallback.
+    if (suspenseBoundary === returnFiber) {
+      // Special case where we suspended while reconciling the children of
+      // a Suspense boundary's inner Offscreen wrapper fiber. This happens
+      // when a React.lazy component is a direct child of a
+      // Suspense boundary.
+      //
+      // Suspense boundaries are implemented as multiple fibers, but they
+      // are a single conceptual unit. The legacy mode behavior where we
+      // pretend the suspended fiber committed as `null` won't work,
+      // because in this case the "suspended" fiber is the inner
+      // Offscreen wrapper.
+      //
+      // Because the contents of the boundary haven't started rendering
+      // yet (i.e. nothing in the tree has partially rendered) we can
+      // switch to the regular, concurrent mode behavior: mark the
+      // boundary with ShouldCapture and enter the unwind phase.
+      suspenseBoundary.flags |= ShouldCapture;
+    } else {
+      suspenseBoundary.flags |= DidCapture;
+      sourceFiber.flags |= ForceUpdateForLegacySuspense;
 
-          if (supportsPersistence && enablePersistentOffscreenHostContainer) {
-            // Another legacy Suspense quirk. In persistent mode, if this is the
-            // initial mount, override the props of the host container to hide
-            // its contents.
-            const currentSuspenseBoundary = suspenseBoundary.alternate;
-            if (currentSuspenseBoundary === null) {
-              const offscreenFiber: Fiber = (suspenseBoundary.child: any);
-              const offscreenContainer = offscreenFiber.child;
-              if (offscreenContainer !== null) {
-                const children = offscreenContainer.memoizedProps.children;
-                const containerProps = getOffscreenContainerProps(
-                  'hidden',
-                  children,
-                );
-                offscreenContainer.pendingProps = containerProps;
-                offscreenContainer.memoizedProps = containerProps;
-              }
-            }
-          }
+      // We're going to commit this fiber even though it didn't complete.
+      // But we shouldn't call any lifecycle methods or callbacks. Remove
+      // all lifecycle effect tags.
+      sourceFiber.flags &= ~(LifecycleEffectMask | Incomplete);
 
-          if (sourceFiber.tag === ClassComponent) {
-            const currentSourceFiber = sourceFiber.alternate;
-            if (currentSourceFiber === null) {
-              // This is a new mount. Change the tag so it's not mistaken for a
-              // completed class component. For example, we should not call
-              // componentWillUnmount if it is deleted.
-              sourceFiber.tag = IncompleteClassComponent;
-            } else {
-              // When we try rendering again, we should not reuse the current fiber,
-              // since it's known to be in an inconsistent state. Use a force update to
-              // prevent a bail out.
-              const update = createUpdate(NoTimestamp, SyncLane);
-              update.tag = ForceUpdate;
-              enqueueUpdate(sourceFiber, update, SyncLane);
-            }
+      if (supportsPersistence && enablePersistentOffscreenHostContainer) {
+        // Another legacy Suspense quirk. In persistent mode, if this is the
+        // initial mount, override the props of the host container to hide
+        // its contents.
+        const currentSuspenseBoundary = suspenseBoundary.alternate;
+        if (currentSuspenseBoundary === null) {
+          const offscreenFiber: Fiber = (suspenseBoundary.child: any);
+          const offscreenContainer = offscreenFiber.child;
+          if (offscreenContainer !== null) {
+            const children = offscreenContainer.memoizedProps.children;
+            const containerProps = getOffscreenContainerProps(
+              'hidden',
+              children,
+            );
+            offscreenContainer.pendingProps = containerProps;
+            offscreenContainer.memoizedProps = containerProps;
           }
+        }
+      }
 
-          // The source fiber did not complete. Mark it with Sync priority to
-          // indicate that it still has pending work.
-          sourceFiber.lanes = mergeLanes(sourceFiber.lanes, SyncLane);
+      if (sourceFiber.tag === ClassComponent) {
+        const currentSourceFiber = sourceFiber.alternate;
+        if (currentSourceFiber === null) {
+          // This is a new mount. Change the tag so it's not mistaken for a
+          // completed class component. For example, we should not call
+          // componentWillUnmount if it is deleted.
+          sourceFiber.tag = IncompleteClassComponent;
+        } else {
+          // When we try rendering again, we should not reuse the current fiber,
+          // since it's known to be in an inconsistent state. Use a force update to
+          // prevent a bail out.
+          const update = createUpdate(NoTimestamp, SyncLane);
+          update.tag = ForceUpdate;
+          enqueueUpdate(sourceFiber, update, SyncLane);
         }
-        return suspenseBoundary;
       }
-      // Confirmed that the boundary is in a concurrent mode tree. Continue
-      // with the normal suspend path.
-      //
-      // After this we'll use a set of heuristics to determine whether this
-      // render pass will run to completion or restart or "suspend" the commit.
-      // The actual logic for this is spread out in different places.
-      //
-      // This first principle is that if we're going to suspend when we complete
-      // a root, then we should also restart if we get an update or ping that
-      // might unsuspend it, and vice versa. The only reason to suspend is
-      // because you think you might want to restart before committing. However,
-      // it doesn't make sense to restart only while in the period we're suspended.
-      //
-      // Restarting too aggressively is also not good because it starves out any
-      // intermediate loading state. So we use heuristics to determine when.
 
-      // Suspense Heuristics
-      //
-      // If nothing threw a Promise or all the same fallbacks are already showing,
-      // then don't suspend/restart.
-      //
-      // If this is an initial render of a new tree of Suspense boundaries and
-      // those trigger a fallback, then don't suspend/restart. We want to ensure
-      // that we can show the initial loading state as quickly as possible.
-      //
-      // If we hit a "Delayed" case, such as when we'd switch from content back into
-      // a fallback, then we should always suspend/restart. Transitions apply
-      // to this case. If none is defined, JND is used instead.
-      //
-      // If we're already showing a fallback and it gets "retried", allowing us to show
-      // another level, but there's still an inner boundary that would show a fallback,
-      // then we suspend/restart for 500ms since the last time we showed a fallback
-      // anywhere in the tree. This effectively throttles progressive loading into a
-      // consistent train of commits. This also gives us an opportunity to restart to
-      // get to the completed state slightly earlier.
-      //
-      // If there's ambiguity due to batching it's resolved in preference of:
-      // 1) "delayed", 2) "initial render", 3) "retry".
-      //
-      // We want to ensure that a "busy" state doesn't get force committed. We want to
-      // ensure that new initial loading states can commit as soon as possible.
-      suspenseBoundary.flags |= ShouldCapture;
-      // TODO: I think we can remove this, since we now use `DidCapture` in
-      // the begin phase to prevent an early bailout.
-      suspenseBoundary.lanes = rootRenderLanes;
-      return suspenseBoundary;
+      // The source fiber did not complete. Mark it with Sync priority to
+      // indicate that it still has pending work.
+      sourceFiber.lanes = mergeLanes(sourceFiber.lanes, SyncLane);
     }
-    // This boundary already captured during this render. Continue to the next
-    // boundary.
-    node = node.return;
-  } while (node !== null);
+    return suspenseBoundary;
+  }
+  // Confirmed that the boundary is in a concurrent mode tree. Continue
+  // with the normal suspend path.
+  //
+  // After this we'll use a set of heuristics to determine whether this
+  // render pass will run to completion or restart or "suspend" the commit.
+  // The actual logic for this is spread out in different places.
+  //
+  // This first principle is that if we're going to suspend when we complete
+  // a root, then we should also restart if we get an update or ping that
+  // might unsuspend it, and vice versa. The only reason to suspend is
+  // because you think you might want to restart before committing. However,
+  // it doesn't make sense to restart only while in the period we're suspended.
+  //
+  // Restarting too aggressively is also not good because it starves out any
+  // intermediate loading state. So we use heuristics to determine when.
 
-  // Could not find a Suspense boundary capable of capturing.
-  return null;
+  // Suspense Heuristics
+  //
+  // If nothing threw a Promise or all the same fallbacks are already showing,
+  // then don't suspend/restart.
+  //
+  // If this is an initial render of a new tree of Suspense boundaries and
+  // those trigger a fallback, then don't suspend/restart. We want to ensure
+  // that we can show the initial loading state as quickly as possible.
+  //
+  // If we hit a "Delayed" case, such as when we'd switch from content back into
+  // a fallback, then we should always suspend/restart. Transitions apply
+  // to this case. If none is defined, JND is used instead.
+  //
+  // If we're already showing a fallback and it gets "retried", allowing us to show
+  // another level, but there's still an inner boundary that would show a fallback,
+  // then we suspend/restart for 500ms since the last time we showed a fallback
+  // anywhere in the tree. This effectively throttles progressive loading into a
+  // consistent train of commits. This also gives us an opportunity to restart to
+  // get to the completed state slightly earlier.
+  //
+  // If there's ambiguity due to batching it's resolved in preference of:
+  // 1) "delayed", 2) "initial render", 3) "retry".
+  //
+  // We want to ensure that a "busy" state doesn't get force committed. We want to
+  // ensure that new initial loading states can commit as soon as possible.
+  suspenseBoundary.flags |= ShouldCapture;
+  // TODO: I think we can remove this, since we now use `DidCapture` in
+  // the begin phase to prevent an early bailout.
+  suspenseBoundary.lanes = rootRenderLanes;
+  return suspenseBoundary;
 }
 
 function throwException(
@@ -458,13 +457,16 @@ function throwException(
     }
 
     // Schedule the nearest Suspense to re-render the timed out view.
-    const suspenseBoundary = markNearestSuspenseBoundaryShouldCapture(
-      returnFiber,
-      sourceFiber,
-      root,
-      rootRenderLanes,
-    );
+    const suspenseBoundary = getNearestSuspenseBoundaryToCapture(returnFiber);
     if (suspenseBoundary !== null) {
+      suspenseBoundary.flags &= ~ForceClientRender;
+      markSuspenseBoundaryShouldCapture(
+        suspenseBoundary,
+        returnFiber,
+        sourceFiber,
+        root,
+        rootRenderLanes,
+      );
       attachWakeableListeners(
         suspenseBoundary,
         root,
@@ -487,20 +489,24 @@ function throwException(
   } else {
     // This is a regular error, not a Suspense wakeable.
     if (getIsHydrating() && sourceFiber.mode & ConcurrentMode) {
+      const suspenseBoundary = getNearestSuspenseBoundaryToCapture(returnFiber);
       // If the error was thrown during hydration, we may be able to recover by
       // discarding the dehydrated content and switching to a client render.
       // Instead of surfacing the error, find the nearest Suspense boundary
       // and render it again without hydration.
-      const suspenseBoundary = markNearestSuspenseBoundaryShouldCapture(
-        returnFiber,
-        sourceFiber,
-        root,
-        rootRenderLanes,
-      );
       if (suspenseBoundary !== null) {
-        // Set a flag to indicate that we should try rendering the normal
-        // children again, not the fallback.
-        suspenseBoundary.flags |= ForceClientRender;
+        if ((suspenseBoundary.flags & ShouldCapture) === NoFlags) {
+          // Set a flag to indicate that we should try rendering the normal
+          // children again, not the fallback.
+          suspenseBoundary.flags |= ForceClientRender;
+        }
+        markSuspenseBoundaryShouldCapture(
+          suspenseBoundary,
+          returnFiber,
+          sourceFiber,
+          root,
+          rootRenderLanes,
+        );
         return;
       }
     } else {
diff --git a/packages/react-reconciler/src/ReactFiberTreeContext.new.js b/packages/react-reconciler/src/ReactFiberTreeContext.new.js
index 968e66155d3fa..f9c5104ed6b13 100644
--- a/packages/react-reconciler/src/ReactFiberTreeContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberTreeContext.new.js
@@ -50,7 +50,7 @@
 // new level with a single slot. You can think of this as a fork with only one
 // prong, or an array of children with length 1.
 //
-// It's possible for the the size of the sequence to exceed 32 bits, the max
+// It's possible for the size of the sequence to exceed 32 bits, the max
 // size for bitwise operations. When this happens, we make more room by
 // converting the right part of the id to a string and storing it in an overflow
 // variable. We use a base 32 string representation, because 32 is the largest
diff --git a/packages/react-reconciler/src/ReactFiberTreeContext.old.js b/packages/react-reconciler/src/ReactFiberTreeContext.old.js
index 82990b22f983d..840335d00c4e4 100644
--- a/packages/react-reconciler/src/ReactFiberTreeContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberTreeContext.old.js
@@ -50,7 +50,7 @@
 // new level with a single slot. You can think of this as a fork with only one
 // prong, or an array of children with length 1.
 //
-// It's possible for the the size of the sequence to exceed 32 bits, the max
+// It's possible for the size of the sequence to exceed 32 bits, the max
 // size for bitwise operations. When this happens, we make more room by
 // converting the right part of the id to a string and storing it in an overflow
 // variable. We use a base 32 string representation, because 32 is the largest
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 71bf8175105d6..f0f5eab4a99f5 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -1025,7 +1025,7 @@ function finishConcurrentRender(root, exitStatus, lanes) {
 
 function isRenderConsistentWithExternalStores(finishedWork: Fiber): boolean {
   // Search the rendered tree for external store reads, and check whether the
-  // stores were mutated in a concurrent event. Intentionally using a iterative
+  // stores were mutated in a concurrent event. Intentionally using an iterative
   // loop instead of recursion so we can exit early.
   let node: Fiber = finishedWork;
   while (true) {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 8be4630dc079d..353de50e1585a 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -1025,7 +1025,7 @@ function finishConcurrentRender(root, exitStatus, lanes) {
 
 function isRenderConsistentWithExternalStores(finishedWork: Fiber): boolean {
   // Search the rendered tree for external store reads, and check whether the
-  // stores were mutated in a concurrent event. Intentionally using a iterative
+  // stores were mutated in a concurrent event. Intentionally using an iterative
   // loop instead of recursion so we can exit early.
   let node: Fiber = finishedWork;
   while (true) {
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index db964103836da..13965720b7cd3 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -239,6 +239,13 @@ type BaseFiberRootProperties = {|
 
   pooledCache: Cache | null,
   pooledCacheLanes: Lanes,
+
+  // TODO: In Fizz, id generation is specific to each server config. Maybe we
+  // should do this in Fiber, too? Deferring this decision for now because
+  // there's no other place to store the prefix except for an internal field on
+  // the public createRoot object, which the fiber tree does not currently have
+  // a reference to.
+  identifierPrefix: string,
 |};
 
 // The following attributes are only used by DevTools and are only present in DEV builds.
diff --git a/packages/react-reconciler/src/SchedulingProfiler.js b/packages/react-reconciler/src/SchedulingProfiler.js
index 0304f39a12e56..6ef0b6293bc76 100644
--- a/packages/react-reconciler/src/SchedulingProfiler.js
+++ b/packages/react-reconciler/src/SchedulingProfiler.js
@@ -18,6 +18,7 @@ import {
 import ReactVersion from 'shared/ReactVersion';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import {SCHEDULING_PROFILER_VERSION} from 'react-devtools-timeline/src/constants';
+import isArray from 'shared/isArray';
 
 import {
   getLabelForLane as getLabelForLane_old,
@@ -105,11 +106,18 @@ function markInternalModuleRanges() {
     typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.getInternalModuleRanges === 'function'
   ) {
     const ranges = __REACT_DEVTOOLS_GLOBAL_HOOK__.getInternalModuleRanges();
-    for (let i = 0; i < ranges.length; i++) {
-      const [startStackFrame, stopStackFrame] = ranges[i];
-
-      markAndClear(`--react-internal-module-start-${startStackFrame}`);
-      markAndClear(`--react-internal-module-stop-${stopStackFrame}`);
+    // This check would not be required,
+    // except that it's possible for things to override __REACT_DEVTOOLS_GLOBAL_HOOK__.
+    if (isArray(ranges)) {
+      for (let i = 0; i < ranges.length; i++) {
+        const range = ranges[i];
+        if (isArray(range) && range.length === 2) {
+          const [startStackFrame, stopStackFrame] = ranges[i];
+
+          markAndClear(`--react-internal-module-start-${startStackFrame}`);
+          markAndClear(`--react-internal-module-stop-${stopStackFrame}`);
+        }
+      }
     }
   }
 }
diff --git a/packages/react-reconciler/src/__tests__/ReactCache-test.js b/packages/react-reconciler/src/__tests__/ReactCache-test.js
index 7ef18875e087d..ed6b9fadf6488 100644
--- a/packages/react-reconciler/src/__tests__/ReactCache-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactCache-test.js
@@ -1132,7 +1132,7 @@ describe('ReactCache', () => {
 
     // Unmount children: the first text cache instance is created only after the root
     // commits, so both fresh cache instances are released by their cache boundaries,
-    // cleaning up v1 (used for the first two children which render togeether) and
+    // cleaning up v1 (used for the first two children which render together) and
     // v2 (used for the third boundary added later).
     await act(async () => {
       root.render('Bye!');
diff --git a/packages/react-reconciler/src/__tests__/ReactContextPropagation-test.js b/packages/react-reconciler/src/__tests__/ReactContextPropagation-test.js
index f568e40ccad7c..24e57002ef303 100644
--- a/packages/react-reconciler/src/__tests__/ReactContextPropagation-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactContextPropagation-test.js
@@ -21,7 +21,9 @@ describe('ReactLazyContextPropagation', () => {
     useState = React.useState;
     useContext = React.useContext;
     Suspense = React.Suspense;
-    SuspenseList = React.SuspenseList;
+    if (gate(flags => flags.enableSuspenseList)) {
+      SuspenseList = React.SuspenseList;
+    }
 
     getCacheForType = React.unstable_getCacheForType;
 
@@ -651,6 +653,7 @@ describe('ReactLazyContextPropagation', () => {
     expect(root).toMatchRenderedOutput('BBB');
   });
 
+  // @gate enableSuspenseList
   test('contexts are propagated through SuspenseList', async () => {
     // This kinda tests an implementation detail. SuspenseList has an early
     // bailout that doesn't use `bailoutOnAlreadyFinishedWork`. It probably
diff --git a/packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js b/packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js
index ee4bd306481b0..4bf292df79f7a 100644
--- a/packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js
@@ -74,6 +74,8 @@ describe('ReactFiberHostContext', () => {
       ConcurrentRoot,
       false,
       null,
+      false,
+      '',
     );
     act(() => {
       Renderer.updateContainer(
@@ -135,6 +137,8 @@ describe('ReactFiberHostContext', () => {
       ConcurrentRoot,
       false,
       null,
+      false,
+      '',
     );
     act(() => {
       Renderer.updateContainer(
diff --git a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
index bcd96d732e09e..811be09639158 100644
--- a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
@@ -34,6 +34,7 @@ let forwardRef;
 let memo;
 let act;
 let ContinuousEventPriority;
+let SuspenseList;
 
 describe('ReactHooksWithNoopRenderer', () => {
   beforeEach(() => {
@@ -60,6 +61,9 @@ describe('ReactHooksWithNoopRenderer', () => {
     Suspense = React.Suspense;
     ContinuousEventPriority = require('react-reconciler/constants')
       .ContinuousEventPriority;
+    if (gate(flags => flags.enableSuspenseList)) {
+      SuspenseList = React.SuspenseList;
+    }
 
     textCache = new Map();
 
@@ -1184,7 +1188,7 @@ describe('ReactHooksWithNoopRenderer', () => {
         ]);
       });
 
-      // This update is exists to test an internal implementation detail:
+      // This update exists to test an internal implementation detail:
       // Effects without updating dependencies lose their layout/passive tag during an update.
       act(() => {
         ReactNoop.render(<Child bar={1} foo={2} />, () =>
@@ -4291,9 +4295,8 @@ describe('ReactHooksWithNoopRenderer', () => {
     ]);
   });
 
+  // @gate enableSuspenseList
   it('regression: SuspenseList causes unmounts to be dropped on deletion', async () => {
-    const SuspenseList = React.SuspenseList;
-
     function Row({label}) {
       useEffect(() => {
         Scheduler.unstable_yieldValue('Mount ' + label);
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js b/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js
index b507076e9e910..ccbed48fae2b4 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js
@@ -673,7 +673,7 @@ describe('ReactIncrementalUpdates', () => {
       root.render(<App />);
     });
     expect(Scheduler).toHaveYielded(['Committed: ']);
-    expect(root).toMatchRenderedOutput('');
+    expect(root).toMatchRenderedOutput(null);
 
     await act(async () => {
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
@@ -734,7 +734,7 @@ describe('ReactIncrementalUpdates', () => {
       root.render(<App />);
     });
     expect(Scheduler).toHaveYielded([]);
-    expect(root).toMatchRenderedOutput('');
+    expect(root).toMatchRenderedOutput(null);
 
     await act(async () => {
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js
index e969a59c4f60f..d357094f78c96 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js
@@ -16,7 +16,9 @@ describe('ReactSuspenseList', () => {
     act = require('jest-react').act;
     Profiler = React.Profiler;
     Suspense = React.Suspense;
-    SuspenseList = React.SuspenseList;
+    if (gate(flags => flags.enableSuspenseList)) {
+      SuspenseList = React.SuspenseList;
+    }
   });
 
   function Text(props) {
@@ -42,6 +44,7 @@ describe('ReactSuspenseList', () => {
     return Component;
   }
 
+  // @gate enableSuspenseList
   it('warns if an unsupported revealOrder option is used', () => {
     function Foo() {
       return (
@@ -61,6 +64,7 @@ describe('ReactSuspenseList', () => {
     ]);
   });
 
+  // @gate enableSuspenseList
   it('warns if a upper case revealOrder option is used', () => {
     function Foo() {
       return (
@@ -80,6 +84,7 @@ describe('ReactSuspenseList', () => {
     ]);
   });
 
+  // @gate enableSuspenseList
   it('warns if a misspelled revealOrder option is used', () => {
     function Foo() {
       return (
@@ -100,6 +105,7 @@ describe('ReactSuspenseList', () => {
     ]);
   });
 
+  // @gate enableSuspenseList
   it('warns if a single element is passed to a "forwards" list', () => {
     function Foo({children}) {
       return <SuspenseList revealOrder="forwards">{children}</SuspenseList>;
@@ -132,6 +138,7 @@ describe('ReactSuspenseList', () => {
     ]);
   });
 
+  // @gate enableSuspenseList
   it('warns if a single fragment is passed to a "backwards" list', () => {
     function Foo() {
       return (
@@ -152,6 +159,7 @@ describe('ReactSuspenseList', () => {
     ]);
   });
 
+  // @gate enableSuspenseList
   it('warns if a nested array is passed to a "forwards" list', () => {
     function Foo({items}) {
       return (
@@ -179,6 +187,7 @@ describe('ReactSuspenseList', () => {
     ]);
   });
 
+  // @gate enableSuspenseList
   it('shows content independently by default', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -245,6 +254,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('shows content independently in legacy mode regardless of option', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -315,6 +325,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('displays all "together"', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -384,6 +395,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('displays all "together" even when nested as siblings', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -469,6 +481,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('displays all "together" in nested SuspenseLists', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -530,6 +543,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('displays all "together" in nested SuspenseLists where the inner is default', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -589,6 +603,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('displays all "together" during an update', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -673,6 +688,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('avoided boundaries can be coordinate with SuspenseList', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -771,6 +787,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('boundaries without fallbacks can be coordinate with SuspenseList', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -854,6 +871,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('displays each items in "forwards" order', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -919,6 +937,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('displays each items in "backwards" order', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -984,6 +1003,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('displays added row at the top "together" and the bottom in "forwards" order', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -1138,6 +1158,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('displays added row at the top "together" and the bottom in "backwards" order', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -1322,6 +1343,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('switches to rendering fallbacks if the tail takes long CPU time', async () => {
     function Foo() {
       return (
@@ -1390,6 +1412,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('only shows one loading state at a time for "collapsed" tail insertions', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -1459,6 +1482,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('warns if an unsupported tail option is used', () => {
     function Foo() {
       return (
@@ -1479,6 +1503,7 @@ describe('ReactSuspenseList', () => {
     ]);
   });
 
+  // @gate enableSuspenseList
   it('warns if a tail option is used with "together"', () => {
     function Foo() {
       return (
@@ -1499,6 +1524,7 @@ describe('ReactSuspenseList', () => {
     ]);
   });
 
+  // @gate enableSuspenseList
   it('renders one "collapsed" fallback even if CPU time elapsed', async () => {
     function Foo() {
       return (
@@ -1571,6 +1597,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('adding to the middle does not collapse insertions (forwards)', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -1713,6 +1740,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('adding to the middle does not collapse insertions (backwards)', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -1860,6 +1888,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('adding to the middle of committed tail does not collapse insertions', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -2017,6 +2046,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('only shows no initial loading state "hidden" tail insertions', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -2080,6 +2110,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('eventually resolves a nested forwards suspense list', async () => {
     const B = createAsyncText('B');
 
@@ -2142,6 +2173,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('eventually resolves a nested forwards suspense list with a hidden tail', async () => {
     const B = createAsyncText('B');
 
@@ -2188,6 +2220,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('eventually resolves two nested forwards suspense lists with a hidden tail', async () => {
     const B = createAsyncText('B');
 
@@ -2255,6 +2288,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('can do unrelated adjacent updates', async () => {
     let updateAdjacent;
     function Adjacent() {
@@ -2301,6 +2335,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('is able to re-suspend the last rows during an update with hidden', async () => {
     const AsyncB = createAsyncText('B');
 
@@ -2389,6 +2424,7 @@ describe('ReactSuspenseList', () => {
     expect(previousInst).toBe(setAsyncB);
   });
 
+  // @gate enableSuspenseList
   it('is able to re-suspend the last rows during an update with hidden', async () => {
     const AsyncB = createAsyncText('B');
 
@@ -2477,6 +2513,7 @@ describe('ReactSuspenseList', () => {
     expect(previousInst).toBe(setAsyncB);
   });
 
+  // @gate enableSuspenseList
   it('is able to interrupt a partially rendered tree and continue later', async () => {
     const AsyncA = createAsyncText('A');
 
@@ -2555,6 +2592,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('can resume class components when revealed together', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -2617,6 +2655,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('should be able to progressively show CPU expensive rows with two pass rendering', async () => {
     function TwoPass({text}) {
       const [pass, setPass] = React.useState(0);
@@ -2687,6 +2726,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('should be able to progressively show rows with two pass rendering and visible', async () => {
     function TwoPass({text}) {
       const [pass, setPass] = React.useState(0);
@@ -2769,6 +2809,7 @@ describe('ReactSuspenseList', () => {
   });
 
   // @gate enableProfilerTimer
+  // @gate enableSuspenseList
   it('counts the actual duration when profiling a SuspenseList', async () => {
     // Order of parameters: id, phase, actualDuration, treeBaseDuration
     const onRender = jest.fn();
diff --git a/packages/react-refresh/package.json b/packages/react-refresh/package.json
index 4f5f3c31c5e0d..d5295574058b1 100644
--- a/packages/react-refresh/package.json
+++ b/packages/react-refresh/package.json
@@ -4,7 +4,7 @@
   "keywords": [
     "react"
   ],
-  "version": "0.10.0",
+  "version": "0.11.0",
   "homepage": "https://reactjs.org/",
   "bugs": "https://github.com/facebook/react/issues",
   "license": "MIT",
diff --git a/packages/react-refresh/src/ReactFreshBabelPlugin.js b/packages/react-refresh/src/ReactFreshBabelPlugin.js
index 64013db181a3f..9d1aed0d1d793 100644
--- a/packages/react-refresh/src/ReactFreshBabelPlugin.js
+++ b/packages/react-refresh/src/ReactFreshBabelPlugin.js
@@ -478,11 +478,16 @@ export default function(babel, opts = {}) {
           const node = path.node;
           let programPath;
           let insertAfterPath;
+          let modulePrefix = '';
           switch (path.parent.type) {
             case 'Program':
               insertAfterPath = path;
               programPath = path.parentPath;
               break;
+            case 'TSModuleBlock':
+              insertAfterPath = path;
+              programPath = insertAfterPath.parentPath.parentPath;
+              break;
             case 'ExportNamedDeclaration':
               insertAfterPath = path.parentPath;
               programPath = insertAfterPath.parentPath;
@@ -494,6 +499,28 @@ export default function(babel, opts = {}) {
             default:
               return;
           }
+
+          // These types can be nested in typescript namespace
+          // We need to find the export chain
+          // Or return if it stays local
+          if (
+            path.parent.type === 'TSModuleBlock' ||
+            path.parent.type === 'ExportNamedDeclaration'
+          ) {
+            while (programPath.type !== 'Program') {
+              if (programPath.type === 'TSModuleDeclaration') {
+                if (
+                  programPath.parentPath.type !== 'Program' &&
+                  programPath.parentPath.type !== 'ExportNamedDeclaration'
+                ) {
+                  return;
+                }
+                modulePrefix = programPath.node.id.name + '$' + modulePrefix;
+              }
+              programPath = programPath.parentPath;
+            }
+          }
+
           const id = node.id;
           if (id === null) {
             // We don't currently handle anonymous default exports.
@@ -512,20 +539,17 @@ export default function(babel, opts = {}) {
           seenForRegistration.add(node);
           // Don't mutate the tree above this point.
 
+          const innerName = modulePrefix + inferredName;
           // export function Named() {}
           // function Named() {}
-          findInnerComponents(
-            inferredName,
-            path,
-            (persistentID, targetExpr) => {
-              const handle = createRegistration(programPath, persistentID);
-              insertAfterPath.insertAfter(
-                t.expressionStatement(
-                  t.assignmentExpression('=', handle, targetExpr),
-                ),
-              );
-            },
-          );
+          findInnerComponents(innerName, path, (persistentID, targetExpr) => {
+            const handle = createRegistration(programPath, persistentID);
+            insertAfterPath.insertAfter(
+              t.expressionStatement(
+                t.assignmentExpression('=', handle, targetExpr),
+              ),
+            );
+          });
         },
         exit(path) {
           const node = path.node;
@@ -679,11 +703,16 @@ export default function(babel, opts = {}) {
         const node = path.node;
         let programPath;
         let insertAfterPath;
+        let modulePrefix = '';
         switch (path.parent.type) {
           case 'Program':
             insertAfterPath = path;
             programPath = path.parentPath;
             break;
+          case 'TSModuleBlock':
+            insertAfterPath = path;
+            programPath = insertAfterPath.parentPath.parentPath;
+            break;
           case 'ExportNamedDeclaration':
             insertAfterPath = path.parentPath;
             programPath = insertAfterPath.parentPath;
@@ -696,6 +725,27 @@ export default function(babel, opts = {}) {
             return;
         }
 
+        // These types can be nested in typescript namespace
+        // We need to find the export chain
+        // Or return if it stays local
+        if (
+          path.parent.type === 'TSModuleBlock' ||
+          path.parent.type === 'ExportNamedDeclaration'
+        ) {
+          while (programPath.type !== 'Program') {
+            if (programPath.type === 'TSModuleDeclaration') {
+              if (
+                programPath.parentPath.type !== 'Program' &&
+                programPath.parentPath.type !== 'ExportNamedDeclaration'
+              ) {
+                return;
+              }
+              modulePrefix = programPath.node.id.name + '$' + modulePrefix;
+            }
+            programPath = programPath.parentPath;
+          }
+        }
+
         // Make sure we're not mutating the same tree twice.
         // This can happen if another Babel plugin replaces parents.
         if (seenForRegistration.has(node)) {
@@ -710,8 +760,9 @@ export default function(babel, opts = {}) {
         }
         const declPath = declPaths[0];
         const inferredName = declPath.node.id.name;
+        const innerName = modulePrefix + inferredName;
         findInnerComponents(
-          inferredName,
+          innerName,
           declPath,
           (persistentID, targetExpr, targetPath) => {
             if (targetPath === null) {
diff --git a/packages/react-refresh/src/ReactFreshRuntime.js b/packages/react-refresh/src/ReactFreshRuntime.js
index a09222a076303..1ae5acfdfb535 100644
--- a/packages/react-refresh/src/ReactFreshRuntime.js
+++ b/packages/react-refresh/src/ReactFreshRuntime.js
@@ -554,7 +554,9 @@ export function injectIntoGlobalHook(globalObject: any): void {
         if (alternate !== null) {
           const wasMounted =
             alternate.memoizedState != null &&
-            alternate.memoizedState.element != null;
+            alternate.memoizedState.element != null &&
+            mountedRoots.has(root);
+
           const isMounted =
             current.memoizedState != null &&
             current.memoizedState.element != null;
diff --git a/packages/react-refresh/src/__tests__/ReactFreshBabelPlugin-test.js b/packages/react-refresh/src/__tests__/ReactFreshBabelPlugin-test.js
index f56f16069dd77..d528d46bb8eaf 100644
--- a/packages/react-refresh/src/__tests__/ReactFreshBabelPlugin-test.js
+++ b/packages/react-refresh/src/__tests__/ReactFreshBabelPlugin-test.js
@@ -536,4 +536,29 @@ describe('ReactFreshBabelPlugin', () => {
       `),
     ).toMatchSnapshot();
   });
+
+  it('supports typescript namespace syntax', () => {
+    expect(
+      transform(
+        `
+        namespace Foo {
+          export namespace Bar {
+            export const A = () => {};
+
+            function B() {};
+            export const B1 = B;
+          }
+
+          export const C = () => {};
+          export function D() {};
+
+          namespace NotExported {
+            export const E = () => {};
+          }
+        }
+      `,
+        {plugins: [['@babel/plugin-syntax-typescript', {isTSX: true}]]},
+      ),
+    ).toMatchSnapshot();
+  });
 });
diff --git a/packages/react-refresh/src/__tests__/ReactFreshIntegration-test.js b/packages/react-refresh/src/__tests__/ReactFreshIntegration-test.js
index 09edf1d897288..8a98fe097f1b9 100644
--- a/packages/react-refresh/src/__tests__/ReactFreshIntegration-test.js
+++ b/packages/react-refresh/src/__tests__/ReactFreshIntegration-test.js
@@ -18,6 +18,7 @@ let act;
 
 const babel = require('@babel/core');
 const freshPlugin = require('react-refresh/babel');
+const ts = require('typescript');
 
 describe('ReactFreshIntegration', () => {
   let container;
@@ -46,42 +47,72 @@ describe('ReactFreshIntegration', () => {
     }
   });
 
+  function executeCommon(source, compileDestructuring) {
+    const compiled = babel.transform(source, {
+      babelrc: false,
+      presets: ['@babel/react'],
+      plugins: [
+        [freshPlugin, {skipEnvCheck: true}],
+        '@babel/plugin-transform-modules-commonjs',
+        compileDestructuring && '@babel/plugin-transform-destructuring',
+      ].filter(Boolean),
+    }).code;
+    return executeCompiled(compiled);
+  }
+
+  function executeCompiled(compiled) {
+    exportsObj = {};
+    // eslint-disable-next-line no-new-func
+    new Function(
+      'global',
+      'React',
+      'exports',
+      '$RefreshReg$',
+      '$RefreshSig$',
+      compiled,
+    )(global, React, exportsObj, $RefreshReg$, $RefreshSig$);
+    // Module systems will register exports as a fallback.
+    // This is useful for cases when e.g. a class is exported,
+    // and we don't want to propagate the update beyond this module.
+    $RefreshReg$(exportsObj.default, 'exports.default');
+    return exportsObj.default;
+  }
+
+  function $RefreshReg$(type, id) {
+    ReactFreshRuntime.register(type, id);
+  }
+
+  function $RefreshSig$() {
+    return ReactFreshRuntime.createSignatureFunctionForTransform();
+  }
+
   describe('with compiled destructuring', () => {
-    runTests(true);
+    runTests(executeCommon, testCommon);
   });
 
   describe('without compiled destructuring', () => {
-    runTests(false);
+    runTests(executeCommon, testCommon);
   });
 
-  function runTests(compileDestructuring) {
-    function execute(source) {
-      const compiled = babel.transform(source, {
+  describe('with typescript syntax', () => {
+    runTests(function(source) {
+      const typescriptSource = babel.transform(source, {
         babelrc: false,
+        configFile: false,
         presets: ['@babel/react'],
         plugins: [
           [freshPlugin, {skipEnvCheck: true}],
-          '@babel/plugin-transform-modules-commonjs',
-          compileDestructuring && '@babel/plugin-transform-destructuring',
-        ].filter(Boolean),
+          ['@babel/plugin-syntax-typescript', {isTSX: true}],
+        ],
       }).code;
-      exportsObj = {};
-      // eslint-disable-next-line no-new-func
-      new Function(
-        'global',
-        'React',
-        'exports',
-        '$RefreshReg$',
-        '$RefreshSig$',
-        compiled,
-      )(global, React, exportsObj, $RefreshReg$, $RefreshSig$);
-      // Module systems will register exports as a fallback.
-      // This is useful for cases when e.g. a class is exported,
-      // and we don't want to propagate the update beyond this module.
-      $RefreshReg$(exportsObj.default, 'exports.default');
-      return exportsObj.default;
-    }
+      const compiled = ts.transpileModule(typescriptSource, {
+        module: ts.ModuleKind.CommonJS,
+      }).outputText;
+      return executeCompiled(compiled);
+    }, testTypescript);
+  });
 
+  function runTests(execute, test) {
     function render(source) {
       const Component = execute(source);
       act(() => {
@@ -127,14 +158,10 @@ describe('ReactFreshIntegration', () => {
       expect(ReactFreshRuntime._getMountedRootCount()).toBe(1);
     }
 
-    function $RefreshReg$(type, id) {
-      ReactFreshRuntime.register(type, id);
-    }
-
-    function $RefreshSig$() {
-      return ReactFreshRuntime.createSignatureFunctionForTransform();
-    }
+    test(render, patch);
+  }
 
+  function testCommon(render, patch) {
     it('reloads function declarations', () => {
       if (__DEV__) {
         render(`
@@ -1947,4 +1974,41 @@ describe('ReactFreshIntegration', () => {
       });
     });
   }
+
+  function testTypescript(render, patch) {
+    it('reloads component exported in typescript namespace', () => {
+      if (__DEV__) {
+        render(`
+          namespace Foo {
+            export namespace Bar {
+              export const Child = ({prop}) => {
+                return <h1>{prop}1</h1>
+              };
+            }
+          }
+
+          export default function Parent() {
+            return <Foo.Bar.Child prop={'A'} />;
+          }
+        `);
+        const el = container.firstChild;
+        expect(el.textContent).toBe('A1');
+        patch(`
+          namespace Foo {
+            export namespace Bar {
+              export const Child = ({prop}) => {
+                return <h1>{prop}2</h1>
+              };
+            }
+          }
+
+          export default function Parent() {
+            return <Foo.Bar.Child prop={'B'} />;
+          }
+        `);
+        expect(container.firstChild).toBe(el);
+        expect(el.textContent).toBe('B2');
+      }
+    });
+  }
 });
diff --git a/packages/react-refresh/src/__tests__/__snapshots__/ReactFreshBabelPlugin-test.js.snap b/packages/react-refresh/src/__tests__/__snapshots__/ReactFreshBabelPlugin-test.js.snap
index 7c1276f817880..7b18834ae495f 100644
--- a/packages/react-refresh/src/__tests__/__snapshots__/ReactFreshBabelPlugin-test.js.snap
+++ b/packages/react-refresh/src/__tests__/__snapshots__/ReactFreshBabelPlugin-test.js.snap
@@ -618,6 +618,34 @@ $RefreshReg$(_c, "Hello");
 $RefreshReg$(_c2, "Bar");
 `;
 
+exports[`ReactFreshBabelPlugin supports typescript namespace syntax 1`] = `
+namespace Foo {
+  export namespace Bar {
+    export const A = () => {};
+    _c = A;
+    function B() {}
+    _c2 = B;
+    ;
+    export const B1 = B;
+  }
+  export const C = () => {};
+  _c3 = C;
+  export function D() {}
+  _c4 = D;
+  ;
+  namespace NotExported {
+    export const E = () => {};
+  }
+}
+
+var _c, _c2, _c3, _c4;
+
+$RefreshReg$(_c, "Foo$Bar$A");
+$RefreshReg$(_c2, "Foo$Bar$B");
+$RefreshReg$(_c3, "Foo$C");
+$RefreshReg$(_c4, "Foo$D");
+`;
+
 exports[`ReactFreshBabelPlugin uses custom identifiers for $RefreshReg$ and $RefreshSig$ 1`] = `
 var _s = import.meta.refreshSig();
 
diff --git a/packages/react-server-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js b/packages/react-server-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js
index 75ac4ef8850a2..11d25a5a11966 100644
--- a/packages/react-server-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js
+++ b/packages/react-server-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js
@@ -13,6 +13,7 @@ let ReactDOM;
 let JSResourceReference;
 let ReactDOMFlightRelayServer;
 let ReactDOMFlightRelayClient;
+let SuspenseList;
 
 describe('ReactFlightDOMRelay', () => {
   beforeEach(() => {
@@ -24,6 +25,9 @@ describe('ReactFlightDOMRelay', () => {
     ReactDOMFlightRelayServer = require('react-server-dom-relay/server');
     ReactDOMFlightRelayClient = require('react-server-dom-relay');
     JSResourceReference = require('JSResourceReference');
+    if (gate(flags => flags.enableSuspenseList)) {
+      SuspenseList = React.SuspenseList;
+    }
   });
 
   function readThrough(data) {
@@ -104,16 +108,9 @@ describe('ReactFlightDOMRelay', () => {
     expect(container.innerHTML).toEqual('<span>Hello, Seb Smith</span>');
   });
 
+  // @gate enableSuspenseList
   it('can reasonably handle different element types', () => {
-    const {
-      forwardRef,
-      memo,
-      Fragment,
-      StrictMode,
-      Profiler,
-      Suspense,
-      SuspenseList,
-    } = React;
+    const {forwardRef, memo, Fragment, StrictMode, Profiler, Suspense} = React;
 
     const Inner = memo(
       forwardRef((props, ref) => {
diff --git a/packages/react-server-dom-webpack/package.json b/packages/react-server-dom-webpack/package.json
index f81ef0bac9bb2..8ae5839074050 100644
--- a/packages/react-server-dom-webpack/package.json
+++ b/packages/react-server-dom-webpack/package.json
@@ -50,7 +50,7 @@
   "peerDependencies": {
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
-    "webpack": "^4.43.0"
+    "webpack": "^5.59.0"
   },
   "dependencies": {
     "acorn": "^6.2.1",
diff --git a/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js b/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js
index a81aec2c17384..0c49d293733c5 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js
@@ -14,8 +14,13 @@ import asyncLib from 'neo-async';
 
 import ModuleDependency from 'webpack/lib/dependencies/ModuleDependency';
 import NullDependency from 'webpack/lib/dependencies/NullDependency';
-import AsyncDependenciesBlock from 'webpack/lib/AsyncDependenciesBlock';
 import Template from 'webpack/lib/Template';
+import {
+  sources,
+  WebpackError,
+  Compilation,
+  AsyncDependenciesBlock,
+} from 'webpack';
 
 import isArray from 'shared/isArray';
 
@@ -34,6 +39,7 @@ class ClientReferenceDependency extends ModuleDependency {
 // We use the Flight client implementation because you can't get to these
 // without the client runtime so it's the first time in the loading sequence
 // you might want them.
+const clientImportName = 'react-server-dom-webpack';
 const clientFileName = require.resolve('../');
 
 type ClientReferenceSearchPath = {
@@ -97,33 +103,35 @@ export default class ReactFlightWebpackPlugin {
   }
 
   apply(compiler: any) {
+    const _this = this;
     let resolvedClientReferences;
-    const run = (params, callback) => {
-      // First we need to find all client files on the file system. We do this early so
-      // that we have them synchronously available later when we need them. This might
-      // not be needed anymore since we no longer need to compile the module itself in
-      // a special way. So it's probably better to do this lazily and in parallel with
-      // other compilation.
-      const contextResolver = compiler.resolverFactory.get('context', {});
-      this.resolveAllClientFiles(
-        compiler.context,
-        contextResolver,
-        compiler.inputFileSystem,
-        compiler.createContextModuleFactory(),
-        (err, resolvedClientRefs) => {
-          if (err) {
-            callback(err);
-            return;
-          }
-          resolvedClientReferences = resolvedClientRefs;
-          callback();
-        },
-      );
-    };
+    let clientFileNameFound = false;
+
+    // Find all client files on the file system
+    compiler.hooks.beforeCompile.tapAsync(
+      PLUGIN_NAME,
+      ({contextModuleFactory}, callback) => {
+        const contextResolver = compiler.resolverFactory.get('context', {});
+
+        _this.resolveAllClientFiles(
+          compiler.context,
+          contextResolver,
+          compiler.inputFileSystem,
+          contextModuleFactory,
+          function(err, resolvedClientRefs) {
+            if (err) {
+              callback(err);
+              return;
+            }
+
+            resolvedClientReferences = resolvedClientRefs;
+            callback();
+          },
+        );
+      },
+    );
 
-    compiler.hooks.run.tapAsync(PLUGIN_NAME, run);
-    compiler.hooks.watchRun.tapAsync(PLUGIN_NAME, run);
-    compiler.hooks.compilation.tap(
+    compiler.hooks.thisCompilation.tap(
       PLUGIN_NAME,
       (compilation, {normalModuleFactory}) => {
         compilation.dependencyFactories.set(
@@ -135,86 +143,140 @@ export default class ReactFlightWebpackPlugin {
           new NullDependency.Template(),
         );
 
-        compilation.hooks.buildModule.tap(PLUGIN_NAME, module => {
+        const handler = parser => {
           // We need to add all client references as dependency of something in the graph so
           // Webpack knows which entries need to know about the relevant chunks and include the
           // map in their runtime. The things that actually resolves the dependency is the Flight
           // client runtime. So we add them as a dependency of the Flight client runtime.
           // Anything that imports the runtime will be made aware of these chunks.
-          // TODO: Warn if we don't find this file anywhere in the compilation.
-          if (module.resource !== clientFileName) {
-            return;
-          }
-          if (resolvedClientReferences) {
-            for (let i = 0; i < resolvedClientReferences.length; i++) {
-              const dep = resolvedClientReferences[i];
-              const chunkName = this.chunkName
-                .replace(/\[index\]/g, '' + i)
-                .replace(/\[request\]/g, Template.toPath(dep.userRequest));
-
-              const block = new AsyncDependenciesBlock(
-                {
-                  name: chunkName,
-                },
-                module,
-                null,
-                dep.require,
-              );
-              block.addDependency(dep);
-              module.addBlock(block);
+          parser.hooks.program.tap(PLUGIN_NAME, () => {
+            const module = parser.state.module;
+
+            if (module.resource !== clientFileName) {
+              return;
             }
-          }
-        });
+
+            clientFileNameFound = true;
+
+            if (resolvedClientReferences) {
+              for (let i = 0; i < resolvedClientReferences.length; i++) {
+                const dep = resolvedClientReferences[i];
+
+                const chunkName = _this.chunkName
+                  .replace(/\[index\]/g, '' + i)
+                  .replace(/\[request\]/g, Template.toPath(dep.userRequest));
+
+                const block = new AsyncDependenciesBlock(
+                  {
+                    name: chunkName,
+                  },
+                  null,
+                  dep.request,
+                );
+
+                block.addDependency(dep);
+                module.addBlock(block);
+              }
+            }
+          });
+        };
+
+        normalModuleFactory.hooks.parser
+          .for('javascript/auto')
+          .tap('HarmonyModulesPlugin', handler);
+
+        normalModuleFactory.hooks.parser
+          .for('javascript/esm')
+          .tap('HarmonyModulesPlugin', handler);
+
+        normalModuleFactory.hooks.parser
+          .for('javascript/dynamic')
+          .tap('HarmonyModulesPlugin', handler);
       },
     );
 
-    compiler.hooks.emit.tap(PLUGIN_NAME, compilation => {
-      const json = {};
-      compilation.chunkGroups.forEach(chunkGroup => {
-        const chunkIds = chunkGroup.chunks.map(c => c.id);
-
-        function recordModule(id, mod) {
-          // TODO: Hook into deps instead of the target module.
-          // That way we know by the type of dep whether to include.
-          // It also resolves conflicts when the same module is in multiple chunks.
-          if (!/\.client\.js$/.test(mod.resource)) {
+    compiler.hooks.make.tap(PLUGIN_NAME, compilation => {
+      compilation.hooks.processAssets.tap(
+        {
+          name: PLUGIN_NAME,
+          stage: Compilation.PROCESS_ASSETS_STAGE_REPORT,
+        },
+        function() {
+          if (clientFileNameFound === false) {
+            compilation.warnings.push(
+              new WebpackError(
+                `Client runtime at ${clientImportName} was not found. React Server Components module map file ${_this.manifestFilename} was not created.`,
+              ),
+            );
             return;
           }
-          const moduleExports = {};
-          ['', '*'].concat(mod.buildMeta.providedExports).forEach(name => {
-            moduleExports[name] = {
-              id: id,
-              chunks: chunkIds,
-              name: name,
-            };
-          });
-          const href = pathToFileURL(mod.resource).href;
-          if (href !== undefined) {
-            json[href] = moduleExports;
-          }
-        }
 
-        chunkGroup.chunks.forEach(chunk => {
-          chunk.getModules().forEach(mod => {
-            recordModule(mod.id, mod);
-            // If this is a concatenation, register each child to the parent ID.
-            if (mod.modules) {
-              mod.modules.forEach(concatenatedMod => {
-                recordModule(mod.id, concatenatedMod);
-              });
+          const json = {};
+          compilation.chunkGroups.forEach(function(chunkGroup) {
+            const chunkIds = chunkGroup.chunks.map(function(c) {
+              return c.id;
+            });
+
+            function recordModule(id, module) {
+              // TODO: Hook into deps instead of the target module.
+              // That way we know by the type of dep whether to include.
+              // It also resolves conflicts when the same module is in multiple chunks.
+
+              if (!/\.client\.(js|ts)x?$/.test(module.resource)) {
+                return;
+              }
+
+              const moduleProvidedExports = compilation.moduleGraph
+                .getExportsInfo(module)
+                .getProvidedExports();
+
+              const moduleExports = {};
+              ['', '*']
+                .concat(
+                  Array.isArray(moduleProvidedExports)
+                    ? moduleProvidedExports
+                    : [],
+                )
+                .forEach(function(name) {
+                  moduleExports[name] = {
+                    id,
+                    chunks: chunkIds,
+                    name: name,
+                  };
+                });
+              const href = pathToFileURL(module.resource).href;
+
+              if (href !== undefined) {
+                json[href] = moduleExports;
+              }
             }
+
+            chunkGroup.chunks.forEach(function(chunk) {
+              const chunkModules = compilation.chunkGraph.getChunkModulesIterable(
+                chunk,
+              );
+
+              Array.from(chunkModules).forEach(function(module) {
+                const moduleId = compilation.chunkGraph.getModuleId(module);
+
+                recordModule(moduleId, module);
+                // If this is a concatenation, register each child to the parent ID.
+                if (module.modules) {
+                  module.modules.forEach(concatenatedMod => {
+                    recordModule(moduleId, concatenatedMod);
+                  });
+                }
+              });
+            });
           });
-        });
-      });
-      const output = JSON.stringify(json, null, 2);
-      compilation.assets[this.manifestFilename] = {
-        source() {
-          return output;
-        },
-        size() {
-          return output.length;
+
+          const output = JSON.stringify(json, null, 2);
+          compilation.emitAsset(
+            _this.manifestFilename,
+            new sources.RawSource(output, false),
+          );
         },
-      };
+      );
     });
   }
 
@@ -268,7 +330,8 @@ export default class ReactFlightWebpackPlugin {
               (err2: null | Error, deps: Array<ModuleDependency>) => {
                 if (err2) return cb(err2);
                 const clientRefDeps = deps.map(dep => {
-                  const request = join(resolvedDirectory, dep.request);
+                  // use userRequest instead of request. request always end with undefined which is wrong
+                  const request = join(resolvedDirectory, dep.userRequest);
                   const clientRefDep = new ClientReferenceDependency(request);
                   clientRefDep.userRequest = dep.userRequest;
                   return clientRefDep;
diff --git a/packages/react-server/src/ReactFizzHooks.js b/packages/react-server/src/ReactFizzHooks.js
index 926a1969bb48a..5997f1b02b902 100644
--- a/packages/react-server/src/ReactFizzHooks.js
+++ b/packages/react-server/src/ReactFizzHooks.js
@@ -22,6 +22,8 @@ import type {Task} from './ReactFizzServer';
 import {readContext as readContextImpl} from './ReactFizzNewContext';
 import {getTreeId} from './ReactFizzTreeContext';
 
+import {makeId} from './ReactServerFormatConfig';
+
 import {enableCache} from 'shared/ReactFeatureFlags';
 import is from 'shared/objectIs';
 
@@ -512,18 +514,15 @@ function useId(): string {
   const task: Task = (currentlyRenderingTask: any);
   const treeId = getTreeId(task.treeContext);
 
-  // Use a captial R prefix for server-generated ids.
-  let id = 'R:' + treeId;
-
-  // Unless this is the first id at this level, append a number at the end
-  // that represents the position of this useId hook among all the useId
-  // hooks for this fiber.
-  const localId = localIdCounter++;
-  if (localId > 0) {
-    id += ':' + localId.toString(32);
+  const responseState = currentResponseState;
+  if (responseState === null) {
+    throw new Error(
+      'Invalid hook call. Hooks can only be called inside of the body of a function component.',
+    );
   }
 
-  return id;
+  const localId = localIdCounter++;
+  return makeId(responseState, treeId, localId);
 }
 
 function unsupportedRefresh() {
diff --git a/packages/react-server/src/ReactFizzTreeContext.js b/packages/react-server/src/ReactFizzTreeContext.js
index c9a47e5af72a6..3b924cf8eb3af 100644
--- a/packages/react-server/src/ReactFizzTreeContext.js
+++ b/packages/react-server/src/ReactFizzTreeContext.js
@@ -50,7 +50,7 @@
 // new level with a single slot. You can think of this as a fork with only one
 // prong, or an array of children with length 1.
 //
-// It's possible for the the size of the sequence to exceed 32 bits, the max
+// It's possible for the size of the sequence to exceed 32 bits, the max
 // size for bitwise operations. When this happens, we make more room by
 // converting the right part of the id to a string and storing it in an overflow
 // variable. We use a base 32 string representation, because 32 is the largest
diff --git a/packages/react-server/src/forks/ReactServerFormatConfig.custom.js b/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
index f246ddab8b5bf..035490fb3f65a 100644
--- a/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
+++ b/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
@@ -35,6 +35,7 @@ export const getChildFormatContext = $$$hostConfig.getChildFormatContext;
 export const UNINITIALIZED_SUSPENSE_BOUNDARY_ID =
   $$$hostConfig.UNINITIALIZED_SUSPENSE_BOUNDARY_ID;
 export const assignSuspenseBoundaryID = $$$hostConfig.assignSuspenseBoundaryID;
+export const makeId = $$$hostConfig.makeId;
 export const pushTextInstance = $$$hostConfig.pushTextInstance;
 export const pushStartInstance = $$$hostConfig.pushStartInstance;
 export const pushEndInstance = $$$hostConfig.pushEndInstance;
diff --git a/packages/react-test-renderer/src/ReactTestRenderer.js b/packages/react-test-renderer/src/ReactTestRenderer.js
index 2e49968e85ded..de6e4beffec5f 100644
--- a/packages/react-test-renderer/src/ReactTestRenderer.js
+++ b/packages/react-test-renderer/src/ReactTestRenderer.js
@@ -471,6 +471,7 @@ function create(element: React$Element<any>, options: TestRendererOptions) {
     null,
     isStrictMode,
     concurrentUpdatesByDefault,
+    '',
   );
 
   if (root == null) {
diff --git a/packages/react/index.stable.js b/packages/react/index.stable.js
index 234ec8336a9ed..b0f6f409bb0e1 100644
--- a/packages/react/index.stable.js
+++ b/packages/react/index.stable.js
@@ -17,7 +17,6 @@ export {
   PureComponent,
   StrictMode,
   Suspense,
-  SuspenseList,
   cloneElement,
   createContext,
   createElement,
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 99ecd6c4c4515..c5f798d559ddf 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -103,7 +103,9 @@ export const warnOnSubscriptionInsideStartTransition = false;
 
 export const enableSuspenseAvoidThisFallback = false;
 
-export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;
+export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
+
+export const enableClientRenderFallbackOnHydrationMismatch = true;
 
 export const enableComponentStackLocations = true;
 
@@ -178,8 +180,6 @@ export const enableUseRefAccessWarning = false;
 
 export const warnAboutCallbackRefReturningFunction = false;
 
-export const enableRecursiveCommitTraversal = false;
-
 export const disableSchedulerTimeoutInWorkLoop = false;
 
 export const enableLazyContextPropagation = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index f68607c64d725..0f30707a49f3a 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -50,7 +50,8 @@ export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const warnOnSubscriptionInsideStartTransition = false;
 export const enableSuspenseAvoidThisFallback = false;
-export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;
+export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
+export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableComponentStackLocations = false;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
@@ -67,7 +68,6 @@ export const createRootStrictEffectsByDefault = false;
 export const enableUseRefAccessWarning = false;
 export const warnAboutCallbackRefReturningFunction = false;
 
-export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
 export const enableSyncDefaultUpdates = true;
@@ -75,7 +75,7 @@ export const allowConcurrentByDefault = true;
 export const enableCustomElementPropertySupport = false;
 
 export const consoleManagedByDevToolsDuringStrictMode = false;
-export const enableUseMutableSource = false;
+export const enableUseMutableSource = true;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index ce93ef0eebce5..a660772b7e354 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -41,7 +41,8 @@ export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const warnOnSubscriptionInsideStartTransition = false;
 export const enableSuspenseAvoidThisFallback = false;
-export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;
+export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
+export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableComponentStackLocations = false;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
@@ -58,7 +59,6 @@ export const createRootStrictEffectsByDefault = false;
 export const enableUseRefAccessWarning = false;
 export const warnAboutCallbackRefReturningFunction = false;
 
-export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
 export const enableSyncDefaultUpdates = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index 8c999a5083249..e6c4e5ec21fdd 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -41,7 +41,8 @@ export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const warnOnSubscriptionInsideStartTransition = false;
 export const enableSuspenseAvoidThisFallback = false;
-export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;
+export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
+export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
@@ -58,7 +59,6 @@ export const createRootStrictEffectsByDefault = false;
 export const enableUseRefAccessWarning = false;
 export const warnAboutCallbackRefReturningFunction = false;
 
-export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
 export const enableSyncDefaultUpdates = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index 02f063e58a822..6700f047a87ca 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -51,13 +51,13 @@ export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = false;
 export const warnOnSubscriptionInsideStartTransition = false;
 export const enableSuspenseAvoidThisFallback = false;
-export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;
+export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
+export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableStrictEffects = false;
 export const createRootStrictEffectsByDefault = false;
 export const enableUseRefAccessWarning = false;
 export const warnAboutCallbackRefReturningFunction = false;
 
-export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
 export const enableSyncDefaultUpdates = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 679d962b23a85..51bbc5a1627df 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -41,7 +41,8 @@ export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const warnOnSubscriptionInsideStartTransition = false;
 export const enableSuspenseAvoidThisFallback = false;
-export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;
+export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
+export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
@@ -58,7 +59,6 @@ export const createRootStrictEffectsByDefault = false;
 export const enableUseRefAccessWarning = false;
 export const warnAboutCallbackRefReturningFunction = false;
 
-export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
 export const enableSyncDefaultUpdates = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 577cb3720b531..182bebe61441e 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -23,7 +23,7 @@ export const enableUpdaterTracking = false;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
 export const enableLazyElements = false;
-export const enableCache = false;
+export const enableCache = __EXPERIMENTAL__;
 export const disableJavaScriptURLs = false;
 export const disableInputAttributeSyncing = false;
 export const enableSchedulerDebugging = false;
@@ -41,7 +41,8 @@ export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const warnOnSubscriptionInsideStartTransition = false;
 export const enableSuspenseAvoidThisFallback = false;
-export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;
+export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
+export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
@@ -58,7 +59,6 @@ export const createRootStrictEffectsByDefault = false;
 export const enableUseRefAccessWarning = false;
 export const warnAboutCallbackRefReturningFunction = false;
 
-export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
 export const enableSyncDefaultUpdates = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index bf6bafae16108..f62dc8af4960d 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -41,7 +41,8 @@ export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const warnOnSubscriptionInsideStartTransition = false;
 export const enableSuspenseAvoidThisFallback = false;
-export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;
+export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
+export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = !__EXPERIMENTAL__;
 export const enableFilterEmptyStringAttributesDOM = false;
@@ -58,7 +59,6 @@ export const createRootStrictEffectsByDefault = false;
 export const enableUseRefAccessWarning = false;
 export const warnAboutCallbackRefReturningFunction = false;
 
-export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
 export const enableSyncDefaultUpdates = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index ef980529f3f21..288e9631c75e1 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -28,6 +28,7 @@ export const enableSyncDefaultUpdates = __VARIANT__;
 export const consoleManagedByDevToolsDuringStrictMode = __VARIANT__;
 export const warnOnSubscriptionInsideStartTransition = __VARIANT__;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = __VARIANT__;
+export const enableClientRenderFallbackOnHydrationMismatch = __VARIANT__;
 
 // Enable this flag to help with concurrent mode debugging.
 // It logs information to the console about React scheduling, rendering, and commit phases.
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 60401e6fa8020..cffa189840f8c 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -33,6 +33,7 @@ export const {
   enableSyncDefaultUpdates,
   warnOnSubscriptionInsideStartTransition,
   enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
+  enableClientRenderFallbackOnHydrationMismatch,
 } = dynamicFeatureFlags;
 
 // On WWW, __EXPERIMENTAL__ is used for a new modern build.
@@ -92,8 +93,6 @@ export const warnUnstableRenderSubtreeIntoContainer = false;
 // to the correct value.
 export const enableNewReconciler = __VARIANT__;
 
-export const enableRecursiveCommitTraversal = false;
-
 export const allowConcurrentByDefault = true;
 
 export const deletedTreeCleanUpLevel = 3;
diff --git a/packages/shared/invariant.js b/packages/shared/invariant.js
deleted file mode 100644
index 68a1928c02d38..0000000000000
--- a/packages/shared/invariant.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-/**
- * Use invariant() to assert state which your program assumes to be true.
- *
- * Provide sprintf-style format (only %s is supported) and arguments
- * to provide information about what broke and what you were
- * expecting.
- *
- * The invariant message will be stripped in production, but the invariant
- * will remain to ensure logic does not differ in production.
- */
-
-export default function invariant(condition, format, a, b, c, d, e, f) {
-  // eslint-disable-next-line react-internal/prod-error-codes
-  throw new Error(
-    'Internal React error: invariant() is meant to be replaced at compile ' +
-      'time. There is no runtime version.',
-  );
-}
diff --git a/packages/shared/invokeGuardedCallbackImpl.js b/packages/shared/invokeGuardedCallbackImpl.js
index c33820080054a..9fcfbaaef0e93 100644
--- a/packages/shared/invokeGuardedCallbackImpl.js
+++ b/packages/shared/invokeGuardedCallbackImpl.js
@@ -81,7 +81,7 @@ if (__DEV__) {
       // when we call document.createEvent(). However this can cause confusing
       // errors: https://github.com/facebook/create-react-app/issues/3482
       // So we preemptively throw with a better message instead.
-      if (typeof document === 'undefined') {
+      if (typeof document === 'undefined' || document === null) {
         throw new Error(
           'The `document` global was defined when React was initialized, but is not ' +
             'defined anymore. This can happen in a test environment if a component ' +
diff --git a/scripts/circleci/add_build_info_json.sh b/scripts/circleci/add_build_info_json.sh
deleted file mode 100755
index 122d859535b4a..0000000000000
--- a/scripts/circleci/add_build_info_json.sh
+++ /dev/null
@@ -1,5 +0,0 @@
-#!/bin/bash
-
-set -e
-
-node ./scripts/release/ci-add-build-info-json.js
diff --git a/scripts/circleci/bench.sh b/scripts/circleci/bench.sh
deleted file mode 100755
index bbb049667a20f..0000000000000
--- a/scripts/circleci/bench.sh
+++ /dev/null
@@ -1,5 +0,0 @@
-#!/bin/bash		
-		
-set -e		
-		
-npm run bench
\ No newline at end of file
diff --git a/scripts/circleci/check_minified_errors.sh b/scripts/circleci/check_minified_errors.sh
deleted file mode 100755
index df7673a6ead6a..0000000000000
--- a/scripts/circleci/check_minified_errors.sh
+++ /dev/null
@@ -1,14 +0,0 @@
-#!/bin/bash
-
-# Ensure errors are minified in production
-
-OUT=$(git --no-pager grep -n --untracked --no-exclude-standard 'FIXME (minify-errors-in-prod)' -- './build/*')
-
-if [ "$OUT" != "" ]; then
-  echo "$OUT";
-  echo -e "\n";
-  echo "Detected an unminified error message in the production build. User-facing errors message must have a corresponding error code in scripts/error-codes/codes.json."
-  exit 1
-fi
-
-exit 0
diff --git a/scripts/circleci/pack_and_store_artifact.sh b/scripts/circleci/pack_and_store_artifact.sh
deleted file mode 100755
index 061101b6fdec2..0000000000000
--- a/scripts/circleci/pack_and_store_artifact.sh
+++ /dev/null
@@ -1,15 +0,0 @@
-#!/bin/bash
-
-set -e
-
-# Compress build directory into a single tarball for easy download
-tar -zcvf ./build.tgz ./build
-
-# NPM pack all modules to ensure we archive the correct set of files
-cd ./build/node_modules
-for dir in ./* ; do
-  npm pack "$dir"
-done
-
-# Compress packed modules into a single tarball for easy download by the publish script
-tar -zcvf ../../node_modules.tgz ./*.tgz
diff --git a/scripts/circleci/set_up_github_keys.sh b/scripts/circleci/set_up_github_keys.sh
deleted file mode 100755
index 4179f1e35b853..0000000000000
--- a/scripts/circleci/set_up_github_keys.sh
+++ /dev/null
@@ -1,12 +0,0 @@
-#!/bin/bash
-
-set -e
-
-if [ -n "$GITHUB_TOKEN" ]; then
-
-  GH_PAGES_DIR=$(pwd)/../react-gh-pages
-  echo "machine github.com login reactjs-bot password $GITHUB_TOKEN" >~/.netrc
-  git config --global user.name "Circle CI"
-  git config --global user.email "circle@reactjs.org"
-
-fi
diff --git a/scripts/circleci/test_coverage.sh b/scripts/circleci/test_coverage.sh
deleted file mode 100755
index af5fa9b7b1503..0000000000000
--- a/scripts/circleci/test_coverage.sh
+++ /dev/null
@@ -1,11 +0,0 @@
-#!/bin/bash
-
-set -e
-
-yarn test --coverage --maxWorkers=2
-if [ -z "$CI_PULL_REQUEST" ]; then
-  ./node_modules/.bin/coveralls < ./coverage/lcov.info
-fi
-
-# TODO: should we also track prod code coverage somehow?
-# yarn test-prod --coverage
diff --git a/scripts/circleci/update_package_versions.sh b/scripts/circleci/update_package_versions.sh
deleted file mode 100755
index 3661e80cdef77..0000000000000
--- a/scripts/circleci/update_package_versions.sh
+++ /dev/null
@@ -1,5 +0,0 @@
-#!/bin/bash
-
-set -e
-
-node ./scripts/release/ci-update-package-versions.js
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index 93391eb309d49..6703e2cd36539 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -402,5 +402,6 @@
   "414": "Did not expect this call in production. This is a bug in React. Please file an issue.",
   "415": "Error parsing the data. It's probably an error code or network corruption.",
   "416": "This environment don't support binary chunks.",
-  "417": "React currently only supports piping to one writable stream."
+  "417": "React currently only supports piping to one writable stream.",
+  "418": "An error occurred during hydration. The server HTML was replaced with client content"
 }
diff --git a/scripts/eslint-rules/__tests__/invariant-args-test.internal.js b/scripts/eslint-rules/__tests__/invariant-args-test.internal.js
deleted file mode 100644
index c36171a62c1d2..0000000000000
--- a/scripts/eslint-rules/__tests__/invariant-args-test.internal.js
+++ /dev/null
@@ -1,83 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @emails react-core
- */
-
-'use strict';
-
-const rule = require('../invariant-args');
-const {RuleTester} = require('eslint');
-const ruleTester = new RuleTester();
-
-ruleTester.run('eslint-rules/invariant-args', rule, {
-  valid: [
-    'arbitraryFunction(a, b)',
-    // These messages are in the error code map
-    "invariant(false, 'Do not override existing functions.')",
-    "invariant(false, 'createRoot(...): Target container is not a DOM element.')",
-  ],
-  invalid: [
-    {
-      code: "invariant('hello, world');",
-      errors: [
-        {
-          message: 'invariant takes at least two arguments',
-        },
-      ],
-    },
-    {
-      code: 'invariant(true, null);',
-      errors: [
-        {
-          message: 'The second argument to invariant must be a string literal',
-        },
-      ],
-    },
-    {
-      code: 'var g = 5; invariant(true, g);',
-      errors: [
-        {
-          message: 'The second argument to invariant must be a string literal',
-        },
-      ],
-    },
-    {
-      code: "invariant(true, 'error!');",
-      errors: [
-        {
-          message:
-            'The invariant format should be able to uniquely identify this ' +
-            'invariant. Please, use a more descriptive format than: error!',
-        },
-      ],
-    },
-    {
-      code: "invariant(true, '%s %s, %s %s: %s (%s)', 1, 2, 3, 4, 5, 6);",
-      errors: [
-        {
-          message:
-            'The invariant format should be able to uniquely identify this ' +
-            'invariant. Please, use a more descriptive format than: ' +
-            '%s %s, %s %s: %s (%s)',
-        },
-      ],
-    },
-    {
-      code: "invariant(false, 'Not in error map')",
-      errors: [
-        {
-          message:
-            'Error message does not have a corresponding production error code.\n\n' +
-            'Run `yarn extract-errors` to add the message to error code map, ' +
-            'so it can be stripped from the production builds. ' +
-            "Alternatively, if you're updating an existing error message, " +
-            'you can modify `scripts/error-codes/codes.json` directly.',
-        },
-      ],
-    },
-  ],
-});
diff --git a/scripts/eslint-rules/index.js b/scripts/eslint-rules/index.js
index 7dfac457ec062..3bf0fb61521da 100644
--- a/scripts/eslint-rules/index.js
+++ b/scripts/eslint-rules/index.js
@@ -5,7 +5,6 @@ module.exports = {
     'no-primitive-constructors': require('./no-primitive-constructors'),
     'no-to-warn-dev-within-to-throw': require('./no-to-warn-dev-within-to-throw'),
     'warning-args': require('./warning-args'),
-    'invariant-args': require('./invariant-args'),
     'prod-error-codes': require('./prod-error-codes'),
     'no-production-logging': require('./no-production-logging'),
     'no-cross-fork-imports': require('./no-cross-fork-imports'),
diff --git a/scripts/eslint-rules/invariant-args.js b/scripts/eslint-rules/invariant-args.js
deleted file mode 100644
index dd1bb201ec1f3..0000000000000
--- a/scripts/eslint-rules/invariant-args.js
+++ /dev/null
@@ -1,109 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @emails react-core
- */
-
-'use strict';
-
-const fs = require('fs');
-const path = require('path');
-const existingErrorMap = JSON.parse(
-  fs.readFileSync(path.resolve(__dirname, '../error-codes/codes.json'))
-);
-const messages = new Set();
-Object.keys(existingErrorMap).forEach(key =>
-  messages.add(existingErrorMap[key])
-);
-
-/**
- * The warning() and invariant() functions take format strings as their second
- * argument.
- */
-
-module.exports = {
-  meta: {
-    schema: [],
-  },
-  create(context) {
-    // we also allow literal strings and concatenated literal strings
-    function getLiteralString(node) {
-      if (node.type === 'Literal' && typeof node.value === 'string') {
-        return node.value;
-      } else if (node.type === 'BinaryExpression' && node.operator === '+') {
-        const l = getLiteralString(node.left);
-        const r = getLiteralString(node.right);
-        if (l !== null && r !== null) {
-          return l + r;
-        }
-      }
-      return null;
-    }
-
-    return {
-      CallExpression: function(node) {
-        // This could be a little smarter by checking context.getScope() to see
-        // how warning/invariant was defined.
-        const isInvariant =
-          node.callee.type === 'Identifier' && node.callee.name === 'invariant';
-        if (!isInvariant) {
-          return;
-        }
-        if (node.arguments.length < 2) {
-          context.report(node, '{{name}} takes at least two arguments', {
-            name: node.callee.name,
-          });
-          return;
-        }
-        const format = getLiteralString(node.arguments[1]);
-        if (format === null) {
-          context.report(
-            node,
-            'The second argument to {{name}} must be a string literal',
-            {name: node.callee.name}
-          );
-          return;
-        }
-        if (format.length < 10 || /^[s\W]*$/.test(format)) {
-          context.report(
-            node,
-            'The {{name}} format should be able to uniquely identify this ' +
-              '{{name}}. Please, use a more descriptive format than: {{format}}',
-            {name: node.callee.name, format: format}
-          );
-          return;
-        }
-        // count the number of formatting substitutions, plus the first two args
-        const expectedNArgs = (format.match(/%s/g) || []).length + 2;
-        if (node.arguments.length !== expectedNArgs) {
-          context.report(
-            node,
-            'Expected {{expectedNArgs}} arguments in call to {{name}} based on ' +
-              'the number of "%s" substitutions, but got {{length}}',
-            {
-              expectedNArgs: expectedNArgs,
-              name: node.callee.name,
-              length: node.arguments.length,
-            }
-          );
-        }
-
-        if (!messages.has(format)) {
-          context.report(
-            node,
-            'Error message does not have a corresponding production ' +
-              'error code.\n\n' +
-              'Run `yarn extract-errors` to add the message to error code ' +
-              'map, so it can be stripped from the production builds. ' +
-              "Alternatively, if you're updating an existing error " +
-              'message, you can modify ' +
-              '`scripts/error-codes/codes.json` directly.'
-          );
-        }
-      },
-    };
-  },
-};
diff --git a/scripts/eslint/index.js b/scripts/eslint/index.js
index 4a8f1868723e3..2fd2730ba73f0 100644
--- a/scripts/eslint/index.js
+++ b/scripts/eslint/index.js
@@ -8,16 +8,16 @@
 'use strict';
 
 const minimatch = require('minimatch');
-const CLIEngine = require('eslint').CLIEngine;
+const {ESLint} = require('eslint');
 const listChangedFiles = require('../shared/listChangedFiles');
 
 const allPaths = ['**/*.js'];
 
 let changedFiles = null;
 
-function runESLintOnFilesWithOptions(filePatterns, onlyChanged, options) {
-  const cli = new CLIEngine(options);
-  const formatter = cli.getFormatter();
+async function runESLintOnFilesWithOptions(filePatterns, onlyChanged, options) {
+  const eslint = new ESLint(options);
+  const formatter = await eslint.loadFormatter();
 
   if (onlyChanged && changedFiles === null) {
     // Calculate lazily.
@@ -26,15 +26,15 @@ function runESLintOnFilesWithOptions(filePatterns, onlyChanged, options) {
   const finalFilePatterns = onlyChanged
     ? intersect(changedFiles, filePatterns)
     : filePatterns;
-  const report = cli.executeOnFiles(finalFilePatterns);
+  const results = await eslint.lintFiles(finalFilePatterns);
 
   if (options != null && options.fix === true) {
-    CLIEngine.outputFixes(report);
+    await ESLint.outputFixes(results);
   }
 
   // When using `ignorePattern`, eslint will show `File ignored...` warnings for any ignores.
   // We don't care because we *expect* some passed files will be ignores if `ignorePattern` is used.
-  const messages = report.results.filter(item => {
+  const messages = results.filter(item => {
     if (!onlyChanged) {
       // Don't suppress the message on a full run.
       // We only expect it to happen for "only changed" runs.
@@ -45,11 +45,19 @@ function runESLintOnFilesWithOptions(filePatterns, onlyChanged, options) {
     return !(item.messages[0] && item.messages[0].message === ignoreMessage);
   });
 
-  const ignoredMessageCount = report.results.length - messages.length;
+  const errorCount = results.reduce(
+    (count, result) => count + result.errorCount,
+    0
+  );
+  const warningCount = results.reduce(
+    (count, result) => count + result.warningCount,
+    0
+  );
+  const ignoredMessageCount = results.length - messages.length;
   return {
-    output: formatter(messages),
-    errorCount: report.errorCount,
-    warningCount: report.warningCount - ignoredMessageCount,
+    output: formatter.format(messages),
+    errorCount: errorCount,
+    warningCount: warningCount - ignoredMessageCount,
   };
 }
 
@@ -64,11 +72,11 @@ function intersect(files, patterns) {
   return [...new Set(intersection)];
 }
 
-function runESLint({onlyChanged, ...options}) {
+async function runESLint({onlyChanged, ...options}) {
   if (typeof onlyChanged !== 'boolean') {
     throw new Error('Pass options.onlyChanged as a boolean.');
   }
-  const {errorCount, warningCount, output} = runESLintOnFilesWithOptions(
+  const {errorCount, warningCount, output} = await runESLintOnFilesWithOptions(
     allPaths,
     onlyChanged,
     options
diff --git a/scripts/jest/TestFlags.js b/scripts/jest/TestFlags.js
index af83baf0f3ec9..e76a93638336f 100644
--- a/scripts/jest/TestFlags.js
+++ b/scripts/jest/TestFlags.js
@@ -86,6 +86,7 @@ function getTestFlags() {
 
       // This isn't a flag, just a useful alias for tests.
       enableUseSyncExternalStoreShim: !__VARIANT__,
+      enableSuspenseList: releaseChannel === 'experimental' || www,
 
       // If there's a naming conflict between scheduler and React feature flags, the
       // React ones take precedence.
diff --git a/scripts/jest/matchers/toThrow.js b/scripts/jest/matchers/toThrow.js
index 148fd49fa099d..204a2fc713cad 100644
--- a/scripts/jest/matchers/toThrow.js
+++ b/scripts/jest/matchers/toThrow.js
@@ -4,7 +4,7 @@
 // Older versions use e.g. "Cannot read property 'world' of undefined"
 // Newer versions use e.g. "Cannot read properties of undefined (reading 'world')"
 // This file overrides the built-in toThrow() matches to handle both cases,
-// enabling the React project to support Node 12-16 witout forking tests.
+// enabling the React project to support Node 12-16 without forking tests.
 
 const toThrowMatchers = require('expect/build/toThrowMatchers').default;
 const builtInToThrow = toThrowMatchers.toThrow;
diff --git a/scripts/release/README.md b/scripts/release/README.md
index 1737c3cf18800..119d62c6da255 100644
--- a/scripts/release/README.md
+++ b/scripts/release/README.md
@@ -21,7 +21,7 @@ A typical release cycle goes like this:
 1. When a commit is pushed to the React repo, [Circle CI](https://circleci.com/gh/facebook/react/) will build all release bundles and run unit tests against both the source code and the built bundles.
 2. Each weekday, an automated CI cron job publishes prereleases to the `next` and `experimental` channels, from tip of the main branch.
    1. You can also [trigger an automated prerelease via the command line](#trigger-an-automated-prerelease), instead of waiting until the next time the cron job runs.
-   2. For advanced cases, you can [**manually prepare and publish to the `next` channel**](#publishing-release) using the [`prepare-release-from-ci`](#prepare-release-from-ci) and [`publish`](#publish) scripts; or to the [**`experimental` channel**](#publishing-an-experimental-release) using the the same scripts (but different build artifacts).
+   2. For advanced cases, you can [**manually prepare and publish to the `next` channel**](#publishing-release) using the [`prepare-release-from-ci`](#prepare-release-from-ci) and [`publish`](#publish) scripts; or to the [**`experimental` channel**](#publishing-an-experimental-release) using the same scripts (but different build artifacts).
 3. Finally, a "next" release can be [**promoted to stable**](#publishing-a-stable-release)<sup>1</sup> using the [`prepare-release-from-npm`](#prepare-release-from-npm) and [`publish`](#publish) scripts. (This process is always manual.)
 
 The high level process of creating releases is [documented below](#process). Individual scripts are documented as well:
@@ -34,7 +34,7 @@ The high level process of creating releases is [documented below](#process). Ind
 
 ## Trigger an Automated Prerelease
 
-If your code lands in the main branch, it will be automaticaly published to the prerelease channels within the next weekday. However, if you want to immediately publish a prerelease, you can trigger the job to run immediately:
+If your code lands in the main branch, it will be automatically published to the prerelease channels within the next weekday. However, if you want to immediately publish a prerelease, you can trigger the job to run immediately:
 
 ```sh
 yarn publish-prereleases
diff --git a/scripts/release/ci-add-build-info-json.js b/scripts/release/ci-add-build-info-json.js
deleted file mode 100755
index 92af86946af7d..0000000000000
--- a/scripts/release/ci-add-build-info-json.js
+++ /dev/null
@@ -1,73 +0,0 @@
-#!/usr/bin/env node
-
-'use strict';
-
-// This script is run by Circle CI (see ../scripts/circleci).
-// It is not meant to be run as part of the local build or publish process.
-// It exists to share code between the Node release scripts and CI bash scripts.
-
-// IMPORTANT:
-// Changes below should be mirrored in ./build-release-locally-commands/add-build-info-json.js
-
-const {exec} = require('child_process');
-const {existsSync} = require('fs');
-const {join} = require('path');
-
-const run = async () => {
-  const {writeJson, readJson} = require('fs-extra');
-  const {getBuildInfo, getPublicPackages} = require('./utils');
-
-  const cwd = join(__dirname, '..', '..');
-
-  const {
-    branch,
-    buildNumber,
-    checksum,
-    commit,
-    reactVersion,
-  } = await getBuildInfo();
-
-  const isExperimental = process.env.RELEASE_CHANNEL === 'experimental';
-  const packages = getPublicPackages(isExperimental);
-  const packagesDir = join(cwd, 'packages');
-
-  const buildInfoJSON = {
-    branch,
-    buildNumber,
-    checksum,
-    commit,
-    environment: 'ci',
-    reactVersion,
-  };
-
-  for (let i = 0; i < packages.length; i++) {
-    const packageName = packages[i];
-    const packagePath = join(packagesDir, packageName);
-    const packageJSON = await readJson(join(packagePath, 'package.json'));
-
-    // Verify all public packages include "build-info.json" in the files array.
-    if (!packageJSON.files.includes('build-info.json')) {
-      console.error(
-        `${packageName} must include "build-info.json" in files array.`
-      );
-      process.exit(1);
-    }
-
-    // Add build info JSON to package.
-    if (existsSync(join(packagePath, 'npm'))) {
-      const buildInfoJSONPath = join(packagePath, 'npm', 'build-info.json');
-      await writeJson(buildInfoJSONPath, buildInfoJSON, {spaces: 2});
-    }
-  }
-};
-
-// Install (or update) release script dependencies before proceeding.
-// This needs to be done before we require() the first NPM module.
-exec('yarn install', {cwd: __dirname}, (error, stdout, stderr) => {
-  if (error) {
-    console.error(error);
-    process.exit(1);
-  } else {
-    run();
-  }
-});
diff --git a/scripts/release/ci-update-package-versions.js b/scripts/release/ci-update-package-versions.js
deleted file mode 100755
index c5f75eb6b0d23..0000000000000
--- a/scripts/release/ci-update-package-versions.js
+++ /dev/null
@@ -1,31 +0,0 @@
-#!/usr/bin/env node
-
-'use strict';
-
-// This script is run by Circle CI (see ../scripts/circleci).
-// It is not meant to be run as part of the local build or publish process.
-// It exists to share code between the Node release scripts and CI bash scripts.
-
-const {exec} = require('child_process');
-const {join} = require('path');
-
-const run = async () => {
-  const {getBuildInfo, updateVersionsForNext} = require('./utils');
-
-  const cwd = join(__dirname, '..', '..');
-
-  const {reactVersion, version} = await getBuildInfo();
-
-  await updateVersionsForNext(cwd, reactVersion, version);
-};
-
-// Install (or update) release script dependencies before proceeding.
-// This needs to be done before we require() the first NPM module.
-exec('yarn install', {cwd: __dirname}, (error, stdout, stderr) => {
-  if (error) {
-    console.error(error);
-    process.exit(1);
-  } else {
-    run();
-  }
-});
diff --git a/scripts/release/publish-commands/parse-params.js b/scripts/release/publish-commands/parse-params.js
index a441168226a76..2c0439dd56394 100644
--- a/scripts/release/publish-commands/parse-params.js
+++ b/scripts/release/publish-commands/parse-params.js
@@ -44,6 +44,7 @@ module.exports = () => {
       case 'next':
       case 'experimental':
       case 'alpha':
+      case 'beta':
       case 'untagged':
         break;
       default:
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index 8b12e8550e365..02f0c68f6baab 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -249,7 +249,7 @@ const bundles = [
   /******* React DOM - www - Testing *******/
   {
     moduleType: RENDERER,
-    bundleTypes: [FB_WWW_DEV, FB_WWW_PROD],
+    bundleTypes: [FB_WWW_DEV, FB_WWW_PROD, NODE_DEV, NODE_PROD],
     entry: 'react-dom/testing',
     global: 'ReactDOMTesting',
     minifyWithProdErrorCodes: true,
diff --git a/scripts/rollup/shims/react-native/ReactNativeViewConfigRegistry.js b/scripts/rollup/shims/react-native/ReactNativeViewConfigRegistry.js
index 5f219fea65208..194a91e31ae62 100644
--- a/scripts/rollup/shims/react-native/ReactNativeViewConfigRegistry.js
+++ b/scripts/rollup/shims/react-native/ReactNativeViewConfigRegistry.js
@@ -8,8 +8,6 @@
  * @flow strict-local
  */
 
-/* eslint-disable react-internal/invariant-args */
-
 'use strict';
 
 import {type ViewConfig} from './ReactNativeTypes';
diff --git a/scripts/rollup/validate/eslintrc.cjs.js b/scripts/rollup/validate/eslintrc.cjs.js
index 0adb5a197dd12..45b7a41e7e596 100644
--- a/scripts/rollup/validate/eslintrc.cjs.js
+++ b/scripts/rollup/validate/eslintrc.cjs.js
@@ -7,44 +7,45 @@ module.exports = {
   },
   globals: {
     // ES 6
-    Map: true,
-    Set: true,
-    Proxy: true,
-    Symbol: true,
-    WeakMap: true,
-    WeakSet: true,
-    Uint16Array: true,
-    Reflect: true,
+    Map: 'readonly',
+    Set: 'readonly',
+    Proxy: 'readonly',
+    Symbol: 'readonly',
+    WeakMap: 'readonly',
+    WeakSet: 'readonly',
+    Uint16Array: 'readonly',
+    Reflect: 'readonly',
+    globalThis: 'readonly',
     // Vendor specific
-    MSApp: true,
-    __REACT_DEVTOOLS_GLOBAL_HOOK__: true,
+    MSApp: 'readonly',
+    __REACT_DEVTOOLS_GLOBAL_HOOK__: 'readonly',
     // CommonJS / Node
-    process: true,
-    setImmediate: true,
-    Buffer: true,
+    process: 'readonly',
+    setImmediate: 'readonly',
+    Buffer: 'readonly',
     // Trusted Types
-    trustedTypes: true,
+    trustedTypes: 'readonly',
 
     // Scheduler profiling
-    Int32Array: true,
-    ArrayBuffer: true,
+    Int32Array: 'readonly',
+    ArrayBuffer: 'readonly',
 
-    TaskController: true,
+    TaskController: 'readonly',
 
     // Flight
-    Uint8Array: true,
-    Promise: true,
+    Uint8Array: 'readonly',
+    Promise: 'readonly',
 
     // Flight Webpack
-    __webpack_chunk_load__: true,
-    __webpack_require__: true,
+    __webpack_chunk_load__: 'readonly',
+    __webpack_require__: 'readonly',
 
     // jest
-    expect: true,
-    jest: true,
+    expect: 'readonly',
+    jest: 'readonly',
 
     // act
-    IS_REACT_ACT_ENVIRONMENT: true,
+    IS_REACT_ACT_ENVIRONMENT: 'readonly',
   },
   parserOptions: {
     ecmaVersion: 5,
diff --git a/scripts/rollup/validate/eslintrc.cjs2015.js b/scripts/rollup/validate/eslintrc.cjs2015.js
index 721dd9b026bf1..7135a5a706cff 100644
--- a/scripts/rollup/validate/eslintrc.cjs2015.js
+++ b/scripts/rollup/validate/eslintrc.cjs2015.js
@@ -7,44 +7,44 @@ module.exports = {
   },
   globals: {
     // ES 6
-    Map: true,
-    Set: true,
-    Proxy: true,
-    Symbol: true,
-    WeakMap: true,
-    WeakSet: true,
-    Uint16Array: true,
-    Reflect: true,
+    Map: 'readonly',
+    Set: 'readonly',
+    Proxy: 'readonly',
+    Symbol: 'readonly',
+    WeakMap: 'readonly',
+    WeakSet: 'readonly',
+    Uint16Array: 'readonly',
+    Reflect: 'readonly',
     // Vendor specific
-    MSApp: true,
-    __REACT_DEVTOOLS_GLOBAL_HOOK__: true,
+    MSApp: 'readonly',
+    __REACT_DEVTOOLS_GLOBAL_HOOK__: 'readonly',
     // CommonJS / Node
-    process: true,
-    setImmediate: true,
-    Buffer: true,
+    process: 'readonly',
+    setImmediate: 'readonly',
+    Buffer: 'readonly',
     // Trusted Types
-    trustedTypes: true,
+    trustedTypes: 'readonly',
 
     // Scheduler profiling
-    Int32Array: true,
-    ArrayBuffer: true,
+    Int32Array: 'readonly',
+    ArrayBuffer: 'readonly',
 
-    TaskController: true,
+    TaskController: 'readonly',
 
     // Flight
-    Uint8Array: true,
-    Promise: true,
+    Uint8Array: 'readonly',
+    Promise: 'readonly',
 
     // Flight Webpack
-    __webpack_chunk_load__: true,
-    __webpack_require__: true,
+    __webpack_chunk_load__: 'readonly',
+    __webpack_require__: 'readonly',
 
     // jest
-    expect: true,
-    jest: true,
+    expect: 'readonly',
+    jest: 'readonly',
 
     // act
-    IS_REACT_ACT_ENVIRONMENT: true,
+    IS_REACT_ACT_ENVIRONMENT: 'readonly',
   },
   parserOptions: {
     ecmaVersion: 2015,
diff --git a/scripts/rollup/validate/eslintrc.esm.js b/scripts/rollup/validate/eslintrc.esm.js
index bbc94a7f4ee25..34cde555478ab 100644
--- a/scripts/rollup/validate/eslintrc.esm.js
+++ b/scripts/rollup/validate/eslintrc.esm.js
@@ -7,44 +7,44 @@ module.exports = {
   },
   globals: {
     // ES 6
-    Map: true,
-    Set: true,
-    Proxy: true,
-    Symbol: true,
-    WeakMap: true,
-    WeakSet: true,
-    Uint16Array: true,
-    Reflect: true,
+    Map: 'readonly',
+    Set: 'readonly',
+    Proxy: 'readonly',
+    Symbol: 'readonly',
+    WeakMap: 'readonly',
+    WeakSet: 'readonly',
+    Uint16Array: 'readonly',
+    Reflect: 'readonly',
     // Vendor specific
-    MSApp: true,
-    __REACT_DEVTOOLS_GLOBAL_HOOK__: true,
+    MSApp: 'readonly',
+    __REACT_DEVTOOLS_GLOBAL_HOOK__: 'readonly',
     // CommonJS / Node
-    process: true,
-    setImmediate: true,
-    Buffer: true,
+    process: 'readonly',
+    setImmediate: 'readonly',
+    Buffer: 'readonly',
     // Trusted Types
-    trustedTypes: true,
+    trustedTypes: 'readonly',
 
     // Scheduler profiling
-    Int32Array: true,
-    ArrayBuffer: true,
+    Int32Array: 'readonly',
+    ArrayBuffer: 'readonly',
 
-    TaskController: true,
+    TaskController: 'readonly',
 
     // Flight
-    Uint8Array: true,
-    Promise: true,
+    Uint8Array: 'readonly',
+    Promise: 'readonly',
 
     // Flight Webpack
-    __webpack_chunk_load__: true,
-    __webpack_require__: true,
+    __webpack_chunk_load__: 'readonly',
+    __webpack_require__: 'readonly',
 
     // jest
-    expect: true,
-    jest: true,
+    expect: 'readonly',
+    jest: 'readonly',
 
     // act
-    IS_REACT_ACT_ENVIRONMENT: true,
+    IS_REACT_ACT_ENVIRONMENT: 'readonly',
   },
   parserOptions: {
     ecmaVersion: 2017,
diff --git a/scripts/rollup/validate/eslintrc.fb.js b/scripts/rollup/validate/eslintrc.fb.js
index bd5881ca47531..d267ca2bec308 100644
--- a/scripts/rollup/validate/eslintrc.fb.js
+++ b/scripts/rollup/validate/eslintrc.fb.js
@@ -7,40 +7,40 @@ module.exports = {
   },
   globals: {
     // ES6
-    Map: true,
-    Set: true,
-    Symbol: true,
-    Proxy: true,
-    WeakMap: true,
-    WeakSet: true,
-    Uint16Array: true,
-    Reflect: true,
+    Map: 'readonly',
+    Set: 'readonly',
+    Symbol: 'readonly',
+    Proxy: 'readonly',
+    WeakMap: 'readonly',
+    WeakSet: 'readonly',
+    Uint16Array: 'readonly',
+    Reflect: 'readonly',
     // Vendor specific
-    MSApp: true,
-    __REACT_DEVTOOLS_GLOBAL_HOOK__: true,
+    MSApp: 'readonly',
+    __REACT_DEVTOOLS_GLOBAL_HOOK__: 'readonly',
     // FB
-    __DEV__: true,
+    __DEV__: 'readonly',
     // Node.js Server Rendering
-    setImmediate: true,
-    Buffer: true,
+    setImmediate: 'readonly',
+    Buffer: 'readonly',
     // Trusted Types
-    trustedTypes: true,
+    trustedTypes: 'readonly',
 
     // Scheduler profiling
-    Int32Array: true,
-    ArrayBuffer: true,
+    Int32Array: 'readonly',
+    ArrayBuffer: 'readonly',
 
-    TaskController: true,
+    TaskController: 'readonly',
 
     // Flight
-    Uint8Array: true,
-    Promise: true,
+    Uint8Array: 'readonly',
+    Promise: 'readonly',
 
     // jest
-    jest: true,
+    jest: 'readonly',
 
     // act
-    IS_REACT_ACT_ENVIRONMENT: true,
+    IS_REACT_ACT_ENVIRONMENT: 'readonly',
   },
   parserOptions: {
     ecmaVersion: 5,
diff --git a/scripts/rollup/validate/eslintrc.rn.js b/scripts/rollup/validate/eslintrc.rn.js
index 0f2d7f808da81..e466784e8fcb3 100644
--- a/scripts/rollup/validate/eslintrc.rn.js
+++ b/scripts/rollup/validate/eslintrc.rn.js
@@ -7,36 +7,36 @@ module.exports = {
   },
   globals: {
     // ES6
-    Map: true,
-    Set: true,
-    Symbol: true,
-    Proxy: true,
-    WeakMap: true,
-    WeakSet: true,
-    Reflect: true,
+    Map: 'readonly',
+    Set: 'readonly',
+    Symbol: 'readonly',
+    Proxy: 'readonly',
+    WeakMap: 'readonly',
+    WeakSet: 'readonly',
+    Reflect: 'readonly',
     // Vendor specific
-    MSApp: true,
-    __REACT_DEVTOOLS_GLOBAL_HOOK__: true,
+    MSApp: 'readonly',
+    __REACT_DEVTOOLS_GLOBAL_HOOK__: 'readonly',
     // FB
-    __DEV__: true,
+    __DEV__: 'readonly',
     // Fabric. See https://github.com/facebook/react/pull/15490
     // for more information
-    nativeFabricUIManager: true,
+    nativeFabricUIManager: 'readonly',
     // Trusted Types
-    trustedTypes: true,
+    trustedTypes: 'readonly',
     // RN supports this
-    setImmediate: true,
+    setImmediate: 'readonly',
     // Scheduler profiling
-    Int32Array: true,
-    ArrayBuffer: true,
+    Int32Array: 'readonly',
+    ArrayBuffer: 'readonly',
 
-    TaskController: true,
+    TaskController: 'readonly',
 
     // jest
-    jest: true,
+    jest: 'readonly',
 
     // act
-    IS_REACT_ACT_ENVIRONMENT: true,
+    IS_REACT_ACT_ENVIRONMENT: 'readonly',
   },
   parserOptions: {
     ecmaVersion: 5,
diff --git a/scripts/rollup/validate/eslintrc.umd.js b/scripts/rollup/validate/eslintrc.umd.js
index 2077eec029484..2d274375cca8c 100644
--- a/scripts/rollup/validate/eslintrc.umd.js
+++ b/scripts/rollup/validate/eslintrc.umd.js
@@ -6,50 +6,50 @@ module.exports = {
   },
   globals: {
     // ES6
-    Map: true,
-    Set: true,
-    Symbol: true,
-    Proxy: true,
-    WeakMap: true,
-    WeakSet: true,
-    Uint16Array: true,
-    Reflect: true,
+    Map: 'readonly',
+    Set: 'readonly',
+    Symbol: 'readonly',
+    Proxy: 'readonly',
+    WeakMap: 'readonly',
+    WeakSet: 'readonly',
+    Uint16Array: 'readonly',
+    Reflect: 'readonly',
     // Vendor specific
-    MSApp: true,
-    __REACT_DEVTOOLS_GLOBAL_HOOK__: true,
+    MSApp: 'readonly',
+    __REACT_DEVTOOLS_GLOBAL_HOOK__: 'readonly',
     // UMD wrapper code
     // TODO: this is too permissive.
     // Ideally we should only allow these *inside* the UMD wrapper.
-    exports: true,
-    module: true,
-    define: true,
-    require: true,
-    globalThis: true,
-    global: true,
+    exports: 'readonly',
+    module: 'readonly',
+    define: 'readonly',
+    require: 'readonly',
+    globalThis: 'readonly',
+    global: 'readonly',
     // Internet Explorer
-    setImmediate: true,
+    setImmediate: 'readonly',
     // Trusted Types
-    trustedTypes: true,
+    trustedTypes: 'readonly',
 
     // Scheduler profiling
-    Int32Array: true,
-    ArrayBuffer: true,
+    Int32Array: 'readonly',
+    ArrayBuffer: 'readonly',
 
-    TaskController: true,
+    TaskController: 'readonly',
 
     // Flight
-    Uint8Array: true,
-    Promise: true,
+    Uint8Array: 'readonly',
+    Promise: 'readonly',
 
     // Flight Webpack
-    __webpack_chunk_load__: true,
-    __webpack_require__: true,
+    __webpack_chunk_load__: 'readonly',
+    __webpack_require__: 'readonly',
 
     // jest
-    jest: true,
+    jest: 'readonly',
 
     // act
-    IS_REACT_ACT_ENVIRONMENT: true,
+    IS_REACT_ACT_ENVIRONMENT: 'readonly',
   },
   parserOptions: {
     ecmaVersion: 5,
diff --git a/scripts/tasks/eslint.js b/scripts/tasks/eslint.js
index aa01f41dd1e7d..0205873f0aad4 100644
--- a/scripts/tasks/eslint.js
+++ b/scripts/tasks/eslint.js
@@ -10,16 +10,22 @@
 const minimist = require('minimist');
 const runESLint = require('../eslint');
 
-console.log('Linting all files...');
-// https://circleci.com/docs/2.0/env-vars/#circleci-environment-variable-descriptions
-if (!process.env.CI) {
-  console.log('Hint: run `yarn linc` to only lint changed files.');
-}
+async function main() {
+  console.log('Linting all files...');
+  // https://circleci.com/docs/2.0/env-vars/#circleci-environment-variable-descriptions
+  if (!process.env.CI) {
+    console.log('Hint: run `yarn linc` to only lint changed files.');
+  }
+
+  // eslint-disable-next-line no-unused-vars
+  const {_, ...cliOptions} = minimist(process.argv.slice(2));
 
-const cliOptions = minimist(process.argv.slice(2));
-if (runESLint({onlyChanged: false, ...cliOptions})) {
-  console.log('Lint passed.');
-} else {
-  console.log('Lint failed.');
-  process.exit(1);
+  if (await runESLint({onlyChanged: false, ...cliOptions})) {
+    console.log('Lint passed.');
+  } else {
+    console.log('Lint failed.');
+    process.exit(1);
+  }
 }
+
+main();
diff --git a/scripts/tasks/linc.js b/scripts/tasks/linc.js
index 282926399bb71..e3b89237528d6 100644
--- a/scripts/tasks/linc.js
+++ b/scripts/tasks/linc.js
@@ -10,12 +10,18 @@
 const minimist = require('minimist');
 const runESLint = require('../eslint');
 
-console.log('Linting changed files...');
+async function main() {
+  console.log('Linting changed files...');
 
-const cliOptions = minimist(process.argv.slice(2));
-if (runESLint({onlyChanged: true, ...cliOptions})) {
-  console.log('Lint passed for changed files.');
-} else {
-  console.log('Lint failed for changed files.');
-  process.exit(1);
+  // eslint-disable-next-line no-unused-vars
+  const {_, ...cliOptions} = minimist(process.argv.slice(2));
+
+  if (await runESLint({onlyChanged: true, ...cliOptions})) {
+    console.log('Lint passed for changed files.');
+  } else {
+    console.log('Lint failed for changed files.');
+    process.exit(1);
+  }
 }
+
+main();
diff --git a/yarn.lock b/yarn.lock
index 0055fc9a6d2f7..f376e74f8c5ac 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -25,6 +25,13 @@
   dependencies:
     "@babel/highlight" "^7.12.13"
 
+"@babel/code-frame@^7.14.5", "@babel/code-frame@^7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.16.0.tgz#0dfc80309beec8411e65e706461c408b0bb9b431"
+  integrity sha512-IF4EOMEV+bfYwOmNxGzSnjR2EmQod7f1UXOpZM3l4i4o4QNwzjtJAu/HxdjHq0aYBvdqMuQEY1eg0nqW9ZPORA==
+  dependencies:
+    "@babel/highlight" "^7.16.0"
+
 "@babel/code-frame@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.8.3.tgz#33e25903d7481181534e12ec0a25f16b6fcf419e"
@@ -41,6 +48,11 @@
     invariant "^2.2.4"
     semver "^5.5.0"
 
+"@babel/compat-data@^7.16.0":
+  version "7.16.4"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.16.4.tgz#081d6bbc336ec5c2435c6346b2ae1fb98b5ac68e"
+  integrity sha512-1o/jo7D+kC9ZjHX5v+EHrdjl3PhxMrLSOTGsOdHJ+KL8HCaEK6ehrVL2RS6oHDZp+L7xLirLrPmQtEng769J/Q==
+
 "@babel/core@^7.0.0":
   version "7.9.0"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.9.0.tgz#ac977b538b77e132ff706f3b8a4dbad09c03c56e"
@@ -106,6 +118,27 @@
     semver "^5.4.1"
     source-map "^0.5.0"
 
+"@babel/core@^7.14.8":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.16.0.tgz#c4ff44046f5fe310525cc9eb4ef5147f0c5374d4"
+  integrity sha512-mYZEvshBRHGsIAiyH5PzCFTCfbWfoYbO/jcSdXQSUQu1/pW0xDZAUP7KEc32heqWTAfAHhV9j1vH8Sav7l+JNQ==
+  dependencies:
+    "@babel/code-frame" "^7.16.0"
+    "@babel/generator" "^7.16.0"
+    "@babel/helper-compilation-targets" "^7.16.0"
+    "@babel/helper-module-transforms" "^7.16.0"
+    "@babel/helpers" "^7.16.0"
+    "@babel/parser" "^7.16.0"
+    "@babel/template" "^7.16.0"
+    "@babel/traverse" "^7.16.0"
+    "@babel/types" "^7.16.0"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.1.2"
+    semver "^6.3.0"
+    source-map "^0.5.0"
+
 "@babel/eslint-parser@^7.11.4":
   version "7.11.4"
   resolved "https://registry.yarnpkg.com/@babel/eslint-parser/-/eslint-parser-7.11.4.tgz#f79bac69088097a8418f5c67fc462c89a72c2f48"
@@ -133,6 +166,15 @@
     jsesc "^2.5.1"
     source-map "^0.5.0"
 
+"@babel/generator@^7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.16.0.tgz#d40f3d1d5075e62d3500bccb67f3daa8a95265b2"
+  integrity sha512-RR8hUCfRQn9j9RPKEVXo9LiwoxLPYn6hNZlvUOR8tSnaxlD0p0+la00ZP9/SnRt6HchKr+X0fO2r8vrETiJGew==
+  dependencies:
+    "@babel/types" "^7.16.0"
+    jsesc "^2.5.1"
+    source-map "^0.5.0"
+
 "@babel/generator@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.8.3.tgz#0e22c005b0a94c1c74eafe19ef78ce53a4d45c03"
@@ -160,6 +202,13 @@
   dependencies:
     "@babel/types" "^7.10.4"
 
+"@babel/helper-annotate-as-pure@^7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.0.tgz#9a1f0ebcda53d9a2d00108c4ceace6a5d5f1f08d"
+  integrity sha512-ItmYF9vR4zA8cByDocY05o0LGUkp1zhbTQOH1NFyl5xXEqlTJQCEJjieriw+aFpxo16swMxUnUiKS7a/r4vtHg==
+  dependencies:
+    "@babel/types" "^7.16.0"
+
 "@babel/helper-annotate-as-pure@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.8.3.tgz#60bc0bc657f63a0924ff9a4b4a0b24a13cf4deee"
@@ -220,6 +269,16 @@
     levenary "^1.1.1"
     semver "^5.5.0"
 
+"@babel/helper-compilation-targets@^7.16.0":
+  version "7.16.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.16.3.tgz#5b480cd13f68363df6ec4dc8ac8e2da11363cbf0"
+  integrity sha512-vKsoSQAyBmxS35JUOOt+07cLc6Nk/2ljLIHwmq2/NM6hdioUaqEXq/S+nXvbvXbZkNDlWOymPanJGOc4CBjSJA==
+  dependencies:
+    "@babel/compat-data" "^7.16.0"
+    "@babel/helper-validator-option" "^7.14.5"
+    browserslist "^4.17.5"
+    semver "^6.3.0"
+
 "@babel/helper-create-class-features-plugin@^7.10.4":
   version "7.10.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.10.5.tgz#9f61446ba80e8240b0a5c85c6fdac8459d6f259d"
@@ -232,6 +291,18 @@
     "@babel/helper-replace-supers" "^7.10.4"
     "@babel/helper-split-export-declaration" "^7.10.4"
 
+"@babel/helper-create-class-features-plugin@^7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.16.0.tgz#090d4d166b342a03a9fec37ef4fd5aeb9c7c6a4b"
+  integrity sha512-XLwWvqEaq19zFlF5PTgOod4bUA+XbkR4WLQBct1bkzmxJGB0ZEJaoKF4c8cgH9oBtCDuYJ8BP5NB9uFiEgO5QA==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.16.0"
+    "@babel/helper-function-name" "^7.16.0"
+    "@babel/helper-member-expression-to-functions" "^7.16.0"
+    "@babel/helper-optimise-call-expression" "^7.16.0"
+    "@babel/helper-replace-supers" "^7.16.0"
+    "@babel/helper-split-export-declaration" "^7.16.0"
+
 "@babel/helper-create-class-features-plugin@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.8.3.tgz#5b94be88c255f140fd2c10dd151e7f98f4bff397"
@@ -288,6 +359,15 @@
     "@babel/template" "^7.10.4"
     "@babel/types" "^7.10.4"
 
+"@babel/helper-function-name@^7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.16.0.tgz#b7dd0797d00bbfee4f07e9c4ea5b0e30c8bb1481"
+  integrity sha512-BZh4mEk1xi2h4HFjWUXRQX5AEx4rvaZxHgax9gcjdLWdkjsY7MKt5p0otjsg5noXw+pB+clMCjw+aEVYADMjog==
+  dependencies:
+    "@babel/helper-get-function-arity" "^7.16.0"
+    "@babel/template" "^7.16.0"
+    "@babel/types" "^7.16.0"
+
 "@babel/helper-function-name@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.8.3.tgz#eeeb665a01b1f11068e9fb86ad56a1cb1a824cca"
@@ -313,6 +393,13 @@
   dependencies:
     "@babel/types" "^7.10.4"
 
+"@babel/helper-get-function-arity@^7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.16.0.tgz#0088c7486b29a9cb5d948b1a1de46db66e089cfa"
+  integrity sha512-ASCquNcywC1NkYh/z7Cgp3w31YW8aojjYIlNg4VeJiHkqyP4AzIvr4qx7pYDb4/s8YcsZWqqOSxgkvjUz1kpDQ==
+  dependencies:
+    "@babel/types" "^7.16.0"
+
 "@babel/helper-get-function-arity@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.8.3.tgz#b894b947bd004381ce63ea1db9f08547e920abd5"
@@ -327,6 +414,13 @@
   dependencies:
     "@babel/types" "^7.10.4"
 
+"@babel/helper-hoist-variables@^7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.0.tgz#4c9023c2f1def7e28ff46fc1dbcd36a39beaa81a"
+  integrity sha512-1AZlpazjUR0EQZQv3sgRNfM9mEVWPK3M6vlalczA+EECcPz3XPh6VplbErL5UoMpChhSck5wAJHthlj1bYpcmg==
+  dependencies:
+    "@babel/types" "^7.16.0"
+
 "@babel/helper-member-expression-to-functions@^7.10.4", "@babel/helper-member-expression-to-functions@^7.10.5":
   version "7.11.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.11.0.tgz#ae69c83d84ee82f4b42f96e2a09410935a8f26df"
@@ -334,6 +428,13 @@
   dependencies:
     "@babel/types" "^7.11.0"
 
+"@babel/helper-member-expression-to-functions@^7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.16.0.tgz#29287040efd197c77636ef75188e81da8bccd5a4"
+  integrity sha512-bsjlBFPuWT6IWhl28EdrQ+gTvSvj5tqVP5Xeftp07SEuz5pLnsXZuDkDD3Rfcxy0IsHmbZ+7B2/9SHzxO0T+sQ==
+  dependencies:
+    "@babel/types" "^7.16.0"
+
 "@babel/helper-member-expression-to-functions@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.8.3.tgz#659b710498ea6c1d9907e0c73f206eee7dadc24c"
@@ -355,6 +456,13 @@
   dependencies:
     "@babel/types" "^7.10.4"
 
+"@babel/helper-module-imports@^7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.16.0.tgz#90538e60b672ecf1b448f5f4f5433d37e79a3ec3"
+  integrity sha512-kkH7sWzKPq0xt3H1n+ghb4xEMP8k0U7XV3kkB+ZGy69kDk2ySFW1qPi06sjKzFY3t1j6XbJSqr4mF9L7CYVyhg==
+  dependencies:
+    "@babel/types" "^7.16.0"
+
 "@babel/helper-module-transforms@^7.10.4", "@babel/helper-module-transforms@^7.10.5", "@babel/helper-module-transforms@^7.11.0":
   version "7.11.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.11.0.tgz#b16f250229e47211abdd84b34b64737c2ab2d359"
@@ -368,6 +476,20 @@
     "@babel/types" "^7.11.0"
     lodash "^4.17.19"
 
+"@babel/helper-module-transforms@^7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.16.0.tgz#1c82a8dd4cb34577502ebd2909699b194c3e9bb5"
+  integrity sha512-My4cr9ATcaBbmaEa8M0dZNA74cfI6gitvUAskgDtAFmAqyFKDSHQo5YstxPbN+lzHl2D9l/YOEFqb2mtUh4gfA==
+  dependencies:
+    "@babel/helper-module-imports" "^7.16.0"
+    "@babel/helper-replace-supers" "^7.16.0"
+    "@babel/helper-simple-access" "^7.16.0"
+    "@babel/helper-split-export-declaration" "^7.16.0"
+    "@babel/helper-validator-identifier" "^7.15.7"
+    "@babel/template" "^7.16.0"
+    "@babel/traverse" "^7.16.0"
+    "@babel/types" "^7.16.0"
+
 "@babel/helper-module-transforms@^7.9.0":
   version "7.9.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.9.0.tgz#43b34dfe15961918707d247327431388e9fe96e5"
@@ -388,6 +510,13 @@
   dependencies:
     "@babel/types" "^7.10.4"
 
+"@babel/helper-optimise-call-expression@^7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.16.0.tgz#cecdb145d70c54096b1564f8e9f10cd7d193b338"
+  integrity sha512-SuI467Gi2V8fkofm2JPnZzB/SUuXoJA5zXe/xzyPP2M04686RzFKFHPK6HDVN6JvWBIEW8tt9hPR7fXdn2Lgpw==
+  dependencies:
+    "@babel/types" "^7.16.0"
+
 "@babel/helper-optimise-call-expression@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.8.3.tgz#7ed071813d09c75298ef4f208956006b6111ecb9"
@@ -405,6 +534,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.13.0.tgz#806526ce125aed03373bc416a828321e3a6a33af"
   integrity sha512-ZPafIPSwzUlAoWT8DKs1W2VyF2gOWthGd5NGFMsBcMMol+ZhK+EQY/e6V96poa6PA/Bh+C9plWN0hXO1uB8AfQ==
 
+"@babel/helper-plugin-utils@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz#5ac822ce97eec46741ab70a517971e443a70c5a9"
+  integrity sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==
+
 "@babel/helper-regex@^7.10.4":
   version "7.10.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.10.5.tgz#32dfbb79899073c415557053a19bd055aae50ae0"
@@ -433,6 +567,16 @@
     "@babel/traverse" "^7.10.4"
     "@babel/types" "^7.10.4"
 
+"@babel/helper-replace-supers@^7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.16.0.tgz#73055e8d3cf9bcba8ddb55cad93fedc860f68f17"
+  integrity sha512-TQxuQfSCdoha7cpRNJvfaYxxxzmbxXw/+6cS7V02eeDYyhxderSoMVALvwupA54/pZcOTtVeJ0xccp1nGWladA==
+  dependencies:
+    "@babel/helper-member-expression-to-functions" "^7.16.0"
+    "@babel/helper-optimise-call-expression" "^7.16.0"
+    "@babel/traverse" "^7.16.0"
+    "@babel/types" "^7.16.0"
+
 "@babel/helper-replace-supers@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.8.3.tgz#91192d25f6abbcd41da8a989d4492574fb1530bc"
@@ -461,6 +605,13 @@
     "@babel/template" "^7.10.4"
     "@babel/types" "^7.10.4"
 
+"@babel/helper-simple-access@^7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.16.0.tgz#21d6a27620e383e37534cf6c10bba019a6f90517"
+  integrity sha512-o1rjBT/gppAqKsYfUdfHq5Rk03lMQrkPHG1OWzHWpLgVXRH4HnMM9Et9CVdIqwkCQlobnGHEJMsgWP/jE1zUiw==
+  dependencies:
+    "@babel/types" "^7.16.0"
+
 "@babel/helper-simple-access@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.8.3.tgz#7f8109928b4dab4654076986af575231deb639ae"
@@ -476,6 +627,13 @@
   dependencies:
     "@babel/types" "^7.11.0"
 
+"@babel/helper-skip-transparent-expression-wrappers@^7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.16.0.tgz#0ee3388070147c3ae051e487eca3ebb0e2e8bb09"
+  integrity sha512-+il1gTy0oHwUsBQZyJvukbB4vPMdcYBrFHa0Uc4AizLxbq6BOYC51Rv4tWocX9BLBDLZ4kc6qUFpQ6HRgL+3zw==
+  dependencies:
+    "@babel/types" "^7.16.0"
+
 "@babel/helper-split-export-declaration@^7.10.4", "@babel/helper-split-export-declaration@^7.11.0":
   version "7.11.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.11.0.tgz#f8a491244acf6a676158ac42072911ba83ad099f"
@@ -483,6 +641,13 @@
   dependencies:
     "@babel/types" "^7.11.0"
 
+"@babel/helper-split-export-declaration@^7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.0.tgz#29672f43663e936df370aaeb22beddb3baec7438"
+  integrity sha512-0YMMRpuDFNGTHNRiiqJX19GjNXA4H0E8jZ2ibccfSxaCogbm3am5WN/2nQNj0YnQwGWM1J06GOcQ2qnh3+0paw==
+  dependencies:
+    "@babel/types" "^7.16.0"
+
 "@babel/helper-split-export-declaration@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.8.3.tgz#31a9f30070f91368a7182cf05f831781065fc7a9"
@@ -495,11 +660,21 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz#d26cad8a47c65286b15df1547319a5d0bcf27288"
   integrity sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A==
 
+"@babel/helper-validator-identifier@^7.15.7":
+  version "7.15.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz#220df993bfe904a4a6b02ab4f3385a5ebf6e2389"
+  integrity sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w==
+
 "@babel/helper-validator-identifier@^7.9.5":
   version "7.9.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.9.5.tgz#90977a8e6fbf6b431a7dc31752eee233bf052d80"
   integrity sha512-/8arLKUFq882w4tWGj9JYzRpAlZgiWUJ+dtteNTDqrRBz9Iguck9Rn3ykuBDoUwh2TO4tSAJlrxDUOXWklJe4g==
 
+"@babel/helper-validator-option@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.14.5.tgz#6e72a1fff18d5dfcb878e1e62f1a021c4b72d5a3"
+  integrity sha512-OX8D5eeX4XwcroVW45NMvoYaIuFI+GQpA2a8Gi+X/U/cDUIRsV37qQfF905F0htTRCREQIB4KqPeaveRJUl3Ow==
+
 "@babel/helper-wrap-function@^7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.10.4.tgz#8a6f701eab0ff39f765b5a1cfef409990e624b87"
@@ -519,6 +694,15 @@
     "@babel/traverse" "^7.10.4"
     "@babel/types" "^7.10.4"
 
+"@babel/helpers@^7.16.0":
+  version "7.16.3"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.16.3.tgz#27fc64f40b996e7074dc73128c3e5c3e7f55c43c"
+  integrity sha512-Xn8IhDlBPhvYTvgewPKawhADichOsbkZuzN7qz2BusOM0brChsyXMDJvldWaYMMUNiCQdQzNEioXTp3sC8Nt8w==
+  dependencies:
+    "@babel/template" "^7.16.0"
+    "@babel/traverse" "^7.16.3"
+    "@babel/types" "^7.16.0"
+
 "@babel/helpers@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.8.3.tgz#382fbb0382ce7c4ce905945ab9641d688336ce85"
@@ -546,6 +730,15 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
+"@babel/highlight@^7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.16.0.tgz#6ceb32b2ca4b8f5f361fb7fd821e3fddf4a1725a"
+  integrity sha512-t8MH41kUQylBtu2+4IQA3atqevA2lRgqA2wyVB/YiWmsDSuylZZuXOUy9ric30hfzauEFfdsuk/eXTRrGrfd0g==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.15.7"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
 "@babel/node@^7.14.7":
   version "7.14.7"
   resolved "https://registry.yarnpkg.com/@babel/node/-/node-7.14.7.tgz#0090e83e726027ea682240718ca39e4b625b15ad"
@@ -578,6 +771,11 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.14.8.tgz#66fd41666b2d7b840bd5ace7f7416d5ac60208d4"
   integrity sha512-syoCQFOoo/fzkWDeM0dLEZi5xqurb5vuyzwIMNZRNun+N/9A4cUZeQaE7dTrB8jGaKuJRBtEOajtnmw0I5hvvA==
 
+"@babel/parser@^7.16.0", "@babel/parser@^7.16.3":
+  version "7.16.4"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.16.4.tgz#d5f92f57cf2c74ffe9b37981c0e72fee7311372e"
+  integrity sha512-6V0qdPUaiVHH3RtZeLIsc+6pDhbYzHR8ogA8w+f+Wc77DuXto19g2QUwveINoS34Uw+W8/hQDGJCx+i4n7xcng==
+
 "@babel/parser@^7.8.6", "@babel/parser@^7.9.0":
   version "7.9.4"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.9.4.tgz#68a35e6b0319bbc014465be43828300113f2f2e8"
@@ -615,6 +813,14 @@
     "@babel/helper-create-class-features-plugin" "^7.10.4"
     "@babel/helper-plugin-utils" "^7.10.4"
 
+"@babel/plugin-proposal-class-properties@^7.14.5":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.16.0.tgz#c029618267ddebc7280fa286e0f8ca2a278a2d1a"
+  integrity sha512-mCF3HcuZSY9Fcx56Lbn+CGdT44ioBMMvjNVldpKtj8tpniETdLjnxdHI1+sDWXIM1nNt+EanJOZ3IG9lzVjs7A==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.16.0"
+    "@babel/helper-plugin-utils" "^7.14.5"
+
 "@babel/plugin-proposal-dynamic-import@^7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.10.4.tgz#ba57a26cb98b37741e9d5bca1b8b0ddf8291f17e"
@@ -623,6 +829,14 @@
     "@babel/helper-plugin-utils" "^7.10.4"
     "@babel/plugin-syntax-dynamic-import" "^7.8.0"
 
+"@babel/plugin-proposal-dynamic-import@^7.14.5":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.16.0.tgz#783eca61d50526202f9b296095453977e88659f1"
+  integrity sha512-QGSA6ExWk95jFQgwz5GQ2Dr95cf7eI7TKutIXXTb7B1gCLTCz5hTjFTQGfLFBBiC5WSNi7udNwWsqbbMh1c4yQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
+
 "@babel/plugin-proposal-export-namespace-from@^7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.10.4.tgz#570d883b91031637b3e2958eea3c438e62c05f54"
@@ -631,6 +845,14 @@
     "@babel/helper-plugin-utils" "^7.10.4"
     "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
 
+"@babel/plugin-proposal-export-namespace-from@^7.14.5":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.16.0.tgz#9c01dee40b9d6b847b656aaf4a3976a71740f222"
+  integrity sha512-CjI4nxM/D+5wCnhD11MHB1AwRSAYeDT+h8gCdcVJZ/OK7+wRzFsf7PFPWVpVpNRkHMmMkQWAHpTq+15IXQ1diA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
+
 "@babel/plugin-proposal-json-strings@^7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.10.4.tgz#593e59c63528160233bd321b1aebe0820c2341db"
@@ -647,6 +869,14 @@
     "@babel/helper-plugin-utils" "^7.10.4"
     "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
 
+"@babel/plugin-proposal-logical-assignment-operators@^7.14.5":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.16.0.tgz#a711b8ceb3ffddd3ef88d3a49e86dbd3cc7db3fd"
+  integrity sha512-pbW0fE30sVTYXXm9lpVQQ/Vc+iTeQKiXlaNRZPPN2A2VdlWyAtsUrsQ3xydSlDW00TFMK7a8m3cDTkBF5WnV3Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
+
 "@babel/plugin-proposal-nullish-coalescing-operator@^7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.10.4.tgz#02a7e961fc32e6d5b2db0649e01bf80ddee7e04a"
@@ -655,6 +885,14 @@
     "@babel/helper-plugin-utils" "^7.10.4"
     "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
 
+"@babel/plugin-proposal-nullish-coalescing-operator@^7.14.5":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.16.0.tgz#44e1cce08fe2427482cf446a91bb451528ed0596"
+  integrity sha512-3bnHA8CAFm7cG93v8loghDYyQ8r97Qydf63BeYiGgYbjKKB/XP53W15wfRC7dvKfoiJ34f6Rbyyx2btExc8XsQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
+
 "@babel/plugin-proposal-numeric-separator@^7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.10.4.tgz#ce1590ff0a65ad12970a609d78855e9a4c1aef06"
@@ -663,6 +901,14 @@
     "@babel/helper-plugin-utils" "^7.10.4"
     "@babel/plugin-syntax-numeric-separator" "^7.10.4"
 
+"@babel/plugin-proposal-numeric-separator@^7.14.5":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.16.0.tgz#5d418e4fbbf8b9b7d03125d3a52730433a373734"
+  integrity sha512-FAhE2I6mjispy+vwwd6xWPyEx3NYFS13pikDBWUAFGZvq6POGs5eNchw8+1CYoEgBl9n11I3NkzD7ghn25PQ9Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
+
 "@babel/plugin-proposal-object-rest-spread@^7.0.0":
   version "7.9.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.9.5.tgz#3fd65911306d8746014ec0d0cf78f0e39a149116"
@@ -698,6 +944,15 @@
     "@babel/helper-skip-transparent-expression-wrappers" "^7.11.0"
     "@babel/plugin-syntax-optional-chaining" "^7.8.0"
 
+"@babel/plugin-proposal-optional-chaining@^7.14.5":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.16.0.tgz#56dbc3970825683608e9efb55ea82c2a2d6c8dc0"
+  integrity sha512-Y4rFpkZODfHrVo70Uaj6cC1JJOt3Pp0MdWSwIKtb8z1/lsjl9AmnB7ErRFV+QNGIfcY1Eruc2UMx5KaRnXjMyg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.16.0"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
+
 "@babel/plugin-proposal-private-methods@^7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.10.4.tgz#b160d972b8fdba5c7d111a145fc8c421fc2a6909"
@@ -706,6 +961,24 @@
     "@babel/helper-create-class-features-plugin" "^7.10.4"
     "@babel/helper-plugin-utils" "^7.10.4"
 
+"@babel/plugin-proposal-private-methods@^7.14.5":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.16.0.tgz#b4dafb9c717e4301c5776b30d080d6383c89aff6"
+  integrity sha512-IvHmcTHDFztQGnn6aWq4t12QaBXTKr1whF/dgp9kz84X6GUcwq9utj7z2wFCUfeOup/QKnOlt2k0zxkGFx9ubg==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.16.0"
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-proposal-private-property-in-object@^7.14.5":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.16.0.tgz#69e935b2c5c79d2488112d886f0c4e2790fee76f"
+  integrity sha512-3jQUr/HBbMVZmi72LpjQwlZ55i1queL8KcDTQEkAHihttJnAPrcvG9ZNXIfsd2ugpizZo595egYV6xy+pv4Ofw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.16.0"
+    "@babel/helper-create-class-features-plugin" "^7.16.0"
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
+
 "@babel/plugin-proposal-unicode-property-regex@^7.10.4", "@babel/plugin-proposal-unicode-property-regex@^7.4.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.10.4.tgz#4483cda53041ce3413b7fe2f00022665ddfaa75d"
@@ -840,6 +1113,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
+"@babel/plugin-syntax-private-property-in-object@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.5.tgz#0dc6671ec0ea22b6e94a1114f857970cd39de1ad"
+  integrity sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
 "@babel/plugin-syntax-top-level-await@^7.10.4", "@babel/plugin-syntax-top-level-await@^7.8.3":
   version "7.12.13"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.12.13.tgz#c5f0fa6e249f5b739727f923540cf7a806130178"
@@ -847,6 +1127,20 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.12.13"
 
+"@babel/plugin-syntax-typescript@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.14.5.tgz#b82c6ce471b165b5ce420cf92914d6fb46225716"
+  integrity sha512-u6OXzDaIXjEstBRRoBCQ/uKQKlbuaeE5in0RvWdA4pN6AhqxTIwUsnHPU1CFZA/amYObMsuWhYfRl3Ch90HD0Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-syntax-typescript@^7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.16.0.tgz#2feeb13d9334cc582ea9111d3506f773174179bb"
+  integrity sha512-Xv6mEXqVdaqCBfJFyeab0fH2DnUoMsDmhamxsSi4j8nLd4Vtw213WMJr55xxqipC/YVWyPY3K0blJncPYji+dQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
 "@babel/plugin-transform-arrow-functions@^7.0.0":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.8.3.tgz#82776c2ed0cd9e1a49956daeb896024c9473b8b6"
@@ -1081,6 +1375,16 @@
     "@babel/helper-simple-access" "^7.10.4"
     babel-plugin-dynamic-import-node "^2.3.3"
 
+"@babel/plugin-transform-modules-commonjs@^7.14.5":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.16.0.tgz#add58e638c8ddc4875bd9a9ecb5c594613f6c922"
+  integrity sha512-Dzi+NWqyEotgzk/sb7kgQPJQf7AJkQBWsVp1N6JWc1lBVo0vkElUnGdr1PzUBmfsCCN5OOFya3RtpeHk15oLKQ==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.16.0"
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/helper-simple-access" "^7.16.0"
+    babel-plugin-dynamic-import-node "^2.3.3"
+
 "@babel/plugin-transform-modules-systemjs@^7.10.4":
   version "7.10.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.10.5.tgz#6270099c854066681bae9e05f87e1b9cadbe8c85"
@@ -1300,6 +1604,15 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
+"@babel/plugin-transform-typescript@^7.16.0":
+  version "7.16.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.16.1.tgz#cc0670b2822b0338355bc1b3d2246a42b8166409"
+  integrity sha512-NO4XoryBng06jjw/qWEU2LhcLJr1tWkhpMam/H4eas/CDKMX/b2/Ylb6EI256Y7+FVPCawwSM1rrJNOpDiz+Lg==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.16.0"
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/plugin-syntax-typescript" "^7.16.0"
+
 "@babel/plugin-transform-unicode-escapes@^7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.10.4.tgz#feae523391c7651ddac115dae0a9d06857892007"
@@ -1437,6 +1750,15 @@
     "@babel/plugin-transform-react-jsx-source" "^7.10.4"
     "@babel/plugin-transform-react-pure-annotations" "^7.10.4"
 
+"@babel/preset-typescript@^7.14.5":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.16.0.tgz#b0b4f105b855fb3d631ec036cdc9d1ffd1fa5eac"
+  integrity sha512-txegdrZYgO9DlPbv+9QOVpMnKbOtezsLHWsnsRF4AjbSIsVaujrq1qg8HK0mxQpWv0jnejt0yEoW1uWpvbrDTg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/helper-validator-option" "^7.14.5"
+    "@babel/plugin-transform-typescript" "^7.16.0"
+
 "@babel/register@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/register/-/register-7.14.5.tgz#d0eac615065d9c2f1995842f85d6e56c345f3233"
@@ -1501,6 +1823,15 @@
     "@babel/parser" "^7.12.13"
     "@babel/types" "^7.12.13"
 
+"@babel/template@^7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.0.tgz#d16a35ebf4cd74e202083356fab21dd89363ddd6"
+  integrity sha512-MnZdpFD/ZdYhXwiunMqqgyZyucaYsbL0IrjoGjaVhGilz+x8YB++kRfygSOIj1yOtWKPlx7NBp+9I1RQSgsd5A==
+  dependencies:
+    "@babel/code-frame" "^7.16.0"
+    "@babel/parser" "^7.16.0"
+    "@babel/types" "^7.16.0"
+
 "@babel/template@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.8.3.tgz#e02ad04fe262a657809327f578056ca15fd4d1b8"
@@ -1564,6 +1895,21 @@
     globals "^11.1.0"
     lodash "^4.17.19"
 
+"@babel/traverse@^7.16.0", "@babel/traverse@^7.16.3":
+  version "7.16.3"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.16.3.tgz#f63e8a938cc1b780f66d9ed3c54f532ca2d14787"
+  integrity sha512-eolumr1vVMjqevCpwVO99yN/LoGL0EyHiLO5I043aYQvwOJ9eR5UsZSClHVCzfhBduMAsSzgA/6AyqPjNayJag==
+  dependencies:
+    "@babel/code-frame" "^7.16.0"
+    "@babel/generator" "^7.16.0"
+    "@babel/helper-function-name" "^7.16.0"
+    "@babel/helper-hoist-variables" "^7.16.0"
+    "@babel/helper-split-export-declaration" "^7.16.0"
+    "@babel/parser" "^7.16.3"
+    "@babel/types" "^7.16.0"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
 "@babel/traverse@^7.8.6", "@babel/traverse@^7.9.0":
   version "7.9.5"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.9.5.tgz#6e7c56b44e2ac7011a948c21e283ddd9d9db97a2"
@@ -1605,6 +1951,14 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.16.0.tgz#db3b313804f96aadd0b776c4823e127ad67289ba"
+  integrity sha512-PJgg/k3SdLsGb3hhisFvtLOw5ts113klrpLuIPtCJIU+BB24fqq6lf8RWqKJEjzqXR9AEH1rIb5XTqwBHB+kQg==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.15.7"
+    to-fast-properties "^2.0.0"
+
 "@babel/types@^7.8.6", "@babel/types@^7.9.0", "@babel/types@^7.9.5":
   version "7.9.5"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.9.5.tgz#89231f82915a8a566a703b3b20133f73da6b9444"
@@ -1853,6 +2207,17 @@
     "@types/yargs" "^15.0.0"
     chalk "^4.0.0"
 
+"@jest/types@^27.2.5":
+  version "27.2.5"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-27.2.5.tgz#420765c052605e75686982d24b061b4cbba22132"
+  integrity sha512-nmuM4VuDtCZcY+eTpw+0nvstwReMsjPoj7ZR80/BbixulhLaiX+fbv8oeLW8WZlJMcsGQsTmMKT/iTZu1Uy/lQ==
+  dependencies:
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^3.0.0"
+    "@types/node" "*"
+    "@types/yargs" "^16.0.0"
+    chalk "^4.0.0"
+
 "@nodelib/fs.scandir@2.1.3":
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz#3a582bdb53804c6ba6d146579c46e52130cf4a3b"
@@ -1939,6 +2304,45 @@
     universal-user-agent "^3.0.0"
     url-template "^2.0.8"
 
+"@playwright/test@^1.16.3":
+  version "1.16.3"
+  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.16.3.tgz#99439d07af6a355586393b463fd88315f32d2a57"
+  integrity sha512-aJR6d6Fd/y6lq1RWWggcuiivM7offqddOW3te+NGGMxgF2P0xAxU0/xUurwIFnEp7iHwXILSZByzZ6W6fuKPIg==
+  dependencies:
+    "@babel/code-frame" "^7.14.5"
+    "@babel/core" "^7.14.8"
+    "@babel/plugin-proposal-class-properties" "^7.14.5"
+    "@babel/plugin-proposal-dynamic-import" "^7.14.5"
+    "@babel/plugin-proposal-export-namespace-from" "^7.14.5"
+    "@babel/plugin-proposal-logical-assignment-operators" "^7.14.5"
+    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.14.5"
+    "@babel/plugin-proposal-numeric-separator" "^7.14.5"
+    "@babel/plugin-proposal-optional-chaining" "^7.14.5"
+    "@babel/plugin-proposal-private-methods" "^7.14.5"
+    "@babel/plugin-proposal-private-property-in-object" "^7.14.5"
+    "@babel/plugin-syntax-async-generators" "^7.8.4"
+    "@babel/plugin-syntax-json-strings" "^7.8.3"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
+    "@babel/plugin-transform-modules-commonjs" "^7.14.5"
+    "@babel/preset-typescript" "^7.14.5"
+    colors "^1.4.0"
+    commander "^8.2.0"
+    debug "^4.1.1"
+    expect "=27.2.5"
+    jest-matcher-utils "=27.2.5"
+    jpeg-js "^0.4.2"
+    minimatch "^3.0.3"
+    ms "^2.1.2"
+    open "^8.3.0"
+    pirates "^4.0.1"
+    pixelmatch "^5.2.1"
+    playwright-core "=1.16.3"
+    pngjs "^5.0.0"
+    rimraf "^3.0.2"
+    source-map-support "^0.4.18"
+    stack-utils "^2.0.3"
+
 "@pmmmwh/react-refresh-webpack-plugin@^0.4.1":
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.4.1.tgz#a4db0ed8e58c2f8566161c9a8cdf1d095c9a891b"
@@ -2301,6 +2705,20 @@
   dependencies:
     "@types/yargs-parser" "*"
 
+"@types/yargs@^16.0.0":
+  version "16.0.4"
+  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-16.0.4.tgz#26aad98dd2c2a38e421086ea9ad42b9e51642977"
+  integrity sha512-T8Yc9wt/5LbJyCaLiHPReJa0kApcIgJ7Bn735GjItUfh08Z1pJvu8QZqb9s+mMvKV6WUQRV7K2R46YbjMXTTJw==
+  dependencies:
+    "@types/yargs-parser" "*"
+
+"@types/yauzl@^2.9.1":
+  version "2.9.2"
+  resolved "https://registry.yarnpkg.com/@types/yauzl/-/yauzl-2.9.2.tgz#c48e5d56aff1444409e39fa164b0b4d4552a7b7a"
+  integrity sha512-8uALY5LTvSuHgloDVUvWP3pIauILm+8/0pDMokuDYIoNsOkSwd5AiHBTSEJjKTDcZr5z8UpgOWZkxBF4iJftoA==
+  dependencies:
+    "@types/node" "*"
+
 "@typescript-eslint/experimental-utils@2.34.0":
   version "2.34.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-2.34.0.tgz#d3524b644cdb40eebceca67f8cf3e4cc9c8f980f"
@@ -2824,7 +3242,7 @@ agent-base@5:
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-5.1.1.tgz#e8fb3f242959db44d63be665db7a8e739537a32c"
   integrity sha512-TMeqbNl2fMW0nMjTEPOwe3J/PRFP4vqeoNuQMG0HlMrtm5QxKqdvAkZ1pRBQ/ulIyDD5Yq0nJ7YbdD8ey0TO3g==
 
-agent-base@6:
+agent-base@6, agent-base@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
   integrity sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==
@@ -3002,6 +3420,11 @@ ansi-regex@^5.0.0:
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.0.tgz#388539f55179bf39339c81af30a654d69f87cb75"
   integrity sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==
 
+ansi-regex@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
+  integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
+
 ansi-styles@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
@@ -3022,6 +3445,11 @@ ansi-styles@^4.0.0, ansi-styles@^4.1.0:
     "@types/color-name" "^1.1.1"
     color-convert "^2.0.1"
 
+ansi-styles@^5.0.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-5.2.0.tgz#07449690ad45777d1924ac2abb2fc8895dba836b"
+  integrity sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==
+
 ansi-wrap@0.1.0, ansi-wrap@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/ansi-wrap/-/ansi-wrap-0.1.0.tgz#a82250ddb0015e9a27ca82e82ea603bbfa45efaf"
@@ -4133,6 +4561,17 @@ browserslist@^4.12.0:
     escalade "^3.0.2"
     node-releases "^1.1.60"
 
+browserslist@^4.17.5:
+  version "4.18.1"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.18.1.tgz#60d3920f25b6860eb917c6c7b185576f4d8b017f"
+  integrity sha512-8ScCzdpPwR2wQh8IT82CA2VgDwjHyqMovPBZSNH54+tm4Jk2pCuv90gmAdH6J84OCRWi0b4gMe6O6XPXuJnjgQ==
+  dependencies:
+    caniuse-lite "^1.0.30001280"
+    electron-to-chromium "^1.3.896"
+    escalade "^3.1.1"
+    node-releases "^2.0.1"
+    picocolors "^1.0.0"
+
 browserslist@^4.8.3:
   version "4.8.5"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.8.5.tgz#691af4e327ac877b25e7a3f7ee869c4ef36cdea3"
@@ -4411,6 +4850,11 @@ caniuse-lite@^1.0.30001111:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001114.tgz#2e88119afb332ead5eaa330e332e951b1c4bfea9"
   integrity sha512-ml/zTsfNBM+T1+mjglWRPgVsu2L76GAaADKX5f4t0pbhttEp0WMawJsHDYlFkVZkoA+89uvBRrVrEE4oqenzXQ==
 
+caniuse-lite@^1.0.30001280:
+  version "1.0.30001282"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001282.tgz#38c781ee0a90ccfe1fe7fefd00e43f5ffdcb96fd"
+  integrity sha512-YhF/hG6nqBEllymSIjLtR2iWDDnChvhnVJqp+vloyt2tEHFG1yBR+ac2B/rOw0qOK0m0lEXU2dv4E/sMk5P9Kg==
+
 capture-exit@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4"
@@ -4816,7 +5260,7 @@ colors@1.0.3:
   resolved "https://registry.yarnpkg.com/colors/-/colors-1.0.3.tgz#0433f44d809680fdeb60ed260f1b0c262e82a40b"
   integrity sha1-BDP0TYCWgP3rYO0mDxsMJi6CpAs=
 
-colors@^1.1.2:
+colors@^1.1.2, colors@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/colors/-/colors-1.4.0.tgz#c50491479d4c1bdaed2c9ced32cf7c7dc2360f78"
   integrity sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==
@@ -4863,6 +5307,11 @@ commander@^4.1.1:
   resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
   integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
 
+commander@^8.2.0:
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66"
+  integrity sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==
+
 common-tags@1.8.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.0.tgz#8e3153e542d4a39e9b10554434afaaf98956a937"
@@ -5677,6 +6126,11 @@ defer-to-connect@^1.0.1:
   resolved "https://registry.yarnpkg.com/defer-to-connect/-/defer-to-connect-1.0.2.tgz#4bae758a314b034ae33902b5aac25a8dd6a8633e"
   integrity sha512-k09hcQcTDY+cwgiwa6PYKLm3jlagNzQ+RSvhjzESOGOx+MNOuXkxTfEvPrO1IOQ81tArCFYQgi631clB70RpQw==
 
+define-lazy-prop@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz#3f7ae421129bcaaac9bc74905c98a0009ec9ee7f"
+  integrity sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==
+
 define-properties@^1.1.2, define-properties@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1"
@@ -5775,6 +6229,11 @@ diff-sequences@^26.6.2:
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-26.6.2.tgz#48ba99157de1923412eed41db6b6d4aa9ca7c0b1"
   integrity sha512-Mv/TDa3nZ9sbc5soK+OoA74BsS3mL37yixCvUAQkiuA4Wz6YtwP/K47n2rv2ovzHZvoiQeA5FTQOschKkEwB0Q==
 
+diff-sequences@^27.0.6:
+  version "27.0.6"
+  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-27.0.6.tgz#3305cb2e55a033924054695cc66019fd7f8e5723"
+  integrity sha512-ag6wfpBFyNXZ0p8pcuIDS//D8H062ZQJ3fzYxjpmeKjnz8W4pekL3AI8VohmyZmsWW2PWaHgjsmqR6L13101VQ==
+
 diff@4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/diff/-/diff-4.0.1.tgz#0c667cb467ebbb5cea7f14f135cc2dba7780a8ff"
@@ -6030,6 +6489,11 @@ electron-to-chromium@^1.3.523:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.538.tgz#15226638ee9db5d8e74f4c860cef6078d8e1e871"
   integrity sha512-rlyYXLlOoZkJuvY4AJXUpP7CHRVtwZz311HPVoEO1UHo/kqDCsP1pNas0A9paZuPEiYGdLwrjllF2hs69NEaTw==
 
+electron-to-chromium@^1.3.896:
+  version "1.3.903"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.903.tgz#e2d3c3809f4ef05fdbe5cc88969dfc94b1bd15b9"
+  integrity sha512-+PnYAyniRRTkNq56cqYDLq9LyklZYk0hqoDy9GpcU11H5QjRmFZVDbxtgHUMK/YzdNTcn1XWP5gb+hFlSCr20g==
+
 electron@^11.1.0:
   version "11.1.1"
   resolved "https://registry.yarnpkg.com/electron/-/electron-11.1.1.tgz#188f036f8282798398dca9513e9bb3b10213e3aa"
@@ -6331,6 +6795,11 @@ escalade@^3.0.2:
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.0.2.tgz#6a580d70edb87880f22b4c91d0d56078df6962c4"
   integrity sha512-gPYAU37hYCUhW5euPeR+Y74F7BL+IBsV93j5cvGriSaD1aG6MGsqsV1yamRdrWrb2j3aiZvb0X+UBOWpx3JWtQ==
 
+escalade@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
+  integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
+
 escape-goat@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/escape-goat/-/escape-goat-2.1.1.tgz#1b2dc77003676c457ec760b2dc68edb648188675"
@@ -6442,6 +6911,7 @@ eslint-plugin-no-unsanitized@3.1.2:
 
 "eslint-plugin-react-internal@link:./scripts/eslint-rules":
   version "0.0.0"
+  uid ""
 
 eslint-plugin-react@^6.7.1:
   version "6.10.3"
@@ -6852,6 +7322,18 @@ expand-tilde@^2.0.0, expand-tilde@^2.0.2:
   dependencies:
     homedir-polyfill "^1.0.1"
 
+expect@=27.2.5:
+  version "27.2.5"
+  resolved "https://registry.yarnpkg.com/expect/-/expect-27.2.5.tgz#16154aaa60b4d9a5b0adacfea3e4d6178f4b93fd"
+  integrity sha512-ZrO0w7bo8BgGoP/bLz+HDCI+0Hfei9jUSZs5yI/Wyn9VkG9w8oJ7rHRgYj+MA7yqqFa0IwHA3flJzZtYugShJA==
+  dependencies:
+    "@jest/types" "^27.2.5"
+    ansi-styles "^5.0.0"
+    jest-get-type "^27.0.6"
+    jest-matcher-utils "^27.2.5"
+    jest-message-util "^27.2.5"
+    jest-regex-util "^27.0.6"
+
 expect@^26.6.2:
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/expect/-/expect-26.6.2.tgz#c6b996bf26bf3fe18b67b2d0f51fc981ba934417"
@@ -6990,6 +7472,17 @@ extract-zip@^1.0.3:
     mkdirp "0.5.1"
     yauzl "2.4.1"
 
+extract-zip@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/extract-zip/-/extract-zip-2.0.1.tgz#663dca56fe46df890d5f131ef4a06d22bb8ba13a"
+  integrity sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==
+  dependencies:
+    debug "^4.1.1"
+    get-stream "^5.1.0"
+    yauzl "^2.10.0"
+  optionalDependencies:
+    "@types/yauzl" "^2.9.1"
+
 extsprintf@1.3.0, extsprintf@^1.2.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
@@ -7624,6 +8117,11 @@ gensync@^1.0.0-beta.1:
   resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.1.tgz#58f4361ff987e5ff6e1e7a210827aa371eaac269"
   integrity sha512-r8EC6NO1sngH/zdD9fiRDLdcgnbayXah+mLgManTaIZJqEC1MZstmnox8KpnI2/fxQwrp5OpCOYWLp4rBl4Jcg==
 
+gensync@^1.0.0-beta.2:
+  version "1.0.0-beta.2"
+  resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
+  integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
+
 get-caller-file@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"
@@ -8972,6 +9470,11 @@ is-docker@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.0.0.tgz#2cb0df0e75e2d064fe1864c37cdeacb7b2dcf25b"
   integrity sha512-pJEdRugimx4fBMra5z2/5iRdZ63OhYV0vr0Dwm5+xtW4D1FvRkB8hamMIhnWfyJeDdyr/aa7BDyNbtG38VxgoQ==
 
+is-docker@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.2.1.tgz#33eeabe23cfe86f14bde4408a02c0cfb853acdaa"
+  integrity sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==
+
 is-dotfile@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/is-dotfile/-/is-dotfile-1.0.3.tgz#a6a2f32ffd2dfb04f5ca25ecd0f6b83cf798a1e1"
@@ -9557,6 +10060,16 @@ jest-diff@^26.6.2:
     jest-get-type "^26.3.0"
     pretty-format "^26.6.2"
 
+jest-diff@^27.2.5, jest-diff@^27.3.1:
+  version "27.3.1"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-27.3.1.tgz#d2775fea15411f5f5aeda2a5e02c2f36440f6d55"
+  integrity sha512-PCeuAH4AWUo2O5+ksW4pL9v5xJAcIKPUPfIhZBcG1RKv/0+dvaWTQK1Nrau8d67dp65fOqbeMdoil+6PedyEPQ==
+  dependencies:
+    chalk "^4.0.0"
+    diff-sequences "^27.0.6"
+    jest-get-type "^27.3.1"
+    pretty-format "^27.3.1"
+
 jest-docblock@^26.0.0:
   version "26.0.0"
   resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-26.0.0.tgz#3e2fa20899fc928cb13bd0ff68bd3711a36889b5"
@@ -9613,6 +10126,11 @@ jest-get-type@^26.3.0:
   resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-26.3.0.tgz#e97dc3c3f53c2b406ca7afaed4493b1d099199e0"
   integrity sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig==
 
+jest-get-type@^27.0.6, jest-get-type@^27.3.1:
+  version "27.3.1"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-27.3.1.tgz#a8a2b0a12b50169773099eee60a0e6dd11423eff"
+  integrity sha512-+Ilqi8hgHSAdhlQ3s12CAVNd8H96ZkQBfYoXmArzZnOfAtVAJEiPDBirjByEblvG/4LPJmkL+nBqPO3A1YJAEg==
+
 jest-haste-map@^26.6.2:
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-26.6.2.tgz#dd7e60fe7dc0e9f911a23d79c5ff7fb5c2cafeaa"
@@ -9666,6 +10184,16 @@ jest-leak-detector@^26.6.2:
     jest-get-type "^26.3.0"
     pretty-format "^26.6.2"
 
+jest-matcher-utils@=27.2.5:
+  version "27.2.5"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-27.2.5.tgz#4684faaa8eb32bf15e6edaead6834031897e2980"
+  integrity sha512-qNR/kh6bz0Dyv3m68Ck2g1fLW5KlSOUNcFQh87VXHZwWc/gY6XwnKofx76Qytz3x5LDWT09/2+yXndTkaG4aWg==
+  dependencies:
+    chalk "^4.0.0"
+    jest-diff "^27.2.5"
+    jest-get-type "^27.0.6"
+    pretty-format "^27.2.5"
+
 jest-matcher-utils@^26.6.2:
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-26.6.2.tgz#8e6fd6e863c8b2d31ac6472eeb237bc595e53e7a"
@@ -9676,6 +10204,16 @@ jest-matcher-utils@^26.6.2:
     jest-get-type "^26.3.0"
     pretty-format "^26.6.2"
 
+jest-matcher-utils@^27.2.5:
+  version "27.3.1"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-27.3.1.tgz#257ad61e54a6d4044e080d85dbdc4a08811e9c1c"
+  integrity sha512-hX8N7zXS4k+8bC1Aj0OWpGb7D3gIXxYvPNK1inP5xvE4ztbz3rc4AkI6jGVaerepBnfWB17FL5lWFJT3s7qo8w==
+  dependencies:
+    chalk "^4.0.0"
+    jest-diff "^27.3.1"
+    jest-get-type "^27.3.1"
+    pretty-format "^27.3.1"
+
 jest-message-util@^26.6.2:
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-26.6.2.tgz#58173744ad6fc0506b5d21150b9be56ef001ca07"
@@ -9691,6 +10229,21 @@ jest-message-util@^26.6.2:
     slash "^3.0.0"
     stack-utils "^2.0.2"
 
+jest-message-util@^27.2.5:
+  version "27.3.1"
+  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-27.3.1.tgz#f7c25688ad3410ab10bcb862bcfe3152345c6436"
+  integrity sha512-bh3JEmxsTZ/9rTm0jQrPElbY2+y48Rw2t47uMfByNyUVR+OfPh4anuyKsGqsNkXk/TI4JbLRZx+7p7Hdt6q1yg==
+  dependencies:
+    "@babel/code-frame" "^7.12.13"
+    "@jest/types" "^27.2.5"
+    "@types/stack-utils" "^2.0.0"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.4"
+    micromatch "^4.0.4"
+    pretty-format "^27.3.1"
+    slash "^3.0.0"
+    stack-utils "^2.0.3"
+
 jest-mock@^26.6.2:
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-26.6.2.tgz#d6cb712b041ed47fe0d9b6fc3474bc6543feb302"
@@ -9709,6 +10262,11 @@ jest-regex-util@^26.0.0:
   resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-26.0.0.tgz#d25e7184b36e39fd466c3bc41be0971e821fee28"
   integrity sha512-Gv3ZIs/nA48/Zvjrl34bf+oD76JHiGDUxNOVgUjh3j890sblXryjY4rss71fPtD/njchl6PSE2hIhvyWa1eT0A==
 
+jest-regex-util@^27.0.6:
+  version "27.0.6"
+  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-27.0.6.tgz#02e112082935ae949ce5d13b2675db3d8c87d9c5"
+  integrity sha512-SUhPzBsGa1IKm8hx2F4NfTGGp+r7BXJ4CulsZ1k2kI+mGLG+lxGrs76veN2LF/aUdGosJBzKgXmNCw+BzFqBDQ==
+
 jest-resolve-dependencies@^26.6.3:
   version "26.6.3"
   resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-26.6.3.tgz#6680859ee5d22ee5dcd961fe4871f59f4c784fb6"
@@ -9886,6 +10444,11 @@ jetpack-id@1.0.0:
   resolved "https://registry.yarnpkg.com/jetpack-id/-/jetpack-id-1.0.0.tgz#2cf9fbae46d8074fc16b7de0071c8efebca473a6"
   integrity sha1-LPn7rkbYB0/Ba33gBxyO/rykc6Y=
 
+jpeg-js@^0.4.2:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/jpeg-js/-/jpeg-js-0.4.3.tgz#6158e09f1983ad773813704be80680550eff977b"
+  integrity sha512-ru1HWKek8octvUHFHvE5ZzQ1yAsJmIvRdGWvSoKV52XKyuyYA437QWDttXT8eZXDSbuMpHlLzPDZUPd6idIz+Q==
+
 jpegtran-bin@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/jpegtran-bin/-/jpegtran-bin-4.0.0.tgz#d00aed809fba7aa6f30817e59eee4ddf198f8f10"
@@ -10892,6 +11455,14 @@ micromatch@^4.0.2:
     braces "^3.0.1"
     picomatch "^2.0.5"
 
+micromatch@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.4.tgz#896d519dfe9db25fce94ceb7a500919bf881ebf9"
+  integrity sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==
+  dependencies:
+    braces "^3.0.1"
+    picomatch "^2.2.3"
+
 miller-rabin@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/miller-rabin/-/miller-rabin-4.0.1.tgz#f080351c865b0dc562a8462966daa53543c78a4d"
@@ -10939,6 +11510,11 @@ mime@^2.4.4:
   resolved "https://registry.yarnpkg.com/mime/-/mime-2.4.5.tgz#d8de2ecb92982dedbb6541c9b6841d7f218ea009"
   integrity sha512-3hQhEUF027BuxZjQA3s7rIv/7VCQPa27hN9u9g87sEkWaKwQPuXOkVKtOeiyUrnWqTDiOs8Ed2rwg733mB0R5w==
 
+mime@^2.4.6:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-2.6.0.tgz#a2a682a95cd4d0cb1d6257e28f83da7e35800367"
+  integrity sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==
+
 mimic-fn@^2.0.0, mimic-fn@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
@@ -10959,7 +11535,7 @@ minimalistic-crypto-utils@^1.0.0, minimalistic-crypto-utils@^1.0.1:
   resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
   integrity sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=
 
-"minimatch@2 || 3", minimatch@^3.0.4:
+"minimatch@2 || 3", minimatch@^3.0.3, minimatch@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
   integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
@@ -11119,6 +11695,11 @@ ms@2.1.2, ms@^2.0.0, ms@^2.1.1:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
+ms@^2.1.2:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
+  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
+
 multicast-dns-service-types@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz#899f11d9686e5e05cb91b35d5f0e63b773cfc901"
@@ -11387,6 +11968,11 @@ node-releases@^1.1.60:
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.60.tgz#6948bdfce8286f0b5d0e5a88e8384e954dfe7084"
   integrity sha512-gsO4vjEdQaTusZAEebUWp2a5d7dF5DYoIpDG7WySnk7BuZDW+GPpHXoXXuYawRBr/9t5q54tirPz79kFIWg4dA==
 
+node-releases@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.1.tgz#3d1d395f204f1f2f29a54358b9fb678765ad2fc5"
+  integrity sha512-CqyzN6z7Q6aMeF/ktcMVTzhAHCEpf8SOarwpzpf8pNBY2k5/oM34UHldUwp8VKI7uxct2HxSRdJjBaZeESzcxA==
+
 node-rsa@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/node-rsa/-/node-rsa-1.0.5.tgz#854dc1b275729d69bc25883f83ca80705db9262e"
@@ -11712,6 +12298,15 @@ open@^7.0.2:
     is-docker "^2.0.0"
     is-wsl "^2.1.1"
 
+open@^8.3.0:
+  version "8.4.0"
+  resolved "https://registry.yarnpkg.com/open/-/open-8.4.0.tgz#345321ae18f8138f82565a910fdc6b39e8c244f8"
+  integrity sha512-XgFPPM+B28FtCCgSb9I+s9szOC1vZRSwgWsRUA5ylIxRTgKozqjOCrVOqGsYABPYK5qnfqClxZTFBa8PKt2v6Q==
+  dependencies:
+    define-lazy-prop "^2.0.0"
+    is-docker "^2.1.1"
+    is-wsl "^2.2.0"
+
 opn@5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/opn/-/opn-5.3.0.tgz#64871565c863875f052cfdf53d3e3cb5adb53b1c"
@@ -12328,6 +12923,11 @@ performance-now@^2.1.0:
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
   integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
 
+picocolors@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
+  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
+
 picomatch@^2.0.4, picomatch@^2.0.5:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.1.tgz#21bac888b6ed8601f831ce7816e335bc779f0a4a"
@@ -12338,6 +12938,11 @@ picomatch@^2.2.1:
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
   integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
 
+picomatch@^2.2.3:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972"
+  integrity sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==
+
 pify@^2.0.0, pify@^2.2.0, pify@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
@@ -12406,6 +13011,13 @@ pirates@^4.0.0, pirates@^4.0.1:
   dependencies:
     node-modules-regexp "^1.0.0"
 
+pixelmatch@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/pixelmatch/-/pixelmatch-5.2.1.tgz#9e4e4f4aa59648208a31310306a5bed5522b0d65"
+  integrity sha512-WjcAdYSnKrrdDdqTcVEY7aB7UhhwjYQKYhHiBXdJef0MOaQeYpUdQ+iVyBLa5YBKS8MPVPPMX7rpOByISLpeEQ==
+  dependencies:
+    pngjs "^4.0.1"
+
 pkg-dir@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-3.0.0.tgz#2749020f239ed990881b1f71210d51eb6523bea3"
@@ -12420,6 +13032,28 @@ pkg-dir@^4.2.0:
   dependencies:
     find-up "^4.0.0"
 
+playwright-core@=1.16.3:
+  version "1.16.3"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.16.3.tgz#f466be9acaffb698654adfb0a17a4906ba936895"
+  integrity sha512-16hF27IvQheJee+DbhC941AUZLjbJgfZFWi9YPS4LKEk/lKFhZI+9TiFD0sboYqb9eaEWvul47uR5xxTVbE4iw==
+  dependencies:
+    commander "^8.2.0"
+    debug "^4.1.1"
+    extract-zip "^2.0.1"
+    https-proxy-agent "^5.0.0"
+    jpeg-js "^0.4.2"
+    mime "^2.4.6"
+    pngjs "^5.0.0"
+    progress "^2.0.3"
+    proper-lockfile "^4.1.1"
+    proxy-from-env "^1.1.0"
+    rimraf "^3.0.2"
+    socks-proxy-agent "^6.1.0"
+    stack-utils "^2.0.3"
+    ws "^7.4.6"
+    yauzl "^2.10.0"
+    yazl "^2.5.1"
+
 plugin-error@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/plugin-error/-/plugin-error-0.1.2.tgz#3b9bb3335ccf00f425e07437e19276967da47ace"
@@ -12431,6 +13065,16 @@ plugin-error@^0.1.2:
     arr-union "^2.0.1"
     extend-shallow "^1.1.2"
 
+pngjs@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-4.0.1.tgz#f803869bb2fc1bfe1bf99aa4ec21c108117cfdbe"
+  integrity sha512-rf5+2/ioHeQxR6IxuYNYGFytUyG3lma/WW1nsmjeHlWwtb2aByla6dkVc8pmJ9nplzkTA0q2xx7mMWrOTqT4Gg==
+
+pngjs@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-5.0.0.tgz#e79dd2b215767fd9c04561c01236df960bce7fbb"
+  integrity sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==
+
 portfinder@^1.0.25:
   version "1.0.26"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.26.tgz#475658d56ca30bed72ac7f1378ed350bd1b64e70"
@@ -12603,6 +13247,16 @@ pretty-format@^26.6.2:
     ansi-styles "^4.0.0"
     react-is "^17.0.1"
 
+pretty-format@^27.2.5, pretty-format@^27.3.1:
+  version "27.3.1"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.3.1.tgz#7e9486365ccdd4a502061fa761d3ab9ca1b78df5"
+  integrity sha512-DR/c+pvFc52nLimLROYjnXPtolawm+uWDxr4FjuLDLUn+ktWnSN851KoHwHzzqq6rfCOjkzN8FLgDrSub6UDuA==
+  dependencies:
+    "@jest/types" "^27.2.5"
+    ansi-regex "^5.0.1"
+    ansi-styles "^5.0.0"
+    react-is "^17.0.1"
+
 pretty-ms@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/pretty-ms/-/pretty-ms-7.0.0.tgz#45781273110caf35f55cab21a8a9bd403a233dc0"
@@ -12691,6 +13345,15 @@ prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
     object-assign "^4.1.1"
     react-is "^16.8.1"
 
+proper-lockfile@^4.1.1:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/proper-lockfile/-/proper-lockfile-4.1.2.tgz#c8b9de2af6b2f1601067f98e01ac66baa223141f"
+  integrity sha512-TjNPblN4BwAWMXU8s9AEz4JmQxnD1NNL7bNOY/AKUzyamc379FWASUhc/K1pL2noVb+XmZKLL68cjzLsiOAMaA==
+  dependencies:
+    graceful-fs "^4.2.4"
+    retry "^0.12.0"
+    signal-exit "^3.0.2"
+
 proto-list@~1.2.1:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/proto-list/-/proto-list-1.2.4.tgz#212d5bfe1318306a420f6402b8e26ff39647a849"
@@ -12709,6 +13372,11 @@ proxy-addr@~2.0.5:
     forwarded "~0.1.2"
     ipaddr.js "1.9.0"
 
+proxy-from-env@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+
 prr@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
@@ -12961,10 +13629,10 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.2.8:
     prop-types "^15.6.2"
     scheduler "^0.13.0"
 
-react-is@^16.8.1:
-  version "16.13.1"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
-  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
+react-is@^16.8.1, "react-is@npm:react-is":
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
+  integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
 react-lifecycles-compat@^3.0.4:
   version "3.0.4"
@@ -14125,6 +14793,11 @@ smart-buffer@4.0.2:
   resolved "https://registry.yarnpkg.com/smart-buffer/-/smart-buffer-4.0.2.tgz#5207858c3815cc69110703c6b94e46c15634395d"
   integrity sha512-JDhEpTKzXusOqXZ0BUIdH+CjFdO/CR3tLlf5CN34IypI+xMmXW1uB16OOY8z3cICbJlDAVJzNbwBhNO0wt9OAw==
 
+smart-buffer@^4.1.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/smart-buffer/-/smart-buffer-4.2.0.tgz#6e1d71fa4f18c05f7d0ff216dd16a481d0e8d9ae"
+  integrity sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==
+
 snapdragon-node@^2.0.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"
@@ -14192,6 +14865,23 @@ socks-proxy-agent@^4.0.0:
     agent-base "~4.2.1"
     socks "~2.3.2"
 
+socks-proxy-agent@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/socks-proxy-agent/-/socks-proxy-agent-6.1.0.tgz#869cf2d7bd10fea96c7ad3111e81726855e285c3"
+  integrity sha512-57e7lwCN4Tzt3mXz25VxOErJKXlPfXmkMLnk310v/jwW20jWRVcgsOit+xNkN3eIEdB47GwnfAEBLacZ/wVIKg==
+  dependencies:
+    agent-base "^6.0.2"
+    debug "^4.3.1"
+    socks "^2.6.1"
+
+socks@^2.6.1:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/socks/-/socks-2.6.1.tgz#989e6534a07cf337deb1b1c94aaa44296520d30e"
+  integrity sha512-kLQ9N5ucj8uIcxrDwjm0Jsqk06xdpBjGNQtpXy4Q8/QY2k+fY7nZH8CARy+hkbG+SGAovmzzuauCpBlb8FrnBA==
+  dependencies:
+    ip "^1.1.5"
+    smart-buffer "^4.1.0"
+
 socks@~2.3.2:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/socks/-/socks-2.3.2.tgz#ade388e9e6d87fdb11649c15746c578922a5883e"
@@ -14266,6 +14956,13 @@ source-map-support@0.5.19, source-map-support@^0.5.16, source-map-support@^0.5.1
     buffer-from "^1.0.0"
     source-map "^0.6.0"
 
+source-map-support@^0.4.18:
+  version "0.4.18"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.18.tgz#0286a6de8be42641338594e97ccea75f0a2c585f"
+  integrity sha512-try0/JqxPLF9nOjvSta7tVondkP5dwgyLDjVoyMDlmjugT2lRZ1OfsrYTkCd2hkDnJTKRbO/Rl3orm8vlsUzbA==
+  dependencies:
+    source-map "^0.5.6"
+
 source-map-support@^0.5.6, source-map-support@~0.5.4:
   version "0.5.13"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.13.tgz#31b24a9c2e73c2de85066c0feb7d44767ed52932"
@@ -14447,6 +15144,13 @@ stack-utils@^2.0.2:
   dependencies:
     escape-string-regexp "^2.0.0"
 
+stack-utils@^2.0.3:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-2.0.5.tgz#d25265fca995154659dbbfba3b49254778d2fdd5"
+  integrity sha512-xrQcmYhOsn/1kX+Vraq+7j4oE2j/6BFscZ0etmYg81xuM8Gq0022Pxb8+IqgOFUIaxHs0KaSb7T1+OegiNrNFA==
+  dependencies:
+    escape-string-regexp "^2.0.0"
+
 stackframe@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-1.1.1.tgz#ffef0a3318b1b60c3b58564989aca5660729ec71"
@@ -16411,6 +17115,11 @@ ws@^7.4.5:
   resolved "https://registry.yarnpkg.com/ws/-/ws-7.4.6.tgz#5654ca8ecdeee47c33a9a4bf6d28e2be2980377c"
   integrity sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==
 
+ws@^7.4.6:
+  version "7.5.5"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.5.tgz#8b4bc4af518cfabd0473ae4f99144287b33eb881"
+  integrity sha512-BAkMFcAzl8as1G/hArkxOxq3G7pjUqQ3gzYbLL0/5zNkph70e+lCoxBGnm6AW1+/aiNeV4fnKqZ8m4GZewmH2w==
+
 xdg-basedir@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/xdg-basedir/-/xdg-basedir-3.0.0.tgz#496b2cc109eca8dbacfe2dc72b603c17c5870ad4"
@@ -16601,7 +17310,7 @@ yargs@^15.4.1:
     y18n "^4.0.0"
     yargs-parser "^18.1.2"
 
-yauzl@2.10.0, yauzl@^2.4.2:
+yauzl@2.10.0, yauzl@^2.10.0, yauzl@^2.4.2:
   version "2.10.0"
   resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9"
   integrity sha1-x+sXyT4RLLEIb6bY5R+wZnt5pfk=
@@ -16616,6 +17325,13 @@ yauzl@2.4.1:
   dependencies:
     fd-slicer "~1.0.1"
 
+yazl@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/yazl/-/yazl-2.5.1.tgz#a3d65d3dd659a5b0937850e8609f22fffa2b5c35"
+  integrity sha512-phENi2PLiHnHb6QBVot+dJnaAZ0xosj7p3fWl+znIjBDlnMI2PsZCJZ306BPTFOaHf5qdDEI8x5qFrSOBN5vrw==
+  dependencies:
+    buffer-crc32 "~0.2.3"
+
 yn@3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/yn/-/yn-3.1.1.tgz#1e87401a09d767c1d5eab26a6e4c185182d2eb50"