diff --git a/README.md b/README.md
index d543ce96788e5..6cbc3730a0ebe 100644
--- a/README.md
+++ b/README.md
@@ -3,7 +3,7 @@
 React is a JavaScript library for building user interfaces.
 
 * **Declarative:** React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable, simpler to understand, and easier to debug.
-* **Component-Based:** Build encapsulated components that manage their state, then compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep the state out of the DOM.
+* **Component-Based:** Build encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep the state out of the DOM.
 * **Learn Once, Write Anywhere:** We don't make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code. React can also render on the server using Node and power mobile apps using [React Native](https://reactnative.dev/).
 
 [Learn how to use React in your project](https://reactjs.org/docs/getting-started.html).
diff --git a/ReactVersions.js b/ReactVersions.js
index acb76f56c4826..e8dffe7dee1b1 100644
--- a/ReactVersions.js
+++ b/ReactVersions.js
@@ -25,7 +25,7 @@ const ReactVersion = '18.3.0';
 const nextChannelLabel = 'next';
 
 const stablePackages = {
-  'eslint-plugin-react-hooks': '4.7.0',
+  'eslint-plugin-react-hooks': '5.0.0',
   'jest-react': '0.15.0',
   react: ReactVersion,
   'react-art': ReactVersion,
diff --git a/dangerfile.js b/dangerfile.js
index 59bc43466b11b..4fa16bb4a7345 100644
--- a/dangerfile.js
+++ b/dangerfile.js
@@ -86,8 +86,16 @@ const header = `
 
 function row(result, baseSha, headSha) {
   const diffViewUrl = `https://react-builds.vercel.app/commits/${headSha}/files/${result.path}?compare=${baseSha}`;
-  // prettier-ignore
-  return `| [${result.path}](${diffViewUrl}) | **${change(result.change)}** | ${kbs(result.baseSize)} | ${kbs(result.headSize)} | ${change(result.changeGzip)} | ${kbs(result.baseSizeGzip)} | ${kbs(result.headSizeGzip)}`;
+  const rowArr = [
+    `| [${result.path}](${diffViewUrl})`,
+    `**${change(result.change)}**`,
+    `${kbs(result.baseSize)}`,
+    `${kbs(result.headSize)}`,
+    `${change(result.changeGzip)}`,
+    `${kbs(result.baseSizeGzip)}`,
+    `${kbs(result.headSizeGzip)}`,
+  ];
+  return rowArr.join(' | ');
 }
 
 (async function() {
diff --git a/fixtures/blocks/yarn.lock b/fixtures/blocks/yarn.lock
index f4aef117a1fed..a21cbff63b94d 100644
--- a/fixtures/blocks/yarn.lock
+++ b/fixtures/blocks/yarn.lock
@@ -1915,9 +1915,9 @@ async-limiter@~1.0.0:
   integrity sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==
 
 async@^2.6.2:
-  version "2.6.3"
-  resolved "https://registry.yarnpkg.com/async/-/async-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff"
-  integrity sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==
+  version "2.6.4"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.6.4.tgz#706b7ff6084664cd7eae713f6f965433b5504221"
+  integrity sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==
   dependencies:
     lodash "^4.17.14"
 
@@ -2355,9 +2355,9 @@ bser@2.1.1:
     node-int64 "^0.4.0"
 
 buffer-from@^1.0.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
-  integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
+  integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
 
 buffer-indexof@^1.0.0:
   version "1.1.1"
@@ -6540,9 +6540,9 @@ lodash.uniq@^4.5.0:
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
 lodash@4, "lodash@>=3.5 <5", lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.5:
-  version "4.17.15"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
-  integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
 loglevel@^1.6.6:
   version "1.6.7"
@@ -9646,9 +9646,9 @@ source-map-resolve@^0.5.0, source-map-resolve@^0.5.2:
     urix "^0.1.0"
 
 source-map-support@^0.5.6, source-map-support@~0.5.12:
-  version "0.5.16"
-  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.16.tgz#0ae069e7fe3ba7538c64c98515e35339eac5a042"
-  integrity sha512-efyLRJDr68D9hBBNIPWFjhpFzURh+KJykQwvMyW5UiZzYwoF6l4YMMDIJJEyFWxWCqfyxLzz6tSfUFR+kXXsVQ==
+  version "0.5.21"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.21.tgz#04fe7c7f9e1ed2d662233c28cb2b35b9f63f6e4f"
+  integrity sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==
   dependencies:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
@@ -10117,9 +10117,9 @@ terser-webpack-plugin@^1.4.3:
     worker-farm "^1.7.0"
 
 terser@^4.1.2, terser@^4.4.3, terser@^4.6.3:
-  version "4.6.7"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-4.6.7.tgz#478d7f9394ec1907f0e488c5f6a6a9a2bad55e72"
-  integrity sha512-fmr7M1f7DBly5cX2+rFDvmGBAaaZyPrHYK4mMdHEDAdNTqXSZgSOfqsfGq2HqPGT/1V0foZZuCZFx8CHKgAk3g==
+  version "4.8.1"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-4.8.1.tgz#a00e5634562de2239fd404c649051bf6fc21144f"
+  integrity sha512-4GnLC0x667eJG0ewJTa6z/yXrbLGv80D9Ru6HIpCQmO+Q4PfEtBFi0ObSckqwL6VyQv/7ENJieXHo2ANmdQwgw==
   dependencies:
     commander "^2.20.0"
     source-map "~0.6.1"
diff --git a/fixtures/concurrent/time-slicing/yarn.lock b/fixtures/concurrent/time-slicing/yarn.lock
index 0cab4641b7891..7b531c7b25962 100644
--- a/fixtures/concurrent/time-slicing/yarn.lock
+++ b/fixtures/concurrent/time-slicing/yarn.lock
@@ -341,9 +341,9 @@ async-each@^1.0.1:
   integrity sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ==
 
 async@^2.1.2, async@^2.1.4, async@^2.4.1, async@^2.6.2:
-  version "2.6.3"
-  resolved "https://registry.yarnpkg.com/async/-/async-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff"
-  integrity sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==
+  version "2.6.4"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.6.4.tgz#706b7ff6084664cd7eae713f6f965433b5504221"
+  integrity sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==
   dependencies:
     lodash "^4.17.14"
 
diff --git a/fixtures/dom/yarn.lock b/fixtures/dom/yarn.lock
index 59ad08c8297d2..26f6cc7c77909 100644
--- a/fixtures/dom/yarn.lock
+++ b/fixtures/dom/yarn.lock
@@ -405,9 +405,9 @@ async-each@^1.0.1:
   integrity sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ==
 
 async@^2.1.2, async@^2.1.4, async@^2.4.1, async@^2.6.2:
-  version "2.6.3"
-  resolved "https://registry.yarnpkg.com/async/-/async-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff"
-  integrity sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==
+  version "2.6.4"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.6.4.tgz#706b7ff6084664cd7eae713f6f965433b5504221"
+  integrity sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==
   dependencies:
     lodash "^4.17.14"
 
@@ -5116,9 +5116,9 @@ lodash.uniq@^4.5.0:
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
 "lodash@>=3.5 <5", lodash@^4.15.0, lodash@^4.17.14, lodash@^4.17.2, lodash@^4.17.20, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.3.0:
-  version "4.17.20"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
-  integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
 loglevel@^1.4.1:
   version "1.7.1"
diff --git a/fixtures/fizz/yarn.lock b/fixtures/fizz/yarn.lock
index 7b3eeac78715b..4cc15f152c628 100644
--- a/fixtures/fizz/yarn.lock
+++ b/fixtures/fizz/yarn.lock
@@ -3171,7 +3171,7 @@ isobject@^3.0.0, isobject@^3.0.1:
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
   integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
 
-"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
+js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
@@ -3295,13 +3295,6 @@ lodash@^4.17.15, lodash@^4.17.19:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
-loose-envify@^1.1.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
-  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
-  dependencies:
-    js-tokens "^3.0.0 || ^4.0.0"
-
 lowercase-keys@^1.0.0, lowercase-keys@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.1.tgz#6f9e30b47084d971a7c820ff15a6c5167b74c26f"
@@ -4087,7 +4080,6 @@ rc@^1.2.8:
 
 "react-dom@link:../../build/node_modules/react-dom":
   version "0.0.0"
-  uid ""
 
 react-error-boundary@^3.1.3:
   version "3.1.4"
@@ -4098,7 +4090,6 @@ react-error-boundary@^3.1.3:
 
 "react@link:../../build/node_modules/react":
   version "0.0.0"
-  uid ""
 
 read-pkg@^4.0.1:
   version "4.0.1"
@@ -4357,13 +4348,6 @@ safe-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
-scheduler@^0.21.0:
-  version "0.21.0"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.21.0.tgz#6fd2532ff5a6d877b6edb12f00d8ab7e8f308820"
-  integrity sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==
-  dependencies:
-    loose-envify "^1.1.0"
-
 schema-utils@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"
@@ -4766,9 +4750,9 @@ terser-webpack-plugin@^1.4.3:
     worker-farm "^1.7.0"
 
 terser@^4.1.2:
-  version "4.8.0"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-4.8.0.tgz#63056343d7c70bb29f3af665865a46fe03a0df17"
-  integrity sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==
+  version "4.8.1"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-4.8.1.tgz#a00e5634562de2239fd404c649051bf6fc21144f"
+  integrity sha512-4GnLC0x667eJG0ewJTa6z/yXrbLGv80D9Ru6HIpCQmO+Q4PfEtBFi0ObSckqwL6VyQv/7ENJieXHo2ANmdQwgw==
   dependencies:
     commander "^2.20.0"
     source-map "~0.6.1"
diff --git a/fixtures/legacy-jsx-runtimes/yarn.lock b/fixtures/legacy-jsx-runtimes/yarn.lock
index fe5d0c7955c2a..375b64caddc8a 100644
--- a/fixtures/legacy-jsx-runtimes/yarn.lock
+++ b/fixtures/legacy-jsx-runtimes/yarn.lock
@@ -576,6 +576,11 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
+"@tootallnate/once@1":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
+  integrity sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==
+
 "@types/babel__core@^7.0.0", "@types/babel__core@^7.1.7":
   version "7.1.10"
   resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.10.tgz#ca58fc195dd9734e77e57c6f2df565623636ab40"
@@ -667,10 +672,10 @@
   dependencies:
     "@types/yargs-parser" "*"
 
-abab@^2.0.3:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.5.tgz#c0b678fb32d60fc1219c784d6a826fe385aeb79a"
-  integrity sha512-9IK9EadsbHo6jLWIpxpR6pL0sazTXV6+SQv25ZB+F7Bj9mJNaOc4nCRabwd5M/JwmUa8idz6Eci6eKfJryPs6Q==
+abab@^2.0.3, abab@^2.0.5:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.6.tgz#41b80f2c871d19686216b82309231cfd3cb3d291"
+  integrity sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==
 
 acorn-globals@^6.0.0:
   version "6.0.0"
@@ -690,15 +695,17 @@ acorn@^7.1.1:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 
-ajv@^6.12.3:
-  version "6.12.6"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
-  integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
+acorn@^8.2.4:
+  version "8.8.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.0.tgz#88c0187620435c7f6015803f5539dae05a9dbea8"
+  integrity sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==
+
+agent-base@6:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
+  integrity sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==
   dependencies:
-    fast-deep-equal "^3.1.1"
-    fast-json-stable-stringify "^2.0.0"
-    json-schema-traverse "^0.4.1"
-    uri-js "^4.2.2"
+    debug "4"
 
 ansi-escapes@^4.2.1:
   version "4.3.1"
@@ -769,18 +776,6 @@ array-unique@^0.3.2:
   resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
   integrity sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=
 
-asn1@~0.2.3:
-  version "0.2.4"
-  resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.4.tgz#8d2475dfab553bb33e77b54e59e880bb8ce23136"
-  integrity sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg==
-  dependencies:
-    safer-buffer "~2.1.0"
-
-assert-plus@1.0.0, assert-plus@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-1.0.0.tgz#f12e0f3c5d77b0b1cdd9146942e4e96c1e4dd525"
-  integrity sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=
-
 assign-symbols@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
@@ -789,23 +784,13 @@ assign-symbols@^1.0.0:
 asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
-  integrity sha1-x57Zf380y48robyXkLzDZkdLS3k=
+  integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
 
 atob@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
-aws-sign2@~0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
-  integrity sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=
-
-aws4@^1.8.0:
-  version "1.10.1"
-  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.10.1.tgz#e1e82e4f3e999e2cfd61b161280d16a111f86428"
-  integrity sha512-zg7Hz2k5lI8kb7U32998pRRFin7zJlkfezGJjUc2heaD4Pw2wObakCDVzkKztTm/Ln7eiVvYsjqak0Ed4LkMDA==
-
 babel-jest@^26.5.2:
   version "26.5.2"
   resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-26.5.2.tgz#164f367a35946c6cf54eaccde8762dec50422250"
@@ -891,13 +876,6 @@ base@^0.11.1:
     mixin-deep "^1.2.0"
     pascalcase "^0.1.1"
 
-bcrypt-pbkdf@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz#a4301d389b6a43f9b67ff3ca11a3f6637e360e9e"
-  integrity sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=
-  dependencies:
-    tweetnacl "^0.14.3"
-
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -983,11 +961,6 @@ capture-exit@^2.0.0:
   dependencies:
     rsvp "^4.8.4"
 
-caseless@~0.12.0:
-  version "0.12.0"
-  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
-  integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=
-
 chalk@^2.0.0:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
@@ -1076,7 +1049,7 @@ color-name@~1.1.4:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
-combined-stream@^1.0.6, combined-stream@~1.0.6:
+combined-stream@^1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
   integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
@@ -1105,11 +1078,6 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
   integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
 
-core-util-is@1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
-  integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
-
 cross-spawn@^6.0.0:
   version "6.0.5"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
@@ -1140,20 +1108,13 @@ cssom@~0.3.6:
   resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.8.tgz#9f1276f5b2b463f2114d3f2c75250af8c1a36f4a"
   integrity sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==
 
-cssstyle@^2.2.0:
+cssstyle@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-2.3.0.tgz#ff665a0ddbdc31864b09647f34163443d90b0852"
   integrity sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==
   dependencies:
     cssom "~0.3.6"
 
-dashdash@^1.12.0:
-  version "1.14.1"
-  resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
-  integrity sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=
-  dependencies:
-    assert-plus "^1.0.0"
-
 data-urls@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-2.0.0.tgz#156485a72963a970f5d5821aaf642bef2bf2db9b"
@@ -1163,6 +1124,13 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
+debug@4:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
+  integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
+  dependencies:
+    ms "2.1.2"
+
 debug@^2.2.0, debug@^2.3.3:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -1182,10 +1150,10 @@ decamelize@^1.2.0:
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
   integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
 
-decimal.js@^10.2.0:
-  version "10.2.1"
-  resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.2.1.tgz#238ae7b0f0c793d3e3cea410108b35a2c01426a3"
-  integrity sha512-KaL7+6Fw6i5A2XSnsbhm/6B+NuEA7TZ4vqxnd5tXz9sbKtrN9Srj8ab4vKVdK8YAqZO9P1kg45Y6YLoduPf+kw==
+decimal.js@^10.2.1:
+  version "10.4.0"
+  resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.4.0.tgz#97a7448873b01e92e5ff9117d89a7bca8e63e0fe"
+  integrity sha512-Nv6ENEzyPQ6AItkGwLE2PGKinZZ9g59vSh2BeH6NqPu0OTKZ5ruJsVqh/orbAnqXc9pBbgXAIrc2EyaCj8NpGg==
 
 decode-uri-component@^0.2.0:
   version "0.2.0"
@@ -1193,9 +1161,9 @@ decode-uri-component@^0.2.0:
   integrity sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=
 
 deep-is@~0.1.3:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
-  integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
+  integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
 
 deepmerge@^4.2.2:
   version "4.2.2"
@@ -1234,7 +1202,7 @@ define-property@^2.0.2:
 delayed-stream@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
-  integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
+  integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
 
 detect-newline@^3.0.0:
   version "3.1.0"
@@ -1253,14 +1221,6 @@ domexception@^2.0.1:
   dependencies:
     webidl-conversions "^5.0.0"
 
-ecc-jsbn@~0.1.1:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9"
-  integrity sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=
-  dependencies:
-    jsbn "~0.1.0"
-    safer-buffer "^2.1.0"
-
 emittery@^0.7.1:
   version "0.7.1"
   resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.7.1.tgz#c02375a927a40948c0345cc903072597f5270451"
@@ -1339,13 +1299,13 @@ escape-string-regexp@^2.0.0:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz#a30304e99daa32e23b2fd20f51babd07cffca344"
   integrity sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==
 
-escodegen@^1.14.1:
-  version "1.14.3"
-  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.14.3.tgz#4e7b81fba61581dc97582ed78cab7f0e8d63f503"
-  integrity sha512-qFcX0XJkdg+PB3xjZZG/wKSuT1PnQWx57+TVSjIMmILd2yC/6ByYElPwJnslDsuWuSAp4AwJGumarAAmJch5Kw==
+escodegen@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-2.0.0.tgz#5e32b12833e8aa8fa35e1bf0befa89380484c7dd"
+  integrity sha512-mmHKys/C8BFUGI+MAWNcSYoORYLMdPzjrknd2Vc+bUsjN5bXcr8EhrNB+UTqfL1y3I9c4fw2ihgtMPQLBRiQxw==
   dependencies:
     esprima "^4.0.1"
-    estraverse "^4.2.0"
+    estraverse "^5.2.0"
     esutils "^2.0.2"
     optionator "^0.8.1"
   optionalDependencies:
@@ -1356,10 +1316,10 @@ esprima@^4.0.0, esprima@^4.0.1:
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
   integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
 
-estraverse@^4.2.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
-  integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
+estraverse@^5.2.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123"
+  integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
 
 esutils@^2.0.2:
   version "2.0.3"
@@ -1444,11 +1404,6 @@ extend-shallow@^3.0.0, extend-shallow@^3.0.2:
     assign-symbols "^1.0.0"
     is-extendable "^1.0.1"
 
-extend@~3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
-  integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
-
 extglob@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/extglob/-/extglob-2.0.4.tgz#ad00fe4dc612a9232e8718711dc5cb5ab0285543"
@@ -1463,21 +1418,6 @@ extglob@^2.0.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
-extsprintf@1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
-  integrity sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=
-
-extsprintf@^1.2.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
-  integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8=
-
-fast-deep-equal@^3.1.1:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
-  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
-
 fast-json-stable-stringify@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
@@ -1486,7 +1426,7 @@ fast-json-stable-stringify@^2.0.0:
 fast-levenshtein@~2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
-  integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
+  integrity sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==
 
 fb-watchman@^2.0.0:
   version "2.0.1"
@@ -1525,18 +1465,13 @@ for-in@^1.0.2:
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
   integrity sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=
 
-forever-agent@~0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
-  integrity sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=
-
-form-data@~2.3.2:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.3.tgz#dcce52c05f644f298c6a7ab936bd724ceffbf3a6"
-  integrity sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==
+form-data@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-3.0.1.tgz#ebd53791b78356a99af9a300d4282c4d5eb9755f"
+  integrity sha512-RHkBKtLWUVwd7SqRIvCZMEvAMoGUp0XU+seQiZejj0COz3RI3hWP4sCv3gZWWLjJTd7rGwcsF5eKZGii0r/hbg==
   dependencies:
     asynckit "^0.4.0"
-    combined-stream "^1.0.6"
+    combined-stream "^1.0.8"
     mime-types "^2.1.12"
 
 fragment-cache@^0.2.1:
@@ -1595,13 +1530,6 @@ get-value@^2.0.3, get-value@^2.0.6:
   resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"
   integrity sha1-3BXKHGcjh8p2vTesCjlbogQqLCg=
 
-getpass@^0.1.1:
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.7.tgz#5eff8e3e684d569ae4cb2b1282604e8ba62149fa"
-  integrity sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=
-  dependencies:
-    assert-plus "^1.0.0"
-
 glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4:
   version "7.1.6"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
@@ -1629,19 +1557,6 @@ growly@^1.3.0:
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
   integrity sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=
 
-har-schema@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
-  integrity sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=
-
-har-validator@~5.1.3:
-  version "5.1.5"
-  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.1.5.tgz#1f0803b9f8cb20c0fa13822df1ecddb36bde1efd"
-  integrity sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==
-  dependencies:
-    ajv "^6.12.3"
-    har-schema "^2.0.0"
-
 has-flag@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
@@ -1712,14 +1627,22 @@ html-escaper@^2.0.0:
   resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
   integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
 
-http-signature@~1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1"
-  integrity sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=
+http-proxy-agent@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/http-proxy-agent/-/http-proxy-agent-4.0.1.tgz#8a8c8ef7f5932ccf953c296ca8291b95aa74aa3a"
+  integrity sha512-k0zdNgqWTGA6aeIRVpvfVob4fL52dTfaehylg0Y4UvSySvOq/Y+BOyPrgpUrA7HylqvU8vIZGsRuXmspskV0Tg==
   dependencies:
-    assert-plus "^1.0.0"
-    jsprim "^1.2.2"
-    sshpk "^1.7.0"
+    "@tootallnate/once" "1"
+    agent-base "6"
+    debug "4"
+
+https-proxy-agent@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz#c59ef224a04fe8b754f3db0063a25ea30d0005d6"
+  integrity sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==
+  dependencies:
+    agent-base "6"
+    debug "4"
 
 human-signals@^1.1.1:
   version "1.1.1"
@@ -1759,11 +1682,6 @@ inherits@2:
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
 
-ip-regex@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-2.1.0.tgz#fa78bf5d2e6913c911ce9f819ee5146bb6d844e9"
-  integrity sha1-+ni/XS5pE8kRzp+BnuUUa7bYROk=
-
 is-accessor-descriptor@^0.1.6:
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz#a9e12cb3ae8d876727eeef3843f8a0897b5c98d6"
@@ -1888,10 +1806,10 @@ is-plain-object@^2.0.3, is-plain-object@^2.0.4:
   dependencies:
     isobject "^3.0.1"
 
-is-potential-custom-element-name@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.0.tgz#0c52e54bcca391bb2c494b21e8626d7336c6e397"
-  integrity sha1-DFLlS8yjkbssSUsh6GJtczbG45c=
+is-potential-custom-element-name@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz#171ed6f19e3ac554394edf78caa05784a45bebb5"
+  integrity sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==
 
 is-regex@^1.1.1:
   version "1.1.1"
@@ -1917,7 +1835,7 @@ is-symbol@^1.0.2:
   dependencies:
     has-symbols "^1.0.1"
 
-is-typedarray@^1.0.0, is-typedarray@~1.0.0:
+is-typedarray@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
   integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
@@ -1956,11 +1874,6 @@ isobject@^3.0.0, isobject@^3.0.1:
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
   integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
 
-isstream@~0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
-  integrity sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=
-
 istanbul-lib-coverage@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-3.0.0.tgz#f5944a37c70b550b02a78a5c3b2055b280cec8ec"
@@ -2386,41 +2299,37 @@ js-yaml@^3.13.1:
     argparse "^1.0.7"
     esprima "^4.0.0"
 
-jsbn@~0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
-  integrity sha1-peZUwuWi3rXyAdls77yoDA7y9RM=
-
 jsdom@^16.4.0:
-  version "16.4.0"
-  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-16.4.0.tgz#36005bde2d136f73eee1a830c6d45e55408edddb"
-  integrity sha512-lYMm3wYdgPhrl7pDcRmvzPhhrGVBeVhPIqeHjzeiHN3DFmD1RBpbExbi8vU7BJdH8VAZYovR8DMt0PNNDM7k8w==
+  version "16.7.0"
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-16.7.0.tgz#918ae71965424b197c819f8183a754e18977b710"
+  integrity sha512-u9Smc2G1USStM+s/x1ru5Sxrl6mPYCbByG1U/hUmqaVsm4tbNyS7CicOSRyuGQYZhTu0h84qkZZQ/I+dzizSVw==
   dependencies:
-    abab "^2.0.3"
-    acorn "^7.1.1"
+    abab "^2.0.5"
+    acorn "^8.2.4"
     acorn-globals "^6.0.0"
     cssom "^0.4.4"
-    cssstyle "^2.2.0"
+    cssstyle "^2.3.0"
     data-urls "^2.0.0"
-    decimal.js "^10.2.0"
+    decimal.js "^10.2.1"
     domexception "^2.0.1"
-    escodegen "^1.14.1"
+    escodegen "^2.0.0"
+    form-data "^3.0.0"
     html-encoding-sniffer "^2.0.1"
-    is-potential-custom-element-name "^1.0.0"
+    http-proxy-agent "^4.0.1"
+    https-proxy-agent "^5.0.0"
+    is-potential-custom-element-name "^1.0.1"
     nwsapi "^2.2.0"
-    parse5 "5.1.1"
-    request "^2.88.2"
-    request-promise-native "^1.0.8"
-    saxes "^5.0.0"
+    parse5 "6.0.1"
+    saxes "^5.0.1"
     symbol-tree "^3.2.4"
-    tough-cookie "^3.0.1"
+    tough-cookie "^4.0.0"
     w3c-hr-time "^1.0.2"
     w3c-xmlserializer "^2.0.0"
     webidl-conversions "^6.1.0"
     whatwg-encoding "^1.0.5"
     whatwg-mimetype "^2.3.0"
-    whatwg-url "^8.0.0"
-    ws "^7.2.3"
+    whatwg-url "^8.5.0"
+    ws "^7.4.6"
     xml-name-validator "^3.0.0"
 
 jsesc@^2.5.1:
@@ -2433,21 +2342,6 @@ json-parse-even-better-errors@^2.3.0:
   resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
   integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
 
-json-schema-traverse@^0.4.1:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
-  integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
-
-json-schema@0.2.3:
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
-  integrity sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=
-
-json-stringify-safe@~5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
-  integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=
-
 json5@^2.1.2:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.3.tgz#c9b0f7fa9233bfe5807fe66fcf3a5617ed597d43"
@@ -2455,16 +2349,6 @@ json5@^2.1.2:
   dependencies:
     minimist "^1.2.5"
 
-jsprim@^1.2.2:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.1.tgz#313e66bc1e5cc06e438bc1b7499c2e5c56acb6a2"
-  integrity sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=
-  dependencies:
-    assert-plus "1.0.0"
-    extsprintf "1.3.0"
-    json-schema "0.2.3"
-    verror "1.10.0"
-
 kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
@@ -2502,7 +2386,7 @@ leven@^3.1.0:
 levn@~0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"
-  integrity sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=
+  integrity sha512-0OO4y2iOHix2W6ujICbKIaEQXvFQHue65vUG3pb5EUomzPI90z9hsA1VsO/dbIIpC53J8gxM9Q4Oho0jrCM/yA==
   dependencies:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
@@ -2519,16 +2403,16 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
-lodash.sortby@^4.7.0:
-  version "4.7.0"
-  resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
-  integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=
-
 lodash@^4.17.19:
   version "4.17.20"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
   integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
 
+lodash@^4.7.0:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
 make-dir@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
@@ -2587,17 +2471,17 @@ micromatch@^4.0.2:
     braces "^3.0.1"
     picomatch "^2.0.5"
 
-mime-db@1.44.0:
-  version "1.44.0"
-  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.44.0.tgz#fa11c5eb0aca1334b4233cb4d52f10c5a6272f92"
-  integrity sha512-/NOTfLrsPBVeH7YtFPgsVWveuL+4SjjYxaQ1xtM1KMFj7HdxlBlxeyNLzhyJVx7r4rZGJAZ/6lkKCitSc/Nmpg==
+mime-db@1.52.0:
+  version "1.52.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
+  integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
 
-mime-types@^2.1.12, mime-types@~2.1.19:
-  version "2.1.27"
-  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.27.tgz#47949f98e279ea53119f5722e0f34e529bec009f"
-  integrity sha512-JIhqnCasI9yD+SsmkquHBxTSEuZdQX5BuQnS2Vc7puQQQ+8yiP5AY5uWhpdv4YL4VM5c6iliiYWPgJ/nJQLp7w==
+mime-types@^2.1.12:
+  version "2.1.35"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
+  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
   dependencies:
-    mime-db "1.44.0"
+    mime-db "1.52.0"
 
 mimic-fn@^2.1.0:
   version "2.1.0"
@@ -2720,14 +2604,9 @@ npm-run-path@^4.0.0:
     path-key "^3.0.0"
 
 nwsapi@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.0.tgz#204879a9e3d068ff2a55139c2c772780681a38b7"
-  integrity sha512-h2AatdwYH+JHiZpv7pt/gSX1XoRGb7L/qSIeuqA6GwYoF9w1vP1cw42TO0aI2pNyshRK5893hNSl+1//vHK7hQ==
-
-oauth-sign@~0.9.0:
-  version "0.9.0"
-  resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
-  integrity sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.2.tgz#e5418863e7905df67d51ec95938d67bf801f0bb0"
+  integrity sha512-90yv+6538zuvUMnN+zCr8LuV6bPFdq50304114vJYJ8RDyK8D5O9Phpbd6SZWgI7PwzmmfN1upeOJlvybDSgCw==
 
 object-copy@^0.1.0:
   version "0.1.0"
@@ -2837,10 +2716,10 @@ parse-json@^5.0.0:
     json-parse-even-better-errors "^2.3.0"
     lines-and-columns "^1.1.6"
 
-parse5@5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/parse5/-/parse5-5.1.1.tgz#f68e4e5ba1852ac2cadc00f4555fff6c2abb6178"
-  integrity sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==
+parse5@6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b"
+  integrity sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==
 
 pascalcase@^0.1.1:
   version "0.1.1"
@@ -2872,11 +2751,6 @@ path-parse@^1.0.6:
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
   integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==
 
-performance-now@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
-  integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
-
 picomatch@^2.0.4, picomatch@^2.0.5:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
@@ -2904,7 +2778,7 @@ posix-character-classes@^0.1.0:
 prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
-  integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=
+  integrity sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==
 
 pretty-format@^26.5.2:
   version "26.5.2"
@@ -2924,10 +2798,10 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.4"
 
-psl@^1.1.28:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/psl/-/psl-1.8.0.tgz#9326f8bcfb013adcc005fdff056acce020e51c24"
-  integrity sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ==
+psl@^1.1.33:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/psl/-/psl-1.9.0.tgz#d0df2a137f00794565fcaf3b2c00cd09f8d5a5a7"
+  integrity sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==
 
 pump@^3.0.0:
   version "3.0.0"
@@ -2937,15 +2811,15 @@ pump@^3.0.0:
     end-of-stream "^1.1.0"
     once "^1.3.1"
 
-punycode@^2.1.0, punycode@^2.1.1:
+punycode@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
   integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
 
-qs@~6.5.2:
-  version "6.5.2"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
-  integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==
+querystringify@^2.1.1:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
+  integrity sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==
 
 react-is@^16.12.0:
   version "16.13.1"
@@ -2994,48 +2868,6 @@ repeat-string@^1.6.1:
   resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
   integrity sha1-jcrkcOHIirwtYA//Sndihtp15jc=
 
-request-promise-core@1.1.4:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/request-promise-core/-/request-promise-core-1.1.4.tgz#3eedd4223208d419867b78ce815167d10593a22f"
-  integrity sha512-TTbAfBBRdWD7aNNOoVOBH4pN/KigV6LyapYNNlAPA8JwbovRti1E88m3sYAwsLi5ryhPKsE9APwnjFTgdUjTpw==
-  dependencies:
-    lodash "^4.17.19"
-
-request-promise-native@^1.0.8:
-  version "1.0.9"
-  resolved "https://registry.yarnpkg.com/request-promise-native/-/request-promise-native-1.0.9.tgz#e407120526a5efdc9a39b28a5679bf47b9d9dc28"
-  integrity sha512-wcW+sIUiWnKgNY0dqCpOZkUbF/I+YPi+f09JZIDa39Ec+q82CpSYniDp+ISgTTbKmnpJWASeJBPZmoxH84wt3g==
-  dependencies:
-    request-promise-core "1.1.4"
-    stealthy-require "^1.1.1"
-    tough-cookie "^2.3.3"
-
-request@^2.88.2:
-  version "2.88.2"
-  resolved "https://registry.yarnpkg.com/request/-/request-2.88.2.tgz#d73c918731cb5a87da047e207234146f664d12b3"
-  integrity sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==
-  dependencies:
-    aws-sign2 "~0.7.0"
-    aws4 "^1.8.0"
-    caseless "~0.12.0"
-    combined-stream "~1.0.6"
-    extend "~3.0.2"
-    forever-agent "~0.6.1"
-    form-data "~2.3.2"
-    har-validator "~5.1.3"
-    http-signature "~1.2.0"
-    is-typedarray "~1.0.0"
-    isstream "~0.1.2"
-    json-stringify-safe "~5.0.1"
-    mime-types "~2.1.19"
-    oauth-sign "~0.9.0"
-    performance-now "^2.1.0"
-    qs "~6.5.2"
-    safe-buffer "^5.1.2"
-    tough-cookie "~2.5.0"
-    tunnel-agent "^0.6.0"
-    uuid "^3.3.2"
-
 require-directory@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
@@ -3046,6 +2878,11 @@ require-main-filename@^2.0.0:
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
   integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
 
+requires-port@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
+  integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
+
 resolve-cwd@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"
@@ -3087,11 +2924,6 @@ rsvp@^4.8.4:
   resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-4.8.5.tgz#c8f155311d167f68f21e168df71ec5b083113734"
   integrity sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==
 
-safe-buffer@^5.0.1, safe-buffer@^5.1.2:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
-  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
-
 safe-buffer@~5.1.1:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
@@ -3104,7 +2936,7 @@ safe-regex@^1.1.0:
   dependencies:
     ret "~0.1.10"
 
-"safer-buffer@>= 2.1.2 < 3", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0:
+"safer-buffer@>= 2.1.2 < 3":
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
@@ -3124,7 +2956,7 @@ sane@^4.0.3:
     minimist "^1.1.1"
     walker "~1.0.5"
 
-saxes@^5.0.0:
+saxes@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/saxes/-/saxes-5.0.1.tgz#eebab953fa3b7608dbe94e5dadb15c888fa6696d"
   integrity sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==
@@ -3312,21 +3144,6 @@ sprintf-js@~1.0.2:
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
   integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
 
-sshpk@^1.7.0:
-  version "1.16.1"
-  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.16.1.tgz#fb661c0bef29b39db40769ee39fa70093d6f6877"
-  integrity sha512-HXXqVUq7+pcKeLqqZj6mHFUMvXtOJt1uoUx09pFW6011inTMxqI8BA8PM95myrIyyKwdnzjdFjLiE6KBPVtJIg==
-  dependencies:
-    asn1 "~0.2.3"
-    assert-plus "^1.0.0"
-    bcrypt-pbkdf "^1.0.0"
-    dashdash "^1.12.0"
-    ecc-jsbn "~0.1.1"
-    getpass "^0.1.1"
-    jsbn "~0.1.0"
-    safer-buffer "^2.0.2"
-    tweetnacl "~0.14.0"
-
 stack-utils@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-2.0.2.tgz#5cf48b4557becb4638d0bc4f21d23f5d19586593"
@@ -3342,11 +3159,6 @@ static-extend@^0.1.1:
     define-property "^0.2.5"
     object-copy "^0.1.0"
 
-stealthy-require@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/stealthy-require/-/stealthy-require-1.1.1.tgz#35b09875b4ff49f26a777e509b3090a3226bf24b"
-  integrity sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks=
-
 string-length@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/string-length/-/string-length-4.0.1.tgz#4a973bf31ef77c4edbceadd6af2611996985f8a1"
@@ -3493,46 +3305,27 @@ to-regex@^3.0.1, to-regex@^3.0.2:
     regex-not "^1.0.2"
     safe-regex "^1.1.0"
 
-tough-cookie@^2.3.3, tough-cookie@~2.5.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2"
-  integrity sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==
+tough-cookie@^4.0.0:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.1.2.tgz#e53e84b85f24e0b65dd526f46628db6c85f6b874"
+  integrity sha512-G9fqXWoYFZgTc2z8Q5zaHy/vJMjm+WV0AkAeHxVCQiEB1b+dGvWzFW6QV07cY5jQ5gRkeid2qIkzkxUnmoQZUQ==
   dependencies:
-    psl "^1.1.28"
+    psl "^1.1.33"
     punycode "^2.1.1"
+    universalify "^0.2.0"
+    url-parse "^1.5.3"
 
-tough-cookie@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-3.0.1.tgz#9df4f57e739c26930a018184887f4adb7dca73b2"
-  integrity sha512-yQyJ0u4pZsv9D4clxO69OEjLWYw+jbgspjTue4lTQZLfV0c5l1VmK2y1JK8E9ahdpltPOaAThPcp5nKPUgSnsg==
-  dependencies:
-    ip-regex "^2.1.0"
-    psl "^1.1.28"
-    punycode "^2.1.1"
-
-tr46@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/tr46/-/tr46-2.0.2.tgz#03273586def1595ae08fedb38d7733cee91d2479"
-  integrity sha512-3n1qG+/5kg+jrbTzwAykB5yRYtQCTqOGKq5U5PE3b0a1/mzo6snDhjGS0zJVJunO0NrT3Dg1MLy5TjWP/UJppg==
+tr46@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-2.1.0.tgz#fa87aa81ca5d5941da8cbf1f9b749dc969a4e240"
+  integrity sha512-15Ih7phfcdP5YxqiB+iDtLoaTz4Nd35+IiAv0kQ5FNKHzXgdWqPoTIqEDDJmXceQt4JZk6lVPT8lnDlPpGDppw==
   dependencies:
     punycode "^2.1.1"
 
-tunnel-agent@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz#27a5dea06b36b04a0a9966774b290868f0fc40fd"
-  integrity sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=
-  dependencies:
-    safe-buffer "^5.0.1"
-
-tweetnacl@^0.14.3, tweetnacl@~0.14.0:
-  version "0.14.5"
-  resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
-  integrity sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=
-
 type-check@~0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.3.2.tgz#5884cab512cf1d355e3fb784f30804b2b520db72"
-  integrity sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=
+  integrity sha512-ZCmOJdvOWDBYJlzAoFkC+Q0+bUyEOS1ltgp1MGU03fqHG+dbi9tBFU2Rd9QKiDZFAYrhPh2JUf7rZRIuHRKtOg==
   dependencies:
     prelude-ls "~1.1.2"
 
@@ -3573,6 +3366,11 @@ union-value@^1.0.0:
     is-extendable "^0.1.1"
     set-value "^2.0.1"
 
+universalify@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.2.0.tgz#6451760566fa857534745ab1dde952d1b1761be0"
+  integrity sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==
+
 unset-value@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unset-value/-/unset-value-1.0.0.tgz#8376873f7d2335179ffb1e6fc3a8ed0dfc8ab559"
@@ -3581,28 +3379,24 @@ unset-value@^1.0.0:
     has-value "^0.3.1"
     isobject "^3.0.0"
 
-uri-js@^4.2.2:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.0.tgz#aa714261de793e8a82347a7bcc9ce74e86f28602"
-  integrity sha512-B0yRTzYdUCCn9n+F4+Gh4yIDtMQcaJsmYBDsTSG8g/OejKBodLQ2IHfN3bM7jUsRXndopT7OIXWdYqc1fjmV6g==
-  dependencies:
-    punycode "^2.1.0"
-
 urix@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
   integrity sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=
 
+url-parse@^1.5.3:
+  version "1.5.10"
+  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.10.tgz#9d3c2f736c1d75dd3bd2be507dcc111f1e2ea9c1"
+  integrity sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==
+  dependencies:
+    querystringify "^2.1.1"
+    requires-port "^1.0.0"
+
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
   integrity sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==
 
-uuid@^3.3.2:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
-  integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
-
 uuid@^8.3.0:
   version "8.3.1"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.1.tgz#2ba2e6ca000da60fce5a196954ab241131e05a31"
@@ -3625,15 +3419,6 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
-verror@1.10.0:
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.0.tgz#3a105ca17053af55d6e270c1f8288682e18da400"
-  integrity sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=
-  dependencies:
-    assert-plus "^1.0.0"
-    core-util-is "1.0.2"
-    extsprintf "^1.2.0"
-
 w3c-hr-time@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd"
@@ -3677,13 +3462,13 @@ whatwg-mimetype@^2.3.0:
   resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz#3d4b1e0312d2079879f826aff18dbeeca5960fbf"
   integrity sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g==
 
-whatwg-url@^8.0.0:
-  version "8.4.0"
-  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-8.4.0.tgz#50fb9615b05469591d2b2bd6dfaed2942ed72837"
-  integrity sha512-vwTUFf6V4zhcPkWp/4CQPr1TW9Ml6SF4lVyaIMBdJw5i6qUUJ1QWM4Z6YYVkfka0OUIzVo/0aNtGVGk256IKWw==
+whatwg-url@^8.0.0, whatwg-url@^8.5.0:
+  version "8.7.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-8.7.0.tgz#656a78e510ff8f3937bc0bcbe9f5c0ac35941b77"
+  integrity sha512-gAojqb/m9Q8a5IV96E3fHJM70AzCkgt4uXYX2O7EmuyOnLrViCQlsEBmF9UQIu3/aeAIp2U17rtbpZWNntQqdg==
   dependencies:
-    lodash.sortby "^4.7.0"
-    tr46 "^2.0.2"
+    lodash "^4.7.0"
+    tr46 "^2.1.0"
     webidl-conversions "^6.1.0"
 
 which-module@^2.0.0:
@@ -3734,10 +3519,10 @@ write-file-atomic@^3.0.0:
     signal-exit "^3.0.2"
     typedarray-to-buffer "^3.1.5"
 
-ws@^7.2.3:
-  version "7.3.1"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-7.3.1.tgz#d0547bf67f7ce4f12a72dfe31262c68d7dc551c8"
-  integrity sha512-D3RuNkynyHmEJIpD2qrgVkc9DQ23OrN/moAwZX4L8DfvszsJxpjQuUq3LMx6HoYji9fbIOBY18XWBsAux1ZZUA==
+ws@^7.4.6:
+  version "7.5.9"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.9.tgz#54fa7db29f4c7cec68b1ddd3a89de099942bb591"
+  integrity sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==
 
 xml-name-validator@^3.0.0:
   version "3.0.0"
diff --git a/fixtures/packaging/browserify/dev/yarn.lock b/fixtures/packaging/browserify/dev/yarn.lock
index edcf2e696b753..2c56a370d8201 100644
--- a/fixtures/packaging/browserify/dev/yarn.lock
+++ b/fixtures/packaging/browserify/dev/yarn.lock
@@ -13,18 +13,6 @@ acorn@^4.0.3:
   version "4.0.13"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.13.tgz#105495ae5361d697bd195c825192e1ad7f253787"
 
-array-filter@~0.0.0:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-0.0.1.tgz#7da8cf2e26628ed732803581fd21f67cacd2eeec"
-
-array-map@~0.0.0:
-  version "0.0.0"
-  resolved "https://registry.yarnpkg.com/array-map/-/array-map-0.0.0.tgz#88a2bab73d1cf7bcd5c1b118a003f66f665fa662"
-
-array-reduce@~0.0.0:
-  version "0.0.0"
-  resolved "https://registry.yarnpkg.com/array-reduce/-/array-reduce-0.0.0.tgz#173899d3ffd1c7d9383e4479525dbe278cab5f2b"
-
 asn1.js@^4.0.0:
   version "4.9.1"
   resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-4.9.1.tgz#48ba240b45a9280e94748990ba597d216617fd40"
@@ -728,13 +716,8 @@ shasum@^1.0.0:
     sha.js "~2.4.4"
 
 shell-quote@^1.6.1:
-  version "1.6.1"
-  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.6.1.tgz#f4781949cce402697127430ea3b3c5476f481767"
-  dependencies:
-    array-filter "~0.0.0"
-    array-map "~0.0.0"
-    array-reduce "~0.0.0"
-    jsonify "~0.0.0"
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.3.tgz#aa40edac170445b9a431e17bb62c0b881b9c4123"
 
 source-map@~0.5.3:
   version "0.5.7"
diff --git a/fixtures/packaging/browserify/prod/yarn.lock b/fixtures/packaging/browserify/prod/yarn.lock
index 62da80fb7e8ee..c85c30d03c51b 100644
--- a/fixtures/packaging/browserify/prod/yarn.lock
+++ b/fixtures/packaging/browserify/prod/yarn.lock
@@ -13,18 +13,6 @@ acorn@^4.0.3:
   version "4.0.13"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.13.tgz#105495ae5361d697bd195c825192e1ad7f253787"
 
-array-filter@~0.0.0:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-0.0.1.tgz#7da8cf2e26628ed732803581fd21f67cacd2eeec"
-
-array-map@~0.0.0:
-  version "0.0.0"
-  resolved "https://registry.yarnpkg.com/array-map/-/array-map-0.0.0.tgz#88a2bab73d1cf7bcd5c1b118a003f66f665fa662"
-
-array-reduce@~0.0.0:
-  version "0.0.0"
-  resolved "https://registry.yarnpkg.com/array-reduce/-/array-reduce-0.0.0.tgz#173899d3ffd1c7d9383e4479525dbe278cab5f2b"
-
 asn1.js@^4.0.0:
   version "4.9.1"
   resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-4.9.1.tgz#48ba240b45a9280e94748990ba597d216617fd40"
@@ -739,13 +727,8 @@ shasum@^1.0.0:
     sha.js "~2.4.4"
 
 shell-quote@^1.6.1:
-  version "1.6.1"
-  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.6.1.tgz#f4781949cce402697127430ea3b3c5476f481767"
-  dependencies:
-    array-filter "~0.0.0"
-    array-map "~0.0.0"
-    array-reduce "~0.0.0"
-    jsonify "~0.0.0"
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.3.tgz#aa40edac170445b9a431e17bb62c0b881b9c4123"
 
 source-map@~0.5.3:
   version "0.5.7"
diff --git a/fixtures/ssr/yarn.lock b/fixtures/ssr/yarn.lock
index 3609381253bce..a245336534547 100644
--- a/fixtures/ssr/yarn.lock
+++ b/fixtures/ssr/yarn.lock
@@ -4265,7 +4265,7 @@ longest@^1.0.1:
   resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
   integrity sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=
 
-loose-envify@^1.0.0, loose-envify@^1.1.0:
+loose-envify@^1.0.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -4472,9 +4472,9 @@ mixin-deep@^1.2.0:
     minimist "^1.2.5"
 
 moment@^2.11.2:
-  version "2.29.1"
-  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
-  integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
+  version "2.29.4"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
+  integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
 
 ms@0.7.1:
   version "0.7.1"
@@ -5492,7 +5492,6 @@ react-dev-utils@^0.5.2:
 
 "react-dom@link:../../build/node_modules/react-dom":
   version "0.0.0"
-  uid ""
 
 react-scripts@0.9.5:
   version "0.9.5"
@@ -5542,7 +5541,6 @@ react-scripts@0.9.5:
 
 "react@link:../../build/node_modules/react":
   version "0.0.0"
-  uid ""
 
 read-pkg-up@^1.0.1:
   version "1.0.1"
@@ -5945,14 +5943,6 @@ sax@^1.2.1, sax@~1.2.1:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
-scheduler@^0.20.1:
-  version "0.20.2"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
-  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-
 "semver@2 || 3 || 4 || 5", semver@^5.1.0, semver@^5.3.0:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
diff --git a/package.json b/package.json
index f669e23a95d25..75214bf13488b 100644
--- a/package.json
+++ b/package.json
@@ -63,7 +63,7 @@
     "eslint-plugin-react-internal": "link:./scripts/eslint-rules",
     "fbjs-scripts": "1.2.0",
     "filesize": "^6.0.1",
-    "flow-bin": "0.97",
+    "flow-bin": "^0.132",
     "glob": "^7.1.6",
     "glob-stream": "^6.1.0",
     "google-closure-compiler": "^20200517.0.0",
diff --git a/packages/eslint-plugin-react-hooks/CHANGELOG.md b/packages/eslint-plugin-react-hooks/CHANGELOG.md
index 8a0882d24ec40..589574ede95cb 100644
--- a/packages/eslint-plugin-react-hooks/CHANGELOG.md
+++ b/packages/eslint-plugin-react-hooks/CHANGELOG.md
@@ -1,3 +1,9 @@
+## 5.0.0 (next release)
+
+* **New Violations:** Component names now need to start with an uppercase letter instead of a non-lowercase letter. This means `_Button` or `_component` are no longer valid. ([@kassens](https://github.com/kassens)) in [#25162](https://github.com/facebook/react/pull/25162)
+
+## 4.6.0
+
 ## 4.5.0
 
 * Fix false positive error with large number of branches. ([@scyron6](https://github.com/scyron6) in [#24287](https://github.com/facebook/react/pull/24287))
diff --git a/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js b/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js
index 044cc58f40c4c..ee220fa5dba3c 100644
--- a/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js
+++ b/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js
@@ -641,6 +641,21 @@ const tests = {
         functionError('useHookInsideNormalFunction', 'normalFunctionWithHook'),
       ],
     },
+    {
+      code: `
+        // These are neither functions nor hooks.
+        function _normalFunctionWithHook() {
+          useHookInsideNormalFunction();
+        }
+        function _useNotAHook() {
+          useHookInsideNormalFunction();
+        }
+      `,
+      errors: [
+        functionError('useHookInsideNormalFunction', '_normalFunctionWithHook'),
+        functionError('useHookInsideNormalFunction', '_useNotAHook'),
+      ],
+    },
     {
       code: `
         // Invalid because it's dangerous and might not warn otherwise.
diff --git a/packages/eslint-plugin-react-hooks/package.json b/packages/eslint-plugin-react-hooks/package.json
index 3f14cee365115..683d95dccf050 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.6.0",
+  "version": "5.0.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/facebook/react.git",
diff --git a/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js b/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js
index 31d54e813ae65..1957d3ce199af 100644
--- a/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js
+++ b/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js
@@ -16,7 +16,7 @@
  */
 
 function isHookName(s) {
-  return /^use[A-Z0-9].*$/.test(s);
+  return /^use[A-Z0-9]/.test(s);
 }
 
 /**
@@ -42,16 +42,11 @@ function isHook(node) {
 
 /**
  * Checks if the node is a React component name. React component names must
- * always start with a non-lowercase letter. So `MyComponent` or `_MyComponent`
- * are valid component names for instance.
+ * always start with an uppercase letter.
  */
 
 function isComponentName(node) {
-  if (node.type === 'Identifier') {
-    return !/^[a-z]/.test(node.name);
-  } else {
-    return false;
-  }
+  return node.type === 'Identifier' && /^[A-Z]/.test(node.name);
 }
 
 function isReactFunction(node, functionName) {
diff --git a/packages/jest-react/src/internalAct.js b/packages/jest-react/src/internalAct.js
index 4e41f6234c928..a5a398b7e2a0d 100644
--- a/packages/jest-react/src/internalAct.js
+++ b/packages/jest-react/src/internalAct.js
@@ -28,6 +28,8 @@ export function act<T>(scope: () => Thenable<T> | T): Thenable<T> {
       'This version of `act` requires a special mock build of Scheduler.',
     );
   }
+
+  // $FlowFixMe: _isMockFunction doesn't exist on function
   if (setTimeout._isMockFunction !== true) {
     throw Error(
       "This version of `act` requires Jest's timer mocks " +
diff --git a/packages/react-cache/src/LRU.js b/packages/react-cache/src/LRU.js
index 5046b3f2bc9fe..9a90cc8a3ede7 100644
--- a/packages/react-cache/src/LRU.js
+++ b/packages/react-cache/src/LRU.js
@@ -16,12 +16,12 @@ const {
   unstable_IdlePriority: IdlePriority,
 } = Scheduler;
 
-type Entry<T> = {|
+type Entry<T> = {
   value: T,
   onDelete: () => mixed,
   previous: Entry<T>,
   next: Entry<T>,
-|};
+};
 
 export function createLRU<T>(limit: number) {
   let LIMIT = limit;
diff --git a/packages/react-cache/src/ReactCacheOld.js b/packages/react-cache/src/ReactCacheOld.js
index f8b33434b7c76..8781899dc2ae7 100644
--- a/packages/react-cache/src/ReactCacheOld.js
+++ b/packages/react-cache/src/ReactCacheOld.js
@@ -15,20 +15,20 @@ import {createLRU} from './LRU';
 
 type Suspender = {then(resolve: () => mixed, reject: () => mixed): mixed, ...};
 
-type PendingResult = {|
+type PendingResult = {
   status: 0,
   value: Suspender,
-|};
+};
 
-type ResolvedResult<V> = {|
+type ResolvedResult<V> = {
   status: 1,
   value: V,
-|};
+};
 
-type RejectedResult = {|
+type RejectedResult = {
   status: 2,
   value: mixed,
-|};
+};
 
 type Result<V> = PendingResult | ResolvedResult<V> | RejectedResult;
 
diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js
index 13fb0897e747b..bd78cd237640b 100644
--- a/packages/react-client/src/ReactFlightClient.js
+++ b/packages/react-client/src/ReactFlightClient.js
@@ -129,10 +129,12 @@ function readRoot<T>(): T {
 }
 
 function createPendingChunk(response: Response): PendingChunk {
+  // $FlowFixMe Flow doesn't support functions as constructors
   return new Chunk(PENDING, null, response);
 }
 
 function createErrorChunk(response: Response, error: Error): ErroredChunk {
+  // $FlowFixMe Flow doesn't support functions as constructors
   return new Chunk(ERRORED, error, response);
 }
 
@@ -140,6 +142,7 @@ function createInitializedChunk<T>(
   response: Response,
   value: T,
 ): InitializedChunk<T> {
+  // $FlowFixMe Flow doesn't support functions as constructors
   return new Chunk(INITIALIZED, value, response);
 }
 
@@ -168,6 +171,7 @@ function createResolvedModelChunk(
   response: Response,
   value: UninitializedModel,
 ): ResolvedModelChunk {
+  // $FlowFixMe Flow doesn't support functions as constructors
   return new Chunk(RESOLVED_MODEL, value, response);
 }
 
@@ -175,6 +179,7 @@ function createResolvedModuleChunk<T>(
   response: Response,
   value: ModuleReference<T>,
 ): ResolvedModuleChunk<T> {
+  // $FlowFixMe Flow doesn't support functions as constructors
   return new Chunk(RESOLVED_MODULE, value, response);
 }
 
diff --git a/packages/react-debug-tools/src/ReactDebugHooks.js b/packages/react-debug-tools/src/ReactDebugHooks.js
index 940873725cb2f..2cb6e7fbdf386 100644
--- a/packages/react-debug-tools/src/ReactDebugHooks.js
+++ b/packages/react-debug-tools/src/ReactDebugHooks.js
@@ -154,7 +154,7 @@ function useReducer<S, I, A>(
   return [state, (action: A) => {}];
 }
 
-function useRef<T>(initialValue: T): {|current: T|} {
+function useRef<T>(initialValue: T): {current: T} {
   const hook = nextHook();
   const ref = hook !== null ? hook.memoizedState : {current: initialValue};
   hookLog.push({
@@ -208,7 +208,7 @@ function useEffect(
 }
 
 function useImperativeHandle<T>(
-  ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
+  ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
   create: () => T,
   inputs: Array<mixed> | void | null,
 ): void {
@@ -683,6 +683,7 @@ function handleRenderFunctionError(error: any): void {
   // TODO: refactor this if we ever combine the devtools and debug tools packages
   wrapperError.name = 'ReactDebugToolsRenderError';
   // this stage-4 proposal is not supported by all environments yet.
+  // $FlowFixMe Flow doesn't have this type yet.
   wrapperError.cause = error;
   throw wrapperError;
 }
diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js
index ff69b709dab00..4a2ba8ff08e67 100644
--- a/packages/react-devtools-core/src/standalone.js
+++ b/packages/react-devtools-core/src/standalone.js
@@ -266,7 +266,7 @@ function initialize(socket: WebSocket) {
 
 let startServerTimeoutID: TimeoutID | null = null;
 
-function connectToSocket(socket: WebSocket) {
+function connectToSocket(socket: WebSocket): {close(): void} {
   socket.onerror = err => {
     onDisconnected();
     log.error('Error with websocket connection', err);
@@ -284,21 +284,21 @@ function connectToSocket(socket: WebSocket) {
   };
 }
 
-type ServerOptions = {|
+type ServerOptions = {
   key?: string,
   cert?: string,
-|};
+};
 
-type LoggerOptions = {|
+type LoggerOptions = {
   surface?: ?string,
-|};
+};
 
 function startServer(
   port?: number = 8097,
   host?: string = 'localhost',
   httpsOptions?: ServerOptions,
   loggerOptions?: LoggerOptions,
-) {
+): {close(): void} {
   registerDevToolsEventLogger(loggerOptions?.surface ?? 'standalone');
 
   const useHttps = !!httpsOptions;
diff --git a/packages/react-devtools-extensions/flow-typed/jest.js b/packages/react-devtools-extensions/flow-typed/jest.js
index 39e6cae3c2551..dba752e9ba300 100644
--- a/packages/react-devtools-extensions/flow-typed/jest.js
+++ b/packages/react-devtools-extensions/flow-typed/jest.js
@@ -206,7 +206,7 @@ type EnzymeMatchersType = {
   toIncludeText(text: string): void,
   toMatchElement(
     element: React$Element<any>,
-    options?: {|ignoreProps?: boolean, verbose?: boolean|}
+    options?: {ignoreProps?: boolean, verbose?: boolean}
   ): void,
   toMatchSelector(selector: string): void,
   // 7.x
@@ -1095,7 +1095,7 @@ type JestPrettyFormatPrint = any => string;
 // eslint-disable-next-line no-unused-vars
 type JestPrettyFormatStringOrNull = string | null;
 
-type JestPrettyFormatOptions = {|
+type JestPrettyFormatOptions = {
   callToJSON: boolean,
   edgeSpacing: string,
   escapeRegex: boolean,
@@ -1107,14 +1107,14 @@ type JestPrettyFormatOptions = {|
   plugins: JestPrettyFormatPlugins,
   printFunctionName: boolean,
   spacing: string,
-  theme: {|
+  theme: {
     comment: string,
     content: string,
     prop: string,
     tag: string,
     value: string,
-  |},
-|};
+  },
+};
 
 type JestPrettyFormatPlugin = {
   print: (
diff --git a/packages/react-devtools-inline/src/backend.js b/packages/react-devtools-inline/src/backend.js
index c0c87871df117..234c7f5f8853d 100644
--- a/packages/react-devtools-inline/src/backend.js
+++ b/packages/react-devtools-inline/src/backend.js
@@ -9,7 +9,7 @@ import setupNativeStyleEditor from 'react-devtools-shared/src/backend/NativeStyl
 import type {BackendBridge} from 'react-devtools-shared/src/bridge';
 import type {Wall} from 'react-devtools-shared/src/types';
 
-function startActivation(contentWindow: window, bridge: BackendBridge) {
+function startActivation(contentWindow: any, bridge: BackendBridge) {
   const onSavedPreferences = data => {
     // This is the only message we're listening for,
     // so it's safe to cleanup after we've received it.
@@ -55,7 +55,7 @@ function startActivation(contentWindow: window, bridge: BackendBridge) {
   bridge.send('getSavedPreferences');
 }
 
-function finishActivation(contentWindow: window, bridge: BackendBridge) {
+function finishActivation(contentWindow: any, bridge: BackendBridge) {
   const agent = new Agent(bridge);
 
   const hook = contentWindow.__REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -75,12 +75,12 @@ function finishActivation(contentWindow: window, bridge: BackendBridge) {
 }
 
 export function activate(
-  contentWindow: window,
+  contentWindow: any,
   {
     bridge,
-  }: {|
+  }: {
     bridge?: BackendBridge,
-  |} = {},
+  } = {},
 ): void {
   if (bridge == null) {
     bridge = createBridge(contentWindow);
@@ -89,10 +89,7 @@ export function activate(
   startActivation(contentWindow, bridge);
 }
 
-export function createBridge(
-  contentWindow: window,
-  wall?: Wall,
-): BackendBridge {
+export function createBridge(contentWindow: any, wall?: Wall): BackendBridge {
   const {parent} = contentWindow;
 
   if (wall == null) {
@@ -115,6 +112,6 @@ export function createBridge(
   return (new Bridge(wall): BackendBridge);
 }
 
-export function initialize(contentWindow: window): void {
+export function initialize(contentWindow: any): void {
   installHook(contentWindow);
 }
diff --git a/packages/react-devtools-inline/src/frontend.js b/packages/react-devtools-inline/src/frontend.js
index 42c820126f285..1e5ea336a477f 100644
--- a/packages/react-devtools-inline/src/frontend.js
+++ b/packages/react-devtools-inline/src/frontend.js
@@ -17,11 +17,11 @@ import type {Wall} from 'react-devtools-shared/src/types';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 import type {Props} from 'react-devtools-shared/src/devtools/views/DevTools';
 
-type Config = {|
+type Config = {
   checkBridgeProtocolCompatibility?: boolean,
   supportsNativeInspection?: boolean,
   supportsProfiling?: boolean,
-|};
+};
 
 export function createStore(bridge: FrontendBridge, config?: Config): Store {
   return new Store(bridge, {
@@ -33,10 +33,7 @@ export function createStore(bridge: FrontendBridge, config?: Config): Store {
   });
 }
 
-export function createBridge(
-  contentWindow: window,
-  wall?: Wall,
-): FrontendBridge {
+export function createBridge(contentWindow: any, wall?: Wall): FrontendBridge {
   if (wall == null) {
     wall = {
       listen(fn) {
@@ -58,14 +55,14 @@ export function createBridge(
 }
 
 export function initialize(
-  contentWindow: window,
+  contentWindow: any,
   {
     bridge,
     store,
-  }: {|
+  }: {
     bridge?: FrontendBridge,
     store?: Store,
-  |} = {},
+  } = {},
 ): React.AbstractComponent<Props, mixed> {
   if (bridge == null) {
     bridge = createBridge(contentWindow);
diff --git a/packages/react-devtools-shared/src/Logger.js b/packages/react-devtools-shared/src/Logger.js
index ddf60f8fd70f7..0998f860a99c4 100644
--- a/packages/react-devtools-shared/src/Logger.js
+++ b/packages/react-devtools-shared/src/Logger.js
@@ -10,57 +10,57 @@
 import {enableLogger} from 'react-devtools-feature-flags';
 
 export type LoggerEvent =
-  | {|
+  | {
       +event_name: 'loaded-dev-tools',
-    |}
-  | {|
+    }
+  | {
       +event_name: 'error',
       +error_message: string | null,
       +error_stack: string | null,
       +error_component_stack: string | null,
-    |}
-  | {|
+    }
+  | {
       +event_name: 'selected-components-tab',
-    |}
-  | {|
+    }
+  | {
       +event_name: 'selected-profiler-tab',
-    |}
-  | {|
+    }
+  | {
       +event_name: 'load-hook-names',
       +event_status: 'success' | 'error' | 'timeout' | 'unknown',
       +duration_ms: number,
       +inspected_element_display_name: string | null,
       +inspected_element_number_of_hooks: number | null,
-    |}
-  | {|
+    }
+  | {
       +event_name: 'select-element',
       +metadata: {
         +source: string,
       },
-    |}
-  | {|
+    }
+  | {
       +event_name: 'inspect-element-button-clicked',
-    |}
-  | {|
+    }
+  | {
       +event_name: 'profiling-start',
       +metadata: {
         +current_tab: string,
       },
-    |}
-  | {|
+    }
+  | {
       +event_name: 'profiler-tab-changed',
       +metadata: {
         +tabId: string,
       },
-    |}
-  | {|
+    }
+  | {
       +event_name: 'settings-changed',
       +metadata: {
         +key: string,
         +value: any,
         ...
       },
-    |};
+    };
 
 export type LogFunction = LoggerEvent => void | Promise<void>;
 
diff --git a/packages/react-devtools-shared/src/__tests__/console-test.js b/packages/react-devtools-shared/src/__tests__/console-test.js
index 40eb388a955ca..407150b5e39b8 100644
--- a/packages/react-devtools-shared/src/__tests__/console-test.js
+++ b/packages/react-devtools-shared/src/__tests__/console-test.js
@@ -16,6 +16,8 @@ let fakeConsole;
 let legacyRender;
 let mockError;
 let mockInfo;
+let mockGroup;
+let mockGroupCollapsed;
 let mockLog;
 let mockWarn;
 let patchConsole;
@@ -25,6 +27,7 @@ let rendererID;
 describe('console', () => {
   beforeEach(() => {
     const Console = require('react-devtools-shared/src/backend/console');
+
     patchConsole = Console.patch;
     unpatchConsole = Console.unpatch;
 
@@ -33,6 +36,8 @@ describe('console', () => {
     // because Jest itself has hooks into it as does our test env setup.
     mockError = jest.fn();
     mockInfo = jest.fn();
+    mockGroup = jest.fn();
+    mockGroupCollapsed = jest.fn();
     mockLog = jest.fn();
     mockWarn = jest.fn();
     fakeConsole = {
@@ -40,6 +45,8 @@ describe('console', () => {
       info: mockInfo,
       log: mockLog,
       warn: mockWarn,
+      group: mockGroup,
+      groupCollapsed: mockGroupCollapsed,
     };
 
     Console.dangerous_setTargetConsoleForTesting(fakeConsole);
@@ -69,6 +76,8 @@ describe('console', () => {
     expect(fakeConsole.info).toBe(mockInfo);
     expect(fakeConsole.log).toBe(mockLog);
     expect(fakeConsole.warn).not.toBe(mockWarn);
+    expect(fakeConsole.group).toBe(mockGroup);
+    expect(fakeConsole.groupCollapsed).toBe(mockGroupCollapsed);
   });
 
   // @reactVersion >=18.0
@@ -491,6 +500,9 @@ describe('console', () => {
       fakeConsole.log('log');
       fakeConsole.warn('warn');
       fakeConsole.error('error');
+      fakeConsole.info('info');
+      fakeConsole.group('group');
+      fakeConsole.groupCollapsed('groupCollapsed');
       return <div />;
     }
 
@@ -528,6 +540,36 @@ describe('console', () => {
       `color: ${process.env.DARK_MODE_DIMMED_ERROR_COLOR}`,
       'error',
     ]);
+
+    expect(mockInfo).toHaveBeenCalledTimes(2);
+    expect(mockInfo.mock.calls[0]).toHaveLength(1);
+    expect(mockInfo.mock.calls[0][0]).toBe('info');
+    expect(mockInfo.mock.calls[1]).toHaveLength(3);
+    expect(mockInfo.mock.calls[1]).toEqual([
+      '%c%s',
+      `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`,
+      'info',
+    ]);
+
+    expect(mockGroup).toHaveBeenCalledTimes(2);
+    expect(mockGroup.mock.calls[0]).toHaveLength(1);
+    expect(mockGroup.mock.calls[0][0]).toBe('group');
+    expect(mockGroup.mock.calls[1]).toHaveLength(3);
+    expect(mockGroup.mock.calls[1]).toEqual([
+      '%c%s',
+      `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`,
+      'group',
+    ]);
+
+    expect(mockGroupCollapsed).toHaveBeenCalledTimes(2);
+    expect(mockGroupCollapsed.mock.calls[0]).toHaveLength(1);
+    expect(mockGroupCollapsed.mock.calls[0][0]).toBe('groupCollapsed');
+    expect(mockGroupCollapsed.mock.calls[1]).toHaveLength(3);
+    expect(mockGroupCollapsed.mock.calls[1]).toEqual([
+      '%c%s',
+      `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`,
+      'groupCollapsed',
+    ]);
   });
 
   it('should not double log if hideConsoleLogsInStrictMode is enabled in Strict mode', () => {
@@ -538,9 +580,16 @@ describe('console', () => {
     const root = ReactDOMClient.createRoot(container);
 
     function App() {
+      console.log(
+        'CALL',
+        global.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__,
+      );
       fakeConsole.log('log');
       fakeConsole.warn('warn');
       fakeConsole.error('error');
+      fakeConsole.info('info');
+      fakeConsole.group('group');
+      fakeConsole.groupCollapsed('groupCollapsed');
       return <div />;
     }
 
@@ -563,6 +612,18 @@ describe('console', () => {
     expect(mockError).toHaveBeenCalledTimes(1);
     expect(mockError.mock.calls[0]).toHaveLength(1);
     expect(mockError.mock.calls[0][0]).toBe('error');
+
+    expect(mockInfo).toHaveBeenCalledTimes(1);
+    expect(mockInfo.mock.calls[0]).toHaveLength(1);
+    expect(mockInfo.mock.calls[0][0]).toBe('info');
+
+    expect(mockGroup).toHaveBeenCalledTimes(1);
+    expect(mockGroup.mock.calls[0]).toHaveLength(1);
+    expect(mockGroup.mock.calls[0][0]).toBe('group');
+
+    expect(mockGroupCollapsed).toHaveBeenCalledTimes(1);
+    expect(mockGroupCollapsed.mock.calls[0]).toHaveLength(1);
+    expect(mockGroupCollapsed.mock.calls[0][0]).toBe('groupCollapsed');
   });
 
   it('should double log in Strict mode initial render for extension', () => {
@@ -734,6 +795,8 @@ describe('console error', () => {
     // because Jest itself has hooks into it as does our test env setup.
     mockError = jest.fn();
     mockInfo = jest.fn();
+    mockGroup = jest.fn();
+    mockGroupCollapsed = jest.fn();
     mockLog = jest.fn();
     mockWarn = jest.fn();
     fakeConsole = {
@@ -741,6 +804,8 @@ describe('console error', () => {
       info: mockInfo,
       log: mockLog,
       warn: mockWarn,
+      group: mockGroup,
+      groupCollapsed: mockGroupCollapsed,
     };
 
     Console.dangerous_setTargetConsoleForTesting(fakeConsole);
diff --git a/packages/react-devtools-shared/src/__tests__/profilingCache-test.js b/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
index 1a84be03aa502..d3ce61cbd7472 100644
--- a/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
@@ -202,10 +202,7 @@ describe('ProfilingCache', () => {
 
     const ModernContext = React.createContext(0);
 
-    class LegacyContextProvider extends React.Component<
-      any,
-      {|count: number|},
-    > {
+    class LegacyContextProvider extends React.Component<any, {count: number}> {
       static childContextTypes = {
         count: PropTypes.number,
       };
diff --git a/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js b/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js
index cf8d4aae4a717..67196274a68d4 100644
--- a/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js
@@ -61,7 +61,7 @@ describe('profiling charts', () => {
   describe('flamegraph chart', () => {
     // @reactVersion >= 16.9
     it('should contain valid data', () => {
-      const Parent = (_: {||}) => {
+      const Parent = (_: {}) => {
         Scheduler.unstable_advanceTime(10);
         return (
           <React.Fragment>
@@ -211,7 +211,7 @@ describe('profiling charts', () => {
   describe('ranked chart', () => {
     // @reactVersion >= 16.9
     it('should contain valid data', () => {
-      const Parent = (_: {||}) => {
+      const Parent = (_: {}) => {
         Scheduler.unstable_advanceTime(10);
         return (
           <React.Fragment>
diff --git a/packages/react-devtools-shared/src/__tests__/setupTests.js b/packages/react-devtools-shared/src/__tests__/setupTests.js
index 37ca023381bd2..ca77678451145 100644
--- a/packages/react-devtools-shared/src/__tests__/setupTests.js
+++ b/packages/react-devtools-shared/src/__tests__/setupTests.js
@@ -52,8 +52,7 @@ env.beforeEach(() => {
   const {installHook} = require('react-devtools-shared/src/hook');
   const {
     getDefaultComponentFilters,
-    saveComponentFilters,
-    setShowInlineWarningsAndErrors,
+    setSavedComponentFilters,
   } = require('react-devtools-shared/src/utils');
 
   // Fake timers let us flush Bridge operations between setup and assertions.
@@ -118,11 +117,10 @@ env.beforeEach(() => {
   };
 
   // Initialize filters to a known good state.
-  saveComponentFilters(getDefaultComponentFilters());
+  setSavedComponentFilters(getDefaultComponentFilters());
   global.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = getDefaultComponentFilters();
 
   // Also initialize inline warnings so that we can test them.
-  setShowInlineWarningsAndErrors(true);
   global.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ = true;
 
   installHook(global);
diff --git a/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js b/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js
index e9e30de830a1f..d49f3f3e1b8ea 100644
--- a/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js
+++ b/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js
@@ -51,7 +51,7 @@ describe('Store component filters', () => {
 
   // @reactVersion >= 16.0
   it('should support filtering by element type', () => {
-    class ClassComponent extends React.Component<{|children: React$Node|}> {
+    class ClassComponent extends React.Component<{children: React$Node}> {
       render() {
         return <div>{this.props.children}</div>;
       }
diff --git a/packages/react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor.js b/packages/react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor.js
index 6a7921489c597..fee2847f05e6d 100644
--- a/packages/react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor.js
+++ b/packages/react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor.js
@@ -25,7 +25,7 @@ export default function setupNativeStyleEditor(
 ) {
   bridge.addListener(
     'NativeStyleEditor_measure',
-    ({id, rendererID}: {|id: number, rendererID: RendererID|}) => {
+    ({id, rendererID}: {id: number, rendererID: RendererID}) => {
       measureStyle(agent, bridge, resolveNativeStyle, id, rendererID);
     },
   );
@@ -38,13 +38,13 @@ export default function setupNativeStyleEditor(
       oldName,
       newName,
       value,
-    }: {|
+    }: {
       id: number,
       rendererID: RendererID,
       oldName: string,
       newName: string,
       value: string,
-    |}) => {
+    }) => {
       renameStyle(agent, id, rendererID, oldName, newName, value);
       setTimeout(() =>
         measureStyle(agent, bridge, resolveNativeStyle, id, rendererID),
@@ -59,12 +59,12 @@ export default function setupNativeStyleEditor(
       rendererID,
       name,
       value,
-    }: {|
+    }: {
       id: number,
       rendererID: number,
       name: string,
       value: string,
-    |}) => {
+    }) => {
       setStyle(agent, id, rendererID, name, value);
       setTimeout(() =>
         measureStyle(agent, bridge, resolveNativeStyle, id, rendererID),
diff --git a/packages/react-devtools-shared/src/backend/NativeStyleEditor/types.js b/packages/react-devtools-shared/src/backend/NativeStyleEditor/types.js
index f20d0d016d850..51ac03051d448 100644
--- a/packages/react-devtools-shared/src/backend/NativeStyleEditor/types.js
+++ b/packages/react-devtools-shared/src/backend/NativeStyleEditor/types.js
@@ -7,14 +7,14 @@
  * @flow
  */
 
-export type BoxStyle = $ReadOnly<{|
+export type BoxStyle = $ReadOnly<{
   bottom: number,
   left: number,
   right: number,
   top: number,
-|}>;
+}>;
 
-export type Layout = {|
+export type Layout = {
   x: number,
   y: number,
   width: number,
@@ -23,12 +23,12 @@ export type Layout = {|
   top: number,
   margin: BoxStyle,
   padding: BoxStyle,
-|};
+};
 
 export type Style = Object;
 
-export type StyleAndLayout = {|
+export type StyleAndLayout = {
   id: number,
   style: Style | null,
   layout: Layout | null,
-|};
+};
diff --git a/packages/react-devtools-shared/src/backend/StyleX/utils.js b/packages/react-devtools-shared/src/backend/StyleX/utils.js
index 68bda23a2262c..2167321b0c84d 100644
--- a/packages/react-devtools-shared/src/backend/StyleX/utils.js
+++ b/packages/react-devtools-shared/src/backend/StyleX/utils.js
@@ -92,7 +92,9 @@ function getPropertyValueForStyleName(styleName: string): string | null {
     ]: any): CSSStyleSheet);
     // $FlowFixMe Flow doesn't konw about these properties
     const rules = styleSheet.rules || styleSheet.cssRules;
+    // $FlowFixMe `rules` is mixed
     for (let ruleIndex = 0; ruleIndex < rules.length; ruleIndex++) {
+      // $FlowFixMe `rules` is mixed
       const rule = rules[ruleIndex];
       // $FlowFixMe Flow doesn't konw about these properties
       const {cssText, selectorText, style} = rule;
diff --git a/packages/react-devtools-shared/src/backend/agent.js b/packages/react-devtools-shared/src/backend/agent.js
index 222a883ce7619..0d0fb5e81d7f8 100644
--- a/packages/react-devtools-shared/src/backend/agent.js
+++ b/packages/react-devtools-shared/src/backend/agent.js
@@ -53,102 +53,102 @@ const debug = (methodName, ...args) => {
   }
 };
 
-type ElementAndRendererID = {|
+type ElementAndRendererID = {
   id: number,
   rendererID: number,
-|};
+};
 
-type StoreAsGlobalParams = {|
+type StoreAsGlobalParams = {
   count: number,
   id: number,
   path: Array<string | number>,
   rendererID: number,
-|};
+};
 
-type CopyElementParams = {|
+type CopyElementParams = {
   id: number,
   path: Array<string | number>,
   rendererID: number,
-|};
+};
 
-type InspectElementParams = {|
+type InspectElementParams = {
   forceFullData: boolean,
   id: number,
   path: Array<string | number> | null,
   rendererID: number,
   requestID: number,
-|};
+};
 
-type OverrideHookParams = {|
+type OverrideHookParams = {
   id: number,
   hookID: number,
   path: Array<string | number>,
   rendererID: number,
   wasForwarded?: boolean,
   value: any,
-|};
+};
 
-type SetInParams = {|
+type SetInParams = {
   id: number,
   path: Array<string | number>,
   rendererID: number,
   wasForwarded?: boolean,
   value: any,
-|};
+};
 
 type PathType = 'props' | 'hooks' | 'state' | 'context';
 
-type DeletePathParams = {|
+type DeletePathParams = {
   type: PathType,
   hookID?: ?number,
   id: number,
   path: Array<string | number>,
   rendererID: number,
-|};
+};
 
-type RenamePathParams = {|
+type RenamePathParams = {
   type: PathType,
   hookID?: ?number,
   id: number,
   oldPath: Array<string | number>,
   newPath: Array<string | number>,
   rendererID: number,
-|};
+};
 
-type OverrideValueAtPathParams = {|
+type OverrideValueAtPathParams = {
   type: PathType,
   hookID?: ?number,
   id: number,
   path: Array<string | number>,
   rendererID: number,
   value: any,
-|};
+};
 
-type OverrideErrorParams = {|
+type OverrideErrorParams = {
   id: number,
   rendererID: number,
   forceError: boolean,
-|};
+};
 
-type OverrideSuspenseParams = {|
+type OverrideSuspenseParams = {
   id: number,
   rendererID: number,
   forceFallback: boolean,
-|};
+};
 
-type PersistedSelection = {|
+type PersistedSelection = {
   rendererID: number,
   path: Array<PathFrame>,
-|};
+};
 
-export default class Agent extends EventEmitter<{|
+export default class Agent extends EventEmitter<{
   hideNativeHighlight: [],
   showNativeHighlight: [NativeType],
   startInspectingNative: [],
   stopInspectingNative: [],
   shutdown: [],
   traceUpdates: [Set<NativeType>],
-|}> {
+}> {
   _bridge: BackendBridge;
   _isProfiling: boolean = false;
   _recordChangeDescriptions: boolean = false;
@@ -254,7 +254,7 @@ export default class Agent extends EventEmitter<{|
     return this._rendererInterfaces;
   }
 
-  clearErrorsAndWarnings = ({rendererID}: {|rendererID: RendererID|}) => {
+  clearErrorsAndWarnings = ({rendererID}: {rendererID: RendererID}) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}"`);
@@ -355,7 +355,7 @@ export default class Agent extends EventEmitter<{|
     this._bridge.send('bridgeProtocol', currentBridgeProtocol);
   };
 
-  getProfilingData = ({rendererID}: {|rendererID: RendererID|}) => {
+  getProfilingData = ({rendererID}: {rendererID: RendererID}) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}"`);
@@ -676,13 +676,13 @@ export default class Agent extends EventEmitter<{|
     showInlineWarningsAndErrors,
     hideConsoleLogsInStrictMode,
     browserTheme,
-  }: {|
+  }: {
     appendComponentStack: boolean,
     breakOnConsoleErrors: boolean,
     showInlineWarningsAndErrors: boolean,
     hideConsoleLogsInStrictMode: boolean,
     browserTheme: BrowserTheme,
-  |}) => {
+  }) => {
     // If the frontend preference has change,
     // or in the case of React Native- if the backend is just finding out the preference-
     // then reinstall the console overrides.
diff --git a/packages/react-devtools-shared/src/backend/console.js b/packages/react-devtools-shared/src/backend/console.js
index 5a85b68deac32..0ca957f216c6f 100644
--- a/packages/react-devtools-shared/src/backend/console.js
+++ b/packages/react-devtools-shared/src/backend/console.js
@@ -69,12 +69,12 @@ type OnErrorOrWarning = (
 
 const injectedRenderers: Map<
   ReactRenderer,
-  {|
+  {
     currentDispatcherRef: CurrentDispatcherRef,
     getCurrentFiber: () => Fiber | null,
     onErrorOrWarning: ?OnErrorOrWarning,
     workTagMap: WorkTagMap,
-  |},
+  },
 > = new Map();
 
 let targetConsole: Object = console;
@@ -301,7 +301,15 @@ let unpatchForStrictModeFn: null | (() => void) = null;
 // NOTE: KEEP IN SYNC with src/hook.js:patchConsoleForInitialRenderInStrictMode
 export function patchForStrictMode() {
   if (consoleManagedByDevToolsDuringStrictMode) {
-    const overrideConsoleMethods = ['error', 'trace', 'warn', 'log'];
+    const overrideConsoleMethods = [
+      'error',
+      'group',
+      'groupCollapsed',
+      'info',
+      'log',
+      'trace',
+      'warn',
+    ];
 
     if (unpatchForStrictModeFn !== null) {
       // Don't patch twice.
@@ -363,3 +371,37 @@ export function unpatchForStrictMode(): void {
     }
   }
 }
+
+export function patchConsoleUsingWindowValues() {
+  const appendComponentStack =
+    castBool(window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__) ?? true;
+  const breakOnConsoleErrors =
+    castBool(window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__) ?? false;
+  const showInlineWarningsAndErrors =
+    castBool(window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__) ?? true;
+  const hideConsoleLogsInStrictMode =
+    castBool(window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__) ??
+    false;
+  const browserTheme =
+    castBrowserTheme(window.__REACT_DEVTOOLS_BROWSER_THEME__) ?? 'dark';
+
+  patch({
+    appendComponentStack,
+    breakOnConsoleErrors,
+    showInlineWarningsAndErrors,
+    hideConsoleLogsInStrictMode,
+    browserTheme,
+  });
+}
+
+function castBool(v: any): ?boolean {
+  if (v === true || v === false) {
+    return v;
+  }
+}
+
+function castBrowserTheme(v: any): ?BrowserTheme {
+  if (v === 'light' || v === 'dark' || v === 'auto') {
+    return v;
+  }
+}
diff --git a/packages/react-devtools-shared/src/backend/profilingHooks.js b/packages/react-devtools-shared/src/backend/profilingHooks.js
index 2110545d8a663..bd08fef3505af 100644
--- a/packages/react-devtools-shared/src/backend/profilingHooks.js
+++ b/packages/react-devtools-shared/src/backend/profilingHooks.js
@@ -93,11 +93,11 @@ export function setPerformanceMock_ONLY_FOR_TESTING(
 export type GetTimelineData = () => TimelineData | null;
 export type ToggleProfilingStatus = (value: boolean) => void;
 
-type Response = {|
+type Response = {
   getTimelineData: GetTimelineData,
   profilingHooks: DevToolsProfilingHooks,
   toggleProfilingStatus: ToggleProfilingStatus,
-|};
+};
 
 export function createProfilingHooks({
   getDisplayNameForFiber,
@@ -106,14 +106,14 @@ export function createProfilingHooks({
   workTagMap,
   currentDispatcherRef,
   reactVersion,
-}: {|
+}: {
   getDisplayNameForFiber: (fiber: Fiber) => string | null,
   getIsProfiling: () => boolean,
   getLaneLabelMap?: () => Map<Lane, string> | null,
   currentDispatcherRef?: CurrentDispatcherRef,
   workTagMap: WorkTagMap,
   reactVersion: string,
-|}): Response {
+}): Response {
   let currentBatchUID: BatchUID = 0;
   let currentReactComponentMeasure: ReactComponentMeasure | null = null;
   let currentReactMeasuresStack: Array<ReactMeasure> = [];
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index df1c5d53e0776..9e0d8c278c45f 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -63,7 +63,7 @@ import {
 } from '../constants';
 import {inspectHooksOfFiber} from 'react-debug-tools';
 import {
-  patch as patchConsole,
+  patchConsoleUsingWindowValues,
   registerRenderer as registerRendererWithConsole,
   patchForStrictMode as patchConsoleForStrictMode,
   unpatchForStrictMode as unpatchConsoleForStrictMode,
@@ -124,25 +124,25 @@ import type {
 } from 'react-devtools-shared/src/types';
 
 type getDisplayNameForFiberType = (fiber: Fiber) => string | null;
-type getTypeSymbolType = (type: any) => Symbol | number;
+type getTypeSymbolType = (type: any) => symbol | number;
 
-type ReactPriorityLevelsType = {|
+type ReactPriorityLevelsType = {
   ImmediatePriority: number,
   UserBlockingPriority: number,
   NormalPriority: number,
   LowPriority: number,
   IdlePriority: number,
   NoPriority: number,
-|};
+};
 
-type ReactTypeOfSideEffectType = {|
+type ReactTypeOfSideEffectType = {
   DidCapture: number,
   NoFlags: number,
   PerformedWork: number,
   Placement: number,
   Incomplete: number,
   Hydrating: number,
-|};
+};
 
 function getFiberFlags(fiber: Fiber): number {
   // The name of this field changed from "effectTag" to "flags"
@@ -157,14 +157,14 @@ const getCurrentTime =
 
 export function getInternalReactConstants(
   version: string,
-): {|
+): {
   getDisplayNameForFiber: getDisplayNameForFiberType,
   getTypeSymbol: getTypeSymbolType,
   ReactPriorityLevels: ReactPriorityLevelsType,
   ReactTypeOfSideEffect: ReactTypeOfSideEffectType,
   ReactTypeOfWork: WorkTagMap,
   StrictModeBits: number,
-|} {
+} {
   const ReactTypeOfSideEffect: ReactTypeOfSideEffectType = {
     DidCapture: 0b10000000,
     NoFlags: 0b00,
@@ -382,13 +382,14 @@ export function getInternalReactConstants(
   // End of copied code.
   // **********************************************************
 
-  function getTypeSymbol(type: any): Symbol | number {
+  function getTypeSymbol(type: any): symbol | number {
     const symbolOrNumber =
       typeof type === 'object' && type !== null ? type.$$typeof : type;
 
     // $FlowFixMe Flow doesn't know about typeof "symbol"
     return typeof symbolOrNumber === 'symbol'
-      ? symbolOrNumber.toString()
+      ? // $FlowFixMe `toString()` doesn't match the type signature?
+        symbolOrNumber.toString()
       : symbolOrNumber;
   }
 
@@ -468,8 +469,9 @@ export function getInternalReactConstants(
         return type;
       case HostPortal:
       case HostText:
-      case Fragment:
         return null;
+      case Fragment:
+        return 'Fragment';
       case LazyComponent:
         // This display name will not be user visible.
         // Once a Lazy component loads its inner component, React replaces the tag and type.
@@ -810,32 +812,12 @@ export function attach(
   // Patching the console enables DevTools to do a few useful things:
   // * Append component stacks to warnings and error messages
   // * Disable logging during re-renders to inspect hooks (see inspectHooksOfFiber)
-  //
-  // Don't patch in test environments because we don't want to interfere with Jest's own console overrides.
-  if (process.env.NODE_ENV !== 'test') {
-    registerRendererWithConsole(renderer, onErrorOrWarning);
-
-    // The renderer interface can't read these preferences directly,
-    // because it is stored in localStorage within the context of the extension.
-    // It relies on the extension to pass the preference through via the global.
-    const appendComponentStack =
-      window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ !== false;
-    const breakOnConsoleErrors =
-      window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ === true;
-    const showInlineWarningsAndErrors =
-      window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ !== false;
-    const hideConsoleLogsInStrictMode =
-      window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ === true;
-    const browserTheme = window.__REACT_DEVTOOLS_BROWSER_THEME__;
-
-    patchConsole({
-      appendComponentStack,
-      breakOnConsoleErrors,
-      showInlineWarningsAndErrors,
-      hideConsoleLogsInStrictMode,
-      browserTheme,
-    });
-  }
+  registerRendererWithConsole(renderer, onErrorOrWarning);
+
+  // The renderer interface can't read these preferences directly,
+  // because it is stored in localStorage within the context of the extension.
+  // It relies on the extension to pass the preference through via the global.
+  patchConsoleUsingWindowValues();
 
   const debug = (
     name: string,
@@ -981,7 +963,7 @@ export function attach(
 
   // NOTICE Keep in sync with get*ForFiber methods
   function shouldFilterFiber(fiber: Fiber): boolean {
-    const {_debugSource, tag, type} = fiber;
+    const {_debugSource, tag, type, key} = fiber;
 
     switch (tag) {
       case DehydratedSuspenseComponent:
@@ -993,13 +975,14 @@ export function attach(
         return true;
       case HostPortal:
       case HostText:
-      case Fragment:
       case LegacyHiddenComponent:
       case OffscreenComponent:
         return true;
       case HostRoot:
         // It is never valid to filter the root element.
         return false;
+      case Fragment:
+        return key === null;
       default:
         const typeSymbol = getTypeSymbol(type);
 
@@ -1596,10 +1579,10 @@ export function attach(
 
   type OperationsArray = Array<number>;
 
-  type StringTableEntry = {|
+  type StringTableEntry = {
     encodedString: Array<number>,
     id: number,
-  |};
+  };
 
   const pendingOperations: OperationsArray = [];
   const pendingRealUnmountedIDs: Array<number> = [];
@@ -3951,7 +3934,7 @@ export function attach(
     }
   }
 
-  type CommitProfilingData = {|
+  type CommitProfilingData = {
     changeDescriptions: Map<number, ChangeDescription> | null,
     commitTime: number,
     durations: Array<number>,
@@ -3960,7 +3943,7 @@ export function attach(
     passiveEffectDuration: number | null,
     priorityLevel: string | null,
     updaters: Array<SerializedElement> | null,
-  |};
+  };
 
   type CommitProfilingMetadataMap = Map<number, Array<CommitProfilingData>>;
   type DisplayNamesByRootID = Map<number, string>;
diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js
index 81ed15b04ae78..1830edfef4055 100644
--- a/packages/react-devtools-shared/src/backend/types.js
+++ b/packages/react-devtools-shared/src/backend/types.js
@@ -26,7 +26,7 @@ export type WorkTag = number;
 export type WorkFlags = number;
 export type ExpirationTime = number;
 
-export type WorkTagMap = {|
+export type WorkTagMap = {
   CacheComponent: WorkTag,
   ClassComponent: WorkTag,
   ContextConsumer: WorkTag,
@@ -55,22 +55,22 @@ export type WorkTagMap = {|
   SuspenseListComponent: WorkTag,
   TracingMarkerComponent: WorkTag,
   YieldComponent: WorkTag,
-|};
+};
 
 // TODO: If it's useful for the frontend to know which types of data an Element has
 // (e.g. props, state, context, hooks) then we could add a bitmask field for this
 // to keep the number of attributes small.
-export type FiberData = {|
+export type FiberData = {
   key: string | null,
   displayName: string | null,
   type: ElementType,
-|};
+};
 
 export type NativeType = Object;
 export type RendererID = number;
 
 type Dispatcher = any;
-export type CurrentDispatcherRef = {|current: null | Dispatcher|};
+export type CurrentDispatcherRef = {current: null | Dispatcher};
 
 export type GetDisplayNameForFiberID = (
   id: number,
@@ -84,7 +84,7 @@ export type GetFiberIDForNative = (
 export type FindNativeNodesForFiberID = (id: number) => ?Array<NativeType>;
 
 export type ReactProviderType<T> = {
-  $$typeof: Symbol | number,
+  $$typeof: symbol | number,
   _context: ReactContext<T>,
   ...
 };
@@ -158,16 +158,16 @@ export type ReactRenderer = {
   ...
 };
 
-export type ChangeDescription = {|
+export type ChangeDescription = {
   context: Array<string> | boolean | null,
   didHooksChange: boolean,
   isFirstMount: boolean,
   props: Array<string> | null,
   state: Array<string> | null,
   hooks?: Array<number> | null,
-|};
+};
 
-export type CommitDataBackend = {|
+export type CommitDataBackend = {
   // Tuple of fiber ID and change description
   changeDescriptions: Array<[number, ChangeDescription]> | null,
   duration: number,
@@ -182,48 +182,48 @@ export type CommitDataBackend = {|
   priorityLevel: string | null,
   timestamp: number,
   updaters: Array<SerializedElement> | null,
-|};
+};
 
-export type ProfilingDataForRootBackend = {|
+export type ProfilingDataForRootBackend = {
   commitData: Array<CommitDataBackend>,
   displayName: string,
   // Tuple of Fiber ID and base duration
   initialTreeBaseDurations: Array<[number, number]>,
   rootID: number,
-|};
+};
 
 // Profiling data collected by the renderer interface.
 // This information will be passed to the frontend and combined with info it collects.
-export type ProfilingDataBackend = {|
+export type ProfilingDataBackend = {
   dataForRoots: Array<ProfilingDataForRootBackend>,
   rendererID: number,
   timelineData: TimelineDataExport | null,
-|};
+};
 
-export type PathFrame = {|
+export type PathFrame = {
   key: string | null,
   index: number,
   displayName: string | null,
-|};
+};
 
-export type PathMatch = {|
+export type PathMatch = {
   id: number,
   isFullMatch: boolean,
-|};
+};
 
-export type SerializedElement = {|
+export type SerializedElement = {
   displayName: string | null,
   id: number,
   key: number | string | null,
   type: ElementType,
-|};
+};
 
-export type OwnersList = {|
+export type OwnersList = {
   id: number,
   owners: Array<SerializedElement> | null,
-|};
+};
 
-export type InspectedElement = {|
+export type InspectedElement = {
   id: number,
 
   displayName: string | null,
@@ -278,48 +278,48 @@ export type InspectedElement = {|
 
   // UI plugins/visualizations for the inspected element.
   plugins: Plugins,
-|};
+};
 
 export const InspectElementErrorType = 'error';
 export const InspectElementFullDataType = 'full-data';
 export const InspectElementNoChangeType = 'no-change';
 export const InspectElementNotFoundType = 'not-found';
 
-export type InspectElementError = {|
+export type InspectElementError = {
   id: number,
   responseID: number,
   type: 'error',
   errorType: 'user' | 'unknown-hook' | 'uncaught',
   message: string,
   stack?: string,
-|};
+};
 
-export type InspectElementFullData = {|
+export type InspectElementFullData = {
   id: number,
   responseID: number,
   type: 'full-data',
   value: InspectedElement,
-|};
+};
 
-export type InspectElementHydratedPath = {|
+export type InspectElementHydratedPath = {
   id: number,
   responseID: number,
   type: 'hydrated-path',
   path: Array<string | number>,
   value: any,
-|};
+};
 
-export type InspectElementNoChange = {|
+export type InspectElementNoChange = {
   id: number,
   responseID: number,
   type: 'no-change',
-|};
+};
 
-export type InspectElementNotFound = {|
+export type InspectElementNotFound = {
   id: number,
   responseID: number,
   type: 'not-found',
-|};
+};
 
 export type InspectedElementPayload =
   | InspectElementError
@@ -328,10 +328,10 @@ export type InspectedElementPayload =
   | InspectElementNoChange
   | InspectElementNotFound;
 
-export type InstanceAndStyle = {|
+export type InstanceAndStyle = {
   instance: Object | null,
   style: Object | null,
-|};
+};
 
 type Type = 'props' | 'hooks' | 'state' | 'context';
 
@@ -411,7 +411,7 @@ export type Handler = (data: any) => void;
 
 // Renderers use these APIs to report profiling data to DevTools at runtime.
 // They get passed from the DevTools backend to the reconciler during injection.
-export type DevToolsProfilingHooks = {|
+export type DevToolsProfilingHooks = {
   // Scheduling methods:
   markRenderScheduled: (lane: Lane) => void,
   markStateUpdateScheduled: (fiber: Fiber, lane: Lane) => void,
@@ -449,7 +449,7 @@ export type DevToolsProfilingHooks = {|
   markComponentPassiveEffectMountStopped: () => void,
   markComponentPassiveEffectUnmountStarted: (fiber: Fiber) => void,
   markComponentPassiveEffectUnmountStopped: () => void,
-|};
+};
 
 export type DevToolsHook = {
   listeners: {[key: string]: Array<Handler>, ...},
diff --git a/packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js b/packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js
index b9bfae87a86d3..577aaf912860e 100644
--- a/packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js
+++ b/packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js
@@ -12,7 +12,7 @@ import {getElementDimensions, getNestedBoundingClientRect} from '../utils';
 import type {Rect} from '../utils';
 import type Agent from 'react-devtools-shared/src/backend/agent';
 
-type Box = {|top: number, left: number, width: number, height: number|};
+type Box = {top: number, left: number, width: number, height: number};
 
 const assign = Object.assign;
 
@@ -148,8 +148,8 @@ class OverlayTip {
 }
 
 export default class Overlay {
-  window: window;
-  tipBoundsWindow: window;
+  window: any;
+  tipBoundsWindow: any;
   container: HTMLElement;
   tip: OverlayTip;
   rects: Array<OverlayRect>;
diff --git a/packages/react-devtools-shared/src/backend/views/TraceUpdates/index.js b/packages/react-devtools-shared/src/backend/views/TraceUpdates/index.js
index 831b47385d8ea..4927d4a3cb221 100644
--- a/packages/react-devtools-shared/src/backend/views/TraceUpdates/index.js
+++ b/packages/react-devtools-shared/src/backend/views/TraceUpdates/index.js
@@ -30,12 +30,12 @@ const getCurrentTime =
     ? () => performance.now()
     : () => Date.now();
 
-export type Data = {|
+export type Data = {
   count: number,
   expirationTime: number,
   lastMeasuredAt: number,
   rect: Rect | null,
-|};
+};
 
 const nodeToData: Map<NativeType, Data> = new Map();
 
diff --git a/packages/react-devtools-shared/src/backend/views/utils.js b/packages/react-devtools-shared/src/backend/views/utils.js
index a677c7447efc7..35e8d17192c6a 100644
--- a/packages/react-devtools-shared/src/backend/views/utils.js
+++ b/packages/react-devtools-shared/src/backend/views/utils.js
@@ -39,7 +39,7 @@ export function getOwnerIframe(node: HTMLElement): HTMLElement | null {
 
 // Get a bounding client rect for a node, with an
 // offset added to compensate for its border.
-export function getBoundingClientRectWithBorderOffset(node: HTMLElement) {
+export function getBoundingClientRectWithBorderOffset(node: HTMLElement): Rect {
   const dimensions = getElementDimensions(node);
   return mergeRectOffsets([
     node.getBoundingClientRect(),
@@ -109,7 +109,22 @@ export function getNestedBoundingClientRect(
   }
 }
 
-export function getElementDimensions(domElement: Element) {
+export function getElementDimensions(
+  domElement: Element,
+): {
+  borderBottom: number,
+  borderLeft: number,
+  borderRight: number,
+  borderTop: number,
+  marginBottom: number,
+  marginLeft: number,
+  marginRight: number,
+  marginTop: number,
+  paddingBottom: number,
+  paddingLeft: number,
+  paddingRight: number,
+  paddingTop: number,
+} {
   const calculatedStyle = window.getComputedStyle(domElement);
   return {
     borderLeft: parseInt(calculatedStyle.borderLeftWidth, 10),
diff --git a/packages/react-devtools-shared/src/backendAPI.js b/packages/react-devtools-shared/src/backendAPI.js
index adf0c5e8b0911..efa56cfcaddf4 100644
--- a/packages/react-devtools-shared/src/backendAPI.js
+++ b/packages/react-devtools-shared/src/backendAPI.js
@@ -28,10 +28,10 @@ import type {
 export function clearErrorsAndWarnings({
   bridge,
   store,
-}: {|
+}: {
   bridge: FrontendBridge,
   store: Store,
-|}): void {
+}): void {
   store.rootIDToRendererID.forEach(rendererID => {
     bridge.send('clearErrorsAndWarnings', {rendererID});
   });
@@ -41,11 +41,11 @@ export function clearErrorsForElement({
   bridge,
   id,
   rendererID,
-}: {|
+}: {
   bridge: FrontendBridge,
   id: number,
   rendererID: number,
-|}): void {
+}): void {
   bridge.send('clearErrorsForFiberID', {
     rendererID,
     id,
@@ -56,11 +56,11 @@ export function clearWarningsForElement({
   bridge,
   id,
   rendererID,
-}: {|
+}: {
   bridge: FrontendBridge,
   id: number,
   rendererID: number,
-|}): void {
+}): void {
   bridge.send('clearWarningsForFiberID', {
     rendererID,
     id,
@@ -72,12 +72,12 @@ export function copyInspectedElementPath({
   id,
   path,
   rendererID,
-}: {|
+}: {
   bridge: FrontendBridge,
   id: number,
   path: Array<string | number>,
   rendererID: number,
-|}): void {
+}): void {
   bridge.send('copyElementPath', {
     id,
     path,
@@ -91,13 +91,13 @@ export function inspectElement({
   id,
   path,
   rendererID,
-}: {|
+}: {
   bridge: FrontendBridge,
   forceFullData: boolean,
   id: number,
   path: Array<string | number> | null,
   rendererID: number,
-|}): Promise<InspectedElementPayload> {
+}): Promise<InspectedElementPayload> {
   const requestID = requestCounter++;
   const promise = getPromiseForRequestID<InspectedElementPayload>(
     requestID,
@@ -124,12 +124,12 @@ export function storeAsGlobal({
   id,
   path,
   rendererID,
-}: {|
+}: {
   bridge: FrontendBridge,
   id: number,
   path: Array<string | number>,
   rendererID: number,
-|}): void {
+}): void {
   bridge.send('storeAsGlobal', {
     count: storeAsGlobalCount++,
     id,
diff --git a/packages/react-devtools-shared/src/bridge.js b/packages/react-devtools-shared/src/bridge.js
index 0e5f837ecbc78..b5dd931ef0a3b 100644
--- a/packages/react-devtools-shared/src/bridge.js
+++ b/packages/react-devtools-shared/src/bridge.js
@@ -24,7 +24,7 @@ const BATCH_DURATION = 100;
 // This message specifies the version of the DevTools protocol currently supported by the backend,
 // as well as the earliest NPM version (e.g. "4.13.0") that protocol is supported by on the frontend.
 // This enables an older frontend to display an upgrade message to users for a newer, unsupported backend.
-export type BridgeProtocol = {|
+export type BridgeProtocol = {
   // Version supported by the current frontend/backend.
   version: number,
 
@@ -32,7 +32,7 @@ export type BridgeProtocol = {|
   // Note that 'maxNpmVersion' is only set when the version is bumped.
   minNpmVersion: string,
   maxNpmVersion: string | null,
-|};
+};
 
 // Bump protocol version whenever a backwards breaking change is made
 // in the messages sent between BackendBridge and FrontendBridge.
@@ -73,121 +73,121 @@ export const BRIDGE_PROTOCOL: Array<BridgeProtocol> = [
 export const currentBridgeProtocol: BridgeProtocol =
   BRIDGE_PROTOCOL[BRIDGE_PROTOCOL.length - 1];
 
-type ElementAndRendererID = {|id: number, rendererID: RendererID|};
+type ElementAndRendererID = {id: number, rendererID: RendererID};
 
-type Message = {|
+type Message = {
   event: string,
   payload: any,
-|};
+};
 
-type HighlightElementInDOM = {|
+type HighlightElementInDOM = {
   ...ElementAndRendererID,
   displayName: string | null,
   hideAfterTimeout: boolean,
   openNativeElementsPanel: boolean,
   scrollIntoView: boolean,
-|};
+};
 
-type OverrideValue = {|
+type OverrideValue = {
   ...ElementAndRendererID,
   path: Array<string | number>,
   wasForwarded?: boolean,
   value: any,
-|};
+};
 
-type OverrideHookState = {|
+type OverrideHookState = {
   ...OverrideValue,
   hookID: number,
-|};
+};
 
 type PathType = 'props' | 'hooks' | 'state' | 'context';
 
-type DeletePath = {|
+type DeletePath = {
   ...ElementAndRendererID,
   type: PathType,
   hookID?: ?number,
   path: Array<string | number>,
-|};
+};
 
-type RenamePath = {|
+type RenamePath = {
   ...ElementAndRendererID,
   type: PathType,
   hookID?: ?number,
   oldPath: Array<string | number>,
   newPath: Array<string | number>,
-|};
+};
 
-type OverrideValueAtPath = {|
+type OverrideValueAtPath = {
   ...ElementAndRendererID,
   type: PathType,
   hookID?: ?number,
   path: Array<string | number>,
   value: any,
-|};
+};
 
-type OverrideError = {|
+type OverrideError = {
   ...ElementAndRendererID,
   forceError: boolean,
-|};
+};
 
-type OverrideSuspense = {|
+type OverrideSuspense = {
   ...ElementAndRendererID,
   forceFallback: boolean,
-|};
+};
 
-type CopyElementPathParams = {|
+type CopyElementPathParams = {
   ...ElementAndRendererID,
   path: Array<string | number>,
-|};
+};
 
-type ViewAttributeSourceParams = {|
+type ViewAttributeSourceParams = {
   ...ElementAndRendererID,
   path: Array<string | number>,
-|};
+};
 
-type InspectElementParams = {|
+type InspectElementParams = {
   ...ElementAndRendererID,
   forceFullData: boolean,
   path: Array<number | string> | null,
   requestID: number,
-|};
+};
 
-type StoreAsGlobalParams = {|
+type StoreAsGlobalParams = {
   ...ElementAndRendererID,
   count: number,
   path: Array<string | number>,
-|};
+};
 
-type NativeStyleEditor_RenameAttributeParams = {|
+type NativeStyleEditor_RenameAttributeParams = {
   ...ElementAndRendererID,
   oldName: string,
   newName: string,
   value: string,
-|};
+};
 
-type NativeStyleEditor_SetValueParams = {|
+type NativeStyleEditor_SetValueParams = {
   ...ElementAndRendererID,
   name: string,
   value: string,
-|};
+};
 
-type UpdateConsolePatchSettingsParams = {|
+type UpdateConsolePatchSettingsParams = {
   appendComponentStack: boolean,
   breakOnConsoleErrors: boolean,
   showInlineWarningsAndErrors: boolean,
   hideConsoleLogsInStrictMode: boolean,
   browserTheme: BrowserTheme,
-|};
+};
 
-type SavedPreferencesParams = {|
+type SavedPreferencesParams = {
   appendComponentStack: boolean,
   breakOnConsoleErrors: boolean,
   componentFilters: Array<ComponentFilter>,
   showInlineWarningsAndErrors: boolean,
   hideConsoleLogsInStrictMode: boolean,
-|};
+};
 
-export type BackendEvents = {|
+export type BackendEvents = {
   backendVersion: [string],
   bridgeProtocol: [BridgeProtocol],
   extensionBackendInitialized: [],
@@ -211,13 +211,13 @@ export type BackendEvents = {|
 
   // React Native style editor plug-in.
   isNativeStyleEditorSupported: [
-    {|isSupported: boolean, validAttributes: ?$ReadOnlyArray<string>|},
+    {isSupported: boolean, validAttributes: ?$ReadOnlyArray<string>},
   ],
   NativeStyleEditor_styleAndLayout: [StyleAndLayoutPayload],
-|};
+};
 
-type FrontendEvents = {|
-  clearErrorsAndWarnings: [{|rendererID: RendererID|}],
+type FrontendEvents = {
+  clearErrorsAndWarnings: [{rendererID: RendererID}],
   clearErrorsForFiberID: [ElementAndRendererID],
   clearNativeElementHighlight: [],
   clearWarningsForFiberID: [ElementAndRendererID],
@@ -226,7 +226,7 @@ type FrontendEvents = {|
   getBackendVersion: [],
   getBridgeProtocol: [],
   getOwnersList: [ElementAndRendererID],
-  getProfilingData: [{|rendererID: RendererID|}],
+  getProfilingData: [{rendererID: RendererID}],
   getProfilingStatus: [],
   highlightNativeElement: [HighlightElementInDOM],
   inspectElement: [InspectElementParams],
@@ -270,15 +270,15 @@ type FrontendEvents = {|
   overrideHookState: [OverrideHookState],
   overrideProps: [OverrideValue],
   overrideState: [OverrideValue],
-|};
+};
 
 class Bridge<
   OutgoingEvents: Object,
   IncomingEvents: Object,
-> extends EventEmitter<{|
+> extends EventEmitter<{
   ...IncomingEvents,
   ...OutgoingEvents,
-|}> {
+}> {
   _isShutdown: boolean = false;
   _messageQueue: Array<any> = [];
   _timeoutID: TimeoutID | null = null;
@@ -375,7 +375,7 @@ class Bridge<
     }
   }
 
-  _flush = () => {
+  _flush: () => void = () => {
     // This method is used after the bridge is marked as destroyed in shutdown sequence,
     // so we do not bail out if the bridge marked as destroyed.
     // It is a private method that the bridge ensures is only called at the right times.
@@ -400,7 +400,7 @@ class Bridge<
 
   // Temporarily support older standalone backends by forwarding "overrideValueAtPath" commands
   // to the older message types they may be listening to.
-  overrideValueAtPath = ({
+  overrideValueAtPath: OverrideValueAtPath => void = ({
     id,
     path,
     rendererID,
diff --git a/packages/react-devtools-shared/src/constants.js b/packages/react-devtools-shared/src/constants.js
index d7fafc082ce24..e51ced674d207 100644
--- a/packages/react-devtools-shared/src/constants.js
+++ b/packages/react-devtools-shared/src/constants.js
@@ -30,7 +30,7 @@ export const PROFILING_FLAG_TIMELINE_SUPPORT = 0b10;
 
 export const LOCAL_STORAGE_DEFAULT_TAB_KEY = 'React::DevTools::defaultTab';
 
-export const LOCAL_STORAGE_FILTER_PREFERENCES_KEY =
+export const LOCAL_STORAGE_COMPONENT_FILTER_PREFERENCES_KEY =
   'React::DevTools::componentFilters';
 
 export const SESSION_STORAGE_LAST_SELECTION_KEY =
@@ -51,7 +51,9 @@ export const SESSION_STORAGE_RELOAD_AND_PROFILE_KEY =
 export const LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS =
   'React::DevTools::breakOnConsoleErrors';
 
-export const LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY =
+export const LOCAL_STORAGE_BROWSER_THEME = 'React::DevTools::theme';
+
+export const LOCAL_STORAGE_SHOULD_APPEND_COMPONENT_STACK_KEY =
   'React::DevTools::appendComponentStack';
 
 export const LOCAL_STORAGE_SHOW_INLINE_WARNINGS_AND_ERRORS_KEY =
@@ -79,7 +81,7 @@ import type {
   DisplayDensity,
 } from './devtools/views/Settings/SettingsContext';
 
-export const THEME_STYLES: {[style: Theme | DisplayDensity]: any} = {
+export const THEME_STYLES: {[style: Theme | DisplayDensity]: any, ...} = {
   light: {
     '--color-attribute-name': '#ef6632',
     '--color-attribute-name-not-editable': '#23272f',
@@ -393,11 +395,11 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any} = {
 //
 // Sometimes the inline target is rendered before root styles are applied,
 // which would result in e.g. NaN itemSize being passed to react-window list.
-const COMFORTABLE_LINE_HEIGHT = parseInt(
+const COMFORTABLE_LINE_HEIGHT: number = parseInt(
   THEME_STYLES.comfortable['--line-height-data'],
   10,
 );
-const COMPACT_LINE_HEIGHT = parseInt(
+const COMPACT_LINE_HEIGHT: number = parseInt(
   THEME_STYLES.compact['--line-height-data'],
   10,
 );
diff --git a/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.js b/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.js
index 90be1883612ab..e29a33bb32610 100644
--- a/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.js
+++ b/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.js
@@ -48,10 +48,10 @@ const HIDDEN_STATE = {
   pageY: 0,
 };
 
-type Props = {|
+type Props = {
   children: (data: Object) => React$Node,
   id: string,
-|};
+};
 
 export default function ContextMenu({children, id}: Props) {
   const {hideMenu, registerMenu} = useContext<RegistryContextType>(
diff --git a/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenuItem.js b/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenuItem.js
index f56bad1110b85..df313307b15f8 100644
--- a/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenuItem.js
+++ b/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenuItem.js
@@ -15,11 +15,11 @@ import styles from './ContextMenuItem.css';
 
 import type {RegistryContextType} from './Contexts';
 
-type Props = {|
+type Props = {
   children: React$Node,
   onClick: () => void,
   title: string,
-|};
+};
 
 export default function ContextMenuItem({children, onClick, title}: Props) {
   const {hideMenu} = useContext<RegistryContextType>(RegistryContext);
diff --git a/packages/react-devtools-shared/src/devtools/ContextMenu/Contexts.js b/packages/react-devtools-shared/src/devtools/ContextMenu/Contexts.js
index e2caf6eefcaa6..f8d310a02f72b 100644
--- a/packages/react-devtools-shared/src/devtools/ContextMenu/Contexts.js
+++ b/packages/react-devtools-shared/src/devtools/ContextMenu/Contexts.js
@@ -9,7 +9,7 @@
 
 import {createContext} from 'react';
 
-export type ShowFn = ({|data: Object, pageX: number, pageY: number|}) => void;
+export type ShowFn = ({data: Object, pageX: number, pageY: number}) => void;
 export type HideFn = () => void;
 export type OnChangeFn = boolean => void;
 
@@ -38,13 +38,13 @@ function showMenu({
   onChange,
   pageX,
   pageY,
-}: {|
+}: {
   data: Object,
   id: string,
   onChange?: OnChangeFn,
   pageX: number,
   pageY: number,
-|}) {
+}) {
   const showFn = idToShowFnMap.get(id);
   if (typeof showFn === 'function') {
     // Prevent open menus from being left hanging.
@@ -61,7 +61,7 @@ function showMenu({
   }
 }
 
-function registerMenu(id: string, showFn: ShowFn, hideFn: HideFn) {
+function registerMenu(id: string, showFn: ShowFn, hideFn: HideFn): () => void {
   if (idToShowFnMap.has(id)) {
     throw Error(`Context menu with id "${id}" already registered.`);
   }
@@ -75,11 +75,11 @@ function registerMenu(id: string, showFn: ShowFn, hideFn: HideFn) {
   };
 }
 
-export type RegistryContextType = {|
+export type RegistryContextType = {
   hideMenu: typeof hideMenu,
   showMenu: typeof showMenu,
   registerMenu: typeof registerMenu,
-|};
+};
 
 export const RegistryContext = createContext<RegistryContextType>({
   hideMenu,
diff --git a/packages/react-devtools-shared/src/devtools/ContextMenu/useContextMenu.js b/packages/react-devtools-shared/src/devtools/ContextMenu/useContextMenu.js
index 150cb0766fc55..1a457f0de2c14 100644
--- a/packages/react-devtools-shared/src/devtools/ContextMenu/useContextMenu.js
+++ b/packages/react-devtools-shared/src/devtools/ContextMenu/useContextMenu.js
@@ -18,12 +18,12 @@ export default function useContextMenu({
   id,
   onChange,
   ref,
-}: {|
+}: {
   data: Object,
   id: string,
   onChange?: OnChangeFn,
   ref: {current: ElementRef<*> | null},
-|}) {
+}) {
   const {showMenu} = useContext<RegistryContextType>(RegistryContext);
 
   useEffect(() => {
diff --git a/packages/react-devtools-shared/src/devtools/ProfilerStore.js b/packages/react-devtools-shared/src/devtools/ProfilerStore.js
index 1aa84d2da53f1..b74e958cefa77 100644
--- a/packages/react-devtools-shared/src/devtools/ProfilerStore.js
+++ b/packages/react-devtools-shared/src/devtools/ProfilerStore.js
@@ -21,11 +21,11 @@ import type {
   SnapshotNode,
 } from './views/Profiler/types';
 
-export default class ProfilerStore extends EventEmitter<{|
+export default class ProfilerStore extends EventEmitter<{
   isProcessingData: [],
   isProfiling: [],
   profilingData: [],
-|}> {
+}> {
   _bridge: FrontendBridge;
 
   // Suspense cache for lazily calculating derived profiling data.
diff --git a/packages/react-devtools-shared/src/devtools/ProfilingCache.js b/packages/react-devtools-shared/src/devtools/ProfilingCache.js
index 96e236b143d6c..6384db8d1c628 100644
--- a/packages/react-devtools-shared/src/devtools/ProfilingCache.js
+++ b/packages/react-devtools-shared/src/devtools/ProfilingCache.js
@@ -36,10 +36,10 @@ export default class ProfilingCache {
   getCommitTree = ({
     commitIndex,
     rootID,
-  }: {|
+  }: {
     commitIndex: number,
     rootID: number,
-  |}) =>
+  }) =>
     getCommitTree({
       commitIndex,
       profilerStore: this._profilerStore,
@@ -49,10 +49,10 @@ export default class ProfilingCache {
   getFiberCommits = ({
     fiberID,
     rootID,
-  }: {|
+  }: {
     fiberID: number,
     rootID: number,
-  |}): Array<number> => {
+  }): Array<number> => {
     const cachedFiberCommits = this._fiberCommits.get(fiberID);
     if (cachedFiberCommits != null) {
       return cachedFiberCommits;
@@ -75,11 +75,11 @@ export default class ProfilingCache {
     commitIndex,
     commitTree,
     rootID,
-  }: {|
+  }: {
     commitIndex: number,
     commitTree: CommitTree,
     rootID: number,
-  |}): FlamegraphChartData =>
+  }): FlamegraphChartData =>
     getFlamegraphChartData({
       commitIndex,
       commitTree,
@@ -91,11 +91,11 @@ export default class ProfilingCache {
     commitIndex,
     commitTree,
     rootID,
-  }: {|
+  }: {
     commitIndex: number,
     commitTree: CommitTree,
     rootID: number,
-  |}): RankedChartData =>
+  }): RankedChartData =>
     getRankedChartData({
       commitIndex,
       commitTree,
diff --git a/packages/react-devtools-shared/src/devtools/cache.js b/packages/react-devtools-shared/src/devtools/cache.js
index c98b0566d8819..acbbfff00b997 100644
--- a/packages/react-devtools-shared/src/devtools/cache.js
+++ b/packages/react-devtools-shared/src/devtools/cache.js
@@ -28,20 +28,20 @@ export type {Thenable};
 
 type Suspender = {then(resolve: () => mixed, reject: () => mixed): mixed, ...};
 
-type PendingResult = {|
+type PendingResult = {
   status: 0,
   value: Suspender,
-|};
+};
 
-type ResolvedResult<Value> = {|
+type ResolvedResult<Value> = {
   status: 1,
   value: Value,
-|};
+};
 
-type RejectedResult = {|
+type RejectedResult = {
   status: 2,
   value: mixed,
-|};
+};
 
 type Result<Value> = PendingResult | ResolvedResult<Value> | RejectedResult;
 
diff --git a/packages/react-devtools-shared/src/devtools/index.js b/packages/react-devtools-shared/src/devtools/index.js
index a15999478f1d9..12d8327bfef4f 100644
--- a/packages/react-devtools-shared/src/devtools/index.js
+++ b/packages/react-devtools-shared/src/devtools/index.js
@@ -9,10 +9,10 @@
 
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 
-type Shell = {|
+type Shell = {
   connect: (callback: Function) => void,
   onReload: (reloadFn: Function) => void,
-|};
+};
 
 export function initDevTools(shell: Shell) {
   shell.connect((bridge: FrontendBridge) => {
diff --git a/packages/react-devtools-shared/src/devtools/store.js b/packages/react-devtools-shared/src/devtools/store.js
index 2c5703505c965..b51597f43a528 100644
--- a/packages/react-devtools-shared/src/devtools/store.js
+++ b/packages/react-devtools-shared/src/devtools/store.js
@@ -23,7 +23,7 @@ import {
 import {ElementTypeRoot} from '../types';
 import {
   getSavedComponentFilters,
-  saveComponentFilters,
+  setSavedComponentFilters,
   separateDisplayNameAndHOCs,
   shallowDiffers,
   utfDecodeString,
@@ -62,9 +62,9 @@ const LOCAL_STORAGE_COLLAPSE_ROOTS_BY_DEFAULT_KEY =
 const LOCAL_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY =
   'React::DevTools::recordChangeDescriptions';
 
-type ErrorAndWarningTuples = Array<{|id: number, index: number|}>;
+type ErrorAndWarningTuples = Array<{id: number, index: number}>;
 
-type Config = {|
+type Config = {
   checkBridgeProtocolCompatibility?: boolean,
   isProfiling?: boolean,
   supportsNativeInspection?: boolean,
@@ -72,20 +72,20 @@ type Config = {|
   supportsReloadAndProfile?: boolean,
   supportsTimeline?: boolean,
   supportsTraceUpdates?: boolean,
-|};
+};
 
-export type Capabilities = {|
+export type Capabilities = {
   supportsBasicProfiling: boolean,
   hasOwnerMetadata: boolean,
   supportsStrictMode: boolean,
   supportsTimeline: boolean,
-|};
+};
 
 /**
  * The store is the single source of truth for updates from the backend.
  * ContextProviders can subscribe to the Store for specific things they want to provide.
  */
-export default class Store extends EventEmitter<{|
+export default class Store extends EventEmitter<{
   backendVersion: [],
   collapseNodesByDefault: [],
   componentFilters: [],
@@ -99,7 +99,7 @@ export default class Store extends EventEmitter<{|
   supportsReloadAndProfile: [],
   unsupportedBridgeProtocolDetected: [],
   unsupportedRendererVersionDetected: [],
-|}> {
+}> {
   // If the backend version is new enough to report its (NPM) version, this is it.
   // This version may be displayed by the frontend for debugging purposes.
   _backendVersion: string | null = null;
@@ -119,7 +119,7 @@ export default class Store extends EventEmitter<{|
   // Map of ID to number of recorded error and warning message IDs.
   _errorsAndWarnings: Map<
     number,
-    {|errorCount: number, warningCount: number|},
+    {errorCount: number, warningCount: number},
   > = new Map();
 
   // At least one of the injected renderers contains (DEV only) owner metadata.
@@ -365,7 +365,7 @@ export default class Store extends EventEmitter<{|
     this._componentFilters = value;
 
     // Update persisted filter preferences stored in localStorage.
-    saveComponentFilters(value);
+    setSavedComponentFilters(value);
 
     // Notify the renderer that filter preferences have changed.
     // This is an expensive operation; it unmounts and remounts the entire tree,
@@ -553,7 +553,7 @@ export default class Store extends EventEmitter<{|
   }
 
   // Returns a tuple of [id, index]
-  getElementsWithErrorsAndWarnings(): Array<{|id: number, index: number|}> {
+  getElementsWithErrorsAndWarnings(): Array<{id: number, index: number}> {
     if (this._cachedErrorAndWarningTuples !== null) {
       return this._cachedErrorAndWarningTuples;
     } else {
@@ -586,7 +586,7 @@ export default class Store extends EventEmitter<{|
 
   getErrorAndWarningCountForElementID(
     id: number,
-  ): {|errorCount: number, warningCount: number|} {
+  ): {errorCount: number, warningCount: number} {
     return this._errorsAndWarnings.get(id) || {errorCount: 0, warningCount: 0};
   }
 
@@ -681,6 +681,7 @@ export default class Store extends EventEmitter<{|
             let depth = 0;
             while (parentID > 0) {
               if (parentID === ownerID || unsortedIDs.has(parentID)) {
+                // $FlowFixMe[unsafe-addition] addition with possible null/undefined value
                 depth = depthMap.get(parentID) + 1;
                 depthMap.set(id, depth);
                 break;
@@ -871,10 +872,10 @@ export default class Store extends EventEmitter<{|
   onBridgeNativeStyleEditorSupported = ({
     isSupported,
     validAttributes,
-  }: {|
+  }: {
     isSupported: boolean,
     validAttributes: ?$ReadOnlyArray<string>,
-  |}) => {
+  }) => {
     this._isNativeStyleEditorSupported = isSupported;
     this._nativeStyleEditorValidAttributes = validAttributes || null;
 
@@ -1332,7 +1333,7 @@ export default class Store extends EventEmitter<{|
   ) => {
     this._componentFilters = componentFilters;
 
-    saveComponentFilters(componentFilters);
+    setSavedComponentFilters(componentFilters);
   };
 
   onBridgeShutdown = () => {
diff --git a/packages/react-devtools-shared/src/devtools/utils.js b/packages/react-devtools-shared/src/devtools/utils.js
index 7cbce2d771dea..86c9dd6c8cefe 100644
--- a/packages/react-devtools-shared/src/devtools/utils.js
+++ b/packages/react-devtools-shared/src/devtools/utils.js
@@ -13,7 +13,10 @@ import type {Element} from './views/Components/types';
 import type {StateContext} from './views/Components/TreeContext';
 import type Store from './store';
 
-export function printElement(element: Element, includeWeight: boolean = false) {
+export function printElement(
+  element: Element,
+  includeWeight: boolean = false,
+): string {
   let prefix = ' ';
   if (element.children.length > 0) {
     prefix = element.isCollapsed ? '▸' : '▾';
@@ -44,7 +47,7 @@ export function printElement(element: Element, includeWeight: boolean = false) {
 export function printOwnersList(
   elements: Array<Element>,
   includeWeight: boolean = false,
-) {
+): string {
   return elements
     .map(element => printElement(element, includeWeight))
     .join('\n');
@@ -54,7 +57,7 @@ export function printStore(
   store: Store,
   includeWeight: boolean = false,
   state: StateContext | null = null,
-) {
+): string {
   const snapshotLines = [];
 
   let rootWeight = 0;
@@ -172,7 +175,7 @@ export function smartParse(value: any) {
   }
 }
 
-export function smartStringify(value: any) {
+export function smartStringify(value: any): string {
   if (typeof value === 'number') {
     if (Number.isNaN(value)) {
       return 'NaN';
diff --git a/packages/react-devtools-shared/src/devtools/views/Button.js b/packages/react-devtools-shared/src/devtools/views/Button.js
index 82400bb8982a2..bdd84b57da431 100644
--- a/packages/react-devtools-shared/src/devtools/views/Button.js
+++ b/packages/react-devtools-shared/src/devtools/views/Button.js
@@ -28,6 +28,7 @@ export default function Button({
   ...rest
 }: Props) {
   let button = (
+    // $FlowFixMe unsafe spread
     <button
       className={`${styles.Button} ${className}`}
       data-testname={testName}
diff --git a/packages/react-devtools-shared/src/devtools/views/ButtonIcon.js b/packages/react-devtools-shared/src/devtools/views/ButtonIcon.js
index b384018671d92..80c9ef2c7c046 100644
--- a/packages/react-devtools-shared/src/devtools/views/ButtonIcon.js
+++ b/packages/react-devtools-shared/src/devtools/views/ButtonIcon.js
@@ -41,12 +41,12 @@ export type IconType =
   | 'view-dom'
   | 'view-source';
 
-type Props = {|
+type Props = {
   className?: string,
   type: IconType,
-|};
+};
 
-export default function ButtonIcon({className = '', type}: Props) {
+export default function ButtonIcon({className = '', type}: Props): React.Node {
   let pathData = null;
   switch (type) {
     case 'add':
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Badge.js b/packages/react-devtools-shared/src/devtools/views/Components/Badge.js
index 25352ee39a536..41419df5db557 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Badge.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Badge.js
@@ -13,19 +13,19 @@ import styles from './Badge.css';
 
 import type {ElementType} from 'react-devtools-shared/src/types';
 
-type Props = {|
+type Props = {
   className?: string,
   hocDisplayNames: Array<string> | null,
   type: ElementType,
   children: React$Node,
-|};
+};
 
 export default function Badge({
   className,
   hocDisplayNames,
   type,
   children,
-}: Props) {
+}: Props): React.Node {
   if (hocDisplayNames === null || hocDisplayNames.length === 0) {
     return null;
   }
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/CannotSuspendWarningMessage.js b/packages/react-devtools-shared/src/devtools/views/Components/CannotSuspendWarningMessage.js
index 3ceb481d49a83..0bf06dadd9e01 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/CannotSuspendWarningMessage.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/CannotSuspendWarningMessage.js
@@ -15,7 +15,7 @@ import {
   ElementTypeSuspense,
 } from 'react-devtools-shared/src/types';
 
-export default function CannotSuspendWarningMessage() {
+export default function CannotSuspendWarningMessage(): React.Node {
   const store = useContext(StoreContext);
   const areSuspenseElementsHidden = !!store.componentFilters.find(
     filter =>
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/ComponentSearchInput.js b/packages/react-devtools-shared/src/devtools/views/Components/ComponentSearchInput.js
index a43c4661b3f57..339b80e09b078 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/ComponentSearchInput.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/ComponentSearchInput.js
@@ -13,9 +13,9 @@ import {TreeDispatcherContext, TreeStateContext} from './TreeContext';
 
 import SearchInput from '../SearchInput';
 
-type Props = {||};
+type Props = {};
 
-export default function ComponentSearchInput(props: Props) {
+export default function ComponentSearchInput(props: Props): React.Node {
   const {searchIndex, searchResults, searchText} = useContext(TreeStateContext);
   const dispatch = useContext(TreeDispatcherContext);
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Components.js b/packages/react-devtools-shared/src/devtools/views/Components/Components.js
index 712afdd987287..81ab6296ddf6c 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Components.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Components.js
@@ -41,18 +41,18 @@ type ResizeActionType =
   | 'ACTION_SET_HORIZONTAL_PERCENTAGE'
   | 'ACTION_SET_VERTICAL_PERCENTAGE';
 
-type ResizeAction = {|
+type ResizeAction = {
   type: ResizeActionType,
   payload: any,
-|};
+};
 
-type ResizeState = {|
+type ResizeState = {
   horizontalPercentage: number,
   isResizing: boolean,
   verticalPercentage: number,
-|};
+};
 
-function Components(_: {||}) {
+function Components(_: {}) {
   const wrapperElementRef = useRef<null | HTMLElement>(null);
   const resizeElementRef = useRef<null | HTMLElement>(null);
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/EditableName.js b/packages/react-devtools-shared/src/devtools/views/Components/EditableName.js
index a8859cd4adc2d..8c358076b1e70 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/EditableName.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/EditableName.js
@@ -18,7 +18,7 @@ type OverrideNameFn = (
   newName: Array<string | number>,
 ) => void;
 
-type EditableNameProps = {|
+type EditableNameProps = {
   allowEmpty?: boolean,
   allowWhiteSpace?: boolean,
   autoFocus?: boolean,
@@ -27,7 +27,7 @@ type EditableNameProps = {|
   overrideName: OverrideNameFn,
   path: Array<string | number>,
   type: Type,
-|};
+};
 
 export default function EditableName({
   allowEmpty = false,
@@ -38,7 +38,7 @@ export default function EditableName({
   overrideName,
   path,
   type,
-}: EditableNameProps) {
+}: EditableNameProps): React.Node {
   const [editableName, setEditableName] = useState(initialValue);
   const [isValid, setIsValid] = useState(false);
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js b/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js
index 82afe03c2ba46..cfb42fc23fd3d 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js
@@ -14,19 +14,19 @@ import {useEditableValue} from '../hooks';
 
 type OverrideValueFn = (path: Array<string | number>, value: any) => void;
 
-type EditableValueProps = {|
+type EditableValueProps = {
   className?: string,
   overrideValue: OverrideValueFn,
   path: Array<string | number>,
   value: any,
-|};
+};
 
 export default function EditableValue({
   className = '',
   overrideValue,
   path,
   value,
-}: EditableValueProps) {
+}: EditableValueProps): React.Node {
   const [state, dispatch] = useEditableValue(value);
   const {editableValue, hasPendingChanges, isValid, parsedValue} = state;
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Element.js b/packages/react-devtools-shared/src/devtools/views/Components/Element.js
index 1dab6f3f7db70..afaf6e463d01b 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Element.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Element.js
@@ -32,7 +32,7 @@ type Props = {
   ...
 };
 
-export default function Element({data, index, style}: Props) {
+export default function Element({data, index, style}: Props): React.Node {
   const store = useContext(StoreContext);
   const {ownerFlatTree, ownerID, selectedElementID} = useContext(
     TreeStateContext,
@@ -64,10 +64,10 @@ export default function Element({data, index, style}: Props) {
     }),
     [store, element],
   );
-  const {errorCount, warningCount} = useSubscription<{|
+  const {errorCount, warningCount} = useSubscription<{
     errorCount: number,
     warningCount: number,
-  |}>(errorsAndWarningsSubscription);
+  }>(errorsAndWarningsSubscription);
 
   const handleDoubleClick = () => {
     if (id !== null) {
@@ -225,10 +225,10 @@ const swallowDoubleClick = event => {
   event.stopPropagation();
 };
 
-type ExpandCollapseToggleProps = {|
+type ExpandCollapseToggleProps = {
   element: ElementType,
   store: Store,
-|};
+};
 
 function ExpandCollapseToggle({element, store}: ExpandCollapseToggleProps) {
   const {children, id, isCollapsed} = element;
@@ -260,10 +260,10 @@ function ExpandCollapseToggle({element, store}: ExpandCollapseToggleProps) {
   );
 }
 
-type DisplayNameProps = {|
+type DisplayNameProps = {
   displayName: string | null,
   id: number,
-|};
+};
 
 function DisplayName({displayName, id}: DisplayNameProps) {
   const {searchIndex, searchResults, searchText} = useContext(TreeStateContext);
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/ExpandCollapseToggle.js b/packages/react-devtools-shared/src/devtools/views/Components/ExpandCollapseToggle.js
index 1851c75e0391e..2cc19850d916a 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/ExpandCollapseToggle.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/ExpandCollapseToggle.js
@@ -13,11 +13,11 @@ import ButtonIcon from '../ButtonIcon';
 
 import styles from './ExpandCollapseToggle.css';
 
-type ExpandCollapseToggleProps = {|
+type ExpandCollapseToggleProps = {
   disabled: boolean,
   isOpen: boolean,
   setIsOpen: Function,
-|};
+};
 
 export default function ExpandCollapseToggle({
   disabled,
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/HocBadges.js b/packages/react-devtools-shared/src/devtools/views/Components/HocBadges.js
index 10398305c9148..b5926cdcf58ad 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/HocBadges.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/HocBadges.js
@@ -12,11 +12,11 @@ import styles from './HocBadges.css';
 
 import type {Element} from './types';
 
-type Props = {|
+type Props = {
   element: Element,
-|};
+};
 
-export default function HocBadges({element}: Props) {
+export default function HocBadges({element}: Props): React.Node {
   const {hocDisplayNames} = ((element: any): Element);
 
   if (hocDisplayNames === null) {
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js
index e850417af5c35..d4751ef46fc21 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js
@@ -14,7 +14,7 @@ import Toggle from '../Toggle';
 import ButtonIcon from '../ButtonIcon';
 import {logEvent} from 'react-devtools-shared/src/Logger';
 
-export default function InspectHostNodesToggle() {
+export default function InspectHostNodesToggle(): React.Node {
   const [isInspecting, setIsInspecting] = useState(false);
   const bridge = useContext(BridgeContext);
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
index 9752f752f8dde..c85d769b7eb80 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
@@ -28,11 +28,11 @@ import styles from './InspectedElement.css';
 
 import type {InspectedElement} from './types';
 
-export type Props = {||};
+export type Props = {};
 
 // TODO Make edits and deletes also use transition API!
 
-export default function InspectedElementWrapper(_: Props) {
+export default function InspectedElementWrapper(_: Props): React.Node {
   const {inspectedElementID} = useContext(TreeStateContext);
   const dispatch = useContext(TreeDispatcherContext);
   const {canViewElementSourceFunction, viewElementSourceFunction} = useContext(
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
index c02dc5bf9263a..02444890df26f 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
@@ -47,13 +47,13 @@ type Path = Array<string | number>;
 type InspectPathFunction = (path: Path) => void;
 export type ToggleParseHookNames = () => void;
 
-type Context = {|
+type Context = {
   hookNames: HookNames | null,
   inspectedElement: InspectedElement | null,
   inspectPaths: InspectPathFunction,
   parseHookNames: boolean,
   toggleParseHookNames: ToggleParseHookNames,
-|};
+};
 
 export const InspectedElementContext = createContext<Context>(
   ((null: any): Context),
@@ -61,9 +61,9 @@ export const InspectedElementContext = createContext<Context>(
 
 const POLL_INTERVAL = 1000;
 
-export type Props = {|
+export type Props = {
   children: ReactNodeList,
-|};
+};
 
 export function InspectedElementContextController({children}: Props) {
   const {selectedElementID} = useContext(TreeStateContext);
@@ -84,10 +84,10 @@ export function InspectedElementContextController({children}: Props) {
   // The transition that updates this causes the component to re-render and ask the cache->backend for the new path.
   // When a path is sent along with an "inspectElement" request,
   // the backend knows to send its dehydrated data even if the element hasn't updated since the last request.
-  const [state, setState] = useState<{|
+  const [state, setState] = useState<{
     element: Element | null,
     path: Array<number | string> | null,
-  |}>({
+  }>({
     element: null,
     path: null,
   });
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContextTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContextTree.js
index 8dfe6310a3609..78420bf1c152b 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContextTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContextTree.js
@@ -24,19 +24,19 @@ import type {InspectedElement} from './types';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 import type {Element} from 'react-devtools-shared/src/devtools/views/Components/types';
 
-type Props = {|
+type Props = {
   bridge: FrontendBridge,
   element: Element,
   inspectedElement: InspectedElement,
   store: Store,
-|};
+};
 
 export default function InspectedElementContextTree({
   bridge,
   element,
   inspectedElement,
   store,
-}: Props) {
+}: Props): React.Node {
   const {hasLegacyContext, context, type} = inspectedElement;
 
   const isReadOnly = type !== ElementTypeClass && type !== ElementTypeFunction;
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.js
index 76b7d96bf72f1..e901743a4ee4c 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.js
@@ -18,13 +18,13 @@ import {TreeStateContext} from './TreeContext';
 import {clearCacheBecauseOfError} from '../../../inspectedElementCache';
 import styles from './InspectedElementErrorBoundary.css';
 
-type WrapperProps = {|
+type WrapperProps = {
   children: React$Node,
-|};
+};
 
 export default function InspectedElementErrorBoundaryWrapper({
   children,
-}: WrapperProps) {
+}: WrapperProps): React.Node {
   // Key on the selected element ID so that changing the selected element automatically hides the boundary.
   // This seems best since an error inspecting one element isn't likely to be relevant to another element.
   const {selectedElementID} = useContext(TreeStateContext);
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js
index 7f7be4677e036..d275cde78bfa9 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js
@@ -27,17 +27,17 @@ import {
 import type {InspectedElement} from './types';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 
-type Props = {|
+type Props = {
   bridge: FrontendBridge,
   inspectedElement: InspectedElement,
   store: Store,
-|};
+};
 
 export default function InspectedElementErrorsAndWarningsTree({
   bridge,
   inspectedElement,
   store,
-}: Props) {
+}: Props): React.Node {
   const refresh = useCacheRefresh();
 
   const [
@@ -115,16 +115,16 @@ export default function InspectedElementErrorsAndWarningsTree({
   );
 }
 
-type TreeProps = {|
+type TreeProps = {
   badgeClassName: string,
   actions: React$Node,
   className: string,
-  clearMessages: () => {},
+  clearMessages: () => void,
   entries: Array<[string, number]>,
   isTransitionPending: boolean,
   label: string,
   messageClassName: string,
-|};
+};
 
 function Tree({
   badgeClassName,
@@ -163,12 +163,12 @@ function Tree({
   );
 }
 
-type ErrorOrWarningViewProps = {|
+type ErrorOrWarningViewProps = {
   badgeClassName: string,
   className: string,
   count: number,
   message: string,
-|};
+};
 
 function ErrorOrWarningView({
   className,
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
index f00d9dd0eb504..346a23b8ff126 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
@@ -36,7 +36,7 @@ import type {HookNames} from 'react-devtools-shared/src/types';
 import type {Element} from 'react-devtools-shared/src/devtools/views/Components/types';
 import type {ToggleParseHookNames} from './InspectedElementContext';
 
-type HooksTreeViewProps = {|
+type HooksTreeViewProps = {
   bridge: FrontendBridge,
   element: Element,
   hookNames: HookNames | null,
@@ -44,7 +44,7 @@ type HooksTreeViewProps = {|
   parseHookNames: boolean,
   store: Store,
   toggleParseHookNames: ToggleParseHookNames,
-|};
+};
 
 export function InspectedElementHooksTree({
   bridge,
@@ -54,7 +54,7 @@ export function InspectedElementHooksTree({
   parseHookNames,
   store,
   toggleParseHookNames,
-}: HooksTreeViewProps) {
+}: HooksTreeViewProps): React.Node {
   const {hooks, id} = inspectedElement;
 
   // Changing parseHookNames is done in a transition, because it suspends.
@@ -121,14 +121,14 @@ export function InspectedElementHooksTree({
   }
 }
 
-type InnerHooksTreeViewProps = {|
+type InnerHooksTreeViewProps = {
   element: Element,
   hookNames: HookNames | null,
   hooks: HooksTree,
   id: number,
   inspectedElement: InspectedElement,
   path: Array<string | number>,
-|};
+};
 
 export function InnerHooksTreeView({
   element,
@@ -137,7 +137,7 @@ export function InnerHooksTreeView({
   id,
   inspectedElement,
   path,
-}: InnerHooksTreeViewProps) {
+}: InnerHooksTreeViewProps): React.Node {
   // $FlowFixMe "Missing type annotation for U" whatever that means
   return hooks.map((hook, index) => (
     <HookView
@@ -152,14 +152,14 @@ export function InnerHooksTreeView({
   ));
 }
 
-type HookViewProps = {|
+type HookViewProps = {
   element: Element,
   hook: HooksNode,
   hookNames: HookNames | null,
   id: number,
   inspectedElement: InspectedElement,
   path: Array<string | number>,
-|};
+};
 
 function HookView({
   element,
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js
index eeff44d645ea8..280df20966f20 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js
@@ -23,19 +23,19 @@ import type {InspectedElement} from './types';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 import type {Element} from 'react-devtools-shared/src/devtools/views/Components/types';
 
-type Props = {|
+type Props = {
   bridge: FrontendBridge,
   element: Element,
   inspectedElement: InspectedElement,
   store: Store,
-|};
+};
 
 export default function InspectedElementPropsTree({
   bridge,
   element,
   inspectedElement,
   store,
-}: Props) {
+}: Props): React.Node {
   const {readOnly} = React.useContext(OptionsContext);
 
   const {
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStateTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStateTree.js
index a8658fa3df807..f1bc6ce4b08ea 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStateTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStateTree.js
@@ -20,19 +20,19 @@ import type {InspectedElement} from './types';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 import type {Element} from 'react-devtools-shared/src/devtools/views/Components/types';
 
-type Props = {|
+type Props = {
   bridge: FrontendBridge,
   element: Element,
   inspectedElement: InspectedElement,
   store: Store,
-|};
+};
 
 export default function InspectedElementStateTree({
   bridge,
   element,
   inspectedElement,
   store,
-}: Props) {
+}: Props): React.Node {
   const {state} = inspectedElement;
 
   const entries = state != null ? Object.entries(state) : null;
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStyleXPlugin.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStyleXPlugin.js
index 8045803fd0118..1a7d29edaa912 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStyleXPlugin.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStyleXPlugin.js
@@ -18,19 +18,19 @@ import type {InspectedElement} from './types';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 import type {Element} from 'react-devtools-shared/src/devtools/views/Components/types';
 
-type Props = {|
+type Props = {
   bridge: FrontendBridge,
   element: Element,
   inspectedElement: InspectedElement,
   store: Store,
-|};
+};
 
 export default function InspectedElementStyleXPlugin({
   bridge,
   element,
   inspectedElement,
   store,
-}: Props) {
+}: Props): React.Node {
   if (!enableStyleXFeatures) {
     return null;
   }
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspenseToggle.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspenseToggle.js
index 0b0ce0ecac8a9..97827574c89dd 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspenseToggle.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspenseToggle.js
@@ -17,17 +17,17 @@ import styles from './InspectedElementSharedStyles.css';
 import type {InspectedElement} from './types';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 
-type Props = {|
+type Props = {
   bridge: FrontendBridge,
   inspectedElement: InspectedElement,
   store: Store,
-|};
+};
 
 export default function InspectedElementSuspenseToggle({
   bridge,
   inspectedElement,
   store,
-}: Props) {
+}: Props): React.Node {
   const {readOnly} = React.useContext(OptionsContext);
 
   const {id, state, type} = inspectedElement;
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
index 88b9ee63ec9f7..0e3e61931cff4 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
@@ -45,13 +45,13 @@ import type {ToggleParseHookNames} from './InspectedElementContext';
 export type CopyPath = (path: Array<string | number>) => void;
 export type InspectPath = (path: Array<string | number>) => void;
 
-type Props = {|
+type Props = {
   element: Element,
   hookNames: HookNames | null,
   inspectedElement: InspectedElement,
   parseHookNames: boolean,
   toggleParseHookNames: ToggleParseHookNames,
-|};
+};
 
 export default function InspectedElementView({
   element,
@@ -59,7 +59,7 @@ export default function InspectedElementView({
   inspectedElement,
   parseHookNames,
   toggleParseHookNames,
-}: Props) {
+}: Props): React.Node {
   const {id} = element;
   const {
     owners,
@@ -259,10 +259,10 @@ function formatSourceForDisplay(fileName: string, lineNumber: string) {
   return `${nameOnly}:${lineNumber}`;
 }
 
-type SourceProps = {|
+type SourceProps = {
   fileName: string,
   lineNumber: string,
-|};
+};
 
 function Source({fileName, lineNumber}: SourceProps) {
   const handleCopy = () => copy(`${fileName}:${lineNumber}`);
@@ -281,13 +281,13 @@ function Source({fileName, lineNumber}: SourceProps) {
   );
 }
 
-type OwnerViewProps = {|
+type OwnerViewProps = {
   displayName: string,
   hocDisplayNames: Array<string> | null,
   id: number,
   isInStore: boolean,
   type: ElementType,
-|};
+};
 
 function OwnerView({
   displayName,
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
index 5e805baf1f7aa..e1aab1a481ca3 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
@@ -35,7 +35,7 @@ import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 
 type Type = 'props' | 'state' | 'context' | 'hooks';
 
-type KeyValueProps = {|
+type KeyValueProps = {
   alphaSort: boolean,
   bridge: FrontendBridge,
   canDeletePaths: boolean,
@@ -54,7 +54,7 @@ type KeyValueProps = {|
   pathRoot: Type,
   store: Store,
   value: any,
-|};
+};
 
 export default function KeyValue({
   alphaSort,
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/LoadingAnimation.js b/packages/react-devtools-shared/src/devtools/views/Components/LoadingAnimation.js
index eb3268cefcbb1..34519c8fb2a77 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/LoadingAnimation.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/LoadingAnimation.js
@@ -10,11 +10,11 @@
 import * as React from 'react';
 import styles from './LoadingAnimation.css';
 
-type Props = {|
+type Props = {
   className?: string,
-|};
+};
 
-export default function LoadingAnimation({className = ''}: Props) {
+export default function LoadingAnimation({className = ''}: Props): React.Node {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/AutoSizeInput.js b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/AutoSizeInput.js
index 48c6f304275c7..3aa6dc94e0668 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/AutoSizeInput.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/AutoSizeInput.js
@@ -26,7 +26,7 @@ export default function AutoSizeInput({
   testName,
   value,
   ...rest
-}: Props) {
+}: Props): React.Node {
   const onFocusWrapper = event => {
     const input = event.target;
     if (input !== null) {
@@ -42,6 +42,7 @@ export default function AutoSizeInput({
   const isEmpty = value === '' || value === '""';
 
   return (
+    // $FlowFixMe unsafe rest spread
     <input
       className={[styles.Input, className].join(' ')}
       data-testname={testName}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/LayoutViewer.js b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/LayoutViewer.js
index da5530d4a39bd..ececd4d9f8368 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/LayoutViewer.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/LayoutViewer.js
@@ -12,12 +12,12 @@ import styles from './LayoutViewer.css';
 
 import type {Layout} from './types';
 
-type Props = {|
+type Props = {
   id: number,
   layout: Layout,
-|};
+};
 
-export default function LayoutViewer({id, layout}: Props) {
+export default function LayoutViewer({id, layout}: Props): React.Node {
   const {height, margin, padding, y, width, x} = layout;
 
   return (
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/StyleEditor.js b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/StyleEditor.js
index ae28dbde84549..c1db73084e30a 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/StyleEditor.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/StyleEditor.js
@@ -24,15 +24,15 @@ import {sanitizeForParse} from '../../../utils';
 
 import type {Style} from './types';
 
-type Props = {|
+type Props = {
   id: number,
   style: Style,
-|};
+};
 
 type ChangeAttributeFn = (oldName: string, newName: string, value: any) => void;
 type ChangeValueFn = (name: string, value: any) => void;
 
-export default function StyleEditor({id, style}: Props) {
+export default function StyleEditor({id, style}: Props): React.Node {
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 
@@ -96,11 +96,11 @@ export default function StyleEditor({id, style}: Props) {
   );
 }
 
-type NewRowProps = {|
+type NewRowProps = {
   changeAttribute: ChangeAttributeFn,
   changeValue: ChangeValueFn,
   validAttributes: $ReadOnlyArray<string> | null,
-|};
+};
 
 function NewRow({changeAttribute, changeValue, validAttributes}: NewRowProps) {
   const [key, setKey] = useState<number>(0);
@@ -141,7 +141,7 @@ function NewRow({changeAttribute, changeValue, validAttributes}: NewRowProps) {
   );
 }
 
-type RowProps = {|
+type RowProps = {
   attribute: string,
   attributePlaceholder?: string,
   changeAttribute: ChangeAttributeFn,
@@ -149,7 +149,7 @@ type RowProps = {|
   validAttributes: $ReadOnlyArray<string> | null,
   value: any,
   valuePlaceholder?: string,
-|};
+};
 
 function Row({
   attribute,
@@ -245,14 +245,14 @@ function Row({
   );
 }
 
-type FieldProps = {|
+type FieldProps = {
   className: string,
   onChange: (value: any) => void,
   onReset: () => void,
   onSubmit: () => void,
   placeholder?: string,
   value: any,
-|};
+};
 
 function Field({
   className,
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/context.js b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/context.js
index 1157dd4dad986..ae91fbb94e7db 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/context.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/context.js
@@ -37,18 +37,18 @@ import type {
 
 export type GetStyleAndLayout = (id: number) => StyleAndLayoutFrontend | null;
 
-type Context = {|
+type Context = {
   getStyleAndLayout: GetStyleAndLayout,
-|};
+};
 
 const NativeStyleContext = createContext<Context>(((null: any): Context));
 NativeStyleContext.displayName = 'NativeStyleContext';
 
 type ResolveFn = (styleAndLayout: StyleAndLayoutFrontend) => void;
-type InProgressRequest = {|
+type InProgressRequest = {
   promise: Thenable<StyleAndLayoutFrontend>,
   resolveFn: ResolveFn,
-|};
+};
 
 const inProgressRequests: WeakMap<Element, InProgressRequest> = new WeakMap();
 const resource: Resource<
@@ -75,9 +75,9 @@ const resource: Resource<
   {useWeakMap: true},
 );
 
-type Props = {|
+type Props = {
   children: React$Node,
-|};
+};
 
 function NativeStyleContextController({children}: Props) {
   const bridge = useContext<FrontendBridge>(BridgeContext);
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/index.js b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/index.js
index 521a0642cac90..294640487e021 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/index.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/index.js
@@ -16,9 +16,9 @@ import LayoutViewer from './LayoutViewer';
 import StyleEditor from './StyleEditor';
 import {TreeStateContext} from '../TreeContext';
 
-type Props = {||};
+type Props = {};
 
-export default function NativeStyleEditorWrapper(_: Props) {
+export default function NativeStyleEditorWrapper(_: Props): React.Node {
   const store = useContext(StoreContext);
 
   const subscription = useMemo(
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/types.js b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/types.js
index 8a24e808a1e4f..58b922a940e98 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/types.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/types.js
@@ -14,7 +14,7 @@ import type {
 
 export type Layout = LayoutBackend;
 export type Style = StyleBackend;
-export type StyleAndLayout = {|
+export type StyleAndLayout = {
   layout: LayoutBackend | null,
   style: StyleBackend | null,
-|};
+};
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/NewArrayValue.js b/packages/react-devtools-shared/src/devtools/views/Components/NewArrayValue.js
index cf931e5fea454..5baab8ab3cd57 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/NewArrayValue.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NewArrayValue.js
@@ -18,7 +18,7 @@ import styles from './NewArrayValue.css';
 import type {InspectedElement} from './types';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 
-type Props = {|
+type Props = {
   bridge: FrontendBridge,
   depth: number,
   hidden: boolean,
@@ -28,7 +28,7 @@ type Props = {|
   path: Array<string | number>,
   store: Store,
   type: 'props' | 'context' | 'hooks' | 'state',
-|};
+};
 
 export default function NewArrayValue({
   bridge,
@@ -40,7 +40,7 @@ export default function NewArrayValue({
   path,
   store,
   type,
-}: Props) {
+}: Props): React.Node {
   const [key, setKey] = useState<number>(0);
   const [isInvalid, setIsInvalid] = useState(false);
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/NewKeyValue.js b/packages/react-devtools-shared/src/devtools/views/Components/NewKeyValue.js
index a5591f0876cb1..04c141e6f6cf9 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/NewKeyValue.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NewKeyValue.js
@@ -18,7 +18,7 @@ import styles from './NewKeyValue.css';
 import type {InspectedElement} from './types';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 
-type Props = {|
+type Props = {
   bridge: FrontendBridge,
   depth: number,
   hidden: boolean,
@@ -27,7 +27,7 @@ type Props = {|
   path: Array<string | number>,
   store: Store,
   type: 'props' | 'state' | 'hooks' | 'context',
-|};
+};
 
 export default function NewKeyValue({
   bridge,
@@ -38,7 +38,7 @@ export default function NewKeyValue({
   path,
   store,
   type,
-}: Props) {
+}: Props): React.Node {
   const [newPropKey, setNewPropKey] = useState<number>(0);
   const [newPropName, setNewPropName] = useState<string>('');
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/OwnersListContext.js b/packages/react-devtools-shared/src/devtools/views/Components/OwnersListContext.js
index 83e9b37708b0d..cbd0497f544ee 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/OwnersListContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/OwnersListContext.js
@@ -27,10 +27,10 @@ const OwnersListContext = createContext<Context>(((null: any): Context));
 OwnersListContext.displayName = 'OwnersListContext';
 
 type ResolveFn = (ownersList: Array<SerializedElement> | null) => void;
-type InProgressRequest = {|
+type InProgressRequest = {
   promise: Thenable<Array<SerializedElement>>,
   resolveFn: ResolveFn,
-|};
+};
 
 const inProgressRequests: WeakMap<Element, InProgressRequest> = new WeakMap();
 const resource: Resource<
@@ -57,9 +57,9 @@ const resource: Resource<
   {useWeakMap: true},
 );
 
-type Props = {|
+type Props = {
   children: React$Node,
-|};
+};
 
 function OwnersListContextController({children}: Props) {
   const bridge = useContext(BridgeContext);
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 cc9c43fd775ff..cc1428999a4cd 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js
@@ -38,23 +38,23 @@ import styles from './OwnersStack.css';
 
 type SelectOwner = (owner: SerializedElement | null) => void;
 
-type ACTION_UPDATE_OWNER_ID = {|
+type ACTION_UPDATE_OWNER_ID = {
   type: 'UPDATE_OWNER_ID',
   ownerID: number | null,
   owners: Array<SerializedElement>,
-|};
-type ACTION_UPDATE_SELECTED_INDEX = {|
+};
+type ACTION_UPDATE_SELECTED_INDEX = {
   type: 'UPDATE_SELECTED_INDEX',
   selectedIndex: number,
-|};
+};
 
 type Action = ACTION_UPDATE_OWNER_ID | ACTION_UPDATE_SELECTED_INDEX;
 
-type State = {|
+type State = {
   ownerID: number | null,
   owners: Array<SerializedElement>,
   selectedIndex: number,
-|};
+};
 
 function dialogReducer(state, action) {
   switch (action.type) {
@@ -77,7 +77,7 @@ function dialogReducer(state, action) {
   }
 }
 
-export default function OwnerStack() {
+export default function OwnerStack(): React.Node {
   const read = useContext(OwnersListContext);
   const {ownerID} = useContext(TreeStateContext);
   const treeDispatch = useContext(TreeDispatcherContext);
@@ -282,11 +282,11 @@ function ElementView({isSelected, owner, selectOwner}: ElementViewProps) {
   );
 }
 
-type BackToOwnerButtonProps = {|
+type BackToOwnerButtonProps = {
   owners: Array<SerializedElement>,
   selectedIndex: number,
   selectOwner: SelectOwner,
-|};
+};
 function BackToOwnerButton({
   owners,
   selectedIndex,
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/SelectedTreeHighlight.js b/packages/react-devtools-shared/src/devtools/views/Components/SelectedTreeHighlight.js
index 1d86d59a3762e..05b34ab66ed7e 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/SelectedTreeHighlight.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/SelectedTreeHighlight.js
@@ -17,12 +17,12 @@ import {useSubscription} from '../hooks';
 
 import styles from './SelectedTreeHighlight.css';
 
-type Data = {|
+type Data = {
   startIndex: number,
   stopIndex: number,
-|};
+};
 
-export default function SelectedTreeHighlight(_: {||}) {
+export default function SelectedTreeHighlight(_: {}): React.Node {
   const {lineHeight} = useContext(SettingsContext);
   const store = useContext(StoreContext);
   const treeFocused = useContext(TreeFocusedContext);
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 2ac3333d59aeb..089d98ecebadb 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
@@ -41,17 +41,17 @@ import {logEvent} from 'react-devtools-shared/src/Logger';
 // Never indent more than this number of pixels (even if we have the room).
 const DEFAULT_INDENTATION_SIZE = 12;
 
-export type ItemData = {|
+export type ItemData = {
   numElements: number,
   isNavigatingWithKeyboard: boolean,
   lastScrolledIDRef: {current: number | null, ...},
   onElementMouseEnter: (id: number) => void,
   treeFocused: boolean,
-|};
+};
 
-type Props = {||};
+type Props = {};
 
-export default function Tree(props: Props) {
+export default function Tree(props: Props): React.Node {
   const dispatch = useContext(TreeDispatcherContext);
   const {
     numElements,
@@ -473,8 +473,8 @@ export default function Tree(props: Props) {
 function updateIndentationSizeVar(
   innerDiv: HTMLDivElement,
   cachedChildWidths: WeakMap<HTMLElement, number>,
-  indentationSizeRef: {|current: number|},
-  prevListWidthRef: {|current: number|},
+  indentationSizeRef: {current: number},
+  prevListWidthRef: {current: number},
 ): void {
   const list = ((innerDiv.parentElement: any): HTMLDivElement);
   const listWidth = list.clientWidth;
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 0252ac350fd99..e975bd16fab63 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js
@@ -42,7 +42,7 @@ import Store from '../../store';
 
 import type {Element} from './types';
 
-export type StateContext = {|
+export type StateContext = {
   // Tree
   numElements: number,
   ownerSubtreeLeafElementID: number | null,
@@ -60,70 +60,70 @@ export type StateContext = {|
 
   // Inspection element panel
   inspectedElementID: number | null,
-|};
+};
 
-type ACTION_GO_TO_NEXT_SEARCH_RESULT = {|
+type ACTION_GO_TO_NEXT_SEARCH_RESULT = {
   type: 'GO_TO_NEXT_SEARCH_RESULT',
-|};
-type ACTION_GO_TO_PREVIOUS_SEARCH_RESULT = {|
+};
+type ACTION_GO_TO_PREVIOUS_SEARCH_RESULT = {
   type: 'GO_TO_PREVIOUS_SEARCH_RESULT',
-|};
-type ACTION_HANDLE_STORE_MUTATION = {|
+};
+type ACTION_HANDLE_STORE_MUTATION = {
   type: 'HANDLE_STORE_MUTATION',
   payload: [Array<number>, Map<number, number>],
-|};
-type ACTION_RESET_OWNER_STACK = {|
+};
+type ACTION_RESET_OWNER_STACK = {
   type: 'RESET_OWNER_STACK',
-|};
-type ACTION_SELECT_CHILD_ELEMENT_IN_TREE = {|
+};
+type ACTION_SELECT_CHILD_ELEMENT_IN_TREE = {
   type: 'SELECT_CHILD_ELEMENT_IN_TREE',
-|};
-type ACTION_SELECT_ELEMENT_AT_INDEX = {|
+};
+type ACTION_SELECT_ELEMENT_AT_INDEX = {
   type: 'SELECT_ELEMENT_AT_INDEX',
   payload: number | null,
-|};
-type ACTION_SELECT_ELEMENT_BY_ID = {|
+};
+type ACTION_SELECT_ELEMENT_BY_ID = {
   type: 'SELECT_ELEMENT_BY_ID',
   payload: number | null,
-|};
-type ACTION_SELECT_NEXT_ELEMENT_IN_TREE = {|
+};
+type ACTION_SELECT_NEXT_ELEMENT_IN_TREE = {
   type: 'SELECT_NEXT_ELEMENT_IN_TREE',
-|};
-type ACTION_SELECT_NEXT_ELEMENT_WITH_ERROR_OR_WARNING_IN_TREE = {|
+};
+type ACTION_SELECT_NEXT_ELEMENT_WITH_ERROR_OR_WARNING_IN_TREE = {
   type: 'SELECT_NEXT_ELEMENT_WITH_ERROR_OR_WARNING_IN_TREE',
-|};
-type ACTION_SELECT_NEXT_SIBLING_IN_TREE = {|
+};
+type ACTION_SELECT_NEXT_SIBLING_IN_TREE = {
   type: 'SELECT_NEXT_SIBLING_IN_TREE',
-|};
-type ACTION_SELECT_OWNER = {|
+};
+type ACTION_SELECT_OWNER = {
   type: 'SELECT_OWNER',
   payload: number,
-|};
-type ACTION_SELECT_PARENT_ELEMENT_IN_TREE = {|
+};
+type ACTION_SELECT_PARENT_ELEMENT_IN_TREE = {
   type: 'SELECT_PARENT_ELEMENT_IN_TREE',
-|};
-type ACTION_SELECT_PREVIOUS_ELEMENT_IN_TREE = {|
+};
+type ACTION_SELECT_PREVIOUS_ELEMENT_IN_TREE = {
   type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE',
-|};
-type ACTION_SELECT_PREVIOUS_ELEMENT_WITH_ERROR_OR_WARNING_IN_TREE = {|
+};
+type ACTION_SELECT_PREVIOUS_ELEMENT_WITH_ERROR_OR_WARNING_IN_TREE = {
   type: 'SELECT_PREVIOUS_ELEMENT_WITH_ERROR_OR_WARNING_IN_TREE',
-|};
-type ACTION_SELECT_PREVIOUS_SIBLING_IN_TREE = {|
+};
+type ACTION_SELECT_PREVIOUS_SIBLING_IN_TREE = {
   type: 'SELECT_PREVIOUS_SIBLING_IN_TREE',
-|};
-type ACTION_SELECT_OWNER_LIST_NEXT_ELEMENT_IN_TREE = {|
+};
+type ACTION_SELECT_OWNER_LIST_NEXT_ELEMENT_IN_TREE = {
   type: 'SELECT_OWNER_LIST_NEXT_ELEMENT_IN_TREE',
-|};
-type ACTION_SELECT_OWNER_LIST_PREVIOUS_ELEMENT_IN_TREE = {|
+};
+type ACTION_SELECT_OWNER_LIST_PREVIOUS_ELEMENT_IN_TREE = {
   type: 'SELECT_OWNER_LIST_PREVIOUS_ELEMENT_IN_TREE',
-|};
-type ACTION_SET_SEARCH_TEXT = {|
+};
+type ACTION_SET_SEARCH_TEXT = {
   type: 'SET_SEARCH_TEXT',
   payload: string,
-|};
-type ACTION_UPDATE_INSPECTED_ELEMENT_ID = {|
+};
+type ACTION_UPDATE_INSPECTED_ELEMENT_ID = {
   type: 'UPDATE_INSPECTED_ELEMENT_ID',
-|};
+};
 
 type Action =
   | ACTION_GO_TO_NEXT_SEARCH_RESULT
@@ -158,7 +158,7 @@ const TreeDispatcherContext = createContext<DispatcherContext>(
 );
 TreeDispatcherContext.displayName = 'TreeDispatcherContext';
 
-type State = {|
+type State = {
   // Tree
   numElements: number,
   ownerSubtreeLeafElementID: number | null,
@@ -176,7 +176,7 @@ type State = {|
 
   // Inspection element panel
   inspectedElementID: number | null,
-|};
+};
 
 function reduceTreeState(store: Store, state: State, action: Action): State {
   let {
@@ -505,6 +505,7 @@ function reduceSearchState(store: Store, state: State, action: Action): State {
         if (numPrevSearchResults > 0) {
           didRequestSearch = true;
           searchIndex =
+            // $FlowFixMe[unsafe-addition] addition with possible null/undefined value
             searchIndex + 1 < numPrevSearchResults ? searchIndex + 1 : 0;
         }
         break;
@@ -817,7 +818,7 @@ function reduceSuspenseState(
   return state;
 }
 
-type Props = {|
+type Props = {
   children: React$Node,
 
   // Used for automated testing
@@ -825,7 +826,7 @@ type Props = {|
   defaultOwnerID?: ?number,
   defaultSelectedElementID?: ?number,
   defaultSelectedElementIndex?: ?number,
-|};
+};
 
 // TODO Remove TreeContextController wrapper element once global Context.write API exists.
 function TreeContextController({
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/ViewElementSourceContext.js b/packages/react-devtools-shared/src/devtools/views/Components/ViewElementSourceContext.js
index 3dc061c354567..10d20f4a2afd0 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/ViewElementSourceContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/ViewElementSourceContext.js
@@ -14,10 +14,10 @@ import type {
   ViewElementSource,
 } from 'react-devtools-shared/src/devtools/views/DevTools';
 
-export type Context = {|
+export type Context = {
   canViewElementSourceFunction: CanViewElementSource | null,
   viewElementSourceFunction: ViewElementSource | null,
-|};
+};
 
 const ViewElementSourceContext = createContext<Context>(((null: any): Context));
 ViewElementSourceContext.displayName = 'ViewElementSourceContext';
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/ViewSourceContext.js b/packages/react-devtools-shared/src/devtools/views/Components/ViewSourceContext.js
index 39d6ccc470874..8ea733440ea65 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/ViewSourceContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/ViewSourceContext.js
@@ -11,9 +11,9 @@ import {createContext} from 'react';
 
 import type {ViewUrlSource} from 'react-devtools-shared/src/devtools/views/DevTools';
 
-export type Context = {|
+export type Context = {
   viewUrlSourceFunction: ViewUrlSource | null,
-|};
+};
 
 const ViewSourceContext = createContext<Context>(((null: any): Context));
 ViewSourceContext.displayName = 'ViewSourceContext';
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
index cee8021a191f3..19e7bdaba0f43 100644
--- 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
@@ -16,9 +16,16 @@ import {
 } from '@reach/menu-button';
 import useThemeStyles from '../../useThemeStyles';
 
-const MenuList = ({children, ...props}: {children: React$Node, ...}) => {
+const MenuList = ({
+  children,
+  ...props
+}: {
+  children: React$Node,
+  ...
+}): React.Node => {
   const style = useThemeStyles();
   return (
+    // $FlowFixMe unsafe spread
     <ReachMenuList style={style} {...props}>
       {children}
     </ReachMenuList>
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
index d3f07258c8b5b..db3d28a197660 100644
--- 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
@@ -20,9 +20,10 @@ const Tooltip = ({
   children: React$Node,
   className: string,
   ...
-}) => {
+}): React.Node => {
   const style = useThemeStyles();
   return (
+    // $FlowFixMe unsafe spread
     <ReachTooltip
       className={`${tooltipStyles.Tooltip} ${className}`}
       style={style}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/types.js b/packages/react-devtools-shared/src/devtools/views/Components/types.js
index c6789fa1e9ec1..2d1c7e22ea101 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/types.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/types.js
@@ -18,7 +18,7 @@ import type {ElementType, Plugins} from 'react-devtools-shared/src/types';
 // Some of its information (e.g. id, type, displayName) come from the backend.
 // Other bits (e.g. weight and depth) are computed on the frontend for windowing and display purposes.
 // Elements are updated on a push basis– meaning the backend pushes updates to the frontend when needed.
-export type Element = {|
+export type Element = {
   id: number,
   parentID: number,
   children: Array<number>,
@@ -46,20 +46,20 @@ export type Element = {|
   // This element is not in a StrictMode compliant subtree.
   // Only true for React versions supporting StrictMode.
   isStrictModeNonCompliant: boolean,
-|};
+};
 
-export type SerializedElement = {|
+export type SerializedElement = {
   displayName: string | null,
   id: number,
   key: number | string | null,
   hocDisplayNames: Array<string> | null,
   type: ElementType,
-|};
+};
 
-export type OwnersList = {|
+export type OwnersList = {
   id: number,
   owners: Array<SerializedElement> | null,
-|};
+};
 
 export type InspectedElementResponseType =
   | 'error'
@@ -68,7 +68,7 @@ export type InspectedElementResponseType =
   | 'no-change'
   | 'not-found';
 
-export type InspectedElement = {|
+export type InspectedElement = {
   id: number,
 
   // Does the current renderer support editable hooks and function props?
@@ -121,11 +121,11 @@ export type InspectedElement = {|
 
   // UI plugins/visualizations for the inspected element.
   plugins: Plugins,
-|};
+};
 
 // TODO: Add profiling type
 
-export type DehydratedData = {|
+export type DehydratedData = {
   cleaned: Array<Array<string | number>>,
   data:
     | string
@@ -135,4 +135,4 @@ export type DehydratedData = {|
     | Array<Unserializable>
     | {[key: string]: string | Dehydrated | Unserializable, ...},
   unserializable: Array<Array<string | number>>,
-|};
+};
diff --git a/packages/react-devtools-shared/src/devtools/views/DevTools.js b/packages/react-devtools-shared/src/devtools/views/DevTools.js
index a78261e9fc301..879b9ba0a73b9 100644
--- a/packages/react-devtools-shared/src/devtools/views/DevTools.js
+++ b/packages/react-devtools-shared/src/devtools/views/DevTools.js
@@ -67,7 +67,7 @@ export type CanViewElementSource = (
   inspectedElement: InspectedElement,
 ) => boolean;
 
-export type Props = {|
+export type Props = {
   bridge: FrontendBridge,
   browserTheme?: BrowserTheme,
   canViewElementSourceFunction?: ?CanViewElementSource,
@@ -105,7 +105,7 @@ export type Props = {|
   fetchFileWithCaching?: ?FetchFileWithCaching,
   // TODO (Webpack 5) Hopefully we can remove this prop after the Webpack 5 migration.
   hookNamesModuleLoaderFunction?: ?HookNamesModuleLoaderFunction,
-|};
+};
 
 const componentsTab = {
   id: ('components': TabID),
@@ -146,7 +146,7 @@ export default function DevTools({
   hideToggleSuspenseAction,
   hideLogAction,
   hideViewSourceAction,
-}: Props) {
+}: Props): React.Node {
   const [currentTab, setTab] = useLocalStorage<TabID>(
     LOCAL_STORAGE_DEFAULT_TAB_KEY,
     defaultTab,
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/CaughtErrorView.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/CaughtErrorView.js
index c4511ba0312bd..c05630a51387c 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/CaughtErrorView.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/CaughtErrorView.js
@@ -10,13 +10,13 @@
 import * as React from 'react';
 import styles from './shared.css';
 
-type Props = {|
+type Props = {
   callStack: string | null,
   children: React$Node,
   info: React$Node | null,
   componentStack: string | null,
   errorMessage: string,
-|};
+};
 
 export default function CaughtErrorView({
   callStack,
@@ -24,7 +24,7 @@ export default function CaughtErrorView({
   info,
   componentStack,
   errorMessage,
-}: Props) {
+}: Props): React.Node {
   return (
     <div className={styles.ErrorBoundary}>
       {children}
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js
index d207fcfe4f736..84077b3fa6b8f 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js
@@ -22,14 +22,14 @@ import UserError from 'react-devtools-shared/src/errors/UserError';
 import UnknownHookError from 'react-devtools-shared/src/errors/UnknownHookError';
 import {logEvent} from 'react-devtools-shared/src/Logger';
 
-type Props = {|
+type Props = {
   children: React$Node,
   canDismiss?: boolean,
   onBeforeDismissCallback?: () => void,
   store?: Store,
-|};
+};
 
-type State = {|
+type State = {
   callStack: string | null,
   canDismiss: boolean,
   componentStack: string | null,
@@ -39,7 +39,7 @@ type State = {|
   isTimeout: boolean,
   isUserError: boolean,
   isUnknownHookError: boolean,
-|};
+};
 
 const InitialState: State = {
   callStack: null,
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorView.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorView.js
index 7443707496aa8..8a038cf8964ed 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorView.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorView.js
@@ -12,13 +12,13 @@ import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import styles from './shared.css';
 
-type Props = {|
+type Props = {
   callStack: string | null,
   children: React$Node,
   componentStack: string | null,
   dismissError: Function | null,
   errorMessage: string | null,
-|};
+};
 
 export default function ErrorView({
   callStack,
@@ -26,7 +26,7 @@ export default function ErrorView({
   componentStack,
   dismissError = null,
   errorMessage,
-}: Props) {
+}: Props): React.Node {
   return (
     <div className={styles.ErrorBoundary}>
       {children}
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ReportNewIssue.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ReportNewIssue.js
index 26417c35c44be..841c18ae2dd68 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ReportNewIssue.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ReportNewIssue.js
@@ -21,17 +21,17 @@ const LABELS = [
 // This must match the filename in ".github/ISSUE_TEMPLATE/"
 const TEMPLATE = 'devtools_bug_report.yml';
 
-type Props = {|
+type Props = {
   callStack: string | null,
   componentStack: string | null,
   errorMessage: string | null,
-|};
+};
 
 export default function ReportNewIssue({
   callStack,
   componentStack,
   errorMessage,
-}: Props) {
+}: Props): React.Node {
   let bugURL = process.env.GITHUB_URL;
   if (!bugURL) {
     return null;
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/SearchingGitHubIssues.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/SearchingGitHubIssues.js
index b7f993b2395d3..bf836a4ba5a94 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/SearchingGitHubIssues.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/SearchingGitHubIssues.js
@@ -11,7 +11,7 @@ import * as React from 'react';
 import LoadingAnimation from 'react-devtools-shared/src/devtools/views/Components/LoadingAnimation';
 import styles from './shared.css';
 
-export default function SearchingGitHubIssues() {
+export default function SearchingGitHubIssues(): React.Node {
   return (
     <div className={styles.GitHubLinkRow}>
       <LoadingAnimation className={styles.LoadingIcon} />
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/SuspendingErrorView.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/SuspendingErrorView.js
index f44e166b3a57f..e66ce694f6b6d 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/SuspendingErrorView.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/SuspendingErrorView.js
@@ -13,17 +13,17 @@ import UpdateExistingIssue from './UpdateExistingIssue';
 import ReportNewIssue from './ReportNewIssue';
 import WorkplaceGroup from './WorkplaceGroup';
 
-type Props = {|
+type Props = {
   callStack: string | null,
   componentStack: string | null,
   errorMessage: string | null,
-|};
+};
 
 export default function SuspendingErrorView({
   callStack,
   componentStack,
   errorMessage,
-}: Props) {
+}: Props): React.Node {
   const maybeItem =
     errorMessage !== null ? findGitHubIssue(errorMessage) : null;
 
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/TimeoutView.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/TimeoutView.js
index 45c64312be137..8abeaa6d280bd 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/TimeoutView.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/TimeoutView.js
@@ -12,13 +12,13 @@ import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import styles from './shared.css';
 
-type Props = {|
+type Props = {
   callStack: string | null,
   children: React$Node,
   componentStack: string | null,
   dismissError: Function,
   errorMessage: string | null,
-|};
+};
 
 export default function TimeoutView({
   callStack,
@@ -26,7 +26,7 @@ export default function TimeoutView({
   componentStack,
   dismissError = null,
   errorMessage,
-}: Props) {
+}: Props): React.Node {
   return (
     <div className={styles.ErrorBoundary}>
       {children}
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/UnsupportedBridgeOperationView.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/UnsupportedBridgeOperationView.js
index 5a04718bec6d2..b03ab08f80c17 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/UnsupportedBridgeOperationView.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/UnsupportedBridgeOperationView.js
@@ -10,19 +10,19 @@
 import * as React from 'react';
 import styles from './shared.css';
 
-type Props = {|
+type Props = {
   callStack: string | null,
   children: React$Node,
   componentStack: string | null,
   errorMessage: string | null,
-|};
+};
 
 export default function UnsupportedBridgeOperationView({
   callStack,
   children,
   componentStack,
   errorMessage,
-}: Props) {
+}: Props): React.Node {
   return (
     <div className={styles.ErrorBoundary}>
       {children}
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/UpdateExistingIssue.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/UpdateExistingIssue.js
index ad1139d935a2b..06c2478178996 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/UpdateExistingIssue.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/UpdateExistingIssue.js
@@ -15,9 +15,9 @@ import styles from './shared.css';
 
 export default function UpdateExistingIssue({
   gitHubIssue,
-}: {|
+}: {
   gitHubIssue: GitHubIssue,
-|}) {
+}): React.Node {
   const {title, url} = gitHubIssue;
   return (
     <div className={styles.GitHubLinkRow}>
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/WorkplaceGroup.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/WorkplaceGroup.js
index f885f9611f5bb..23d80996a3483 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/WorkplaceGroup.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/WorkplaceGroup.js
@@ -13,7 +13,7 @@ import {REACT_DEVTOOLS_WORKPLACE_URL} from 'react-devtools-shared/src/constants'
 import Icon from '../Icon';
 import styles from './shared.css';
 
-export default function WorkplaceGroup() {
+export default function WorkplaceGroup(): React.Node {
   if (!isInternalFacebookBuild) {
     return null;
   }
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/cache.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/cache.js
index 047c0788c3493..025ada950cecd 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/cache.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/cache.js
@@ -19,20 +19,20 @@ const Pending = 0;
 const Resolved = 1;
 const Rejected = 2;
 
-type PendingRecord = {|
+type PendingRecord = {
   status: 0,
   value: Wakeable,
-|};
+};
 
-type ResolvedRecord<T> = {|
+type ResolvedRecord<T> = {
   status: 1,
   value: T,
-|};
+};
 
-type RejectedRecord = {|
+type RejectedRecord = {
   status: 2,
   value: null,
-|};
+};
 
 type Record<T> = PendingRecord | ResolvedRecord<T> | RejectedRecord;
 
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/githubAPI.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/githubAPI.js
index 714919effa810..bd9cd96b6017c 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/githubAPI.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/githubAPI.js
@@ -7,10 +7,10 @@
  * @flow
  */
 
-export type GitHubIssue = {|
+export type GitHubIssue = {
   title: string,
   url: string,
-|};
+};
 
 const GITHUB_ISSUES_API = 'https://github.com/gitapi/search/issues';
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Icon.js b/packages/react-devtools-shared/src/devtools/views/Icon.js
index bcf59773d06a5..606dbe9a98713 100644
--- a/packages/react-devtools-shared/src/devtools/views/Icon.js
+++ b/packages/react-devtools-shared/src/devtools/views/Icon.js
@@ -28,13 +28,17 @@ export type IconType =
   | 'strict-mode-non-compliant'
   | 'warning';
 
-type Props = {|
+type Props = {
   className?: string,
   title?: string,
   type: IconType,
-|};
+};
 
-export default function Icon({className = '', title = '', type}: Props) {
+export default function Icon({
+  className = '',
+  title = '',
+  type,
+}: Props): React.Node {
   let pathData = null;
   switch (type) {
     case 'arrow':
diff --git a/packages/react-devtools-shared/src/devtools/views/ModalDialog.js b/packages/react-devtools-shared/src/devtools/views/ModalDialog.js
index 5c4acc58cfa40..2bfbc0ec9031e 100644
--- a/packages/react-devtools-shared/src/devtools/views/ModalDialog.js
+++ b/packages/react-devtools-shared/src/devtools/views/ModalDialog.js
@@ -23,37 +23,37 @@ import styles from './ModalDialog.css';
 
 type ID = any;
 
-type DIALOG_ACTION_HIDE = {|
+type DIALOG_ACTION_HIDE = {
   type: 'HIDE',
   id: ID,
-|};
-type DIALOG_ACTION_SHOW = {|
+};
+type DIALOG_ACTION_SHOW = {
   type: 'SHOW',
   canBeDismissed?: boolean,
   content: React$Node,
   id: ID,
   title?: React$Node | null,
-|};
+};
 
 type Action = DIALOG_ACTION_HIDE | DIALOG_ACTION_SHOW;
 
 type Dispatch = (action: Action) => void;
 
-type Dialog = {|
+type Dialog = {
   canBeDismissed: boolean,
   content: React$Node | null,
   id: ID,
   title: React$Node | null,
-|};
+};
 
-type State = {|
+type State = {
   dialogs: Array<Dialog>,
-|};
+};
 
-type ModalDialogContextType = {|
+type ModalDialogContextType = {
   ...State,
   dispatch: Dispatch,
-|};
+};
 
 const ModalDialogContext = createContext<ModalDialogContextType>(
   ((null: any): ModalDialogContextType),
@@ -83,11 +83,11 @@ function dialogReducer(state, action) {
   }
 }
 
-type Props = {|
+type Props = {
   children: React$Node,
-|};
+};
 
-function ModalDialogContextController({children}: Props) {
+function ModalDialogContextController({children}: Props): React.Node {
   const [state, dispatch] = useReducer<State, State, Action>(dialogReducer, {
     dialogs: [],
   });
@@ -107,7 +107,7 @@ function ModalDialogContextController({children}: Props) {
   );
 }
 
-function ModalDialog(_: {||}) {
+function ModalDialog(_: {}): React.Node {
   const {dialogs, dispatch} = useContext(ModalDialogContext);
 
   if (dialogs.length === 0) {
@@ -136,13 +136,13 @@ function ModalDialogImpl({
   dispatch,
   id,
   title,
-}: {|
+}: {
   canBeDismissed: boolean,
   content: React$Node | null,
   dispatch: Dispatch,
   id: ID,
   title: React$Node | null,
-|}) {
+}) {
   const dismissModal = useCallback(() => {
     if (canBeDismissed) {
       dispatch({type: 'HIDE', id});
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ChartNode.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ChartNode.js
index 82c58e86da460..e26b73ec8c4bc 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ChartNode.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ChartNode.js
@@ -11,7 +11,7 @@ import * as React from 'react';
 
 import styles from './ChartNode.css';
 
-type Props = {|
+type Props = {
   color: string,
   height: number,
   isDimmed?: boolean,
@@ -25,7 +25,7 @@ type Props = {|
   width: number,
   x: number,
   y: number,
-|};
+};
 
 const minWidthToDisplay = 35;
 
@@ -42,7 +42,7 @@ export default function ChartNode({
   width,
   x,
   y,
-}: Props) {
+}: Props): React.Node {
   return (
     <g className={styles.Group} transform={`translate(${x},${y})`}>
       <rect
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 3aecbb690e2b3..4e9f23ba69039 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js
@@ -15,7 +15,7 @@ import ButtonIcon from '../ButtonIcon';
 import {StoreContext} from '../context';
 import {TimelineContext} from 'react-devtools-timeline/src/TimelineContext';
 
-export default function ClearProfilingDataButton() {
+export default function ClearProfilingDataButton(): React.Node {
   const store = useContext(StoreContext);
   const {didRecordCommits, isProfiling} = useContext(ProfilerContext);
   const {file, setFile} = useContext(TimelineContext);
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js
index 99289ff392f31..c93872345f145 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js
@@ -27,7 +27,7 @@ import type {TooltipFiberData} from './HoveredFiberInfo';
 import type {ChartData, ChartNode} from './FlamegraphChartBuilder';
 import type {CommitTree} from './types';
 
-export type ItemData = {|
+export type ItemData = {
   chartData: ChartData,
   onElementMouseEnter: (fiberData: TooltipFiberData) => void,
   onElementMouseLeave: () => void,
@@ -36,9 +36,9 @@ export type ItemData = {|
   selectedChartNodeIndex: number,
   selectFiber: (id: number | null, name: string | null) => void,
   width: number,
-|};
+};
 
-export default function CommitFlamegraphAutoSizer(_: {||}) {
+export default function CommitFlamegraphAutoSizer(_: {}): React.Node {
   const {profilerStore} = useContext(StoreContext);
   const {rootID, selectedCommitIndex, selectFiber} = useContext(
     ProfilerContext,
@@ -90,12 +90,12 @@ export default function CommitFlamegraphAutoSizer(_: {||}) {
   }
 }
 
-type Props = {|
+type Props = {
   chartData: ChartData,
   commitTree: CommitTree,
   height: number,
   width: number,
-|};
+};
 
 function CommitFlamegraph({chartData, commitTree, height, width}: Props) {
   const [
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js
index 9cc394cc799f0..1d7cc26b12283 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js
@@ -27,7 +27,7 @@ import type {TooltipFiberData} from './HoveredFiberInfo';
 import type {ChartData} from './RankedChartBuilder';
 import type {CommitTree} from './types';
 
-export type ItemData = {|
+export type ItemData = {
   chartData: ChartData,
   onElementMouseEnter: (fiberData: TooltipFiberData) => void,
   onElementMouseLeave: () => void,
@@ -36,9 +36,9 @@ export type ItemData = {|
   selectedFiberIndex: number,
   selectFiber: (id: number | null, name: string | null) => void,
   width: number,
-|};
+};
 
-export default function CommitRankedAutoSizer(_: {||}) {
+export default function CommitRankedAutoSizer(_: {}): React.Node {
   const {profilerStore} = useContext(StoreContext);
   const {rootID, selectedCommitIndex, selectFiber} = useContext(
     ProfilerContext,
@@ -88,12 +88,12 @@ export default function CommitRankedAutoSizer(_: {||}) {
   }
 }
 
-type Props = {|
+type Props = {
   chartData: ChartData,
   commitTree: CommitTree,
   height: number,
   width: number,
-|};
+};
 
 function CommitRanked({chartData, commitTree, height, width}: Props) {
   const [
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js
index 537f226f2d69b..5dc425c33974d 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js
@@ -45,11 +45,11 @@ export function getCommitTree({
   commitIndex,
   profilerStore,
   rootID,
-}: {|
+}: {
   commitIndex: number,
   profilerStore: ProfilerStore,
   rootID: number,
-|}): CommitTree {
+}): CommitTree {
   if (!rootToCommitTreeMap.has(rootID)) {
     rootToCommitTreeMap.set(rootID, []);
   }
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/FlamegraphChartBuilder.js b/packages/react-devtools-shared/src/devtools/views/Profiler/FlamegraphChartBuilder.js
index 7c7c9f08ddfbc..32ccac9659e42 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/FlamegraphChartBuilder.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/FlamegraphChartBuilder.js
@@ -12,7 +12,7 @@ import ProfilerStore from 'react-devtools-shared/src/devtools/ProfilerStore';
 
 import type {CommitTree} from './types';
 
-export type ChartNode = {|
+export type ChartNode = {
   actualDuration: number,
   didRender: boolean,
   id: number,
@@ -21,16 +21,16 @@ export type ChartNode = {|
   offset: number,
   selfDuration: number,
   treeBaseDuration: number,
-|};
+};
 
-export type ChartData = {|
+export type ChartData = {
   baseDuration: number,
   depth: number,
   idToDepthMap: Map<number, number>,
   maxSelfDuration: number,
   renderPathNodes: Set<number>,
   rows: Array<Array<ChartNode>>,
-|};
+};
 
 const cachedChartData: Map<string, ChartData> = new Map();
 
@@ -39,12 +39,12 @@ export function getChartData({
   commitTree,
   profilerStore,
   rootID,
-}: {|
+}: {
   commitIndex: number,
   commitTree: CommitTree,
   profilerStore: ProfilerStore,
   rootID: number,
-|}): ChartData {
+}): ChartData {
   const commitDatum = profilerStore.getCommitData(rootID, commitIndex);
 
   const {fiberActualDurations, fiberSelfDurations} = commitDatum;
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.js b/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.js
index 0dd5d67b2a164..349308680871a 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.js
@@ -18,16 +18,16 @@ import styles from './HoveredFiberInfo.css';
 
 import type {ChartNode} from './FlamegraphChartBuilder';
 
-export type TooltipFiberData = {|
+export type TooltipFiberData = {
   id: number,
   name: string,
-|};
+};
 
 export type Props = {
   fiberData: ChartNode,
 };
 
-export default function HoveredFiberInfo({fiberData}: Props) {
+export default function HoveredFiberInfo({fiberData}: Props): React.Node {
   const {profilerStore} = useContext(StoreContext);
   const {rootID, selectedCommitIndex} = useContext(ProfilerContext);
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/NoCommitData.js b/packages/react-devtools-shared/src/devtools/views/Profiler/NoCommitData.js
index 8396232a1de50..5e32497dafed1 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/NoCommitData.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/NoCommitData.js
@@ -11,7 +11,7 @@ import * as React from 'react';
 
 import styles from './NoCommitData.css';
 
-export default function NoCommitData(_: {||}) {
+export default function NoCommitData(_: {}): React.Node {
   return (
     <div className={styles.NoCommitData}>
       <div className={styles.Header}>
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/NoProfilingData.js b/packages/react-devtools-shared/src/devtools/views/Profiler/NoProfilingData.js
index 231de1c1d5a1a..b047e33552200 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/NoProfilingData.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/NoProfilingData.js
@@ -12,7 +12,7 @@ import RecordToggle from './RecordToggle';
 
 import styles from './Profiler.css';
 
-export default function NoProfilingData() {
+export default function NoProfilingData(): React.Node {
   return (
     <div className={styles.Column}>
       <div className={styles.Header}>No profiling data has been recorded.</div>
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ProcessingData.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ProcessingData.js
index 6827bc4407f5b..3aa4b45c1bb0e 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ProcessingData.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProcessingData.js
@@ -11,7 +11,7 @@ import * as React from 'react';
 
 import styles from './Profiler.css';
 
-export default function ProcessingData() {
+export default function ProcessingData(): React.Node {
   return (
     <div className={styles.Column}>
       <div className={styles.Header}>Processing data...</div>
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 0d7e23f2e388e..97b34809d7f9b 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
@@ -38,7 +38,7 @@ import {enableProfilerComponentTree} from 'react-devtools-feature-flags';
 
 import styles from './Profiler.css';
 
-function Profiler(_: {||}) {
+function Profiler(_: {}) {
   const {
     didRecordCommits,
     isProcessingData,
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
index 5ae29122a413c..2d1b6d3fb63fa 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
@@ -22,7 +22,7 @@ import type {ProfilingDataFrontend} from './types';
 
 export type TabID = 'flame-chart' | 'ranked-chart' | 'timeline';
 
-export type Context = {|
+export type Context = {
   // Which tab is selected in the Profiler UI?
   selectedTabID: TabID,
   selectTab(id: TabID): void,
@@ -65,24 +65,24 @@ export type Context = {|
   selectedFiberID: number | null,
   selectedFiberName: string | null,
   selectFiber: (id: number | null, name: string | null) => void,
-|};
+};
 
 const ProfilerContext = createContext<Context>(((null: any): Context));
 ProfilerContext.displayName = 'ProfilerContext';
 
-type StoreProfilingState = {|
+type StoreProfilingState = {
   didRecordCommits: boolean,
   isProcessingData: boolean,
   isProfiling: boolean,
   profilingData: ProfilingDataFrontend | null,
   supportsProfiling: boolean,
-|};
+};
 
-type Props = {|
+type Props = {
   children: React$Node,
-|};
+};
 
-function ProfilerContextController({children}: Props) {
+function ProfilerContextController({children}: Props): React.Node {
   const store = useContext(StoreContext);
   const {selectedElementID} = useContext(TreeStateContext);
   const dispatch = useContext(TreeDispatcherContext);
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 cf8a9a843847b..189f1af203402 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
@@ -27,7 +27,7 @@ import styles from './ProfilingImportExportButtons.css';
 
 import type {ProfilingDataExport} from './types';
 
-export default function ProfilingImportExportButtons() {
+export default function ProfilingImportExportButtons(): React.Node {
   const {isProfiling, profilingData, rootID} = useContext(ProfilerContext);
   const {setFile} = useContext(TimelineContext);
   const store = useContext(StoreContext);
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingNotSupported.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingNotSupported.js
index 4dcbe64cef069..6888c885d0914 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingNotSupported.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingNotSupported.js
@@ -11,7 +11,7 @@ import * as React from 'react';
 
 import styles from './Profiler.css';
 
-export default function ProfilingNotSupported() {
+export default function ProfilingNotSupported(): React.Node {
   return (
     <div className={styles.Column}>
       <div className={styles.Header}>Profiling not supported.</div>
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/RankedChartBuilder.js b/packages/react-devtools-shared/src/devtools/views/Profiler/RankedChartBuilder.js
index e3f6c178a5b03..635cf00b28675 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/RankedChartBuilder.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/RankedChartBuilder.js
@@ -16,17 +16,17 @@ import ProfilerStore from 'react-devtools-shared/src/devtools/ProfilerStore';
 
 import type {CommitTree} from './types';
 
-export type ChartNode = {|
+export type ChartNode = {
   id: number,
   label: string,
   name: string,
   value: number,
-|};
+};
 
-export type ChartData = {|
+export type ChartData = {
   maxValue: number,
   nodes: Array<ChartNode>,
-|};
+};
 
 const cachedChartData: Map<string, ChartData> = new Map();
 
@@ -35,12 +35,12 @@ export function getChartData({
   commitTree,
   profilerStore,
   rootID,
-}: {|
+}: {
   commitIndex: number,
   commitTree: CommitTree,
   profilerStore: ProfilerStore,
   rootID: number,
-|}): ChartData {
+}): ChartData {
   const commitDatum = profilerStore.getCommitData(rootID, commitIndex);
 
   const {fiberActualDurations, fiberSelfDurations} = commitDatum;
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/RecordToggle.js b/packages/react-devtools-shared/src/devtools/views/Profiler/RecordToggle.js
index 4c6aa5cf7d440..ca7f9c8d3dab4 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/RecordToggle.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/RecordToggle.js
@@ -15,11 +15,11 @@ import {ProfilerContext} from './ProfilerContext';
 
 import styles from './RecordToggle.css';
 
-export type Props = {|
+export type Props = {
   disabled?: boolean,
-|};
+};
 
-export default function RecordToggle({disabled}: Props) {
+export default function RecordToggle({disabled}: Props): React.Node {
   const {isProfiling, startProfiling, stopProfiling} = useContext(
     ProfilerContext,
   );
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/RecordingInProgress.js b/packages/react-devtools-shared/src/devtools/views/Profiler/RecordingInProgress.js
index dc91bb5c9cc4f..dce197ce4b22d 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/RecordingInProgress.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/RecordingInProgress.js
@@ -12,7 +12,7 @@ import RecordToggle from './RecordToggle';
 
 import styles from './Profiler.css';
 
-export default function RecordingInProgress() {
+export default function RecordingInProgress(): React.Node {
   return (
     <div className={styles.Column}>
       <div className={styles.Header}>Profiling is in progress...</div>
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ReloadAndProfileButton.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ReloadAndProfileButton.js
index 6d7443698a1b8..fe85bd5b251a1 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ReloadAndProfileButton.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ReloadAndProfileButton.js
@@ -14,16 +14,16 @@ import ButtonIcon from '../ButtonIcon';
 import {BridgeContext, StoreContext} from '../context';
 import {useSubscription} from '../hooks';
 
-type SubscriptionData = {|
+type SubscriptionData = {
   recordChangeDescriptions: boolean,
   supportsReloadAndProfile: boolean,
-|};
+};
 
 export default function ReloadAndProfileButton({
   disabled,
-}: {|
+}: {
   disabled: boolean,
-|}) {
+}): React.Node {
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/RootSelector.js b/packages/react-devtools-shared/src/devtools/views/Profiler/RootSelector.js
index 4506847e74504..bb0d3aa9f74d5 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/RootSelector.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/RootSelector.js
@@ -13,7 +13,7 @@ import {ProfilerContext} from './ProfilerContext';
 
 import styles from './RootSelector.css';
 
-export default function RootSelector(_: {||}) {
+export default function RootSelector(_: {}): React.Node {
   const {profilingData, rootID, setRootID} = useContext(ProfilerContext);
 
   const options = [];
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.js
index 6619fb7c78397..598a8a58b5790 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.js
@@ -17,9 +17,9 @@ import {getCommitTree} from './CommitTreeBuilder';
 
 import styles from './SidebarCommitInfo.css';
 
-export type Props = {||};
+export type Props = {};
 
-export default function SidebarCommitInfo(_: Props) {
+export default function SidebarCommitInfo(_: Props): React.Node {
   const {selectedCommitIndex, rootID} = useContext(ProfilerContext);
 
   const {profilerStore} = useContext(StoreContext);
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.js
index 18bd77443eb9c..b64de0dd2a095 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.js
@@ -24,11 +24,11 @@ import {copy} from 'clipboard-js';
 
 import styles from './SidebarEventInfo.css';
 
-export type Props = {||};
+export type Props = {};
 
-type SchedulingEventProps = {|
+type SchedulingEventProps = {
   eventInfo: SchedulingEvent,
-|};
+};
 
 function SchedulingEventInfo({eventInfo}: SchedulingEventProps) {
   const {viewUrlSourceFunction} = useContext(ViewSourceContext);
@@ -90,7 +90,7 @@ function SchedulingEventInfo({eventInfo}: SchedulingEventProps) {
   );
 }
 
-export default function SidebarEventInfo(_: Props) {
+export default function SidebarEventInfo(_: Props): React.Node {
   const {selectedEvent} = useContext(TimelineContext);
   // (TODO) Refactor in next PR so this supports multiple types of events
   if (selectedEvent && selectedEvent.schedulingEvent) {
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
index df6e6da1693f8..b27aab877656f 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
@@ -18,9 +18,9 @@ import ButtonIcon from '../ButtonIcon';
 
 import styles from './SidebarSelectedFiberInfo.css';
 
-export type Props = {||};
+export type Props = {};
 
-export default function SidebarSelectedFiberInfo(_: Props) {
+export default function SidebarSelectedFiberInfo(_: Props): React.Node {
   const {profilerStore} = useContext(StoreContext);
   const {
     rootID,
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js
index 2b837f28f6495..ab967301e777e 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js
@@ -20,7 +20,7 @@ import Tooltip from './Tooltip';
 
 import styles from './SnapshotCommitList.css';
 
-export type ItemData = {|
+export type ItemData = {
   commitTimes: Array<number>,
   filteredCommitIndices: Array<number>,
   maxDuration: number,
@@ -30,9 +30,9 @@ export type ItemData = {|
   setHoveredCommitIndex: (index: number) => void,
   startCommitDrag: (newDragState: DragState) => void,
   totalDurations: Array<number>,
-|};
+};
 
-type Props = {|
+type Props = {
   commitData: CommitDataFrontend,
   commitTimes: Array<number>,
   filteredCommitIndices: Array<number>,
@@ -40,7 +40,7 @@ type Props = {|
   selectedFilteredCommitIndex: number | null,
   selectCommitIndex: (index: number) => void,
   totalDurations: Array<number>,
-|};
+};
 
 export default function SnapshotCommitList({
   commitData,
@@ -50,7 +50,7 @@ export default function SnapshotCommitList({
   selectedFilteredCommitIndex,
   selectCommitIndex,
   totalDurations,
-}: Props) {
+}: Props): React.Node {
   return (
     <AutoSizer>
       {({height, width}) => (
@@ -70,7 +70,7 @@ export default function SnapshotCommitList({
   );
 }
 
-type ListProps = {|
+type ListProps = {
   commitData: CommitDataFrontend,
   commitTimes: Array<number>,
   height: number,
@@ -80,7 +80,7 @@ type ListProps = {|
   selectCommitIndex: (index: number) => void,
   totalDurations: Array<number>,
   width: number,
-|};
+};
 
 type DragState = {
   commitIndex: number,
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js
index 8459d8571be0f..2b2c601bc91a9 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js
@@ -18,9 +18,9 @@ import {StoreContext} from '../context';
 
 import styles from './SnapshotSelector.css';
 
-export type Props = {||};
+export type Props = {};
 
-export default function SnapshotSelector(_: Props) {
+export default function SnapshotSelector(_: Props): React.Node {
   const {
     isCommitFilterEnabled,
     minCommitDuration,
@@ -126,7 +126,10 @@ export default function SnapshotSelector(_: Props) {
         type="text"
         inputMode="numeric"
         pattern="[0-9]*"
-        value={selectedFilteredCommitIndex + 1}
+        value={
+          // $FlowFixMe[unsafe-addition] addition with possible null/undefined value
+          selectedFilteredCommitIndex + 1
+        }
         size={`${numFilteredCommits}`.length}
         onChange={handleCommitInputChange}
         onClick={handleClick}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.js b/packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.js
index 8e759485a64a1..0d7af3e63ee48 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.js
@@ -7,7 +7,12 @@ import styles from './Tooltip.css';
 
 const initialTooltipState = {height: 0, mouseX: 0, mouseY: 0, width: 0};
 
-export default function Tooltip({children, className, label, style}: any) {
+export default function Tooltip({
+  children,
+  className,
+  label,
+  style,
+}: any): React.Node {
   const containerRef = useRef(null);
   const tooltipRef = useRef(null);
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/Updaters.js b/packages/react-devtools-shared/src/devtools/views/Profiler/Updaters.js
index d35ff86d5895c..71ab71832cd2b 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/Updaters.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Updaters.js
@@ -16,12 +16,12 @@ import {ProfilerContext} from './ProfilerContext';
 import styles from './Updaters.css';
 import {ElementTypeRoot} from '../../../types';
 
-export type Props = {|
+export type Props = {
   commitTree: CommitTree,
   updaters: Array<SerializedElement>,
-|};
+};
 
-export default function Updaters({commitTree, updaters}: Props) {
+export default function Updaters({commitTree, updaters}: Props): React.Node {
   const {selectFiber} = useContext(ProfilerContext);
 
   const children =
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.js b/packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.js
index 7a2f9e5bf4f0c..49bd89924723a 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.js
@@ -33,11 +33,11 @@ function hookIndicesToString(indices: Array<number>): string {
   }
 }
 
-type Props = {|
+type Props = {
   fiberID: number,
-|};
+};
 
-export default function WhatChanged({fiberID}: Props) {
+export default function WhatChanged({fiberID}: Props): React.Node {
   const {profilerStore} = useContext(StoreContext);
   const {rootID, selectedCommitIndex} = useContext(ProfilerContext);
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/types.js b/packages/react-devtools-shared/src/devtools/views/Profiler/types.js
index f495aa360d160..a496319b1e941 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/types.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/types.js
@@ -14,7 +14,7 @@ import type {
   TimelineDataExport,
 } from 'react-devtools-timeline/src/types';
 
-export type CommitTreeNode = {|
+export type CommitTreeNode = {
   id: number,
   children: Array<number>,
   displayName: string | null,
@@ -23,32 +23,32 @@ export type CommitTreeNode = {|
   parentID: number,
   treeBaseDuration: number,
   type: ElementType,
-|};
+};
 
-export type CommitTree = {|
+export type CommitTree = {
   nodes: Map<number, CommitTreeNode>,
   rootID: number,
-|};
+};
 
-export type SnapshotNode = {|
+export type SnapshotNode = {
   id: number,
   children: Array<number>,
   displayName: string | null,
   hocDisplayNames: Array<string> | null,
   key: number | string | null,
   type: ElementType,
-|};
+};
 
-export type ChangeDescription = {|
+export type ChangeDescription = {
   context: Array<string> | boolean | null,
   didHooksChange: boolean,
   isFirstMount: boolean,
   props: Array<string> | null,
   state: Array<string> | null,
   hooks?: Array<number> | null,
-|};
+};
 
-export type CommitDataFrontend = {|
+export type CommitDataFrontend = {
   // Map of Fiber (ID) to a description of what changed in this commit.
   changeDescriptions: Map<number, ChangeDescription> | null,
 
@@ -79,9 +79,9 @@ export type CommitDataFrontend = {|
 
   // Fiber(s) responsible for scheduling this update.
   updaters: Array<SerializedElement> | null,
-|};
+};
 
-export type ProfilingDataForRootFrontend = {|
+export type ProfilingDataForRootFrontend = {
   // Timing, duration, and other metadata about each commit.
   commitData: Array<CommitDataFrontend>,
 
@@ -103,10 +103,10 @@ export type ProfilingDataForRootFrontend = {|
   // Map of fiber id to node when the Profiling session was started.
   // This info can be used along with commitOperations to reconstruct the tree for any commit.
   snapshots: Map<number, SnapshotNode>,
-|};
+};
 
 // Combination of profiling data collected by the renderer interface (backend) and Store (frontend).
-export type ProfilingDataFrontend = {|
+export type ProfilingDataFrontend = {
   // Legacy profiling data is per renderer + root.
   dataForRoots: Map<number, ProfilingDataForRootFrontend>,
 
@@ -117,9 +117,9 @@ export type ProfilingDataFrontend = {|
   // e.g. DevTools should not try to sync selection between Components and Profiler tabs,
   // even if there are Fibers with the same IDs.
   imported: boolean,
-|};
+};
 
-export type CommitDataExport = {|
+export type CommitDataExport = {
   changeDescriptions: Array<[number, ChangeDescription]> | null,
   duration: number,
   effectDuration: number | null,
@@ -131,9 +131,9 @@ export type CommitDataExport = {|
   priorityLevel: string | null,
   timestamp: number,
   updaters: Array<SerializedElement> | null,
-|};
+};
 
-export type ProfilingDataForRootExport = {|
+export type ProfilingDataForRootExport = {
   commitData: Array<CommitDataExport>,
   displayName: string,
   // Tuple of Fiber ID and base duration
@@ -141,10 +141,10 @@ export type ProfilingDataForRootExport = {|
   operations: Array<Array<number>>,
   rootID: number,
   snapshots: Array<[number, SnapshotNode]>,
-|};
+};
 
 // Serializable version of ProfilingDataFrontend data.
-export type ProfilingDataExport = {|
+export type ProfilingDataExport = {
   version: 5,
 
   // Legacy profiling data is per renderer + root.
@@ -153,4 +153,4 @@ export type ProfilingDataExport = {|
   // Timeline data is per rederer.
   // Note that old exported profiles won't contain this key.
   timelineData?: Array<TimelineDataExport>,
-|};
+};
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/utils.js b/packages/react-devtools-shared/src/devtools/views/Profiler/utils.js
index 69134bf956d0d..a861c367c2a66 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/utils.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/utils.js
@@ -353,7 +353,7 @@ export function prepareProfilingDataExport(
   };
 }
 
-export const getGradientColor = (value: number) => {
+export const getGradientColor = (value: number): string => {
   const maxIndex = commitGradient.length - 1;
   let index;
   if (Number.isNaN(value)) {
@@ -366,11 +366,11 @@ export const getGradientColor = (value: number) => {
   return commitGradient[Math.round(index)];
 };
 
-export const formatDuration = (duration: number) =>
+export const formatDuration = (duration: number): number | string =>
   Math.round(duration * 10) / 10 || '<0.1';
-export const formatPercentage = (percentage: number) =>
+export const formatPercentage = (percentage: number): number =>
   Math.round(percentage * 100);
-export const formatTime = (timestamp: number) =>
+export const formatTime = (timestamp: number): number =>
   Math.round(Math.round(timestamp) / 100) / 10;
 
 export const scale = (
@@ -378,7 +378,10 @@ export const scale = (
   maxValue: number,
   minRange: number,
   maxRange: number,
-) => (value: number, fallbackValue: number) =>
+): ((value: number, fallbackValue: number) => number) => (
+  value: number,
+  fallbackValue: number,
+) =>
   maxValue - minValue === 0
     ? fallbackValue
     : ((value - minValue) / (maxValue - minValue)) * (maxRange - minRange);
diff --git a/packages/react-devtools-shared/src/devtools/views/ReactLogo.js b/packages/react-devtools-shared/src/devtools/views/ReactLogo.js
index 8f9cfc15c24a7..7eb95868e9d18 100644
--- a/packages/react-devtools-shared/src/devtools/views/ReactLogo.js
+++ b/packages/react-devtools-shared/src/devtools/views/ReactLogo.js
@@ -11,11 +11,11 @@ import * as React from 'react';
 
 import styles from './ReactLogo.css';
 
-type Props = {|
+type Props = {
   className?: string,
-|};
+};
 
-export default function ReactLogo({className}: Props) {
+export default function ReactLogo({className}: Props): React.Node {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
diff --git a/packages/react-devtools-shared/src/devtools/views/SearchInput.js b/packages/react-devtools-shared/src/devtools/views/SearchInput.js
index d2214f59728e7..ea24ae8432007 100644
--- a/packages/react-devtools-shared/src/devtools/views/SearchInput.js
+++ b/packages/react-devtools-shared/src/devtools/views/SearchInput.js
@@ -15,7 +15,7 @@ import Icon from './Icon';
 
 import styles from './SearchInput.css';
 
-type Props = {|
+type Props = {
   goToNextResult: () => void,
   goToPreviousResult: () => void,
   placeholder: string,
@@ -24,7 +24,7 @@ type Props = {|
   searchResultsCount: number,
   searchText: string,
   testName?: ?string,
-|};
+};
 
 export default function SearchInput({
   goToNextResult,
@@ -35,7 +35,7 @@ export default function SearchInput({
   searchResultsCount,
   searchText,
   testName,
-}: Props) {
+}: Props): React.Node {
   const inputRef = useRef<HTMLInputElement | null>(null);
 
   const resetSearch = () => search('');
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js
index 83c3b2a612963..281b0f101a490 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js
@@ -51,7 +51,7 @@ import type {
   RegExpComponentFilter,
 } from 'react-devtools-shared/src/types';
 
-export default function ComponentsSettings(_: {||}) {
+export default function ComponentsSettings(_: {}): React.Node {
   const store = useContext(StoreContext);
   const {parseHookNames, setParseHookNames} = useContext(SettingsContext);
 
@@ -417,10 +417,10 @@ export default function ComponentsSettings(_: {||}) {
   );
 }
 
-type ToggleIconProps = {|
+type ToggleIconProps = {
   isEnabled: boolean,
   isValid: boolean,
-|};
+};
 function ToggleIcon({isEnabled, isValid}: ToggleIconProps) {
   let className;
   if (isValid) {
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js
index 46b8b343721ff..8281cefd3d561 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js
@@ -13,7 +13,7 @@ import {SettingsContext} from './SettingsContext';
 
 import styles from './SettingsShared.css';
 
-export default function DebuggingSettings(_: {||}) {
+export default function DebuggingSettings(_: {}): React.Node {
   const {
     appendComponentStack,
     breakOnConsoleErrors,
@@ -22,7 +22,7 @@ export default function DebuggingSettings(_: {||}) {
     setBreakOnConsoleErrors,
     setShowInlineWarningsAndErrors,
     showInlineWarningsAndErrors,
-    sethideConsoleLogsInStrictMode,
+    setHideConsoleLogsInStrictMode,
   } = useContext(SettingsContext);
 
   return (
@@ -72,7 +72,7 @@ export default function DebuggingSettings(_: {||}) {
             type="checkbox"
             checked={hideConsoleLogsInStrictMode}
             onChange={({currentTarget}) =>
-              sethideConsoleLogsInStrictMode(currentTarget.checked)
+              setHideConsoleLogsInStrictMode(currentTarget.checked)
             }
           />{' '}
           Hide logs during second render in Strict Mode
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js
index a781f99eb05c5..fd59913932cdf 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js
@@ -28,7 +28,7 @@ function getChangeLogUrl(version: ?string): string | null {
   return `${CHANGE_LOG_URL}#${versionAnchor}`;
 }
 
-export default function GeneralSettings(_: {||}) {
+export default function GeneralSettings(_: {}): React.Node {
   const {
     displayDensity,
     setDisplayDensity,
@@ -113,7 +113,7 @@ export default function GeneralSettings(_: {||}) {
   );
 }
 
-function Version({label, version}: {|label: string, version: ?string|}) {
+function Version({label, version}: {label: string, version: ?string}) {
   const changelogLink = useMemo(() => {
     return getChangeLogUrl(version);
   }, [version]);
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/ProfilerSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/ProfilerSettings.js
index 7a2c8ede453d7..d9105da2dc0dc 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/ProfilerSettings.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/ProfilerSettings.js
@@ -15,7 +15,7 @@ import {ProfilerContext} from 'react-devtools-shared/src/devtools/views/Profiler
 
 import styles from './SettingsShared.css';
 
-export default function ProfilerSettings(_: {||}) {
+export default function ProfilerSettings(_: {}): React.Node {
   const {
     isCommitFilterEnabled,
     minCommitDuration,
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 3ee4ad0c86b98..82c62fc96c790 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
@@ -18,9 +18,10 @@ import {
 import {
   COMFORTABLE_LINE_HEIGHT,
   COMPACT_LINE_HEIGHT,
+  LOCAL_STORAGE_BROWSER_THEME,
   LOCAL_STORAGE_PARSE_HOOK_NAMES_KEY,
   LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS,
-  LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY,
+  LOCAL_STORAGE_SHOULD_APPEND_COMPONENT_STACK_KEY,
   LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY,
   LOCAL_STORAGE_SHOW_INLINE_WARNINGS_AND_ERRORS_KEY,
   LOCAL_STORAGE_HIDE_CONSOLE_LOGS_IN_STRICT_MODE,
@@ -34,7 +35,7 @@ import type {BrowserTheme} from '../DevTools';
 export type DisplayDensity = 'comfortable' | 'compact';
 export type Theme = 'auto' | 'light' | 'dark';
 
-type Context = {|
+type Context = {
   displayDensity: DisplayDensity,
   setDisplayDensity(value: DisplayDensity): void,
 
@@ -52,7 +53,7 @@ type Context = {|
   setParseHookNames: (value: boolean) => void,
 
   hideConsoleLogsInStrictMode: boolean,
-  sethideConsoleLogsInStrictMode: (value: boolean) => void,
+  setHideConsoleLogsInStrictMode: (value: boolean) => void,
 
   showInlineWarningsAndErrors: boolean,
   setShowInlineWarningsAndErrors: (value: boolean) => void,
@@ -64,7 +65,7 @@ type Context = {|
 
   traceUpdatesEnabled: boolean,
   setTraceUpdatesEnabled: (value: boolean) => void,
-|};
+};
 
 const SettingsContext = createContext<Context>(((null: any): Context));
 SettingsContext.displayName = 'SettingsContext';
@@ -87,12 +88,12 @@ function useLocalStorageWithLog<T>(
 
 type DocumentElements = Array<HTMLElement>;
 
-type Props = {|
+type Props = {
   browserTheme: BrowserTheme,
   children: React$Node,
   componentsPortalContainer?: Element,
   profilerPortalContainer?: Element,
-|};
+};
 
 function SettingsContextController({
   browserTheme,
@@ -110,14 +111,14 @@ function SettingsContextController({
     'compact',
   );
   const [theme, setTheme] = useLocalStorageWithLog<Theme>(
-    'React::DevTools::theme',
+    LOCAL_STORAGE_BROWSER_THEME,
     'auto',
   );
   const [
     appendComponentStack,
     setAppendComponentStack,
   ] = useLocalStorageWithLog<boolean>(
-    LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY,
+    LOCAL_STORAGE_SHOULD_APPEND_COMPONENT_STACK_KEY,
     true,
   );
   const [
@@ -133,7 +134,7 @@ function SettingsContextController({
   );
   const [
     hideConsoleLogsInStrictMode,
-    sethideConsoleLogsInStrictMode,
+    setHideConsoleLogsInStrictMode,
   ] = useLocalStorageWithLog<boolean>(
     LOCAL_STORAGE_HIDE_CONSOLE_LOGS_IN_STRICT_MODE,
     false,
@@ -240,7 +241,7 @@ function SettingsContextController({
       setTraceUpdatesEnabled,
       setShowInlineWarningsAndErrors,
       showInlineWarningsAndErrors,
-      sethideConsoleLogsInStrictMode,
+      setHideConsoleLogsInStrictMode,
       hideConsoleLogsInStrictMode,
       theme,
       browserTheme,
@@ -259,7 +260,7 @@ function SettingsContextController({
       setTraceUpdatesEnabled,
       setShowInlineWarningsAndErrors,
       showInlineWarningsAndErrors,
-      sethideConsoleLogsInStrictMode,
+      setHideConsoleLogsInStrictMode,
       hideConsoleLogsInStrictMode,
       theme,
       browserTheme,
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModal.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModal.js
index 29d138f1c95fb..58377f9696b9b 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModal.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModal.js
@@ -28,7 +28,7 @@ import styles from './SettingsModal.css';
 
 type TabID = 'general' | 'components' | 'profiler';
 
-export default function SettingsModal(_: {||}) {
+export default function SettingsModal(_: {}): React.Node {
   const {isModalShowing, setIsModalShowing} = useContext(SettingsModalContext);
   const store = useContext(StoreContext);
   const {profilerStore} = store;
@@ -57,7 +57,7 @@ export default function SettingsModal(_: {||}) {
   return <SettingsModalImpl />;
 }
 
-function SettingsModalImpl(_: {||}) {
+function SettingsModalImpl(_: {}) {
   const {setIsModalShowing} = useContext(SettingsModalContext);
   const dismissModal = useCallback(() => setIsModalShowing(false), [
     setIsModalShowing,
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContext.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContext.js
index d3b500cee872b..9821f25c05ca8 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContext.js
@@ -22,7 +22,7 @@ type Context = {
 const SettingsModalContext = createContext<Context>(((null: any): Context));
 SettingsModalContext.displayName = 'SettingsModalContext';
 
-function SettingsModalContextController({children}: {|children: React$Node|}) {
+function SettingsModalContextController({children}: {children: React$Node}) {
   const [isModalShowing, setIsModalShowing] = useState<boolean>(false);
 
   const value = useMemo(() => ({isModalShowing, setIsModalShowing}), [
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContextToggle.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContextToggle.js
index c20124d90f6f3..fa234d1b711c7 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContextToggle.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContextToggle.js
@@ -15,7 +15,7 @@ import ButtonIcon from '../ButtonIcon';
 import {StoreContext} from '../context';
 import {useSubscription} from '../hooks';
 
-export default function SettingsModalContextToggle() {
+export default function SettingsModalContextToggle(): React.Node {
   const {setIsModalShowing} = useContext(SettingsModalContext);
   const store = useContext(StoreContext);
   const {profilerStore} = store;
diff --git a/packages/react-devtools-shared/src/devtools/views/TabBar.js b/packages/react-devtools-shared/src/devtools/views/TabBar.js
index 5c9f3f61bc728..89ba2d30ca824 100644
--- a/packages/react-devtools-shared/src/devtools/views/TabBar.js
+++ b/packages/react-devtools-shared/src/devtools/views/TabBar.js
@@ -16,21 +16,21 @@ import Tooltip from './Components/reach-ui/tooltip';
 
 import type {IconType} from './Icon';
 
-type TabInfo = {|
+type TabInfo = {
   icon: IconType,
   id: string,
   label: string,
   title?: string,
-|};
+};
 
-export type Props = {|
+export type Props = {
   currentTab: any,
   disabled?: boolean,
   id: string,
   selectTab: (tabID: any) => void,
   tabs: Array<TabInfo | null>,
   type: 'navigation' | 'profiler' | 'settings',
-|};
+};
 
 export default function TabBar({
   currentTab,
@@ -39,7 +39,7 @@ export default function TabBar({
   selectTab,
   tabs,
   type,
-}: Props) {
+}: Props): React.Node {
   if (!tabs.some(tab => tab !== null && tab.id === currentTab)) {
     const firstTab = ((tabs.find(tab => tab !== null): any): TabInfo);
     selectTab(firstTab.id);
diff --git a/packages/react-devtools-shared/src/devtools/views/ThemeProvider.js b/packages/react-devtools-shared/src/devtools/views/ThemeProvider.js
index a353b4c6eec66..eb8a83465d39a 100644
--- a/packages/react-devtools-shared/src/devtools/views/ThemeProvider.js
+++ b/packages/react-devtools-shared/src/devtools/views/ThemeProvider.js
@@ -10,7 +10,11 @@
 import * as React from 'react';
 import useThemeStyles from './useThemeStyles';
 
-export default function ThemeProvider({children}: {|children: React$Node|}) {
+export default function ThemeProvider({
+  children,
+}: {
+  children: React.Node,
+}): React.Node {
   const themeStyle = useThemeStyles();
 
   const style = React.useMemo(() => {
diff --git a/packages/react-devtools-shared/src/devtools/views/Toggle.js b/packages/react-devtools-shared/src/devtools/views/Toggle.js
index f90367c3cc0bd..b43c7087c9d0b 100644
--- a/packages/react-devtools-shared/src/devtools/views/Toggle.js
+++ b/packages/react-devtools-shared/src/devtools/views/Toggle.js
@@ -32,7 +32,7 @@ export default function Toggle({
   onChange,
   testName,
   title,
-}: Props) {
+}: Props): React.Node {
   let defaultClassName;
   if (isDisabled) {
     defaultClassName = styles.ToggleDisabled;
diff --git a/packages/react-devtools-shared/src/devtools/views/UnsupportedBridgeProtocolDialog.js b/packages/react-devtools-shared/src/devtools/views/UnsupportedBridgeProtocolDialog.js
index 05f41c6211e75..07062e905d3bb 100644
--- a/packages/react-devtools-shared/src/devtools/views/UnsupportedBridgeProtocolDialog.js
+++ b/packages/react-devtools-shared/src/devtools/views/UnsupportedBridgeProtocolDialog.js
@@ -24,7 +24,7 @@ const INSTRUCTIONS_FB_URL =
   'https://fb.me/devtools-unsupported-bridge-protocol';
 const MODAL_DIALOG_ID = 'UnsupportedBridgeProtocolDialog';
 
-export default function UnsupportedBridgeProtocolDialog(_: {||}) {
+export default function UnsupportedBridgeProtocolDialog(_: {}) {
   const {dialogs, dispatch} = useContext(ModalDialogContext);
   const store = useContext(StoreContext);
 
@@ -66,9 +66,9 @@ export default function UnsupportedBridgeProtocolDialog(_: {||}) {
 
 function DialogContent({
   unsupportedBridgeProtocol,
-}: {|
+}: {
   unsupportedBridgeProtocol: BridgeProtocol,
-|}) {
+}) {
   const {version, minNpmVersion, maxNpmVersion} = unsupportedBridgeProtocol;
 
   let instructions;
diff --git a/packages/react-devtools-shared/src/devtools/views/UnsupportedVersionDialog.js b/packages/react-devtools-shared/src/devtools/views/UnsupportedVersionDialog.js
index 31da80c0584ee..0cd383430bd7a 100644
--- a/packages/react-devtools-shared/src/devtools/views/UnsupportedVersionDialog.js
+++ b/packages/react-devtools-shared/src/devtools/views/UnsupportedVersionDialog.js
@@ -18,7 +18,7 @@ import styles from './UnsupportedVersionDialog.css';
 
 type DAILOG_STATE = 'dialog-not-shown' | 'show-dialog' | 'dialog-shown';
 
-export default function UnsupportedVersionDialog(_: {||}) {
+export default function UnsupportedVersionDialog(_: {}) {
   const {dispatch} = useContext(ModalDialogContext);
   const store = useContext(StoreContext);
   const [state, setState] = useState<DAILOG_STATE>('dialog-not-shown');
@@ -54,7 +54,7 @@ export default function UnsupportedVersionDialog(_: {||}) {
   return null;
 }
 
-function DialogContent(_: {||}) {
+function DialogContent(_: {}) {
   return (
     <Fragment>
       <div className={styles.Row}>
diff --git a/packages/react-devtools-shared/src/devtools/views/WarnIfLegacyBackendDetected.js b/packages/react-devtools-shared/src/devtools/views/WarnIfLegacyBackendDetected.js
index 4bc539d8975cd..7e2307b329805 100644
--- a/packages/react-devtools-shared/src/devtools/views/WarnIfLegacyBackendDetected.js
+++ b/packages/react-devtools-shared/src/devtools/views/WarnIfLegacyBackendDetected.js
@@ -14,7 +14,7 @@ import {ModalDialogContext} from './ModalDialog';
 
 import styles from './WarnIfLegacyBackendDetected.css';
 
-export default function WarnIfLegacyBackendDetected(_: {||}) {
+export default function WarnIfLegacyBackendDetected(_: {}): null {
   const bridge = useContext(BridgeContext);
   const {dispatch} = useContext(ModalDialogContext);
 
@@ -75,7 +75,7 @@ export default function WarnIfLegacyBackendDetected(_: {||}) {
   return null;
 }
 
-function InvalidBackendDetected(_: {||}) {
+function InvalidBackendDetected(_: {}) {
   return (
     <Fragment>
       <p>Either upgrade React or install React DevTools v3:</p>
diff --git a/packages/react-devtools-shared/src/devtools/views/context.js b/packages/react-devtools-shared/src/devtools/views/context.js
index 169811b7b901b..6f8f8ae4965e5 100644
--- a/packages/react-devtools-shared/src/devtools/views/context.js
+++ b/packages/react-devtools-shared/src/devtools/views/context.js
@@ -21,10 +21,10 @@ BridgeContext.displayName = 'BridgeContext';
 export const StoreContext = createContext<Store>(((null: any): Store));
 StoreContext.displayName = 'StoreContext';
 
-export type ContextMenuContextType = {|
+export type ContextMenuContextType = {
   isEnabledForInspectedElement: boolean,
   viewAttributeSourceFunction: ViewAttributeSource | null,
-|};
+};
 
 export const ContextMenuContext = createContext<ContextMenuContextType>({
   isEnabledForInspectedElement: false,
@@ -32,14 +32,14 @@ export const ContextMenuContext = createContext<ContextMenuContextType>({
 });
 ContextMenuContext.displayName = 'ContextMenuContext';
 
-export type OptionsContextType = {|
+export type OptionsContextType = {
   readOnly: boolean,
   hideSettings: boolean,
   hideToggleErrorAction: boolean,
   hideToggleSuspenseAction: boolean,
   hideLogAction: boolean,
   hideViewSourceAction: boolean,
-|};
+};
 
 export const OptionsContext = createContext<OptionsContextType>({
   readOnly: false,
diff --git a/packages/react-devtools-shared/src/devtools/views/hooks.js b/packages/react-devtools-shared/src/devtools/views/hooks.js
index a4f51b461ca64..8366a221611fe 100644
--- a/packages/react-devtools-shared/src/devtools/views/hooks.js
+++ b/packages/react-devtools-shared/src/devtools/views/hooks.js
@@ -23,25 +23,25 @@ import {
 import {StoreContext, BridgeContext} from './context';
 import {sanitizeForParse, smartParse, smartStringify} from '../utils';
 
-type ACTION_RESET = {|
+type ACTION_RESET = {
   type: 'RESET',
   externalValue: any,
-|};
-type ACTION_UPDATE = {|
+};
+type ACTION_UPDATE = {
   type: 'UPDATE',
   editableValue: any,
   externalValue: any,
-|};
+};
 
 type UseEditableValueAction = ACTION_RESET | ACTION_UPDATE;
 type UseEditableValueDispatch = (action: UseEditableValueAction) => void;
-type UseEditableValueState = {|
+type UseEditableValueState = {
   editableValue: any,
   externalValue: any,
   hasPendingChanges: boolean,
   isValid: boolean,
   parsedValue: any,
-|};
+};
 
 function useEditableValueReducer(state, action) {
   switch (action.type) {
@@ -271,10 +271,10 @@ export function useModalDismissSignal(
 export function useSubscription<Value>({
   getCurrentValue,
   subscribe,
-}: {|
+}: {
   getCurrentValue: () => Value,
   subscribe: (callback: Function) => () => void,
-|}): Value {
+}): Value {
   const [state, setState] = useState(() => ({
     getCurrentValue,
     subscribe,
@@ -329,7 +329,10 @@ export function useSubscription<Value>({
   return state.value;
 }
 
-export function useHighlightNativeElement() {
+export function useHighlightNativeElement(): {
+  clearHighlightNativeElement: () => void,
+  highlightNativeElement: (id: number) => void,
+} {
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 
diff --git a/packages/react-devtools-shared/src/dynamicImportCache.js b/packages/react-devtools-shared/src/dynamicImportCache.js
index b31d9602c6b81..3e6c2f262837a 100644
--- a/packages/react-devtools-shared/src/dynamicImportCache.js
+++ b/packages/react-devtools-shared/src/dynamicImportCache.js
@@ -17,20 +17,20 @@ const Pending = 0;
 const Resolved = 1;
 const Rejected = 2;
 
-type PendingRecord = {|
+type PendingRecord = {
   status: 0,
   value: Wakeable,
-|};
+};
 
-type ResolvedRecord<T> = {|
+type ResolvedRecord<T> = {
   status: 1,
   value: T,
-|};
+};
 
-type RejectedRecord = {|
+type RejectedRecord = {
   status: 2,
   value: null,
-|};
+};
 
 type Record<T> = PendingRecord | ResolvedRecord<T> | RejectedRecord;
 
diff --git a/packages/react-devtools-shared/src/hook.js b/packages/react-devtools-shared/src/hook.js
index 8adbb7534a254..4ebec51074bd2 100644
--- a/packages/react-devtools-shared/src/hook.js
+++ b/packages/react-devtools-shared/src/hook.js
@@ -12,7 +12,7 @@ import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevToo
 import type {DevToolsHook} from 'react-devtools-shared/src/backend/types';
 
 import {
-  patch as patchConsole,
+  patchConsoleUsingWindowValues,
   registerRenderer as registerRendererWithConsole,
 } from './backend/console';
 
@@ -228,7 +228,15 @@ export function installHook(target: any): DevToolsHook | null {
     hideConsoleLogsInStrictMode: boolean,
     browserTheme: BrowserTheme,
   }) {
-    const overrideConsoleMethods = ['error', 'trace', 'warn', 'log'];
+    const overrideConsoleMethods = [
+      'error',
+      'group',
+      'groupCollapsed',
+      'info',
+      'log',
+      'trace',
+      'warn',
+    ];
 
     if (unpatchFn !== null) {
       // Don't patch twice.
@@ -335,16 +343,6 @@ export function installHook(target: any): DevToolsHook | null {
     // (See comments in the try/catch below for more context on inlining.)
     if (!__TEST__ && !__EXTENSION__) {
       try {
-        const appendComponentStack =
-          window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ !== false;
-        const breakOnConsoleErrors =
-          window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ === true;
-        const showInlineWarningsAndErrors =
-          window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ !== false;
-        const hideConsoleLogsInStrictMode =
-          window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ === true;
-        const browserTheme = window.__REACT_DEVTOOLS_BROWSER_THEME__;
-
         // The installHook() function is injected by being stringified in the browser,
         // so imports outside of this function do not get included.
         //
@@ -353,13 +351,7 @@ export function installHook(target: any): DevToolsHook | null {
         // and the object itself will be undefined as well for the reasons mentioned above,
         // so we use try/catch instead.
         registerRendererWithConsole(renderer);
-        patchConsole({
-          appendComponentStack,
-          breakOnConsoleErrors,
-          showInlineWarningsAndErrors,
-          hideConsoleLogsInStrictMode,
-          browserTheme,
-        });
+        patchConsoleUsingWindowValues();
       } catch (error) {}
     }
 
diff --git a/packages/react-devtools-shared/src/hookNamesCache.js b/packages/react-devtools-shared/src/hookNamesCache.js
index c992f64cf97b2..fa288522f3c16 100644
--- a/packages/react-devtools-shared/src/hookNamesCache.js
+++ b/packages/react-devtools-shared/src/hookNamesCache.js
@@ -27,20 +27,20 @@ const Pending = 0;
 const Resolved = 1;
 const Rejected = 2;
 
-type PendingRecord = {|
+type PendingRecord = {
   status: 0,
   value: Wakeable,
-|};
+};
 
-type ResolvedRecord<T> = {|
+type ResolvedRecord<T> = {
   status: 1,
   value: T,
-|};
+};
 
-type RejectedRecord = {|
+type RejectedRecord = {
   status: 2,
   value: null,
-|};
+};
 
 type Record<T> = PendingRecord | ResolvedRecord<T> | RejectedRecord;
 
diff --git a/packages/react-devtools-shared/src/hooks/SourceMapConsumer.js b/packages/react-devtools-shared/src/hooks/SourceMapConsumer.js
index 53c0e8c0a57a6..3bb955005ba8a 100644
--- a/packages/react-devtools-shared/src/hooks/SourceMapConsumer.js
+++ b/packages/react-devtools-shared/src/hooks/SourceMapConsumer.js
@@ -16,21 +16,21 @@ import type {
   MixedSourceMap,
 } from './SourceMapTypes';
 
-type SearchPosition = {|
+type SearchPosition = {
   columnNumber: number,
   lineNumber: number,
-|};
+};
 
-type ResultPosition = {|
+type ResultPosition = {
   column: number,
   line: number,
   sourceContent: string,
   sourceURL: string,
-|};
+};
 
-export type SourceMapConsumerType = {|
+export type SourceMapConsumerType = {
   originalPositionFor: SearchPosition => ResultPosition,
-|};
+};
 
 type Mappings = Array<Array<Array<number>>>;
 
@@ -138,14 +138,14 @@ function BasicSourceMapConsumer(sourceMapJSON: BasicSourceMap) {
   }: any): SourceMapConsumerType);
 }
 
-type Section = {|
+type Section = {
   +generatedColumn: number,
   +generatedLine: number,
   +map: MixedSourceMap,
 
   // Lazily parsed only when/as the section is needed.
   sourceMapConsumer: SourceMapConsumerType | null,
-|};
+};
 
 function IndexedSourceMapConsumer(sourceMapJSON: IndexSourceMap) {
   let lastOffset = {
diff --git a/packages/react-devtools-shared/src/hooks/SourceMapMetadataConsumer.js b/packages/react-devtools-shared/src/hooks/SourceMapMetadataConsumer.js
index 4882afba9a9fb..acf9a2c1d70e4 100644
--- a/packages/react-devtools-shared/src/hooks/SourceMapMetadataConsumer.js
+++ b/packages/react-devtools-shared/src/hooks/SourceMapMetadataConsumer.js
@@ -83,10 +83,10 @@ export class SourceMapMetadataConsumer {
     line,
     column,
     source,
-  }: {|
+  }: {
     ...Position,
     +source: ?string,
-  |}): ?string {
+  }): ?string {
     if (source == null) {
       return null;
     }
diff --git a/packages/react-devtools-shared/src/hooks/SourceMapTypes.js b/packages/react-devtools-shared/src/hooks/SourceMapTypes.js
index 744cc7d309251..721dd4ca0651a 100644
--- a/packages/react-devtools-shared/src/hooks/SourceMapTypes.js
+++ b/packages/react-devtools-shared/src/hooks/SourceMapTypes.js
@@ -15,7 +15,7 @@ export type ReactSourcesArray = $ReadOnlyArray<?ReactSourceMetadata>;
 export type FBSourceMetadata = [?{...}, ?ReactSourceMetadata];
 export type FBSourcesArray = $ReadOnlyArray<?FBSourceMetadata>;
 
-export type BasicSourceMap = {|
+export type BasicSourceMap = {
   +file?: string,
   +mappings: string,
   +names: Array<string>,
@@ -25,7 +25,7 @@ export type BasicSourceMap = {|
   +version: number,
   +x_facebook_sources?: FBSourcesArray,
   +x_react_sources?: ReactSourcesArray,
-|};
+};
 
 export type IndexSourceMapSection = {
   map: IndexSourceMap | BasicSourceMap,
@@ -37,7 +37,7 @@ export type IndexSourceMapSection = {
   ...
 };
 
-export type IndexSourceMap = {|
+export type IndexSourceMap = {
   +file?: string,
   +mappings?: void, // avoids SourceMap being a disjoint union
   +sourcesContent?: void,
@@ -45,6 +45,6 @@ export type IndexSourceMap = {|
   +version: number,
   +x_facebook_sources?: FBSourcesArray,
   +x_react_sources?: ReactSourcesArray,
-|};
+};
 
 export type MixedSourceMap = IndexSourceMap | BasicSourceMap;
diff --git a/packages/react-devtools-shared/src/hooks/astUtils.js b/packages/react-devtools-shared/src/hooks/astUtils.js
index 27db408c0500d..da04a92018147 100644
--- a/packages/react-devtools-shared/src/hooks/astUtils.js
+++ b/packages/react-devtools-shared/src/hooks/astUtils.js
@@ -8,15 +8,20 @@
  */
 
 import {withSyncPerfMeasurements} from 'react-devtools-shared/src/PerformanceLoggingUtils';
-import traverse, {NodePath, Node} from '@babel/traverse';
-import {File} from '@babel/types';
+import traverse from '@babel/traverse';
 
 import type {HooksNode} from 'react-debug-tools/src/ReactDebugHooks';
 
-export type Position = {|
+// Missing types in @babel/traverse
+type NodePath = any;
+type Node = any;
+// Missing types in @babel/types
+type File = any;
+
+export type Position = {
   line: number,
   column: number,
-|};
+};
 
 export type SourceFileASTWithHookDetails = {
   sourceFileAST: File,
@@ -356,7 +361,7 @@ function getPotentialHookDeclarationsFromAST(sourceAST: File): NodePath[] {
  */
 export function getHookNamesMappingFromAST(
   sourceAST: File,
-): $ReadOnlyArray<{|name: string, start: Position|}> {
+): $ReadOnlyArray<{name: string, start: Position}> {
   const hookStack = [];
   const hookNames = [];
   const pushFrame = (name: string, node: Node) => {
diff --git a/packages/react-devtools-shared/src/hooks/generateHookMap.js b/packages/react-devtools-shared/src/hooks/generateHookMap.js
index d57bbb6063854..d3633412dd0b6 100644
--- a/packages/react-devtools-shared/src/hooks/generateHookMap.js
+++ b/packages/react-devtools-shared/src/hooks/generateHookMap.js
@@ -9,17 +9,19 @@
 
 import {getHookNamesMappingFromAST} from './astUtils';
 import {encode, decode} from 'sourcemap-codec';
-import {File} from '@babel/types';
 
-export type HookMap = {|
+// Missing types in @babel/types
+type File = any;
+
+export type HookMap = {
   names: $ReadOnlyArray<string>,
   mappings: HookMapMappings,
-|};
+};
 
-export type EncodedHookMap = {|
+export type EncodedHookMap = {
   names: $ReadOnlyArray<string>,
   mappings: string,
-|};
+};
 
 // See generateHookMap below for more details on formatting
 export type HookMapEntry = [
diff --git a/packages/react-devtools-shared/src/hooks/getHookNameForLocation.js b/packages/react-devtools-shared/src/hooks/getHookNameForLocation.js
index c65c5fb5a8024..89264c493858b 100644
--- a/packages/react-devtools-shared/src/hooks/getHookNameForLocation.js
+++ b/packages/react-devtools-shared/src/hooks/getHookNameForLocation.js
@@ -91,7 +91,7 @@ function binSearch<T>(
     location: Position,
     items: T[],
     index: number,
-  ) => {|index: number | null, direction: number|},
+  ) => {index: number | null, direction: number},
 ): T | null {
   let count = items.length;
   let index = 0;
@@ -141,7 +141,7 @@ function compareLinePositions(
   location: Position,
   mappings: HookMapMappings,
   index: number,
-): {|index: number | null, direction: number|} {
+): {index: number | null, direction: number} {
   const startIndex = index;
   const start = mappings[startIndex];
   if (start == null) {
@@ -200,7 +200,7 @@ function compareColumnPositions(
   location: Position,
   line: HookMapLine,
   index: number,
-): {|index: number | null, direction: number|} {
+): {index: number | null, direction: number} {
   const startIndex = index;
   const start = line[index];
   if (start == null) {
diff --git a/packages/react-devtools-shared/src/hooks/parseHookNames/loadSourceAndMetadata.js b/packages/react-devtools-shared/src/hooks/parseHookNames/loadSourceAndMetadata.js
index 640e916a09ff1..3e08302c157b8 100644
--- a/packages/react-devtools-shared/src/hooks/parseHookNames/loadSourceAndMetadata.js
+++ b/packages/react-devtools-shared/src/hooks/parseHookNames/loadSourceAndMetadata.js
@@ -68,7 +68,7 @@ const FETCH_OPTIONS = {cache: 'force-cache'};
 
 const MAX_SOURCE_LENGTH = 100_000_000;
 
-export type HookSourceAndMetadata = {|
+export type HookSourceAndMetadata = {
   // Generated by react-debug-tools.
   hookSource: HookSource,
 
@@ -86,7 +86,7 @@ export type HookSourceAndMetadata = {|
   // External URL of source map.
   // Sources without source maps (or with inline source maps) won't have this.
   sourceMapURL: string | null,
-|};
+};
 
 export type LocationKeyToHookSourceAndMetadata = Map<
   string,
diff --git a/packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.js b/packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.js
index 7eada16a7d9e0..ba3c1e096b67b 100644
--- a/packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.js
+++ b/packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.js
@@ -33,7 +33,7 @@ import type {HookNames, LRUCache} from 'react-devtools-shared/src/types';
 
 type AST = mixed;
 
-type HookParsedMetadata = {|
+type HookParsedMetadata = {
   // API for consuming metadfata present in extended source map.
   metadataConsumer: SourceMapMetadataConsumer | null,
 
@@ -55,24 +55,24 @@ type HookParsedMetadata = {|
 
   // Alternate APIs from source-map for parsing source maps (if detected).
   sourceMapConsumer: SourceMapConsumerType | null,
-|};
+};
 
 type LocationKeyToHookParsedMetadata = Map<string, HookParsedMetadata>;
 
-type CachedRuntimeCodeMetadata = {|
+type CachedRuntimeCodeMetadata = {
   metadataConsumer: SourceMapMetadataConsumer | null,
   sourceMapConsumer: SourceMapConsumerType | null,
-|};
+};
 
 const runtimeURLToMetadataCache: LRUCache<
   string,
   CachedRuntimeCodeMetadata,
 > = new LRU({max: 50});
 
-type CachedSourceCodeMetadata = {|
+type CachedSourceCodeMetadata = {
   originalSourceAST: AST,
   originalSourceCode: string,
-|};
+};
 
 const originalURLToMetadataCache: LRUCache<
   string,
diff --git a/packages/react-devtools-shared/src/hydration.js b/packages/react-devtools-shared/src/hydration.js
index 0b936462d5fe2..4d3d9862b75ad 100644
--- a/packages/react-devtools-shared/src/hydration.js
+++ b/packages/react-devtools-shared/src/hydration.js
@@ -19,18 +19,18 @@ import {
 import type {DehydratedData} from 'react-devtools-shared/src/devtools/views/Components/types';
 
 export const meta = {
-  inspectable: Symbol('inspectable'),
-  inspected: Symbol('inspected'),
-  name: Symbol('name'),
-  preview_long: Symbol('preview_long'),
-  preview_short: Symbol('preview_short'),
-  readonly: Symbol('readonly'),
-  size: Symbol('size'),
-  type: Symbol('type'),
-  unserializable: Symbol('unserializable'),
+  inspectable: (Symbol('inspectable'): symbol),
+  inspected: (Symbol('inspected'): symbol),
+  name: (Symbol('name'): symbol),
+  preview_long: (Symbol('preview_long'): symbol),
+  preview_short: (Symbol('preview_short'): symbol),
+  readonly: (Symbol('readonly'): symbol),
+  size: (Symbol('size'): symbol),
+  type: (Symbol('type'): symbol),
+  unserializable: (Symbol('unserializable'): symbol),
 };
 
-export type Dehydrated = {|
+export type Dehydrated = {
   inspectable: boolean,
   name: string | null,
   preview_long: string | null,
@@ -38,7 +38,7 @@ export type Dehydrated = {|
   readonly?: boolean,
   size?: number,
   type: string,
-|};
+};
 
 // Typed arrays and other complex iteratable objects (e.g. Map, Set, ImmutableJS) need special handling.
 // These objects can't be serialized without losing type information,
@@ -396,7 +396,7 @@ export function hydrate(
       parent[last] = undefined;
     } else {
       // Replace the string keys with Symbols so they're non-enumerable.
-      const replaced: {[key: Symbol]: boolean | string, ...} = {};
+      const replaced: {[key: symbol]: boolean | string, ...} = {};
       replaced[meta.inspectable] = !!value.inspectable;
       replaced[meta.inspected] = false;
       replaced[meta.name] = value.name;
diff --git a/packages/react-devtools-shared/src/inspectedElementCache.js b/packages/react-devtools-shared/src/inspectedElementCache.js
index b7f08ffa523a1..4ecb98ffab5ea 100644
--- a/packages/react-devtools-shared/src/inspectedElementCache.js
+++ b/packages/react-devtools-shared/src/inspectedElementCache.js
@@ -26,20 +26,20 @@ const Pending = 0;
 const Resolved = 1;
 const Rejected = 2;
 
-type PendingRecord = {|
+type PendingRecord = {
   status: 0,
   value: Wakeable,
-|};
+};
 
-type ResolvedRecord<T> = {|
+type ResolvedRecord<T> = {
   status: 1,
   value: T,
-|};
+};
 
-type RejectedRecord = {|
+type RejectedRecord = {
   status: 2,
   value: Error | string,
-|};
+};
 
 type Record<T> = PendingRecord | ResolvedRecord<T> | RejectedRecord;
 
diff --git a/packages/react-devtools-shared/src/inspectedElementMutableSource.js b/packages/react-devtools-shared/src/inspectedElementMutableSource.js
index bb687bf98d7ac..96021dd2ae25e 100644
--- a/packages/react-devtools-shared/src/inspectedElementMutableSource.js
+++ b/packages/react-devtools-shared/src/inspectedElementMutableSource.js
@@ -58,12 +58,12 @@ export function inspectElement({
   element,
   path,
   rendererID,
-}: {|
+}: {
   bridge: FrontendBridge,
   element: Element,
   path: Path | null,
   rendererID: number,
-|}): Promise<InspectElementReturnType> {
+}): Promise<InspectElementReturnType> {
   const {id} = element;
 
   // This could indicate that the DevTools UI has been closed and reopened.
diff --git a/packages/react-devtools-shared/src/node_modules/react-window/src/VariableSizeGrid.js b/packages/react-devtools-shared/src/node_modules/react-window/src/VariableSizeGrid.js
index 46d59521f1978..2ce4f2d9a04ce 100644
--- a/packages/react-devtools-shared/src/node_modules/react-window/src/VariableSizeGrid.js
+++ b/packages/react-devtools-shared/src/node_modules/react-window/src/VariableSizeGrid.js
@@ -19,7 +19,7 @@ type ItemMetadata = {|
   offset: number,
   size: number,
 |};
-type ItemMetadataMap = { [index: number]: ItemMetadata };
+type ItemMetadataMap = { [index: number]: ItemMetadata, ... };
 type InstanceProps = {|
   columnMetadataMap: ItemMetadataMap,
   estimatedColumnWidth: number,
diff --git a/packages/react-devtools-shared/src/node_modules/react-window/src/VariableSizeList.js b/packages/react-devtools-shared/src/node_modules/react-window/src/VariableSizeList.js
index f4ad103231017..887641b010eef 100644
--- a/packages/react-devtools-shared/src/node_modules/react-window/src/VariableSizeList.js
+++ b/packages/react-devtools-shared/src/node_modules/react-window/src/VariableSizeList.js
@@ -18,7 +18,7 @@ type ItemMetadata = {|
   size: number,
 |};
 type InstanceProps = {|
-  itemMetadataMap: { [index: number]: ItemMetadata },
+  itemMetadataMap: { [index: number]: ItemMetadata, ... },
   estimatedItemSize: number,
   lastMeasuredIndex: number,
 |};
diff --git a/packages/react-devtools-shared/src/node_modules/react-window/src/createGridComponent.js b/packages/react-devtools-shared/src/node_modules/react-window/src/createGridComponent.js
index 12d1a4cc9ebd6..8f00a7929dc24 100644
--- a/packages/react-devtools-shared/src/node_modules/react-window/src/createGridComponent.js
+++ b/packages/react-devtools-shared/src/node_modules/react-window/src/createGridComponent.js
@@ -613,6 +613,7 @@ export default function createGridComponent({
       } else {
         itemStyleCache[key] = style = {
           position: 'absolute',
+          // $FlowFixMe computed properties are unsupported
           [direction === 'rtl' ? 'right' : 'left']: getColumnOffset(
             this.props,
             columnIndex,
diff --git a/packages/react-devtools-shared/src/node_modules/react-window/src/createListComponent.js b/packages/react-devtools-shared/src/node_modules/react-window/src/createListComponent.js
index bf9c3e902a96f..6fb6f2d540a21 100644
--- a/packages/react-devtools-shared/src/node_modules/react-window/src/createListComponent.js
+++ b/packages/react-devtools-shared/src/node_modules/react-window/src/createListComponent.js
@@ -469,6 +469,7 @@ export default function createListComponent({
 
         itemStyleCache[index] = style = {
           position: 'absolute',
+          // $FlowFixMe computed properties are unsupported
           [direction === 'rtl' ? 'right' : 'left']: isHorizontal ? offset : 0,
           top: !isHorizontal ? offset : 0,
           height: !isHorizontal ? size : '100%',
diff --git a/packages/react-devtools-shared/src/registerDevToolsEventLogger.js b/packages/react-devtools-shared/src/registerDevToolsEventLogger.js
index 5e1aeba0cd639..4b044cf086119 100644
--- a/packages/react-devtools-shared/src/registerDevToolsEventLogger.js
+++ b/packages/react-devtools-shared/src/registerDevToolsEventLogger.js
@@ -15,9 +15,9 @@ import {enableLogger} from 'react-devtools-feature-flags';
 let loggingIFrame = null;
 let missedEvents = [];
 
-type LoggerContext = {|
+type LoggerContext = {
   page_url: ?string,
-|};
+};
 
 export function registerDevToolsEventLogger(
   surface: string,
@@ -31,6 +31,7 @@ export function registerDevToolsEventLogger(
         let metadata = null;
         if (event.metadata != null) {
           metadata = event.metadata;
+          // $FlowFixMe: metadata is not writable and nullable
           delete event.metadata;
         }
         loggingIFrame.contentWindow.postMessage(
@@ -42,7 +43,8 @@ export function registerDevToolsEventLogger(
               version: process.env.DEVTOOLS_VERSION,
               metadata: metadata !== null ? JSON.stringify(metadata) : '',
               ...(fetchAdditionalContext != null
-                ? await fetchAdditionalContext()
+                ? // $FlowFixMe
+                  await fetchAdditionalContext()
                 : {}),
             },
           },
diff --git a/packages/react-devtools-shared/src/types.js b/packages/react-devtools-shared/src/types.js
index ca0943ac9234d..30bf480027daf 100644
--- a/packages/react-devtools-shared/src/types.js
+++ b/packages/react-devtools-shared/src/types.js
@@ -7,11 +7,11 @@
  * @flow
  */
 
-export type Wall = {|
+export type Wall = {
   // `listen` returns the "unlisten" function.
   listen: (fn: Function) => Function,
   send: (event: string, payload: any, transferable?: Array<any>) => void,
-|};
+};
 
 // WARNING
 // The values below are referenced by ComponentFilters (which are saved via localStorage).
@@ -52,26 +52,26 @@ export type ComponentFilterType = 1 | 2 | 3 | 4;
 
 // Hide all elements of types in this Set.
 // We hide host components only by default.
-export type ElementTypeComponentFilter = {|
+export type ElementTypeComponentFilter = {
   isEnabled: boolean,
   type: 1,
   value: ElementType,
-|};
+};
 
 // Hide all elements with displayNames or paths matching one or more of the RegExps in this Set.
 // Path filters are only used when elements include debug source location.
-export type RegExpComponentFilter = {|
+export type RegExpComponentFilter = {
   isEnabled: boolean,
   isValid: boolean,
   type: 2 | 3,
   value: string,
-|};
+};
 
-export type BooleanComponentFilter = {|
+export type BooleanComponentFilter = {
   isEnabled: boolean,
   isValid: boolean,
   type: 4,
-|};
+};
 
 export type ComponentFilter =
   | BooleanComponentFilter
@@ -85,21 +85,21 @@ export type HookName = string | null;
 export type HookSourceLocationKey = string;
 export type HookNames = Map<HookSourceLocationKey, HookName>;
 
-export type LRUCache<K, V> = {|
+export type LRUCache<K, V> = {
   del: (key: K) => void,
   get: (key: K) => V,
   has: (key: K) => boolean,
   reset: () => void,
   set: (key: K, value: V) => void,
-|};
+};
 
-export type StyleXPlugin = {|
+export type StyleXPlugin = {
   sources: Array<string>,
   resolvedStyles: Object,
-|};
+};
 
-export type Plugins = {|
+export type Plugins = {
   stylex: StyleXPlugin | null,
-|};
+};
 
 export const StrictMode = 1;
diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js
index 77a75dd2c672e..36063f4f0e0c4 100644
--- a/packages/react-devtools-shared/src/utils.js
+++ b/packages/react-devtools-shared/src/utils.js
@@ -34,16 +34,14 @@ import {
   TREE_OPERATION_SET_SUBTREE_MODE,
   TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS,
   TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
-} from './constants';
-import {ElementTypeRoot} from 'react-devtools-shared/src/types';
-import {
-  LOCAL_STORAGE_FILTER_PREFERENCES_KEY,
+  LOCAL_STORAGE_COMPONENT_FILTER_PREFERENCES_KEY,
   LOCAL_STORAGE_OPEN_IN_EDITOR_URL,
   LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS,
-  LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY,
+  LOCAL_STORAGE_SHOULD_APPEND_COMPONENT_STACK_KEY,
   LOCAL_STORAGE_SHOW_INLINE_WARNINGS_AND_ERRORS_KEY,
   LOCAL_STORAGE_HIDE_CONSOLE_LOGS_IN_STRICT_MODE,
 } from './constants';
+import {ElementTypeRoot} from 'react-devtools-shared/src/types';
 import {ComponentFilterElementType, ElementTypeHostComponent} from './types';
 import {
   ElementTypeClass,
@@ -67,8 +65,8 @@ const encodedStringCache: LRUCache<string, Array<number>> = new LRU({
 });
 
 export function alphaSortKeys(
-  a: string | number | Symbol,
-  b: string | number | Symbol,
+  a: string | number | symbol,
+  b: string | number | symbol,
 ): number {
   if (a.toString() > b.toString()) {
     return 1;
@@ -81,7 +79,7 @@ export function alphaSortKeys(
 
 export function getAllEnumerableKeys(
   obj: Object,
-): Set<string | number | Symbol> {
+): Set<string | number | symbol> {
   const keys = new Set();
   let current = obj;
   while (current != null) {
@@ -108,9 +106,9 @@ export function getWrappedDisplayName(
   wrapperName: string,
   fallbackName?: string,
 ): string {
+  const displayName = (outerType: any).displayName;
   return (
-    (outerType: any).displayName ||
-    `${wrapperName}(${getDisplayName(innerType, fallbackName)})`
+    displayName || `${wrapperName}(${getDisplayName(innerType, fallbackName)})`
   );
 }
 
@@ -324,7 +322,9 @@ export function getDefaultComponentFilters(): Array<ComponentFilter> {
 
 export function getSavedComponentFilters(): Array<ComponentFilter> {
   try {
-    const raw = localStorageGetItem(LOCAL_STORAGE_FILTER_PREFERENCES_KEY);
+    const raw = localStorageGetItem(
+      LOCAL_STORAGE_COMPONENT_FILTER_PREFERENCES_KEY,
+    );
     if (raw != null) {
       return JSON.parse(raw);
     }
@@ -332,87 +332,48 @@ export function getSavedComponentFilters(): Array<ComponentFilter> {
   return getDefaultComponentFilters();
 }
 
-export function saveComponentFilters(
+export function setSavedComponentFilters(
   componentFilters: Array<ComponentFilter>,
 ): void {
   localStorageSetItem(
-    LOCAL_STORAGE_FILTER_PREFERENCES_KEY,
+    LOCAL_STORAGE_COMPONENT_FILTER_PREFERENCES_KEY,
     JSON.stringify(componentFilters),
   );
 }
 
-export function getAppendComponentStack(): boolean {
-  try {
-    const raw = localStorageGetItem(LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY);
-    if (raw != null) {
-      return JSON.parse(raw);
-    }
-  } catch (error) {}
-  return true;
+function parseBool(s: ?string): ?boolean {
+  if (s === 'true') {
+    return true;
+  }
+  if (s === 'false') {
+    return false;
+  }
 }
 
-export function setAppendComponentStack(value: boolean): void {
-  localStorageSetItem(
-    LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY,
-    JSON.stringify(value),
+export function getAppendComponentStack(): boolean {
+  const raw = localStorageGetItem(
+    LOCAL_STORAGE_SHOULD_APPEND_COMPONENT_STACK_KEY,
   );
+  return parseBool(raw) ?? true;
 }
 
 export function getBreakOnConsoleErrors(): boolean {
-  try {
-    const raw = localStorageGetItem(
-      LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS,
-    );
-    if (raw != null) {
-      return JSON.parse(raw);
-    }
-  } catch (error) {}
-  return false;
-}
-
-export function setBreakOnConsoleErrors(value: boolean): void {
-  localStorageSetItem(
-    LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS,
-    JSON.stringify(value),
-  );
+  const raw = localStorageGetItem(LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS);
+  return parseBool(raw) ?? false;
 }
 
 export function getHideConsoleLogsInStrictMode(): boolean {
-  try {
-    const raw = localStorageGetItem(
-      LOCAL_STORAGE_HIDE_CONSOLE_LOGS_IN_STRICT_MODE,
-    );
-    if (raw != null) {
-      return JSON.parse(raw);
-    }
-  } catch (error) {}
-  return false;
-}
-
-export function sethideConsoleLogsInStrictMode(value: boolean): void {
-  localStorageSetItem(
+  const raw = localStorageGetItem(
     LOCAL_STORAGE_HIDE_CONSOLE_LOGS_IN_STRICT_MODE,
-    JSON.stringify(value),
   );
+  return parseBool(raw) ?? false;
 }
 
 export function getShowInlineWarningsAndErrors(): boolean {
-  try {
-    const raw = localStorageGetItem(
-      LOCAL_STORAGE_SHOW_INLINE_WARNINGS_AND_ERRORS_KEY,
-    );
-    if (raw != null) {
-      return JSON.parse(raw);
-    }
-  } catch (error) {}
-  return true;
-}
-
-export function setShowInlineWarningsAndErrors(value: boolean): void {
-  localStorageSetItem(
+  const raw = localStorageGetItem(
     LOCAL_STORAGE_SHOW_INLINE_WARNINGS_AND_ERRORS_KEY,
-    JSON.stringify(value),
   );
+  return parseBool(raw) ?? true;
 }
 
 export function getDefaultOpenInEditorURL(): string {
diff --git a/packages/react-devtools-shell/src/app/DeeplyNestedComponents/index.js b/packages/react-devtools-shell/src/app/DeeplyNestedComponents/index.js
index 613914e8abfd1..03cc54c1500e1 100644
--- a/packages/react-devtools-shell/src/app/DeeplyNestedComponents/index.js
+++ b/packages/react-devtools-shell/src/app/DeeplyNestedComponents/index.js
@@ -36,7 +36,7 @@ function Nested() {
 
 const DeeplyNested = wrapWithNested(Nested, 100);
 
-export default function DeeplyNestedComponents() {
+export default function DeeplyNestedComponents(): React.Node {
   return (
     <Fragment>
       <h1>Deeply nested component</h1>
diff --git a/packages/react-devtools-shell/src/app/EditableProps/index.js b/packages/react-devtools-shell/src/app/EditableProps/index.js
index 306ac73b91a7c..ba92cf3fedf05 100644
--- a/packages/react-devtools-shell/src/app/EditableProps/index.js
+++ b/packages/react-devtools-shell/src/app/EditableProps/index.js
@@ -32,7 +32,7 @@ function reducer(state, action) {
   }
 }
 
-type StatefulFunctionProps = {|name: string|};
+type StatefulFunctionProps = {name: string};
 
 function StatefulFunction({name}: StatefulFunctionProps) {
   const [count, updateCount] = useState(0);
@@ -68,8 +68,8 @@ function StatefulFunction({name}: StatefulFunctionProps) {
 const BoolContext = createContext(true);
 BoolContext.displayName = 'BoolContext';
 
-type Props = {|name: string, toggle: boolean|};
-type State = {|cities: Array<string>, state: string|};
+type Props = {name: string, toggle: boolean};
+type State = {cities: Array<string>, state: string};
 
 class StatefulClass extends Component<Props, State> {
   static contextType = BoolContext;
@@ -102,7 +102,7 @@ class StatefulClass extends Component<Props, State> {
 const MemoizedStatefulClass = memo(StatefulClass);
 const MemoizedStatefulFunction = memo(StatefulFunction);
 
-const ForwardRef = forwardRef<{|name: string|}, HTMLUListElement>(
+const ForwardRef = forwardRef<{name: string}, HTMLUListElement>(
   ({name}, ref) => {
     const [count, updateCount] = useState(0);
     const debouncedCount = useDebounce(count, 1000);
@@ -122,7 +122,7 @@ const ForwardRef = forwardRef<{|name: string|}, HTMLUListElement>(
   },
 );
 
-export default function EditableProps() {
+export default function EditableProps(): React.Node {
   return (
     <Fragment>
       <h1>Editable props</h1>
diff --git a/packages/react-devtools-shell/src/app/ElementTypes/index.js b/packages/react-devtools-shell/src/app/ElementTypes/index.js
index 4b44a50a6653e..d105bff9e1d05 100644
--- a/packages/react-devtools-shell/src/app/ElementTypes/index.js
+++ b/packages/react-devtools-shell/src/app/ElementTypes/index.js
@@ -54,7 +54,7 @@ const LazyComponent = lazy(() =>
   }),
 );
 
-export default function ElementTypes() {
+export default function ElementTypes(): React.Node {
   return (
     <Profiler id="test" onRender={() => {}}>
       <Fragment>
diff --git a/packages/react-devtools-shell/src/app/ErrorBoundaries/index.js b/packages/react-devtools-shell/src/app/ErrorBoundaries/index.js
index 1a4fc7927c06c..df37534a69ada 100644
--- a/packages/react-devtools-shell/src/app/ErrorBoundaries/index.js
+++ b/packages/react-devtools-shell/src/app/ErrorBoundaries/index.js
@@ -53,7 +53,7 @@ function Component({label}) {
   return <div>{label}</div>;
 }
 
-export default function ErrorBoundaries() {
+export default function ErrorBoundaries(): React.Node {
   return (
     <Fragment>
       <h1>Nested error boundaries demo</h1>
diff --git a/packages/react-devtools-shell/src/app/Hydration/index.js b/packages/react-devtools-shell/src/app/Hydration/index.js
index 38347ec934fe5..1d5920223e5be 100644
--- a/packages/react-devtools-shell/src/app/Hydration/index.js
+++ b/packages/react-devtools-shell/src/app/Hydration/index.js
@@ -106,7 +106,7 @@ function useInnerBaz() {
   return count;
 }
 
-export default function Hydration() {
+export default function Hydration(): React.Node {
   return (
     <Fragment>
       <h1>Hydration</h1>
diff --git a/packages/react-devtools-shell/src/app/Iframe/index.js b/packages/react-devtools-shell/src/app/Iframe/index.js
index f4b562ee311db..50beadd137aa2 100644
--- a/packages/react-devtools-shell/src/app/Iframe/index.js
+++ b/packages/react-devtools-shell/src/app/Iframe/index.js
@@ -4,7 +4,7 @@ import * as React from 'react';
 import {Fragment} from 'react';
 import {createPortal} from 'react-dom';
 
-export default function Iframe() {
+export default function Iframe(): React.Node {
   return (
     <Fragment>
       <h2>Iframe</h2>
diff --git a/packages/react-devtools-shell/src/app/InlineWarnings/index.js b/packages/react-devtools-shell/src/app/InlineWarnings/index.js
index 964323a28a045..6b7b189f70174 100644
--- a/packages/react-devtools-shell/src/app/InlineWarnings/index.js
+++ b/packages/react-devtools-shell/src/app/InlineWarnings/index.js
@@ -155,7 +155,7 @@ function ComponentWithSymbolWarning() {
   return null;
 }
 
-export default function ErrorsAndWarnings() {
+export default function ErrorsAndWarnings(): React.Node {
   const [count, setCount] = useState(0);
   const handleClick = () => setCount(count + 1);
   return (
diff --git a/packages/react-devtools-shell/src/app/InspectableElements/CircularReferences.js b/packages/react-devtools-shell/src/app/InspectableElements/CircularReferences.js
index ffce696fa8ef3..5ebd362c0cc9b 100644
--- a/packages/react-devtools-shell/src/app/InspectableElements/CircularReferences.js
+++ b/packages/react-devtools-shell/src/app/InspectableElements/CircularReferences.js
@@ -18,7 +18,7 @@ const objectOne = {};
 const objectTwo = {objectOne};
 objectOne.objectTwo = objectTwo;
 
-export default function CircularReferences() {
+export default function CircularReferences(): React.Node {
   return <ChildComponent arrayOne={arrayOne} objectOne={objectOne} />;
 }
 
diff --git a/packages/react-devtools-shell/src/app/InspectableElements/Contexts.js b/packages/react-devtools-shell/src/app/InspectableElements/Contexts.js
index 39c03547fe9c7..700d76ada6df2 100644
--- a/packages/react-devtools-shell/src/app/InspectableElements/Contexts.js
+++ b/packages/react-devtools-shell/src/app/InspectableElements/Contexts.js
@@ -237,7 +237,7 @@ class ModernClassContextConsumerWithUpdates extends Component<any> {
   }
 }
 
-export default function Contexts() {
+export default function Contexts(): React.Node {
   return (
     <div>
       <h1>Contexts</h1>
diff --git a/packages/react-devtools-shell/src/app/InspectableElements/CustomHooks.js b/packages/react-devtools-shell/src/app/InspectableElements/CustomHooks.js
index c04496544540f..9b76deb01dd0d 100644
--- a/packages/react-devtools-shell/src/app/InspectableElements/CustomHooks.js
+++ b/packages/react-devtools-shell/src/app/InspectableElements/CustomHooks.js
@@ -114,7 +114,7 @@ function wrapWithHoc(Component) {
 }
 const HocWithHooks = wrapWithHoc(FunctionWithHooks);
 
-export default function CustomHooks() {
+export default function CustomHooks(): React.Node {
   return (
     <Fragment>
       <FunctionWithHooks />
diff --git a/packages/react-devtools-shell/src/app/InspectableElements/CustomObject.js b/packages/react-devtools-shell/src/app/InspectableElements/CustomObject.js
index c4557e5879a1f..a1a855ed340ea 100644
--- a/packages/react-devtools-shell/src/app/InspectableElements/CustomObject.js
+++ b/packages/react-devtools-shell/src/app/InspectableElements/CustomObject.js
@@ -16,7 +16,7 @@ class Custom {
   }
 }
 
-export default function CustomObject() {
+export default function CustomObject(): React.Node {
   return <ChildComponent customObject={new Custom()} />;
 }
 
diff --git a/packages/react-devtools-shell/src/app/InspectableElements/EdgeCaseObjects.js b/packages/react-devtools-shell/src/app/InspectableElements/EdgeCaseObjects.js
index b747f855dae48..5c3eb7e3d5f68 100644
--- a/packages/react-devtools-shell/src/app/InspectableElements/EdgeCaseObjects.js
+++ b/packages/react-devtools-shell/src/app/InspectableElements/EdgeCaseObjects.js
@@ -19,7 +19,7 @@ const objectWithNullProto = Object.create(null);
 objectWithNullProto.foo = 'abc';
 objectWithNullProto.bar = 123;
 
-export default function EdgeCaseObjects() {
+export default function EdgeCaseObjects(): React.Node {
   return (
     <ChildComponent
       objectWithModifiedHasOwnProperty={objectWithModifiedHasOwnProperty}
diff --git a/packages/react-devtools-shell/src/app/InspectableElements/InspectableElements.js b/packages/react-devtools-shell/src/app/InspectableElements/InspectableElements.js
index 1403ece9f6dbf..4c768ef389852 100644
--- a/packages/react-devtools-shell/src/app/InspectableElements/InspectableElements.js
+++ b/packages/react-devtools-shell/src/app/InspectableElements/InspectableElements.js
@@ -21,7 +21,7 @@ import SymbolKeys from './SymbolKeys';
 
 // TODO Add Immutable JS example
 
-export default function InspectableElements() {
+export default function InspectableElements(): React.Node {
   return (
     <Fragment>
       <h1>Inspectable elements</h1>
diff --git a/packages/react-devtools-shell/src/app/InspectableElements/NestedProps.js b/packages/react-devtools-shell/src/app/InspectableElements/NestedProps.js
index 16ccad8d32e73..02ce2c9144f64 100644
--- a/packages/react-devtools-shell/src/app/InspectableElements/NestedProps.js
+++ b/packages/react-devtools-shell/src/app/InspectableElements/NestedProps.js
@@ -19,7 +19,7 @@ const object = {
   null: null,
 };
 
-export default function ObjectProps() {
+export default function ObjectProps(): React.Node {
   return (
     <ChildComponent
       object={{
diff --git a/packages/react-devtools-shell/src/app/InspectableElements/SymbolKeys.js b/packages/react-devtools-shell/src/app/InspectableElements/SymbolKeys.js
index 3aae9c8837bc8..d8de4c86c4f67 100644
--- a/packages/react-devtools-shell/src/app/InspectableElements/SymbolKeys.js
+++ b/packages/react-devtools-shell/src/app/InspectableElements/SymbolKeys.js
@@ -69,7 +69,7 @@ const data = Object.create(base, {
   },
 });
 
-export default function SymbolKeys() {
+export default function SymbolKeys(): React.Node {
   return <ChildComponent data={data} />;
 }
 
diff --git a/packages/react-devtools-shell/src/app/InspectableElements/UnserializableProps.js b/packages/react-devtools-shell/src/app/InspectableElements/UnserializableProps.js
index f0f08b7d173c1..97d0ef18c8228 100644
--- a/packages/react-devtools-shell/src/app/InspectableElements/UnserializableProps.js
+++ b/packages/react-devtools-shell/src/app/InspectableElements/UnserializableProps.js
@@ -34,7 +34,7 @@ const immutable = Immutable.fromJS({
 // $FlowFixMe
 const bigInt = BigInt(123); // eslint-disable-line no-undef
 
-export default function UnserializableProps() {
+export default function UnserializableProps(): React.Node {
   return (
     <ChildComponent
       arrayBuffer={arrayBuffer}
diff --git a/packages/react-devtools-shell/src/app/PartiallyStrictApp/index.js b/packages/react-devtools-shell/src/app/PartiallyStrictApp/index.js
index 068e11935bce6..a407e70f8185c 100644
--- a/packages/react-devtools-shell/src/app/PartiallyStrictApp/index.js
+++ b/packages/react-devtools-shell/src/app/PartiallyStrictApp/index.js
@@ -10,7 +10,7 @@
 import * as React from 'react';
 import {StrictMode} from 'react';
 
-export default function PartiallyStrictApp() {
+export default function PartiallyStrictApp(): React.Node {
   return (
     <>
       <Child />
diff --git a/packages/react-devtools-shell/src/app/ReactNativeWeb/index.js b/packages/react-devtools-shell/src/app/ReactNativeWeb/index.js
index 89a0badca15f2..82925ed1b5fdd 100644
--- a/packages/react-devtools-shell/src/app/ReactNativeWeb/index.js
+++ b/packages/react-devtools-shell/src/app/ReactNativeWeb/index.js
@@ -12,7 +12,7 @@ import {Fragment, useState} from 'react';
 // $FlowFixMe
 import {Button, Text, View} from 'react-native-web';
 
-export default function ReactNativeWeb() {
+export default function ReactNativeWeb(): React.Node {
   const [backgroundColor, setBackgroundColor] = useState('purple');
   const toggleColor = () =>
     setBackgroundColor(backgroundColor === 'purple' ? 'green' : 'purple');
diff --git a/packages/react-devtools-shell/src/app/SuspenseTree/index.js b/packages/react-devtools-shell/src/app/SuspenseTree/index.js
index 875cf60fec6d2..db958df1ccfa4 100644
--- a/packages/react-devtools-shell/src/app/SuspenseTree/index.js
+++ b/packages/react-devtools-shell/src/app/SuspenseTree/index.js
@@ -10,7 +10,7 @@
 import * as React from 'react';
 import {Fragment, Suspense, SuspenseList, useState} from 'react';
 
-function SuspenseTree() {
+function SuspenseTree(): React.Node {
   return (
     <Fragment>
       <h1>Suspense</h1>
diff --git a/packages/react-devtools-shell/src/app/ToDoList/List.js b/packages/react-devtools-shell/src/app/ToDoList/List.js
index 47dbb3f6abb03..67bb6d1b4e541 100644
--- a/packages/react-devtools-shell/src/app/ToDoList/List.js
+++ b/packages/react-devtools-shell/src/app/ToDoList/List.js
@@ -12,15 +12,15 @@ import {Fragment, useCallback, useState} from 'react';
 import ListItem from './ListItem';
 import styles from './List.css';
 
-export type Item = {|
+export type Item = {
   id: number,
   isComplete: boolean,
   text: string,
-|};
+};
 
-type Props = {||};
+type Props = {};
 
-export default function List(props: Props) {
+export default function List(props: Props): React.Node {
   const [newItemText, setNewItemText] = useState<string>('');
   const [items, setItems] = useState<Array<Item>>([
     {id: 1, isComplete: true, text: 'First'},
diff --git a/packages/react-devtools-shell/src/app/ToDoList/ListItem.js b/packages/react-devtools-shell/src/app/ToDoList/ListItem.js
index 5d816f652c830..a382f639a1b20 100644
--- a/packages/react-devtools-shell/src/app/ToDoList/ListItem.js
+++ b/packages/react-devtools-shell/src/app/ToDoList/ListItem.js
@@ -13,11 +13,11 @@ import styles from './ListItem.css';
 
 import type {Item} from './List';
 
-type Props = {|
+type Props = {
   item: Item,
   removeItem: (item: Item) => void,
   toggleItem: (item: Item) => void,
-|};
+};
 
 function ListItem({item, removeItem, toggleItem}: Props) {
   const handleDelete = useCallback(() => {
diff --git a/packages/react-devtools-shell/src/e2e-apps/ListApp.js b/packages/react-devtools-shell/src/e2e-apps/ListApp.js
index 0e2c2ef8d4cfc..727edf126ce0c 100644
--- a/packages/react-devtools-shell/src/e2e-apps/ListApp.js
+++ b/packages/react-devtools-shell/src/e2e-apps/ListApp.js
@@ -10,7 +10,7 @@
 import * as React from 'react';
 import {useRef, useState} from 'react';
 
-export default function App() {
+export default function App(): React.Node {
   return <List />;
 }
 
diff --git a/packages/react-devtools-shell/src/e2e-apps/ListAppLegacy.js b/packages/react-devtools-shell/src/e2e-apps/ListAppLegacy.js
index ae18b7183a052..26a4673ba7c5a 100644
--- a/packages/react-devtools-shell/src/e2e-apps/ListAppLegacy.js
+++ b/packages/react-devtools-shell/src/e2e-apps/ListAppLegacy.js
@@ -9,7 +9,7 @@
 
 import * as React from 'react';
 
-export default function App() {
+export default function App(): React.Node {
   return <List />;
 }
 
diff --git a/packages/react-devtools-timeline/src/CanvasPage.js b/packages/react-devtools-timeline/src/CanvasPage.js
index 3abc8ea7a3999..35bdfde779a6a 100644
--- a/packages/react-devtools-timeline/src/CanvasPage.js
+++ b/packages/react-devtools-timeline/src/CanvasPage.js
@@ -69,12 +69,12 @@ import styles from './CanvasPage.css';
 
 const CONTEXT_MENU_ID = 'canvas';
 
-type Props = {|
+type Props = {
   profilerData: TimelineData,
   viewState: ViewState,
-|};
+};
 
-function CanvasPage({profilerData, viewState}: Props) {
+function CanvasPage({profilerData, viewState}: Props): React.Node {
   return (
     <div
       className={styles.CanvasPage}
@@ -145,12 +145,12 @@ const EMPTY_CONTEXT_INFO: ReactEventInfo = {
   userTimingMark: null,
 };
 
-type AutoSizedCanvasProps = {|
+type AutoSizedCanvasProps = {
   data: TimelineData,
   height: number,
   viewState: ViewState,
   width: number,
-|};
+};
 
 function AutoSizedCanvas({
   data,
diff --git a/packages/react-devtools-timeline/src/EventTooltip.js b/packages/react-devtools-timeline/src/EventTooltip.js
index de607ddd5b19f..39bbc8b589522 100644
--- a/packages/react-devtools-timeline/src/EventTooltip.js
+++ b/packages/react-devtools-timeline/src/EventTooltip.js
@@ -36,14 +36,14 @@ import styles from './EventTooltip.css';
 
 const MAX_TOOLTIP_TEXT_LENGTH = 60;
 
-type Props = {|
-  canvasRef: {|current: HTMLCanvasElement | null|},
+type Props = {
+  canvasRef: {current: HTMLCanvasElement | null},
   data: TimelineData,
   height: number,
   hoveredEvent: ReactEventInfo | null,
   origin: Point,
   width: number,
-|};
+};
 
 function getReactMeasureLabel(type): string | null {
   switch (type) {
@@ -69,7 +69,7 @@ export default function EventTooltip({
   hoveredEvent,
   origin,
   width,
-}: Props) {
+}: Props): React.Node {
   const ref = useSmartTooltip({
     canvasRef,
     mouseX: origin.x,
@@ -135,9 +135,9 @@ export default function EventTooltip({
 
 const TooltipReactComponentMeasure = ({
   componentMeasure,
-}: {|
+}: {
   componentMeasure: ReactComponentMeasure,
-|}) => {
+}) => {
   const {componentName, duration, timestamp, type, warning} = componentMeasure;
 
   let label = componentName;
@@ -182,9 +182,9 @@ const TooltipReactComponentMeasure = ({
 
 const TooltipFlamechartNode = ({
   stackFrame,
-}: {|
+}: {
   stackFrame: FlamechartStackFrame,
-|}) => {
+}) => {
   const {name, timestamp, duration, locationLine, locationColumn} = stackFrame;
   return (
     <div className={styles.TooltipSection}>
@@ -207,7 +207,7 @@ const TooltipFlamechartNode = ({
   );
 };
 
-const TooltipNativeEvent = ({nativeEvent}: {|nativeEvent: NativeEvent|}) => {
+const TooltipNativeEvent = ({nativeEvent}: {nativeEvent: NativeEvent}) => {
   const {duration, timestamp, type, warning} = nativeEvent;
 
   return (
@@ -234,9 +234,9 @@ const TooltipNativeEvent = ({nativeEvent}: {|nativeEvent: NativeEvent|}) => {
 
 const TooltipNetworkMeasure = ({
   networkMeasure,
-}: {|
+}: {
   networkMeasure: NetworkMeasure,
-|}) => {
+}) => {
   const {
     finishTimestamp,
     lastReceivedDataTimestamp,
@@ -269,10 +269,10 @@ const TooltipNetworkMeasure = ({
 const TooltipSchedulingEvent = ({
   data,
   schedulingEvent,
-}: {|
+}: {
   data: TimelineData,
   schedulingEvent: SchedulingEvent,
-|}) => {
+}) => {
   const label = getSchedulingEventLabel(schedulingEvent);
   if (!label) {
     if (__DEV__) {
@@ -335,11 +335,11 @@ 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.
@@ -365,9 +365,9 @@ const TooltipSnapshot = ({
 
 const TooltipSuspenseEvent = ({
   suspenseEvent,
-}: {|
+}: {
   suspenseEvent: SuspenseEvent,
-|}) => {
+}) => {
   const {
     componentName,
     duration,
@@ -424,10 +424,10 @@ const TooltipSuspenseEvent = ({
 const TooltipReactMeasure = ({
   data,
   measure,
-}: {|
+}: {
   data: TimelineData,
   measure: ReactMeasure,
-|}) => {
+}) => {
   const label = getReactMeasureLabel(measure.type);
   if (!label) {
     if (__DEV__) {
@@ -471,7 +471,7 @@ const TooltipReactMeasure = ({
   );
 };
 
-const TooltipUserTimingMark = ({mark}: {|mark: UserTimingMark|}) => {
+const TooltipUserTimingMark = ({mark}: {mark: UserTimingMark}) => {
   const {name, timestamp} = mark;
   return (
     <div className={styles.TooltipSection}>
@@ -485,7 +485,7 @@ const TooltipUserTimingMark = ({mark}: {|mark: UserTimingMark|}) => {
   );
 };
 
-const TooltipThrownError = ({thrownError}: {|thrownError: ThrownError|}) => {
+const TooltipThrownError = ({thrownError}: {thrownError: ThrownError}) => {
   const {componentName, message, phase, timestamp} = thrownError;
   const label = `threw an error during ${phase}`;
   return (
diff --git a/packages/react-devtools-timeline/src/Timeline.js b/packages/react-devtools-timeline/src/Timeline.js
index bfd2a35f733e7..36a89c866981f 100644
--- a/packages/react-devtools-timeline/src/Timeline.js
+++ b/packages/react-devtools-timeline/src/Timeline.js
@@ -32,7 +32,7 @@ import {TimelineSearchContextController} from './TimelineSearchContext';
 
 import styles from './Timeline.css';
 
-export function Timeline(_: {||}) {
+export function Timeline(_: {}): React.Node {
   const {
     file,
     inMemoryTimelineData,
@@ -143,11 +143,11 @@ const FileLoader = ({
   file,
   onFileSelect,
   viewState,
-}: {|
+}: {
   file: File | null,
   onFileSelect: (file: File) => void,
   viewState: ViewState,
-|}) => {
+}) => {
   if (file === null) {
     return null;
   }
diff --git a/packages/react-devtools-timeline/src/TimelineContext.js b/packages/react-devtools-timeline/src/TimelineContext.js
index c753fe1c28d6b..3032e55947721 100644
--- a/packages/react-devtools-timeline/src/TimelineContext.js
+++ b/packages/react-devtools-timeline/src/TimelineContext.js
@@ -27,7 +27,7 @@ import type {
 } from './types';
 import type {RefObject} from 'shared/ReactTypes';
 
-export type Context = {|
+export type Context = {
   file: File | null,
   inMemoryTimelineData: Array<TimelineData> | null,
   isTimelineSupported: boolean,
@@ -36,14 +36,14 @@ export type Context = {|
   viewState: ViewState,
   selectEvent: ReactEventInfo => void,
   selectedEvent: ReactEventInfo,
-|};
+};
 
 const TimelineContext = createContext<Context>(((null: any): Context));
 TimelineContext.displayName = 'TimelineContext';
 
-type Props = {|
+type Props = {
   children: React$Node,
-|};
+};
 
 function TimelineContextController({children}: Props) {
   const searchInputContainerRef = useRef(null);
diff --git a/packages/react-devtools-timeline/src/TimelineNotSupported.js b/packages/react-devtools-timeline/src/TimelineNotSupported.js
index 9a21df8ab8cb3..9f30f105c39f5 100644
--- a/packages/react-devtools-timeline/src/TimelineNotSupported.js
+++ b/packages/react-devtools-timeline/src/TimelineNotSupported.js
@@ -12,7 +12,7 @@ import {isInternalFacebookBuild} from 'react-devtools-feature-flags';
 
 import styles from './TimelineNotSupported.css';
 
-export default function TimelineNotSupported() {
+export default function TimelineNotSupported(): React.Node {
   return (
     <div className={styles.Column}>
       <div className={styles.Header}>Timeline profiling not supported.</div>
diff --git a/packages/react-devtools-timeline/src/TimelineSearchContext.js b/packages/react-devtools-timeline/src/TimelineSearchContext.js
index c545f83888e91..2535b723b4a11 100644
--- a/packages/react-devtools-timeline/src/TimelineSearchContext.js
+++ b/packages/react-devtools-timeline/src/TimelineSearchContext.js
@@ -12,24 +12,24 @@ import {createContext, useMemo, useReducer} from 'react';
 
 import type {ReactComponentMeasure, TimelineData, ViewState} from './types';
 
-type State = {|
+type State = {
   profilerData: TimelineData,
   searchIndex: number,
   searchRegExp: RegExp | null,
   searchResults: Array<ReactComponentMeasure>,
   searchText: string,
-|};
+};
 
-type ACTION_GO_TO_NEXT_SEARCH_RESULT = {|
+type ACTION_GO_TO_NEXT_SEARCH_RESULT = {
   type: 'GO_TO_NEXT_SEARCH_RESULT',
-|};
-type ACTION_GO_TO_PREVIOUS_SEARCH_RESULT = {|
+};
+type ACTION_GO_TO_PREVIOUS_SEARCH_RESULT = {
   type: 'GO_TO_PREVIOUS_SEARCH_RESULT',
-|};
-type ACTION_SET_SEARCH_TEXT = {|
+};
+type ACTION_SET_SEARCH_TEXT = {
   type: 'SET_SEARCH_TEXT',
   payload: string,
-|};
+};
 
 type Action =
   | ACTION_GO_TO_NEXT_SEARCH_RESULT
@@ -111,7 +111,7 @@ function reducer(state: State, action: Action): State {
   };
 }
 
-export type Context = {|
+export type Context = {
   profilerData: TimelineData,
 
   // Search state
@@ -120,16 +120,16 @@ export type Context = {|
   searchRegExp: null,
   searchResults: Array<ReactComponentMeasure>,
   searchText: string,
-|};
+};
 
 const TimelineSearchContext = createContext<Context>(((null: any): Context));
 TimelineSearchContext.displayName = 'TimelineSearchContext';
 
-type Props = {|
+type Props = {
   children: React$Node,
   profilerData: TimelineData,
   viewState: ViewState,
-|};
+};
 
 function TimelineSearchContextController({
   children,
diff --git a/packages/react-devtools-timeline/src/TimelineSearchInput.js b/packages/react-devtools-timeline/src/TimelineSearchInput.js
index 5a4515d1b826c..84307dad3084d 100644
--- a/packages/react-devtools-timeline/src/TimelineSearchInput.js
+++ b/packages/react-devtools-timeline/src/TimelineSearchInput.js
@@ -14,9 +14,9 @@ import SearchInput from 'react-devtools-shared/src/devtools/views/SearchInput';
 import {TimelineContext} from './TimelineContext';
 import {TimelineSearchContext} from './TimelineSearchContext';
 
-type Props = {||};
+type Props = {};
 
-export default function TimelineSearchInput(props: Props) {
+export default function TimelineSearchInput(props: Props): React.Node {
   const {searchInputContainerRef} = useContext(TimelineContext);
   const {dispatch, searchIndex, searchResults, searchText} = useContext(
     TimelineSearchContext,
diff --git a/packages/react-devtools-timeline/src/content-views/ComponentMeasuresView.js b/packages/react-devtools-timeline/src/content-views/ComponentMeasuresView.js
index c4fd41bdfa250..db2884a0726c1 100644
--- a/packages/react-devtools-timeline/src/content-views/ComponentMeasuresView.js
+++ b/packages/react-devtools-timeline/src/content-views/ComponentMeasuresView.js
@@ -69,7 +69,7 @@ export class ComponentMeasuresView extends View {
     };
   }
 
-  desiredSize() {
+  desiredSize(): IntrinsicSize {
     return this._intrinsicSize;
   }
 
diff --git a/packages/react-devtools-timeline/src/content-views/FlamechartView.js b/packages/react-devtools-timeline/src/content-views/FlamechartView.js
index bbc8dcf13936b..151c01cdafb4c 100644
--- a/packages/react-devtools-timeline/src/content-views/FlamechartView.js
+++ b/packages/react-devtools-timeline/src/content-views/FlamechartView.js
@@ -102,7 +102,7 @@ class FlamechartStackLayerView extends View {
     };
   }
 
-  desiredSize() {
+  desiredSize(): Size {
     return this._intrinsicSize;
   }
 
@@ -342,7 +342,12 @@ export class FlamechartView extends View {
     this._flamechartRowViews.forEach(rowView => (rowView._onHover = onHover));
   }
 
-  desiredSize() {
+  desiredSize(): {
+    height: number,
+    hideScrollBarIfLessThanHeight?: number,
+    maxInitialHeight?: number,
+    width: number,
+  } {
     // Ignore the wishes of the background color view
     const intrinsicSize = this._verticalStackView.desiredSize();
     return {
diff --git a/packages/react-devtools-timeline/src/content-views/NativeEventsView.js b/packages/react-devtools-timeline/src/content-views/NativeEventsView.js
index 5db13dbc675e3..2def46a6345b3 100644
--- a/packages/react-devtools-timeline/src/content-views/NativeEventsView.js
+++ b/packages/react-devtools-timeline/src/content-views/NativeEventsView.js
@@ -77,7 +77,7 @@ export class NativeEventsView extends View {
     };
   }
 
-  desiredSize() {
+  desiredSize(): IntrinsicSize {
     return this._intrinsicSize;
   }
 
diff --git a/packages/react-devtools-timeline/src/content-views/NetworkMeasuresView.js b/packages/react-devtools-timeline/src/content-views/NetworkMeasuresView.js
index 547af24bb26ab..cd2fdf4732800 100644
--- a/packages/react-devtools-timeline/src/content-views/NetworkMeasuresView.js
+++ b/packages/react-devtools-timeline/src/content-views/NetworkMeasuresView.js
@@ -81,7 +81,7 @@ export class NetworkMeasuresView extends View {
     };
   }
 
-  desiredSize() {
+  desiredSize(): IntrinsicSize {
     return this._intrinsicSize;
   }
 
diff --git a/packages/react-devtools-timeline/src/content-views/ReactMeasuresView.js b/packages/react-devtools-timeline/src/content-views/ReactMeasuresView.js
index f46d435738d39..3244eb2d20315 100644
--- a/packages/react-devtools-timeline/src/content-views/ReactMeasuresView.js
+++ b/packages/react-devtools-timeline/src/content-views/ReactMeasuresView.js
@@ -71,7 +71,7 @@ export class ReactMeasuresView extends View {
     };
   }
 
-  desiredSize() {
+  desiredSize(): IntrinsicSize {
     return this._intrinsicSize;
   }
 
diff --git a/packages/react-devtools-timeline/src/content-views/SchedulingEventsView.js b/packages/react-devtools-timeline/src/content-views/SchedulingEventsView.js
index 4c35ee6828943..faf8d991876d8 100644
--- a/packages/react-devtools-timeline/src/content-views/SchedulingEventsView.js
+++ b/packages/react-devtools-timeline/src/content-views/SchedulingEventsView.js
@@ -60,7 +60,7 @@ export class SchedulingEventsView extends View {
     };
   }
 
-  desiredSize() {
+  desiredSize(): Size {
     return this._intrinsicSize;
   }
 
diff --git a/packages/react-devtools-timeline/src/content-views/SnapshotsView.js b/packages/react-devtools-timeline/src/content-views/SnapshotsView.js
index eaaf44659ea33..25804f91908d7 100644
--- a/packages/react-devtools-timeline/src/content-views/SnapshotsView.js
+++ b/packages/react-devtools-timeline/src/content-views/SnapshotsView.js
@@ -45,7 +45,7 @@ export class SnapshotsView extends View {
     this._profilerData = profilerData;
   }
 
-  desiredSize() {
+  desiredSize(): Size {
     return this._intrinsicSize;
   }
 
diff --git a/packages/react-devtools-timeline/src/content-views/SuspenseEventsView.js b/packages/react-devtools-timeline/src/content-views/SuspenseEventsView.js
index 370c8f763275c..502dc2858cd4e 100644
--- a/packages/react-devtools-timeline/src/content-views/SuspenseEventsView.js
+++ b/packages/react-devtools-timeline/src/content-views/SuspenseEventsView.js
@@ -85,7 +85,7 @@ export class SuspenseEventsView extends View {
     };
   }
 
-  desiredSize() {
+  desiredSize(): IntrinsicSize {
     return this._intrinsicSize;
   }
 
diff --git a/packages/react-devtools-timeline/src/content-views/ThrownErrorsView.js b/packages/react-devtools-timeline/src/content-views/ThrownErrorsView.js
index d2a70e9524b14..9c0cb987e353b 100644
--- a/packages/react-devtools-timeline/src/content-views/ThrownErrorsView.js
+++ b/packages/react-devtools-timeline/src/content-views/ThrownErrorsView.js
@@ -55,7 +55,7 @@ export class ThrownErrorsView extends View {
     };
   }
 
-  desiredSize() {
+  desiredSize(): Size {
     return this._intrinsicSize;
   }
 
diff --git a/packages/react-devtools-timeline/src/content-views/TimeAxisMarkersView.js b/packages/react-devtools-timeline/src/content-views/TimeAxisMarkersView.js
index 47913dbb22655..8d8ef9502f24d 100644
--- a/packages/react-devtools-timeline/src/content-views/TimeAxisMarkersView.js
+++ b/packages/react-devtools-timeline/src/content-views/TimeAxisMarkersView.js
@@ -49,7 +49,7 @@ export class TimeAxisMarkersView extends View {
     };
   }
 
-  desiredSize() {
+  desiredSize(): Size {
     return this._intrinsicSize;
   }
 
diff --git a/packages/react-devtools-timeline/src/content-views/UserTimingMarksView.js b/packages/react-devtools-timeline/src/content-views/UserTimingMarksView.js
index 36c24091ac0ad..4abcd6b627078 100644
--- a/packages/react-devtools-timeline/src/content-views/UserTimingMarksView.js
+++ b/packages/react-devtools-timeline/src/content-views/UserTimingMarksView.js
@@ -61,7 +61,7 @@ export class UserTimingMarksView extends View {
     };
   }
 
-  desiredSize() {
+  desiredSize(): Size {
     return this._intrinsicSize;
   }
 
diff --git a/packages/react-devtools-timeline/src/content-views/constants.js b/packages/react-devtools-timeline/src/content-views/constants.js
index bf60a1fbf9a7a..e92e1d53cd966 100644
--- a/packages/react-devtools-timeline/src/content-views/constants.js
+++ b/packages/react-devtools-timeline/src/content-views/constants.js
@@ -43,7 +43,63 @@ export const INTERVAL_TIMES = [
 export const MIN_INTERVAL_SIZE_PX = 70;
 
 // TODO Replace this with "export let" vars
-export let COLORS = {
+export let COLORS: {
+  BACKGROUND: string,
+  INTERNAL_MODULE_FRAME: string,
+  INTERNAL_MODULE_FRAME_HOVER: string,
+  INTERNAL_MODULE_FRAME_TEXT: string,
+  NATIVE_EVENT: string,
+  NATIVE_EVENT_HOVER: string,
+  NETWORK_PRIMARY: string,
+  NETWORK_PRIMARY_HOVER: string,
+  NETWORK_SECONDARY: string,
+  NETWORK_SECONDARY_HOVER: string,
+  PRIORITY_BACKGROUND: string,
+  PRIORITY_BORDER: string,
+  PRIORITY_LABEL: string,
+  REACT_COMMIT: string,
+  REACT_COMMIT_HOVER: string,
+  REACT_COMMIT_TEXT: string,
+  REACT_IDLE: string,
+  REACT_IDLE_HOVER: string,
+  REACT_LAYOUT_EFFECTS: string,
+  REACT_LAYOUT_EFFECTS_HOVER: string,
+  REACT_LAYOUT_EFFECTS_TEXT: string,
+  REACT_PASSIVE_EFFECTS: string,
+  REACT_PASSIVE_EFFECTS_HOVER: string,
+  REACT_PASSIVE_EFFECTS_TEXT: string,
+  REACT_RENDER: string,
+  REACT_RENDER_HOVER: string,
+  REACT_RENDER_TEXT: string,
+  REACT_RESIZE_BAR: string,
+  REACT_RESIZE_BAR_ACTIVE: string,
+  REACT_RESIZE_BAR_BORDER: string,
+  REACT_RESIZE_BAR_DOT: string,
+  REACT_SCHEDULE: string,
+  REACT_SCHEDULE_HOVER: string,
+  REACT_SUSPENSE_REJECTED_EVENT: string,
+  REACT_SUSPENSE_REJECTED_EVENT_HOVER: string,
+  REACT_SUSPENSE_RESOLVED_EVENT: string,
+  REACT_SUSPENSE_RESOLVED_EVENT_HOVER: string,
+  REACT_SUSPENSE_UNRESOLVED_EVENT: string,
+  REACT_SUSPENSE_UNRESOLVED_EVENT_HOVER: string,
+  REACT_THROWN_ERROR: string,
+  REACT_THROWN_ERROR_HOVER: string,
+  REACT_WORK_BORDER: string,
+  SCROLL_CARET: string,
+  SCRUBBER_BACKGROUND: string,
+  SCRUBBER_BORDER: string,
+  SEARCH_RESULT_FILL: string,
+  TEXT_COLOR: string,
+  TEXT_DIM_COLOR: string,
+  TIME_MARKER_LABEL: string,
+  USER_TIMING: string,
+  USER_TIMING_HOVER: string,
+  WARNING_BACKGROUND: string,
+  WARNING_BACKGROUND_HOVER: string,
+  WARNING_TEXT: string,
+  WARNING_TEXT_INVERED: string,
+} = {
   BACKGROUND: '',
   INTERNAL_MODULE_FRAME: '',
   INTERNAL_MODULE_FRAME_HOVER: '',
diff --git a/packages/react-devtools-timeline/src/content-views/utils/colors.js b/packages/react-devtools-timeline/src/content-views/utils/colors.js
index a1ad49b5888f2..539ec54759f64 100644
--- a/packages/react-devtools-timeline/src/content-views/utils/colors.js
+++ b/packages/react-devtools-timeline/src/content-views/utils/colors.js
@@ -7,10 +7,10 @@
  * @flow
  */
 
-type ColorSpace = number | {|min: number, max: number, count?: number|};
+type ColorSpace = number | {min: number, max: number, count?: number};
 
 // Docstrings from https://www.w3schools.com/css/css_colors_hsl.asp
-type HslaColor = $ReadOnly<{|
+type HslaColor = $ReadOnly<{
   /** Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue. */
   h: number,
   /** Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color. */
@@ -19,7 +19,7 @@ type HslaColor = $ReadOnly<{|
   l: number,
   /** Alpha is a percentage, 0% is fully transparent, and 100 is not transparent at all. */
   a: number,
-|}>;
+}>;
 
 export function hslaColorToString({h, s, l, a}: HslaColor): string {
   return `hsl(${h}deg ${s}% ${l}% / ${a})`;
diff --git a/packages/react-devtools-timeline/src/content-views/utils/text.js b/packages/react-devtools-timeline/src/content-views/utils/text.js
index 9351d1685ff7a..146ba344c1b2a 100644
--- a/packages/react-devtools-timeline/src/content-views/utils/text.js
+++ b/packages/react-devtools-timeline/src/content-views/utils/text.js
@@ -62,11 +62,11 @@ export function trimText(
   return longestValidText;
 }
 
-type TextConfig = {|
+type TextConfig = {
   fillStyle?: string,
   fontSize?: number,
   textAlign?: 'left' | 'center',
-|};
+};
 
 export function drawText(
   text: string,
diff --git a/packages/react-devtools-timeline/src/import-worker/index.js b/packages/react-devtools-timeline/src/import-worker/index.js
index 636a20ed5f7b6..ef9a239c6dbdf 100644
--- a/packages/react-devtools-timeline/src/import-worker/index.js
+++ b/packages/react-devtools-timeline/src/import-worker/index.js
@@ -22,9 +22,9 @@ const workerizedImportFile: ImportFileModule = window.Worker
   : importFileModule;
 
 export type ImportWorkerOutputData =
-  | {|status: 'SUCCESS', processedData: TimelineData|}
-  | {|status: 'INVALID_PROFILE_ERROR', error: Error|}
-  | {|status: 'UNEXPECTED_ERROR', error: Error|};
+  | {status: 'SUCCESS', processedData: TimelineData}
+  | {status: 'INVALID_PROFILE_ERROR', error: Error}
+  | {status: 'UNEXPECTED_ERROR', error: Error};
 
 export type importFileFunction = (file: File) => ImportWorkerOutputData;
 
diff --git a/packages/react-devtools-timeline/src/import-worker/preprocessData.js b/packages/react-devtools-timeline/src/import-worker/preprocessData.js
index 110b4e8923fb2..d41bde0267c71 100644
--- a/packages/react-devtools-timeline/src/import-worker/preprocessData.js
+++ b/packages/react-devtools-timeline/src/import-worker/preprocessData.js
@@ -38,15 +38,15 @@ import InvalidProfileError from './InvalidProfileError';
 import {getBatchRange} from '../utils/getBatchRange';
 import ErrorStackParser from 'error-stack-parser';
 
-type MeasureStackElement = {|
+type MeasureStackElement = {
   type: ReactMeasureType,
   depth: number,
   measure: ReactMeasure,
   startTime: Milliseconds,
   stopTime?: Milliseconds,
-|};
+};
 
-type ProcessorState = {|
+type ProcessorState = {
   asyncProcessingPromises: Promise<any>[],
   batchUID: BatchUID,
   currentReactComponentMeasure: ReactComponentMeasure | null,
@@ -64,7 +64,7 @@ type ProcessorState = {|
   requestIdToNetworkMeasureMap: Map<string, NetworkMeasure>,
   uidCounter: BatchUID,
   unresolvedSuspenseEvents: Map<string, SuspenseEvent>,
-|};
+};
 
 const NATIVE_EVENT_DURATION_THRESHOLD = 20;
 const NESTED_UPDATE_DURATION_THRESHOLD = 20;
diff --git a/packages/react-devtools-timeline/src/timelineCache.js b/packages/react-devtools-timeline/src/timelineCache.js
index 0616f70008640..d2418d76151c5 100644
--- a/packages/react-devtools-timeline/src/timelineCache.js
+++ b/packages/react-devtools-timeline/src/timelineCache.js
@@ -16,20 +16,20 @@ const Pending = 0;
 const Resolved = 1;
 const Rejected = 2;
 
-type PendingRecord = {|
+type PendingRecord = {
   status: 0,
   value: Wakeable,
-|};
+};
 
-type ResolvedRecord<T> = {|
+type ResolvedRecord<T> = {
   status: 1,
   value: T,
-|};
+};
 
-type RejectedRecord = {|
+type RejectedRecord = {
   status: 2,
   value: Error,
-|};
+};
 
 type Record<T> = PendingRecord | ResolvedRecord<T> | RejectedRecord;
 
diff --git a/packages/react-devtools-timeline/src/types.js b/packages/react-devtools-timeline/src/types.js
index 0d8766726ff54..daf764ad151e1 100644
--- a/packages/react-devtools-timeline/src/types.js
+++ b/packages/react-devtools-timeline/src/types.js
@@ -27,41 +27,41 @@ export type Milliseconds = number;
 
 export type ReactLane = number;
 
-export type NativeEvent = {|
+export type NativeEvent = {
   +depth: number,
   +duration: Milliseconds,
   +timestamp: Milliseconds,
   +type: string,
   warning: string | null,
-|};
+};
 
-type BaseReactEvent = {|
+type BaseReactEvent = {
   +componentName?: string,
   +timestamp: Milliseconds,
   warning: string | null,
-|};
+};
 
-type BaseReactScheduleEvent = {|
+type BaseReactScheduleEvent = {
   ...BaseReactEvent,
   +lanes: ReactLane[],
-|};
-export type ReactScheduleRenderEvent = {|
+};
+export type ReactScheduleRenderEvent = {
   ...BaseReactScheduleEvent,
   +type: 'schedule-render',
-|};
-export type ReactScheduleStateUpdateEvent = {|
+};
+export type ReactScheduleStateUpdateEvent = {
   ...BaseReactScheduleEvent,
   +componentStack?: string,
   +type: 'schedule-state-update',
-|};
-export type ReactScheduleForceUpdateEvent = {|
+};
+export type ReactScheduleForceUpdateEvent = {
   ...BaseReactScheduleEvent,
   +type: 'schedule-force-update',
-|};
+};
 
 export type Phase = 'mount' | 'update';
 
-export type SuspenseEvent = {|
+export type SuspenseEvent = {
   ...BaseReactEvent,
   depth: number,
   duration: number | null,
@@ -70,15 +70,15 @@ export type SuspenseEvent = {|
   promiseName: string | null,
   resolution: 'rejected' | 'resolved' | 'unresolved',
   +type: 'suspense',
-|};
+};
 
-export type ThrownError = {|
+export type ThrownError = {
   +componentName?: string,
   +message: string,
   +phase: Phase,
   +timestamp: Milliseconds,
   +type: 'thrown-error',
-|};
+};
 
 export type SchedulingEvent =
   | ReactScheduleRenderEvent
@@ -97,16 +97,16 @@ export type ReactMeasureType =
 
 export type BatchUID = number;
 
-export type ReactMeasure = {|
+export type ReactMeasure = {
   +type: ReactMeasureType,
   +lanes: ReactLane[],
   +timestamp: Milliseconds,
   +duration: Milliseconds,
   +batchUID: BatchUID,
   +depth: number,
-|};
+};
 
-export type NetworkMeasure = {|
+export type NetworkMeasure = {
   +depth: number,
   finishTimestamp: Milliseconds,
   firstReceivedDataTimestamp: Milliseconds,
@@ -117,7 +117,7 @@ export type NetworkMeasure = {|
   requestMethod: string,
   sendRequestTimestamp: Milliseconds,
   url: string,
-|};
+};
 
 export type ReactComponentMeasureType =
   | 'render'
@@ -126,38 +126,38 @@ export type ReactComponentMeasureType =
   | 'passive-effect-mount'
   | 'passive-effect-unmount';
 
-export type ReactComponentMeasure = {|
+export type ReactComponentMeasure = {
   +componentName: string,
   duration: Milliseconds,
   +timestamp: Milliseconds,
   +type: ReactComponentMeasureType,
   warning: string | null,
-|};
+};
 
 /**
  * A flamechart stack frame belonging to a stack trace.
  */
-export type FlamechartStackFrame = {|
+export type FlamechartStackFrame = {
   name: string,
   timestamp: Milliseconds,
   duration: Milliseconds,
   scriptUrl?: string,
   locationLine?: number,
   locationColumn?: number,
-|};
+};
 
-export type UserTimingMark = {|
+export type UserTimingMark = {
   name: string,
   timestamp: Milliseconds,
-|};
+};
 
-export type Snapshot = {|
+export type Snapshot = {
   height: number,
   image: Image | null,
   +imageSource: string,
   +timestamp: Milliseconds,
   width: number,
-|};
+};
 
 /**
  * A "layer" of stack frames in the profiler UI, i.e. all stack frames of the
@@ -177,7 +177,7 @@ export type SearchRegExpStateChangeCallback = (
 // Imperative view state that corresponds to profiler data.
 // This state lives outside of React's lifecycle
 // and should be erased/reset whenever new profiler data is loaded.
-export type ViewState = {|
+export type ViewState = {
   horizontalScrollState: ScrollState,
   onHorizontalScrollStateChange: (
     callback: HorizontalScrollStateChangeCallback,
@@ -189,7 +189,7 @@ export type ViewState = {|
   updateHorizontalScrollState: (scrollState: ScrollState) => void,
   updateSearchRegExpState: (searchRegExp: RegExp | null) => void,
   viewToMutableViewStateMap: Map<string, mixed>,
-|};
+};
 
 export type InternalModuleSourceToRanges = Map<
   string,
@@ -198,7 +198,7 @@ export type InternalModuleSourceToRanges = Map<
 
 export type LaneToLabelMap = Map<ReactLane, string>;
 
-export type TimelineData = {|
+export type TimelineData = {
   batchUIDToMeasuresMap: Map<BatchUID, ReactMeasure[]>,
   componentMeasures: ReactComponentMeasure[],
   duration: number,
@@ -216,9 +216,9 @@ export type TimelineData = {|
   startTime: number,
   suspenseEvents: SuspenseEvent[],
   thrownErrors: ThrownError[],
-|};
+};
 
-export type TimelineDataExport = {|
+export type TimelineDataExport = {
   batchUIDToMeasuresKeyValueArray: Array<[BatchUID, ReactMeasure[]]>,
   componentMeasures: ReactComponentMeasure[],
   duration: number,
@@ -238,9 +238,9 @@ export type TimelineDataExport = {|
   startTime: number,
   suspenseEvents: SuspenseEvent[],
   thrownErrors: ThrownError[],
-|};
+};
 
-export type ReactEventInfo = {|
+export type ReactEventInfo = {
   componentMeasure: ReactComponentMeasure | null,
   flamechartStackFrame: FlamechartStackFrame | null,
   measure: ReactMeasure | null,
@@ -251,4 +251,4 @@ export type ReactEventInfo = {|
   snapshot: Snapshot | null,
   thrownError: ThrownError | null,
   userTimingMark: UserTimingMark | null,
-|};
+};
diff --git a/packages/react-devtools-timeline/src/utils/formatting.js b/packages/react-devtools-timeline/src/utils/formatting.js
index 83354afe96f19..ec51bfbe30843 100644
--- a/packages/react-devtools-timeline/src/utils/formatting.js
+++ b/packages/react-devtools-timeline/src/utils/formatting.js
@@ -11,7 +11,7 @@ import type {SchedulingEvent} from '../types';
 
 import prettyMilliseconds from 'pretty-ms';
 
-export function formatTimestamp(ms: number) {
+export function formatTimestamp(ms: number): string {
   return (
     ms.toLocaleString(undefined, {
       minimumFractionDigits: 1,
diff --git a/packages/react-devtools-timeline/src/utils/getBatchRange.js b/packages/react-devtools-timeline/src/utils/getBatchRange.js
index 8dd425d263e05..a372c7d5f14c4 100644
--- a/packages/react-devtools-timeline/src/utils/getBatchRange.js
+++ b/packages/react-devtools-timeline/src/utils/getBatchRange.js
@@ -45,4 +45,8 @@ function unmemoizedGetBatchRange(
   return [startTime, stopTime];
 }
 
-export const getBatchRange = memoize(unmemoizedGetBatchRange);
+export const getBatchRange: (
+  batchUID: BatchUID,
+  data: TimelineData,
+  minStartTime?: number,
+) => [Milliseconds, Milliseconds] = memoize(unmemoizedGetBatchRange);
diff --git a/packages/react-devtools-timeline/src/utils/useSmartTooltip.js b/packages/react-devtools-timeline/src/utils/useSmartTooltip.js
index 16cdec365f611..1805310d31266 100644
--- a/packages/react-devtools-timeline/src/utils/useSmartTooltip.js
+++ b/packages/react-devtools-timeline/src/utils/useSmartTooltip.js
@@ -17,10 +17,10 @@ export default function useSmartTooltip({
   mouseX,
   mouseY,
 }: {
-  canvasRef: {|current: HTMLCanvasElement | null|},
+  canvasRef: {current: HTMLCanvasElement | null},
   mouseX: number,
   mouseY: number,
-}) {
+}): {current: HTMLElement | null} {
   const ref = useRef<HTMLElement | null>(null);
 
   // HACK: Browser extension reports window.innerHeight of 0,
diff --git a/packages/react-devtools-timeline/src/view-base/HorizontalPanAndZoomView.js b/packages/react-devtools-timeline/src/view-base/HorizontalPanAndZoomView.js
index 2a998493eda1b..64251c92a4e2a 100644
--- a/packages/react-devtools-timeline/src/view-base/HorizontalPanAndZoomView.js
+++ b/packages/react-devtools-timeline/src/view-base/HorizontalPanAndZoomView.js
@@ -7,6 +7,7 @@
  * @flow
  */
 
+import type {Size, IntrinsicSize} from './geometry';
 import type {
   Interaction,
   MouseDownInteraction,
@@ -39,7 +40,7 @@ import {
 export class HorizontalPanAndZoomView extends View {
   _contentView: View;
   _intrinsicContentWidth: number;
-  _isPanning = false;
+  _isPanning: boolean = false;
   _viewState: ViewState;
 
   constructor(
@@ -103,7 +104,7 @@ export class HorizontalPanAndZoomView extends View {
     this.setScrollState(newState);
   }
 
-  desiredSize() {
+  desiredSize(): Size | IntrinsicSize {
     return this._contentView.desiredSize();
   }
 
diff --git a/packages/react-devtools-timeline/src/view-base/Surface.js b/packages/react-devtools-timeline/src/view-base/Surface.js
index 48cebd9cf1b6a..04157cbd5485e 100644
--- a/packages/react-devtools-timeline/src/view-base/Surface.js
+++ b/packages/react-devtools-timeline/src/view-base/Surface.js
@@ -16,10 +16,10 @@ import {View} from './View';
 import {zeroPoint} from './geometry';
 import {DPR} from '../content-views/constants';
 
-export type ViewRefs = {|
+export type ViewRefs = {
   activeView: View | null,
   hoveredView: View | null,
-|};
+};
 
 // hidpi canvas: https://www.html5rocks.com/en/tutorials/canvas/hidpi/
 function configureRetinaCanvas(canvas, height, width) {
diff --git a/packages/react-devtools-timeline/src/view-base/geometry.js b/packages/react-devtools-timeline/src/view-base/geometry.js
index 054d8c3e75feb..ba731dc0c6b5f 100644
--- a/packages/react-devtools-timeline/src/view-base/geometry.js
+++ b/packages/react-devtools-timeline/src/view-base/geometry.js
@@ -7,9 +7,9 @@
  * @flow
  */
 
-export type Point = $ReadOnly<{|x: number, y: number|}>;
-export type Size = $ReadOnly<{|width: number, height: number|}>;
-export type IntrinsicSize = {|
+export type Point = $ReadOnly<{x: number, y: number}>;
+export type Size = $ReadOnly<{width: number, height: number}>;
+export type IntrinsicSize = {
   ...Size,
 
   // If content is this height or less, hide the scrollbar entirely,
@@ -18,8 +18,8 @@ export type IntrinsicSize = {|
 
   // The initial height should be the height of the content, or this, whichever is less.
   maxInitialHeight?: number,
-|};
-export type Rect = $ReadOnly<{|origin: Point, size: Size|}>;
+};
+export type Rect = $ReadOnly<{origin: Point, size: Size}>;
 
 /**
  * Alternative representation of `Rect`.
diff --git a/packages/react-devtools-timeline/src/view-base/layouter.js b/packages/react-devtools-timeline/src/view-base/layouter.js
index 8f6341270e065..2021d69c1732d 100644
--- a/packages/react-devtools-timeline/src/view-base/layouter.js
+++ b/packages/react-devtools-timeline/src/view-base/layouter.js
@@ -10,7 +10,7 @@
 import type {Rect} from './geometry';
 import type {View} from './View';
 
-export type LayoutInfo = {|view: View, frame: Rect|};
+export type LayoutInfo = {view: View, frame: Rect};
 export type Layout = LayoutInfo[];
 
 /**
diff --git a/packages/react-devtools-timeline/src/view-base/resizable/ResizableView.js b/packages/react-devtools-timeline/src/view-base/resizable/ResizableView.js
index b56422f715a52..0be8d51b81079 100644
--- a/packages/react-devtools-timeline/src/view-base/resizable/ResizableView.js
+++ b/packages/react-devtools-timeline/src/view-base/resizable/ResizableView.js
@@ -26,17 +26,17 @@ import {rectContainsPoint} from '../geometry';
 import {noopLayout} from '../layouter';
 import {clamp} from '../utils/clamp';
 
-type ResizingState = $ReadOnly<{|
+type ResizingState = $ReadOnly<{
   /** Distance between top of resize bar and mouseY */
   cursorOffsetInBarFrame: number,
   /** Mouse's vertical coordinates relative to canvas */
   mouseY: number,
-|}>;
+}>;
 
-type LayoutState = {|
+type LayoutState = {
   /** Resize bar's vertical position relative to resize view's frame.origin.y */
   barOffsetY: number,
-|};
+};
 
 const RESIZE_BAR_HEIGHT = 8;
 const RESIZE_BAR_WITH_LABEL_HEIGHT = 16;
@@ -78,7 +78,7 @@ export class ResizableView extends View {
     this._restoreMutableViewState();
   }
 
-  desiredSize() {
+  desiredSize(): {+height: number, +width: number} {
     const subviewDesiredSize = this._subview.desiredSize();
 
     if (this._shouldRenderResizeBar()) {
@@ -132,7 +132,7 @@ export class ResizableView extends View {
     this.setNeedsDisplay();
   }
 
-  _shouldRenderResizeBar() {
+  _shouldRenderResizeBar(): boolean {
     const subviewDesiredSize = this._subview.desiredSize();
     return subviewDesiredSize.hideScrollBarIfLessThanHeight != null
       ? subviewDesiredSize.height >
@@ -195,7 +195,7 @@ export class ResizableView extends View {
     });
   }
 
-  _handleClick(interaction: ClickInteraction) {
+  _handleClick(interaction: ClickInteraction): void | boolean {
     if (!this._shouldRenderResizeBar()) {
       return;
     }
@@ -216,7 +216,7 @@ export class ResizableView extends View {
     }
   }
 
-  _handleDoubleClick(interaction: DoubleClickInteraction) {
+  _handleDoubleClick(interaction: DoubleClickInteraction): void | boolean {
     if (!this._shouldRenderResizeBar()) {
       return;
     }
@@ -236,7 +236,7 @@ export class ResizableView extends View {
     }
   }
 
-  _handleMouseDown(interaction: MouseDownInteraction) {
+  _handleMouseDown(interaction: MouseDownInteraction): void | boolean {
     const cursorLocation = interaction.payload.location;
     const resizeBarFrame = this._resizeBar.frame;
     if (rectContainsPoint(cursorLocation, resizeBarFrame)) {
@@ -250,7 +250,7 @@ export class ResizableView extends View {
     }
   }
 
-  _handleMouseMove(interaction: MouseMoveInteraction) {
+  _handleMouseMove(interaction: MouseMoveInteraction): void | boolean {
     const {_resizingState} = this;
     if (_resizingState) {
       this._resizingState = {
@@ -279,7 +279,10 @@ export class ResizableView extends View {
     }
   }
 
-  handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {
+  handleInteraction(
+    interaction: Interaction,
+    viewRefs: ViewRefs,
+  ): void | boolean {
     switch (interaction.type) {
       case 'click':
         return this._handleClick(interaction);
diff --git a/packages/react-devtools-timeline/src/view-base/useCanvasInteraction.js b/packages/react-devtools-timeline/src/view-base/useCanvasInteraction.js
index f22d8d7211f9b..367569e65a6ab 100644
--- a/packages/react-devtools-timeline/src/view-base/useCanvasInteraction.js
+++ b/packages/react-devtools-timeline/src/view-base/useCanvasInteraction.js
@@ -13,73 +13,73 @@ import type {Point} from './geometry';
 import {useEffect, useRef} from 'react';
 import {normalizeWheel} from './utils/normalizeWheel';
 
-export type ClickInteraction = {|
+export type ClickInteraction = {
   type: 'click',
-  payload: {|
+  payload: {
     event: MouseEvent,
     location: Point,
-  |},
-|};
-export type DoubleClickInteraction = {|
+  },
+};
+export type DoubleClickInteraction = {
   type: 'double-click',
-  payload: {|
+  payload: {
     event: MouseEvent,
     location: Point,
-  |},
-|};
-export type MouseDownInteraction = {|
+  },
+};
+export type MouseDownInteraction = {
   type: 'mousedown',
-  payload: {|
+  payload: {
     event: MouseEvent,
     location: Point,
-  |},
-|};
-export type MouseMoveInteraction = {|
+  },
+};
+export type MouseMoveInteraction = {
   type: 'mousemove',
-  payload: {|
+  payload: {
     event: MouseEvent,
     location: Point,
-  |},
-|};
-export type MouseUpInteraction = {|
+  },
+};
+export type MouseUpInteraction = {
   type: 'mouseup',
-  payload: {|
+  payload: {
     event: MouseEvent,
     location: Point,
-  |},
-|};
-export type WheelPlainInteraction = {|
+  },
+};
+export type WheelPlainInteraction = {
   type: 'wheel-plain',
-  payload: {|
+  payload: {
     event: WheelEvent,
     location: Point,
     delta: NormalizedWheelDelta,
-  |},
-|};
-export type WheelWithShiftInteraction = {|
+  },
+};
+export type WheelWithShiftInteraction = {
   type: 'wheel-shift',
-  payload: {|
+  payload: {
     event: WheelEvent,
     location: Point,
     delta: NormalizedWheelDelta,
-  |},
-|};
-export type WheelWithControlInteraction = {|
+  },
+};
+export type WheelWithControlInteraction = {
   type: 'wheel-control',
-  payload: {|
+  payload: {
     event: WheelEvent,
     location: Point,
     delta: NormalizedWheelDelta,
-  |},
-|};
-export type WheelWithMetaInteraction = {|
+  },
+};
+export type WheelWithMetaInteraction = {
   type: 'wheel-meta',
-  payload: {|
+  payload: {
     event: WheelEvent,
     location: Point,
     delta: NormalizedWheelDelta,
-  |},
-|};
+  },
+};
 
 export type Interaction =
   | ClickInteraction
@@ -112,7 +112,7 @@ function cacheFirstGetCanvasBoundingRect(
 }
 
 export function useCanvasInteraction(
-  canvasRef: {|current: HTMLCanvasElement | null|},
+  canvasRef: {current: HTMLCanvasElement | null},
   interactor: (interaction: Interaction) => void,
 ) {
   const isMouseDownRef = useRef<boolean>(false);
diff --git a/packages/react-devtools-timeline/src/view-base/utils/normalizeWheel.js b/packages/react-devtools-timeline/src/view-base/utils/normalizeWheel.js
index 89de907562d1a..82fe9ec35c0ee 100644
--- a/packages/react-devtools-timeline/src/view-base/utils/normalizeWheel.js
+++ b/packages/react-devtools-timeline/src/view-base/utils/normalizeWheel.js
@@ -9,10 +9,10 @@
 
 // Adapted from: https://github.com/facebookarchive/fixed-data-table/blob/main/src/vendor_upstream/dom/normalizeWheel.js
 
-export type NormalizedWheelDelta = {|
+export type NormalizedWheelDelta = {
   deltaX: number,
   deltaY: number,
-|};
+};
 
 // Reasonable defaults
 const LINE_HEIGHT = 40;
diff --git a/packages/react-devtools-timeline/src/view-base/utils/scrollState.js b/packages/react-devtools-timeline/src/view-base/utils/scrollState.js
index 9e9bdb4919f3f..5c59682952bc2 100644
--- a/packages/react-devtools-timeline/src/view-base/utils/scrollState.js
+++ b/packages/react-devtools-timeline/src/view-base/utils/scrollState.js
@@ -18,10 +18,10 @@ import {clamp} from './clamp';
  *     |<-------------------length------------------->|
  * ```
  */
-export type ScrollState = {|
+export type ScrollState = {
   offset: number,
   length: number,
-|};
+};
 
 function clampOffset(state: ScrollState, containerLength: number): ScrollState {
   return {
diff --git a/packages/react-devtools-timeline/src/view-base/vertical-scroll-overflow/VerticalScrollBarView.js b/packages/react-devtools-timeline/src/view-base/vertical-scroll-overflow/VerticalScrollBarView.js
index 0195e0a7968ac..2d082de2fceab 100644
--- a/packages/react-devtools-timeline/src/view-base/vertical-scroll-overflow/VerticalScrollBarView.js
+++ b/packages/react-devtools-timeline/src/view-base/vertical-scroll-overflow/VerticalScrollBarView.js
@@ -52,7 +52,7 @@ export class VerticalScrollBarView extends View {
     this._verticalScrollOverflowView = verticalScrollOverflowView;
   }
 
-  desiredSize() {
+  desiredSize(): {+height: number, +width: number} {
     return {
       width: SCROLL_BAR_SIZE,
       height: 0, // No desired height
diff --git a/packages/react-devtools-timeline/src/view-base/vertical-scroll-overflow/VerticalScrollOverflowView.js b/packages/react-devtools-timeline/src/view-base/vertical-scroll-overflow/VerticalScrollOverflowView.js
index 37f96f16c2444..f9875bdcb806a 100644
--- a/packages/react-devtools-timeline/src/view-base/vertical-scroll-overflow/VerticalScrollOverflowView.js
+++ b/packages/react-devtools-timeline/src/view-base/vertical-scroll-overflow/VerticalScrollOverflowView.js
@@ -72,10 +72,10 @@ export class VerticalScrollOverflowView extends View {
     this.setNeedsDisplay();
   }
 
-  _onVerticalScrollViewChange = (
+  _onVerticalScrollViewChange: (
     scrollState: ScrollState,
     containerLength: number,
-  ) => {
+  ) => void = (scrollState: ScrollState, containerLength: number) => {
     const maxOffset = scrollState.length - containerLength;
     if (maxOffset === 0) {
       return;
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 3812baffc7486..4d8e677e03739 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -19,6 +19,7 @@ let Suspense;
 let SuspenseList;
 let useSyncExternalStore;
 let useSyncExternalStoreWithSelector;
+let use;
 let PropTypes;
 let textCache;
 let window;
@@ -42,6 +43,7 @@ describe('ReactDOMFizzServer', () => {
     Suspense = React.Suspense;
     if (gate(flags => flags.enableSuspenseList)) {
       SuspenseList = React.SuspenseList;
+      use = React.experimental_use;
     }
 
     PropTypes = require('prop-types');
@@ -5243,5 +5245,263 @@ describe('ReactDOMFizzServer', () => {
         console.error = originalConsoleError;
       }
     });
+
+    // @gate enableUseHook
+    it('basic use(promise)', async () => {
+      const promiseA = Promise.resolve('A');
+      const promiseB = Promise.resolve('B');
+      const promiseC = Promise.resolve('C');
+
+      function Async() {
+        return use(promiseA) + use(promiseB) + use(promiseC);
+      }
+
+      function App() {
+        return (
+          <Suspense fallback="Loading...">
+            <Async />
+          </Suspense>
+        );
+      }
+
+      await act(async () => {
+        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+        pipe(writable);
+      });
+
+      // TODO: The `act` implementation in this file doesn't unwrap microtasks
+      // automatically. We can't use the same `act` we use for Fiber tests
+      // because that relies on the mock Scheduler. Doesn't affect any public
+      // API but we might want to fix this for our own internal tests.
+      //
+      // For now, wait for each promise in sequence.
+      await act(async () => {
+        await promiseA;
+      });
+      await act(async () => {
+        await promiseB;
+      });
+      await act(async () => {
+        await promiseC;
+      });
+
+      expect(getVisibleChildren(container)).toEqual('ABC');
+
+      ReactDOMClient.hydrateRoot(container, <App />);
+      expect(Scheduler).toFlushAndYield([]);
+      expect(getVisibleChildren(container)).toEqual('ABC');
+    });
+
+    // @gate enableUseHook
+    it('basic use(context)', async () => {
+      const ContextA = React.createContext('default');
+      const ContextB = React.createContext('B');
+      const ServerContext = React.createServerContext(
+        'ServerContext',
+        'default',
+      );
+      function Client() {
+        return use(ContextA) + use(ContextB);
+      }
+      function ServerComponent() {
+        return use(ServerContext);
+      }
+      function Server() {
+        return (
+          <ServerContext.Provider value="C">
+            <ServerComponent />
+          </ServerContext.Provider>
+        );
+      }
+      function App() {
+        return (
+          <>
+            <ContextA.Provider value="A">
+              <Client />
+            </ContextA.Provider>
+            <Server />
+          </>
+        );
+      }
+
+      await act(async () => {
+        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+        pipe(writable);
+      });
+      expect(getVisibleChildren(container)).toEqual(['AB', 'C']);
+
+      // Hydration uses a different renderer runtime (Fiber instead of Fizz).
+      // We reset _currentRenderer here to not trigger a warning about multiple
+      // renderers concurrently using these contexts
+      ContextA._currentRenderer = null;
+      ServerContext._currentRenderer = null;
+      ReactDOMClient.hydrateRoot(container, <App />);
+      expect(Scheduler).toFlushAndYield([]);
+      expect(getVisibleChildren(container)).toEqual(['AB', 'C']);
+    });
+
+    // @gate enableUseHook
+    it('use(promise) in multiple components', async () => {
+      const promiseA = Promise.resolve('A');
+      const promiseB = Promise.resolve('B');
+      const promiseC = Promise.resolve('C');
+      const promiseD = Promise.resolve('D');
+
+      function Child({prefix}) {
+        return prefix + use(promiseC) + use(promiseD);
+      }
+
+      function Parent() {
+        return <Child prefix={use(promiseA) + use(promiseB)} />;
+      }
+
+      function App() {
+        return (
+          <Suspense fallback="Loading...">
+            <Parent />
+          </Suspense>
+        );
+      }
+
+      await act(async () => {
+        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+        pipe(writable);
+      });
+
+      // TODO: The `act` implementation in this file doesn't unwrap microtasks
+      // automatically. We can't use the same `act` we use for Fiber tests
+      // because that relies on the mock Scheduler. Doesn't affect any public
+      // API but we might want to fix this for our own internal tests.
+      //
+      // For now, wait for each promise in sequence.
+      await act(async () => {
+        await promiseA;
+      });
+      await act(async () => {
+        await promiseB;
+      });
+      await act(async () => {
+        await promiseC;
+      });
+      await act(async () => {
+        await promiseD;
+      });
+
+      expect(getVisibleChildren(container)).toEqual('ABCD');
+
+      ReactDOMClient.hydrateRoot(container, <App />);
+      expect(Scheduler).toFlushAndYield([]);
+      expect(getVisibleChildren(container)).toEqual('ABCD');
+    });
+
+    // @gate enableUseHook
+    it('using a rejected promise will throw', async () => {
+      const promiseA = Promise.resolve('A');
+      const promiseB = Promise.reject(new Error('Oops!'));
+      const promiseC = Promise.resolve('C');
+
+      // Jest/Node will raise an unhandled rejected error unless we await this. It
+      // works fine in the browser, though.
+      await expect(promiseB).rejects.toThrow('Oops!');
+
+      function Async() {
+        return use(promiseA) + use(promiseB) + use(promiseC);
+      }
+
+      class ErrorBoundary extends React.Component {
+        state = {error: null};
+        static getDerivedStateFromError(error) {
+          return {error};
+        }
+        render() {
+          if (this.state.error) {
+            return this.state.error.message;
+          }
+          return this.props.children;
+        }
+      }
+
+      function App() {
+        return (
+          <Suspense fallback="Loading...">
+            <ErrorBoundary>
+              <Async />
+            </ErrorBoundary>
+          </Suspense>
+        );
+      }
+
+      const reportedServerErrors = [];
+      await act(async () => {
+        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />, {
+          onError(error) {
+            reportedServerErrors.push(error);
+          },
+        });
+        pipe(writable);
+      });
+
+      // TODO: The `act` implementation in this file doesn't unwrap microtasks
+      // automatically. We can't use the same `act` we use for Fiber tests
+      // because that relies on the mock Scheduler. Doesn't affect any public
+      // API but we might want to fix this for our own internal tests.
+      //
+      // For now, wait for each promise in sequence.
+      await act(async () => {
+        await promiseA;
+      });
+      await act(async () => {
+        await expect(promiseB).rejects.toThrow('Oops!');
+      });
+      await act(async () => {
+        await promiseC;
+      });
+
+      expect(getVisibleChildren(container)).toEqual('Loading...');
+      expect(reportedServerErrors.length).toBe(1);
+      expect(reportedServerErrors[0].message).toBe('Oops!');
+
+      const reportedClientErrors = [];
+      ReactDOMClient.hydrateRoot(container, <App />, {
+        onRecoverableError(error) {
+          reportedClientErrors.push(error);
+        },
+      });
+      expect(Scheduler).toFlushAndYield([]);
+      expect(getVisibleChildren(container)).toEqual('Oops!');
+      expect(reportedClientErrors.length).toBe(1);
+      if (__DEV__) {
+        expect(reportedClientErrors[0].message).toBe('Oops!');
+      } else {
+        expect(reportedClientErrors[0].message).toBe(
+          'The server could not finish this Suspense boundary, likely due to ' +
+            'an error during server rendering. Switched to client rendering.',
+        );
+      }
+    });
+
+    // @gate enableUseHook
+    it("use a promise that's already been instrumented and resolved", async () => {
+      const thenable = {
+        status: 'fulfilled',
+        value: 'Hi',
+        then() {},
+      };
+
+      // This will never suspend because the thenable already resolved
+      function App() {
+        return use(thenable);
+      }
+
+      await act(async () => {
+        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+        pipe(writable);
+      });
+      expect(getVisibleChildren(container)).toEqual('Hi');
+
+      ReactDOMClient.hydrateRoot(container, <App />);
+      expect(Scheduler).toFlushAndYield([]);
+      expect(getVisibleChildren(container)).toEqual('Hi');
+    });
   });
 });
diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js
index 1c664588407bc..406cda4f266a8 100644
--- a/packages/react-dom/src/client/ReactDOM.js
+++ b/packages/react-dom/src/client/ReactDOM.js
@@ -82,11 +82,11 @@ setAttemptHydrationAtPriority(runWithPriority);
 if (__DEV__) {
   if (
     typeof Map !== 'function' ||
-    // $FlowIssue Flow incorrectly thinks Map has no prototype
+    // $FlowFixMe Flow incorrectly thinks Map has no prototype
     Map.prototype == null ||
     typeof Map.prototype.forEach !== 'function' ||
     typeof Set !== 'function' ||
-    // $FlowIssue Flow incorrectly thinks Set has no prototype
+    // $FlowFixMe Flow incorrectly thinks Set has no prototype
     Set.prototype == null ||
     typeof Set.prototype.clear !== 'function' ||
     typeof Set.prototype.forEach !== 'function'
diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js
index 8b48bae61a497..defc3d93fc036 100644
--- a/packages/react-dom/src/client/ReactDOMComponent.js
+++ b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -420,7 +420,7 @@ export function createElement(
       const firstChild = ((div.firstChild: any): HTMLScriptElement);
       domElement = div.removeChild(firstChild);
     } else if (typeof props.is === 'string') {
-      // $FlowIssue `createElement` should be updated for Web Components
+      // $FlowFixMe `createElement` should be updated for Web Components
       domElement = ownerDocument.createElement(type, {is: props.is});
     } else {
       // Separate else branch instead of using `props.is || undefined` above because of a Firefox bug.
diff --git a/packages/react-dom/src/client/ReactDOMEventHandle.js b/packages/react-dom/src/client/ReactDOMEventHandle.js
index 0fd0cd1599780..6ec1b6f2ee62e 100644
--- a/packages/react-dom/src/client/ReactDOMEventHandle.js
+++ b/packages/react-dom/src/client/ReactDOMEventHandle.js
@@ -29,9 +29,9 @@ import {
   enableCreateEventHandleAPI,
 } from 'shared/ReactFeatureFlags';
 
-type EventHandleOptions = {|
+type EventHandleOptions = {
   capture?: boolean,
-|};
+};
 
 function isValidEventTarget(target: EventTarget | ReactScopeInstance): boolean {
   return typeof (target: Object).addEventListener === 'function';
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index 52646306767ce..4510efe2b892c 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -126,12 +126,12 @@ export type UpdatePayload = Array<mixed>;
 export type ChildSet = void; // Unused
 export type TimeoutHandle = TimeoutID;
 export type NoTimeout = -1;
-export type RendererInspectionConfig = $ReadOnly<{||}>;
+export type RendererInspectionConfig = $ReadOnly<{}>;
 
-type SelectionInformation = {|
+type SelectionInformation = {
   focusedElem: null | HTMLElement,
   selectionRange: mixed,
-|};
+};
 
 const SUPPRESS_HYDRATION_WARNING = 'suppressHydrationWarning';
 
@@ -1329,11 +1329,11 @@ export function setupIntersectionObserver(
   targets: Array<Instance>,
   callback: ObserveVisibleRectsCallback,
   options?: IntersectionObserverOptions,
-): {|
+): {
   disconnect: () => void,
   observe: (instance: Instance) => void,
   unobserve: (instance: Instance) => void,
-|} {
+} {
   const rectRatioCache: Map<Instance, RectRatio> = new Map();
   targets.forEach(target => {
     rectRatioCache.set(target, {
diff --git a/packages/react-dom/src/client/ReactDOMSelect.js b/packages/react-dom/src/client/ReactDOMSelect.js
index ece9275e4b37e..57f53b5206a82 100644
--- a/packages/react-dom/src/client/ReactDOMSelect.js
+++ b/packages/react-dom/src/client/ReactDOMSelect.js
@@ -21,9 +21,9 @@ if (__DEV__) {
   didWarnValueDefaultValue = false;
 }
 
-type SelectWithWrapperState = HTMLSelectElement & {|
-  _wrapperState: {|wasMultiple: boolean|},
-|};
+type SelectWithWrapperState = HTMLSelectElement & {
+  _wrapperState: {wasMultiple: boolean},
+};
 
 function getDeclarationErrorAddendum() {
   const ownerName = getCurrentFiberOwnerNameInDevOrNull();
diff --git a/packages/react-dom/src/client/ReactDOMTextarea.js b/packages/react-dom/src/client/ReactDOMTextarea.js
index 6834b16e4e97c..065f76d16c12d 100644
--- a/packages/react-dom/src/client/ReactDOMTextarea.js
+++ b/packages/react-dom/src/client/ReactDOMTextarea.js
@@ -17,9 +17,9 @@ import {disableTextareaChildren} from 'shared/ReactFeatureFlags';
 
 let didWarnValDefaultVal = false;
 
-type TextAreaWithWrapperState = HTMLTextAreaElement & {|
-  _wrapperState: {|initialValue: ToStringValue|},
-|};
+type TextAreaWithWrapperState = HTMLTextAreaElement & {
+  _wrapperState: {initialValue: ToStringValue},
+};
 
 /**
  * Implements a <textarea> host component that allows setting `value`, and
diff --git a/packages/react-dom/src/client/inputValueTracking.js b/packages/react-dom/src/client/inputValueTracking.js
index 499c9aa97ecc6..6bec33f9b0432 100644
--- a/packages/react-dom/src/client/inputValueTracking.js
+++ b/packages/react-dom/src/client/inputValueTracking.js
@@ -9,11 +9,11 @@
 
 import {checkFormFieldValueStringCoercion} from 'shared/CheckStringCoercion';
 
-type ValueTracker = {|
+type ValueTracker = {
   getValue(): string,
   setValue(value: string): void,
   stopTracking(): void,
-|};
+};
 type WrapperState = {_valueTracker?: ?ValueTracker, ...};
 type ElementWithValueTracker = HTMLInputElement & WrapperState;
 
diff --git a/packages/react-dom/src/events/DOMPluginEventSystem.js b/packages/react-dom/src/events/DOMPluginEventSystem.js
index e52b128c11daa..0b1f1c498e024 100644
--- a/packages/react-dom/src/events/DOMPluginEventSystem.js
+++ b/packages/react-dom/src/events/DOMPluginEventSystem.js
@@ -72,16 +72,16 @@ import * as EnterLeaveEventPlugin from './plugins/EnterLeaveEventPlugin';
 import * as SelectEventPlugin from './plugins/SelectEventPlugin';
 import * as SimpleEventPlugin from './plugins/SimpleEventPlugin';
 
-type DispatchListener = {|
+type DispatchListener = {
   instance: null | Fiber,
   listener: Function,
   currentTarget: EventTarget,
-|};
+};
 
-type DispatchEntry = {|
+type DispatchEntry = {
   event: ReactSyntheticEvent,
   listeners: Array<DispatchListener>,
-|};
+};
 
 export type DispatchQueue = Array<DispatchEntry>;
 
diff --git a/packages/react-dom/src/events/ReactDOMEventReplaying.js b/packages/react-dom/src/events/ReactDOMEventReplaying.js
index a5d669732b4ab..f60208d650c4c 100644
--- a/packages/react-dom/src/events/ReactDOMEventReplaying.js
+++ b/packages/react-dom/src/events/ReactDOMEventReplaying.js
@@ -90,13 +90,13 @@ type PointerEvent = Event & {
   ...
 };
 
-type QueuedReplayableEvent = {|
+type QueuedReplayableEvent = {
   blockedOn: null | Container | SuspenseInstance,
   domEventName: DOMEventName,
   eventSystemFlags: EventSystemFlags,
   nativeEvent: AnyNativeEvent,
   targetContainers: Array<EventTarget>,
-|};
+};
 
 let hasScheduledReplayAttempt = false;
 
@@ -115,11 +115,11 @@ const queuedPointers: Map<number, QueuedReplayableEvent> = new Map();
 const queuedPointerCaptures: Map<number, QueuedReplayableEvent> = new Map();
 // We could consider replaying selectionchange and touchmoves too.
 
-type QueuedHydrationTarget = {|
+type QueuedHydrationTarget = {
   blockedOn: null | Container | SuspenseInstance,
   target: Node,
   priority: EventPriority,
-|};
+};
 const queuedExplicitHydrationTargets: Array<QueuedHydrationTarget> = [];
 
 export function hasQueuedDiscreteEvents(): boolean {
diff --git a/packages/react-dom/src/events/ReactSyntheticEventType.js b/packages/react-dom/src/events/ReactSyntheticEventType.js
index d92777a75cce3..b9ee797617786 100644
--- a/packages/react-dom/src/events/ReactSyntheticEventType.js
+++ b/packages/react-dom/src/events/ReactSyntheticEventType.js
@@ -11,14 +11,14 @@
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 import type {DOMEventName} from './DOMEventNames';
 
-export type DispatchConfig = {|
+export type DispatchConfig = {
   dependencies?: Array<DOMEventName>,
-  phasedRegistrationNames: {|
+  phasedRegistrationNames: {
     bubbled: null | string,
     captured: null | string,
-  |},
+  },
   registrationName?: string,
-|};
+};
 
 type BaseSyntheticEvent = {
   isPersistent: () => boolean,
diff --git a/packages/react-dom/src/events/SyntheticEvent.js b/packages/react-dom/src/events/SyntheticEvent.js
index 3609e6794a50d..87bdad3548cdc 100644
--- a/packages/react-dom/src/events/SyntheticEvent.js
+++ b/packages/react-dom/src/events/SyntheticEvent.js
@@ -9,11 +9,14 @@
 
 /* eslint valid-typeof: 0 */
 
+import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
+
 import assign from 'shared/assign';
 import getEventCharCode from './getEventCharCode';
 
 type EventInterfaceType = {
-  [propName: string]: 0 | ((event: {[propName: string]: mixed}) => mixed),
+  [propName: string]: 0 | ((event: {[propName: string]: mixed, ...}) => mixed),
+  ...,
 };
 
 function functionThatReturnsTrue() {
@@ -43,8 +46,8 @@ function createSyntheticEvent(Interface: EventInterfaceType) {
   function SyntheticBaseEvent(
     reactName: string | null,
     reactEventType: string,
-    targetInst: Fiber,
-    nativeEvent: {[propName: string]: mixed},
+    targetInst: Fiber | null,
+    nativeEvent: {[propName: string]: mixed, ...},
     nativeEventTarget: null | EventTarget,
   ) {
     this._reactName = reactName;
@@ -166,7 +169,9 @@ let lastMouseEvent;
 function updateMouseMovementPolyfillState(event) {
   if (event !== lastMouseEvent) {
     if (lastMouseEvent && event.type === 'mousemove') {
+      // $FlowFixMe assuming this is a number
       lastMovementX = event.screenX - lastMouseEvent.screenX;
+      // $FlowFixMe assuming this is a number
       lastMovementY = event.screenY - lastMouseEvent.screenY;
     } else {
       lastMovementX = 0;
@@ -367,7 +372,9 @@ function getEventKey(nativeEvent) {
 
     // FireFox implements `key` but returns `MozPrintableKey` for all
     // printable characters (normalized to `Unidentified`), ignore it.
-    const key = normalizeKey[nativeEvent.key] || nativeEvent.key;
+    const key =
+      // $FlowFixMe unable to index with a `mixed` value
+      normalizeKey[nativeEvent.key] || nativeEvent.key;
     if (key !== 'Unidentified') {
       return key;
     }
@@ -375,7 +382,10 @@ function getEventKey(nativeEvent) {
 
   // Browser does not implement `key`, polyfill as much of it as we can.
   if (nativeEvent.type === 'keypress') {
-    const charCode = getEventCharCode(nativeEvent);
+    const charCode = getEventCharCode(
+      // $FlowFixMe unable to narrow to `KeyboardEvent`
+      nativeEvent,
+    );
 
     // The enter-key is technically both printable and non-printable and can
     // thus be captured by `keypress`, no other non-printable key should.
@@ -384,6 +394,7 @@ function getEventKey(nativeEvent) {
   if (nativeEvent.type === 'keydown' || nativeEvent.type === 'keyup') {
     // While user keyboard layout determines the actual meaning of each
     // `keyCode` value, almost all function keys have a universal value.
+    // $FlowFixMe unable to index with a `mixed` value
     return translateToKey[nativeEvent.keyCode] || 'Unidentified';
   }
   return '';
@@ -441,7 +452,10 @@ const KeyboardEventInterface = {
     // KeyPress is deprecated, but its replacement is not yet final and not
     // implemented in any major browser. Only KeyPress has charCode.
     if (event.type === 'keypress') {
-      return getEventCharCode(event);
+      return getEventCharCode(
+        // $FlowFixMe unable to narrow to `KeyboardEvent`
+        event,
+      );
     }
     return 0;
   },
@@ -462,7 +476,10 @@ const KeyboardEventInterface = {
     // `which` is an alias for either `keyCode` or `charCode` depending on the
     // type of the event.
     if (event.type === 'keypress') {
-      return getEventCharCode(event);
+      return getEventCharCode(
+        // $FlowFixMe unable to narrow to `KeyboardEvent`
+        event,
+      );
     }
     if (event.type === 'keydown' || event.type === 'keyup') {
       return event.keyCode;
@@ -538,7 +555,8 @@ const WheelEventInterface = {
       ? event.deltaX
       : // Fallback to `wheelDeltaX` for Webkit and normalize (right is positive).
       'wheelDeltaX' in event
-      ? -event.wheelDeltaX
+      ? // $FlowFixMe assuming this is a number
+        -event.wheelDeltaX
       : 0;
   },
   deltaY(event) {
@@ -546,10 +564,12 @@ const WheelEventInterface = {
       ? event.deltaY
       : // Fallback to `wheelDeltaY` for Webkit and normalize (down is positive).
       'wheelDeltaY' in event
-      ? -event.wheelDeltaY
+      ? // $FlowFixMe assuming this is a number
+        -event.wheelDeltaY
       : // Fallback to `wheelDelta` for IE<9 and normalize (down is positive).
       'wheelDelta' in event
-      ? -event.wheelDelta
+      ? // $FlowFixMe assuming this is a number
+        -event.wheelDelta
       : 0;
   },
   deltaZ: 0,
diff --git a/packages/react-dom/src/events/plugins/BeforeInputEventPlugin.js b/packages/react-dom/src/events/plugins/BeforeInputEventPlugin.js
index 5e413a3459e14..c9f18c6abf7c4 100644
--- a/packages/react-dom/src/events/plugins/BeforeInputEventPlugin.js
+++ b/packages/react-dom/src/events/plugins/BeforeInputEventPlugin.js
@@ -12,6 +12,7 @@ import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 import type {AnyNativeEvent} from '../../events/PluginModuleType';
 import type {DispatchQueue} from '../DOMPluginEventSystem';
 import type {EventSystemFlags} from '../EventSystemFlags';
+import type {ReactSyntheticEvent} from '../ReactSyntheticEventType';
 
 import {canUseDOM} from 'shared/ExecutionEnvironment';
 
@@ -228,7 +229,8 @@ function extractCompositionEvent(
 
   const listeners = accumulateTwoPhaseListeners(targetInst, eventType);
   if (listeners.length > 0) {
-    const event = new SyntheticCompositionEvent(
+    // $FlowFixMe[incompatible-type]
+    const event: ReactSyntheticEvent = new SyntheticCompositionEvent(
       eventType,
       domEventName,
       null,
@@ -239,10 +241,12 @@ function extractCompositionEvent(
     if (fallbackData) {
       // Inject data generated from fallback path into the synthetic event.
       // This matches the property of native CompositionEventInterface.
+      // $FlowFixMe[incompatible-use]
       event.data = fallbackData;
     } else {
       const customData = getDataFromCustomEvent(nativeEvent);
       if (customData !== null) {
+        // $FlowFixMe[incompatible-use]
         event.data = customData;
       }
     }
@@ -398,7 +402,8 @@ function extractBeforeInputEvent(
 
   const listeners = accumulateTwoPhaseListeners(targetInst, 'onBeforeInput');
   if (listeners.length > 0) {
-    const event = new SyntheticInputEvent(
+    // $FlowFixMe[incompatible-type]
+    const event: ReactSyntheticEvent = new SyntheticInputEvent(
       'onBeforeInput',
       'beforeinput',
       null,
@@ -406,6 +411,7 @@ function extractBeforeInputEvent(
       nativeEventTarget,
     );
     dispatchQueue.push({event, listeners});
+    // $FlowFixMe[incompatible-use]
     event.data = chars;
   }
 }
diff --git a/packages/react-dom/src/events/plugins/ChangeEventPlugin.js b/packages/react-dom/src/events/plugins/ChangeEventPlugin.js
index 8985c50c71f9a..cc99bd3ad1264 100644
--- a/packages/react-dom/src/events/plugins/ChangeEventPlugin.js
+++ b/packages/react-dom/src/events/plugins/ChangeEventPlugin.js
@@ -10,6 +10,8 @@ import type {AnyNativeEvent} from '../PluginModuleType';
 import type {DOMEventName} from '../DOMEventNames';
 import type {DispatchQueue} from '../DOMPluginEventSystem';
 import type {EventSystemFlags} from '../EventSystemFlags';
+import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
+import type {ReactSyntheticEvent} from '../ReactSyntheticEventType';
 
 import {registerTwoPhaseEvent} from '../EventRegistry';
 import {SyntheticEvent} from '../SyntheticEvent';
@@ -57,7 +59,8 @@ function createAndAccumulateChangeEvent(
   enqueueStateRestore(((target: any): Node));
   const listeners = accumulateTwoPhaseListeners(inst, 'onChange');
   if (listeners.length > 0) {
-    const event = new SyntheticEvent(
+    // $FlowFixMe[incompatible-type]
+    const event: ReactSyntheticEvent = new SyntheticEvent(
       'onChange',
       'change',
       null,
diff --git a/packages/react-dom/src/events/plugins/EnterLeaveEventPlugin.js b/packages/react-dom/src/events/plugins/EnterLeaveEventPlugin.js
index ea7e3fac1cd57..ef90afcec0414 100644
--- a/packages/react-dom/src/events/plugins/EnterLeaveEventPlugin.js
+++ b/packages/react-dom/src/events/plugins/EnterLeaveEventPlugin.js
@@ -11,6 +11,8 @@ import type {AnyNativeEvent} from '../PluginModuleType';
 import type {DOMEventName} from '../DOMEventNames';
 import type {DispatchQueue} from '../DOMPluginEventSystem';
 import type {EventSystemFlags} from '../EventSystemFlags';
+import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
+import type {KnownReactSyntheticEvent} from '../ReactSyntheticEventType';
 
 import {registerDirectEvent} from '../EventRegistry';
 import {isReplayingEvent} from '../CurrentReplayingEvent';
@@ -21,7 +23,6 @@ import {
   isContainerMarkedAsRoot,
 } from '../../client/ReactDOMComponentTree';
 import {accumulateEnterLeaveTwoPhaseListeners} from '../DOMPluginEventSystem';
-import type {KnownReactSyntheticEvent} from '../ReactSyntheticEventType';
 
 import {HostComponent, HostText} from 'react-reconciler/src/ReactWorkTags';
 import {getNearestMountedFiber} from 'react-reconciler/src/ReactFiberTreeReflection';
@@ -133,7 +134,9 @@ function extractEvents(
   const fromNode = from == null ? win : getNodeFromInstance(from);
   const toNode = to == null ? win : getNodeFromInstance(to);
 
-  const leave = new SyntheticEventCtor(
+  // $FlowFixMe[prop-missing]
+  // $FlowFixMe[incompatible-type]
+  const leave: KnownReactSyntheticEvent = new SyntheticEventCtor(
     leaveEventType,
     eventTypePrefix + 'leave',
     from,
@@ -149,6 +152,7 @@ function extractEvents(
   // the first ancestor. Next time, we will ignore the event.
   const nativeTargetInst = getClosestInstanceFromNode((nativeEventTarget: any));
   if (nativeTargetInst === targetInst) {
+    // $FlowFixMe[prop-missing]
     const enterEvent: KnownReactSyntheticEvent = new SyntheticEventCtor(
       enterEventType,
       eventTypePrefix + 'enter',
diff --git a/packages/react-dom/src/events/plugins/SelectEventPlugin.js b/packages/react-dom/src/events/plugins/SelectEventPlugin.js
index befa735be8788..2032b02565329 100644
--- a/packages/react-dom/src/events/plugins/SelectEventPlugin.js
+++ b/packages/react-dom/src/events/plugins/SelectEventPlugin.js
@@ -11,6 +11,8 @@ import type {AnyNativeEvent} from '../PluginModuleType';
 import type {DOMEventName} from '../DOMEventNames';
 import type {DispatchQueue} from '../DOMPluginEventSystem';
 import type {EventSystemFlags} from '../EventSystemFlags';
+import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
+import type {ReactSyntheticEvent} from '../ReactSyntheticEventType';
 
 import {canUseDOM} from 'shared/ExecutionEnvironment';
 import {SyntheticEvent} from '../../events/SyntheticEvent';
@@ -114,7 +116,8 @@ function constructSelectEvent(dispatchQueue, nativeEvent, nativeEventTarget) {
       'onSelect',
     );
     if (listeners.length > 0) {
-      const event = new SyntheticEvent(
+      // $FlowFixMe[incompatible-type]
+      const event: ReactSyntheticEvent = new SyntheticEvent(
         'onSelect',
         'select',
         null,
diff --git a/packages/react-dom/src/events/plugins/SimpleEventPlugin.js b/packages/react-dom/src/events/plugins/SimpleEventPlugin.js
index 03bf9484b2c04..07c9ec94c7104 100644
--- a/packages/react-dom/src/events/plugins/SimpleEventPlugin.js
+++ b/packages/react-dom/src/events/plugins/SimpleEventPlugin.js
@@ -12,6 +12,7 @@ import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 import type {AnyNativeEvent} from '../../events/PluginModuleType';
 import type {DispatchQueue} from '../DOMPluginEventSystem';
 import type {EventSystemFlags} from '../EventSystemFlags';
+import type {ReactSyntheticEvent} from '../ReactSyntheticEventType';
 
 import {
   SyntheticEvent,
@@ -172,7 +173,8 @@ function extractEvents(
     );
     if (listeners.length > 0) {
       // Intentionally create event lazily.
-      const event = new SyntheticEventCtor(
+      // $FlowFixMe[incompatible-type]
+      const event: ReactSyntheticEvent = new SyntheticEventCtor(
         reactName,
         reactEventType,
         null,
@@ -204,7 +206,8 @@ function extractEvents(
     );
     if (listeners.length > 0) {
       // Intentionally create event lazily.
-      const event = new SyntheticEventCtor(
+      // $FlowFixMe[incompatible-type]
+      const event: ReactSyntheticEvent = new SyntheticEventCtor(
         reactName,
         reactEventType,
         null,
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
index 2f626c922aa1a..758f35058aaa0 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
@@ -24,7 +24,7 @@ import {
   createRootFormatContext,
 } from './ReactDOMServerFormatConfig';
 
-type Options = {|
+type Options = {
   identifierPrefix?: string,
   namespaceURI?: string,
   nonce?: string,
@@ -34,7 +34,7 @@ type Options = {|
   progressiveChunkSize?: number,
   signal?: AbortSignal,
   onError?: (error: mixed) => ?string,
-|};
+};
 
 // TODO: Move to sub-classing ReadableStream.
 type ReactDOMServerReadableStream = ReadableStream & {
@@ -57,10 +57,10 @@ function renderToReadableStream(
       const stream: ReactDOMServerReadableStream = (new ReadableStream(
         {
           type: 'bytes',
-          pull(controller) {
+          pull(controller): ?Promise<void> {
             startFlowing(request, controller);
           },
-          cancel(reason) {
+          cancel(reason): ?Promise<void> {
             abort(request);
           },
         },
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerNode.js b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
index 6790c44bccaca..facfe3f80c33d 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerNode.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
@@ -34,7 +34,7 @@ function createAbortHandler(request, reason) {
   return () => abort(request, new Error(reason));
 }
 
-type Options = {|
+type Options = {
   identifierPrefix?: string,
   namespaceURI?: string,
   nonce?: string,
@@ -46,14 +46,14 @@ type Options = {|
   onShellError?: (error: mixed) => void,
   onAllReady?: () => void,
   onError?: (error: mixed) => ?string,
-|};
+};
 
-type PipeableStream = {|
+type PipeableStream = {
   // Cancel any pending I/O and put anything remaining into
   // client rendered mode.
   abort(reason: mixed): void,
   pipe<T: Writable>(destination: T): T,
-|};
+};
 
 function createRequestImpl(children: ReactNodeList, options: void | Options) {
   return createRequest(
diff --git a/packages/react-dom/src/server/ReactDOMFizzStaticBrowser.js b/packages/react-dom/src/server/ReactDOMFizzStaticBrowser.js
index 38e4c948f6b9b..f52901fb320eb 100644
--- a/packages/react-dom/src/server/ReactDOMFizzStaticBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMFizzStaticBrowser.js
@@ -24,7 +24,7 @@ import {
   createRootFormatContext,
 } from './ReactDOMServerFormatConfig';
 
-type Options = {|
+type Options = {
   identifierPrefix?: string,
   namespaceURI?: string,
   bootstrapScriptContent?: string,
@@ -33,11 +33,11 @@ type Options = {|
   progressiveChunkSize?: number,
   signal?: AbortSignal,
   onError?: (error: mixed) => ?string,
-|};
+};
 
-type StaticResult = {|
+type StaticResult = {
   prelude: ReadableStream,
-|};
+};
 
 function prerender(
   children: ReactNodeList,
@@ -50,7 +50,7 @@ function prerender(
       const stream = new ReadableStream(
         {
           type: 'bytes',
-          pull(controller) {
+          pull(controller): ?Promise<void> {
             startFlowing(request, controller);
           },
         },
diff --git a/packages/react-dom/src/server/ReactDOMFizzStaticNode.js b/packages/react-dom/src/server/ReactDOMFizzStaticNode.js
index b5f0022d12956..ba9b6a1fbba79 100644
--- a/packages/react-dom/src/server/ReactDOMFizzStaticNode.js
+++ b/packages/react-dom/src/server/ReactDOMFizzStaticNode.js
@@ -26,7 +26,7 @@ import {
   createRootFormatContext,
 } from './ReactDOMServerFormatConfig';
 
-type Options = {|
+type Options = {
   identifierPrefix?: string,
   namespaceURI?: string,
   bootstrapScriptContent?: string,
@@ -35,11 +35,11 @@ type Options = {|
   progressiveChunkSize?: number,
   signal?: AbortSignal,
   onError?: (error: mixed) => ?string,
-|};
+};
 
-type StaticResult = {|
+type StaticResult = {
   prelude: Readable,
-|};
+};
 
 function createFakeWritable(readable): Writable {
   // The current host config expects a Writable so we create
diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index 308e35a20b3ae..c30d9673265c2 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -477,7 +477,7 @@ function pushAttribute(
     // shouldRemoveAttribute
     switch (typeof value) {
       case 'function':
-      // $FlowIssue symbol is perfectly valid here
+      // $FlowFixMe symbol is perfectly valid here
       case 'symbol': // eslint-disable-line
         return;
       case 'boolean': {
@@ -586,7 +586,7 @@ function pushAttribute(
     // shouldRemoveAttribute
     switch (typeof value) {
       case 'function':
-      // $FlowIssue symbol is perfectly valid here
+      // $FlowFixMe symbol is perfectly valid here
       case 'symbol': // eslint-disable-line
         return;
       case 'boolean': {
diff --git a/packages/react-dom/src/shared/DOMProperty.js b/packages/react-dom/src/shared/DOMProperty.js
index b5540debb71df..09f1dd2b66a31 100644
--- a/packages/react-dom/src/shared/DOMProperty.js
+++ b/packages/react-dom/src/shared/DOMProperty.js
@@ -48,7 +48,7 @@ export const NUMERIC = 5;
 // When falsy, it should be removed.
 export const POSITIVE_NUMERIC = 6;
 
-export type PropertyInfo = {|
+export type PropertyInfo = {
   +acceptsBooleans: boolean,
   +attributeName: string,
   +attributeNamespace: string | null,
@@ -57,7 +57,7 @@ export type PropertyInfo = {|
   +type: PropertyType,
   +sanitizeURL: boolean,
   +removeEmptyString: boolean,
-|};
+};
 
 /* eslint-disable max-len */
 export const ATTRIBUTE_NAME_START_CHAR =
@@ -123,7 +123,7 @@ export function shouldRemoveAttributeWithWarning(
   }
   switch (typeof value) {
     case 'function':
-    // $FlowIssue symbol is perfectly valid here
+    // $FlowFixMe symbol is perfectly valid here
     case 'symbol': // eslint-disable-line
       return true;
     case 'boolean': {
diff --git a/packages/react-dom/src/shared/ReactDOMTypes.js b/packages/react-dom/src/shared/ReactDOMTypes.js
index 4e2eddb9a0d75..56f49e635897a 100644
--- a/packages/react-dom/src/shared/ReactDOMTypes.js
+++ b/packages/react-dom/src/shared/ReactDOMTypes.js
@@ -15,8 +15,8 @@ export type ReactDOMEventHandle = (
   callback: (SyntheticEvent<EventTarget>) => void,
 ) => () => void;
 
-export type ReactDOMEventHandleListener = {|
+export type ReactDOMEventHandleListener = {
   callback: (SyntheticEvent<EventTarget>) => void,
   capture: boolean,
   type: DOMEventName,
-|};
+};
diff --git a/packages/react-fetch/src/ReactFetchBrowser.js b/packages/react-fetch/src/ReactFetchBrowser.js
index 473a875c30b1e..3bba1e31b6f95 100644
--- a/packages/react-fetch/src/ReactFetchBrowser.js
+++ b/packages/react-fetch/src/ReactFetchBrowser.js
@@ -15,20 +15,20 @@ const Pending = 0;
 const Resolved = 1;
 const Rejected = 2;
 
-type PendingRecord = {|
+type PendingRecord = {
   status: 0,
   value: Wakeable,
-|};
+};
 
-type ResolvedRecord = {|
+type ResolvedRecord = {
   status: 1,
   value: mixed,
-|};
+};
 
-type RejectedRecord = {|
+type RejectedRecord = {
   status: 2,
   value: mixed,
-|};
+};
 
 type Record = PendingRecord | ResolvedRecord | RejectedRecord;
 
diff --git a/packages/react-fetch/src/ReactFetchNode.js b/packages/react-fetch/src/ReactFetchNode.js
index 2b1ef5f200cb1..c689c08a70d95 100644
--- a/packages/react-fetch/src/ReactFetchNode.js
+++ b/packages/react-fetch/src/ReactFetchNode.js
@@ -13,7 +13,7 @@ import * as http from 'http';
 import * as https from 'https';
 import {unstable_getCacheForType} from 'react';
 
-type FetchResponse = {|
+type FetchResponse = {
   // Properties
   headers: any,
   ok: boolean,
@@ -27,7 +27,7 @@ type FetchResponse = {|
   blob(): any,
   json(): any,
   text(): string,
-|};
+};
 
 function nodeFetch(
   url: string,
@@ -43,6 +43,7 @@ function nodeFetch(
     // TODO: cherry-pick supported user-passed options.
   };
   const nodeImpl = protocol === 'https:' ? https : http;
+  // $FlowFixMe: node flow type has `port` as a number
   const request = nodeImpl.request(nodeOptions, response => {
     // TODO: support redirects.
     onResolve(new Response(response));
@@ -57,20 +58,20 @@ const Pending = 0;
 const Resolved = 1;
 const Rejected = 2;
 
-type PendingRecord = {|
+type PendingRecord = {
   status: 0,
   value: Wakeable,
-|};
+};
 
-type ResolvedRecord<V> = {|
+type ResolvedRecord<V> = {
   status: 1,
   value: V,
-|};
+};
 
-type RejectedRecord = {|
+type RejectedRecord = {
   status: 2,
   value: mixed,
-|};
+};
 
 type Record<V> = PendingRecord | ResolvedRecord<V> | RejectedRecord;
 
diff --git a/packages/react-fs/src/ReactFilesystem.js b/packages/react-fs/src/ReactFilesystem.js
index e505005e21db2..782d35728c401 100644
--- a/packages/react-fs/src/ReactFilesystem.js
+++ b/packages/react-fs/src/ReactFilesystem.js
@@ -17,23 +17,23 @@ const Pending = 0;
 const Resolved = 1;
 const Rejected = 2;
 
-type PendingRecord = {|
+type PendingRecord = {
   status: 0,
   value: Wakeable,
   cache: null,
-|};
+};
 
-type ResolvedRecord<T> = {|
+type ResolvedRecord<T> = {
   status: 1,
   value: T,
   cache: null | Array<mixed>,
-|};
+};
 
-type RejectedRecord = {|
+type RejectedRecord = {
   status: 2,
   value: mixed,
   cache: null,
-|};
+};
 
 type Record<T> = PendingRecord | ResolvedRecord<T> | RejectedRecord;
 
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 19b0b9cbee401..c6aa7829921a4 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
@@ -164,9 +164,10 @@ export function useFocus(
   }: UseFocusOptions,
 ): void {
   // Setup controlled state for this useFocus hook
-  const stateRef = useRef<null | {isFocused: boolean, isFocusVisible: boolean}>(
-    {isFocused: false, isFocusVisible: false},
-  );
+  const stateRef = useRef<null | {
+    isFocused: boolean,
+    isFocusVisible: boolean,
+  }>({isFocused: false, isFocusVisible: false});
   const focusHandle = useEvent('focusin');
   const blurHandle = useEvent('focusout');
   const focusVisibleHandles = useFocusVisibleInputHandles();
@@ -261,9 +262,10 @@ export function useFocusWithin<T>(
   }: UseFocusWithinOptions,
 ): (focusWithinTarget: null | T) => void {
   // Setup controlled state for this useFocus hook
-  const stateRef = useRef<null | {isFocused: boolean, isFocusVisible: boolean}>(
-    {isFocused: false, isFocusVisible: false},
-  );
+  const stateRef = useRef<null | {
+    isFocused: boolean,
+    isFocusVisible: boolean,
+  }>({isFocused: false, isFocusVisible: false});
   const focusHandle = useEvent('focusin');
   const blurHandle = useEvent('focusout');
   const afterBlurHandle = useEvent('afterblur');
diff --git a/packages/react-interactions/events/src/dom/create-event-handle/useEvent.js b/packages/react-interactions/events/src/dom/create-event-handle/useEvent.js
index 80a20e5faf561..a72cd26ee1e61 100644
--- a/packages/react-interactions/events/src/dom/create-event-handle/useEvent.js
+++ b/packages/react-interactions/events/src/dom/create-event-handle/useEvent.js
@@ -13,19 +13,19 @@ import * as ReactDOM from 'react-dom';
 const {useLayoutEffect, useRef} = React;
 const {unstable_createEventHandle} = ReactDOM;
 
-type UseEventHandle = {|
+type UseEventHandle = {
   setListener: (
     target: EventTarget,
     null | ((SyntheticEvent<EventTarget>) => void),
   ) => void,
   clear: () => void,
-|};
+};
 
 export default function useEvent(
   event: string,
-  options?: {|
+  options?: {
     capture?: boolean,
-  |},
+  },
 ): UseEventHandle {
   const handleRef = useRef<UseEventHandle | null>(null);
   let useEventHandle = handleRef.current;
diff --git a/packages/react-native-renderer/src/ReactFabric.js b/packages/react-native-renderer/src/ReactFabric.js
index e08a98653fb6c..428ffe20acd37 100644
--- a/packages/react-native-renderer/src/ReactFabric.js
+++ b/packages/react-native-renderer/src/ReactFabric.js
@@ -69,14 +69,14 @@ function findHostInstance_DEPRECATED<TElementType: ElementType>(
   if (componentOrHandle == null) {
     return null;
   }
-  // $FlowIssue Flow has hardcoded values for React DOM that don't work with RN
+  // $FlowFixMe Flow has hardcoded values for React DOM that don't work with RN
   if (componentOrHandle._nativeTag) {
-    // $FlowIssue Flow has hardcoded values for React DOM that don't work with RN
+    // $FlowFixMe Flow has hardcoded values for React DOM that don't work with RN
     return componentOrHandle;
   }
-  // $FlowIssue Flow has hardcoded values for React DOM that don't work with RN
+  // $FlowFixMe Flow has hardcoded values for React DOM that don't work with RN
   if (componentOrHandle.canonical && componentOrHandle.canonical._nativeTag) {
-    // $FlowIssue Flow has hardcoded values for React DOM that don't work with RN
+    // $FlowFixMe Flow has hardcoded values for React DOM that don't work with RN
     return componentOrHandle.canonical;
   }
   let hostInstance;
@@ -97,6 +97,7 @@ function findHostInstance_DEPRECATED<TElementType: ElementType>(
     return (hostInstance: any).canonical;
   }
   // $FlowFixMe[incompatible-return]
+  // $FlowFixMe[incompatible-exact]
   return hostInstance;
 }
 
@@ -226,7 +227,7 @@ function render(
   }
   updateContainer(element, root, null, callback);
 
-  // $FlowIssue Flow has hardcoded values for React DOM that don't work with RN
+  // $FlowFixMe Flow has hardcoded values for React DOM that don't work with RN
   return getPublicRootInstance(root);
 }
 
diff --git a/packages/react-native-renderer/src/ReactFabricEventEmitter.js b/packages/react-native-renderer/src/ReactFabricEventEmitter.js
index c3b89e91779a3..12ba859bf70f4 100644
--- a/packages/react-native-renderer/src/ReactFabricEventEmitter.js
+++ b/packages/react-native-renderer/src/ReactFabricEventEmitter.js
@@ -11,7 +11,10 @@ import type {AnyNativeEvent} from './legacy-events/PluginModuleType';
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 import type {LegacyPluginModule} from './legacy-events/PluginModuleType';
 import type {ReactSyntheticEvent} from './legacy-events/ReactSyntheticEventType';
-import type {TopLevelType} from './legacy-events/TopLevelEventTypes';
+import type {
+  RNTopLevelEventType,
+  TopLevelType,
+} from './legacy-events/TopLevelEventTypes';
 
 import {registrationNameModules} from './legacy-events/EventPluginRegistry';
 import {batchedUpdates} from './legacy-events/ReactGenericBatching';
diff --git a/packages/react-native-renderer/src/ReactFabricHostConfig.js b/packages/react-native-renderer/src/ReactFabricHostConfig.js
index c5c029006578f..3ae1d00e27177 100644
--- a/packages/react-native-renderer/src/ReactFabricHostConfig.js
+++ b/packages/react-native-renderer/src/ReactFabricHostConfig.js
@@ -75,15 +75,15 @@ export type HydratableInstance = Instance | TextInstance;
 export type PublicInstance = ReactFabricHostComponent;
 export type Container = number;
 export type ChildSet = Object;
-export type HostContext = $ReadOnly<{|
+export type HostContext = $ReadOnly<{
   isInAParentText: boolean,
-|}>;
+}>;
 export type UpdatePayload = Object;
 
 export type TimeoutHandle = TimeoutID;
 export type NoTimeout = -1;
 
-export type RendererInspectionConfig = $ReadOnly<{|
+export type RendererInspectionConfig = $ReadOnly<{
   // Deprecated. Replaced with getInspectorDataForViewAtPoint.
   getInspectorDataForViewTag?: (tag: number) => Object,
   getInspectorDataForViewAtPoint?: (
@@ -92,28 +92,28 @@ export type RendererInspectionConfig = $ReadOnly<{|
     locationY: number,
     callback: (viewData: TouchedViewDataAtPoint) => mixed,
   ) => void,
-|}>;
+}>;
 
 // TODO?: find a better place for this type to live
-export type EventListenerOptions = $ReadOnly<{|
+export type EventListenerOptions = $ReadOnly<{
   capture?: boolean,
   once?: boolean,
   passive?: boolean,
   signal: mixed, // not yet implemented
-|}>;
-export type EventListenerRemoveOptions = $ReadOnly<{|
+}>;
+export type EventListenerRemoveOptions = $ReadOnly<{
   capture?: boolean,
-|}>;
+}>;
 
 // TODO?: this will be changed in the future to be w3c-compatible and allow "EventListener" objects as well as functions.
 export type EventListener = Function;
 
 type InternalEventListeners = {
-  [string]: {|
+  [string]: {
     listener: EventListener,
     options: EventListenerOptions,
     invalidated: boolean,
-  |}[],
+  }[],
 };
 
 // TODO: Remove this conditional once all changes have propagated.
@@ -255,6 +255,8 @@ class ReactFabricHostComponent {
     const passive = optionsObj.passive || false;
     const signal = null; // TODO: implement signal/AbortSignal
 
+    /* $FlowFixMe the old version of Flow doesn't have a good way to define an
+     * empty exact object. */
     const eventListeners: InternalEventListeners = this._eventListeners || {};
     if (this._eventListeners == null) {
       this._eventListeners = eventListeners;
diff --git a/packages/react-native-renderer/src/ReactNativeHostConfig.js b/packages/react-native-renderer/src/ReactNativeHostConfig.js
index 5b03399e103f4..37e88d8b2747b 100644
--- a/packages/react-native-renderer/src/ReactNativeHostConfig.js
+++ b/packages/react-native-renderer/src/ReactNativeHostConfig.js
@@ -35,16 +35,16 @@ export type Instance = ReactNativeFiberHostComponent;
 export type TextInstance = number;
 export type HydratableInstance = Instance | TextInstance;
 export type PublicInstance = Instance;
-export type HostContext = $ReadOnly<{|
+export type HostContext = $ReadOnly<{
   isInAParentText: boolean,
-|}>;
+}>;
 export type UpdatePayload = Object; // Unused
 export type ChildSet = void; // Unused
 
 export type TimeoutHandle = TimeoutID;
 export type NoTimeout = -1;
 
-export type RendererInspectionConfig = $ReadOnly<{|
+export type RendererInspectionConfig = $ReadOnly<{
   // Deprecated. Replaced with getInspectorDataForViewAtPoint.
   getInspectorDataForViewTag?: (tag: number) => Object,
   getInspectorDataForViewAtPoint?: (
@@ -53,7 +53,7 @@ export type RendererInspectionConfig = $ReadOnly<{|
     locationY: number,
     callback: (viewData: TouchedViewDataAtPoint) => mixed,
   ) => void,
-|}>;
+}>;
 
 const UPDATE_SIGNAL = {};
 if (__DEV__) {
diff --git a/packages/react-native-renderer/src/ReactNativeRenderer.js b/packages/react-native-renderer/src/ReactNativeRenderer.js
index e751195dda00a..68241f8def7ac 100644
--- a/packages/react-native-renderer/src/ReactNativeRenderer.js
+++ b/packages/react-native-renderer/src/ReactNativeRenderer.js
@@ -96,6 +96,7 @@ function findHostInstance_DEPRECATED(
     return (hostInstance: any).canonical;
   }
   // $FlowFixMe[incompatible-return]
+  // $FlowFixMe[incompatible-exact]
   return hostInstance;
 }
 
@@ -222,7 +223,7 @@ function render(
   }
   updateContainer(element, root, null, callback);
 
-  // $FlowIssue Flow has hardcoded values for React DOM that don't work with RN
+  // $FlowFixMe Flow has hardcoded values for React DOM that don't work with RN
   return getPublicRootInstance(root);
 }
 
diff --git a/packages/react-native-renderer/src/ReactNativeTypes.js b/packages/react-native-renderer/src/ReactNativeTypes.js
index 4d2fdcc6afc3b..5eef1a6dff9c9 100644
--- a/packages/react-native-renderer/src/ReactNativeTypes.js
+++ b/packages/react-native-renderer/src/ReactNativeTypes.js
@@ -35,10 +35,10 @@ export type MeasureLayoutOnSuccessCallback = (
 
 export type AttributeType<T, V> =
   | true
-  | $ReadOnly<{|
+  | $ReadOnly<{
       diff?: (arg1: T, arg2: T) => boolean,
       process?: (arg1: V) => T,
-    |}>;
+    }>;
 
 // We either force that `diff` and `process` always use mixed,
 // or we allow them to define specific types and use this hack
@@ -95,7 +95,7 @@ export type PartialViewConfig = $ReadOnly<{
   validAttributes?: PartialAttributeConfiguration,
 }>;
 
-export type NativeMethods = $ReadOnly<{|
+export type NativeMethods = $ReadOnly<{
   blur(): void,
   focus(): void,
   measure(callback: MeasureOnSuccessCallback): void,
@@ -106,7 +106,7 @@ export type NativeMethods = $ReadOnly<{|
     onFail?: () => void,
   ): void,
   setNativeProps(nativeProps: {...}): void,
-|}>;
+}>;
 
 export type HostComponent<T> = AbstractComponent<T, $ReadOnly<NativeMethods>>;
 
@@ -122,43 +122,43 @@ type InspectorDataProps = $ReadOnly<{
   ...,
 }>;
 
-type InspectorDataSource = $ReadOnly<{|
+type InspectorDataSource = $ReadOnly<{
   fileName?: string,
   lineNumber?: number,
-|}>;
+}>;
 
 type InspectorDataGetter = (
   <TElementType: ElementType>(
     componentOrHandle: ElementRef<TElementType> | number,
   ) => ?number,
-) => $ReadOnly<{|
+) => $ReadOnly<{
   measure: (callback: MeasureOnSuccessCallback) => void,
   props: InspectorDataProps,
   source: InspectorDataSource,
-|}>;
+}>;
 
-export type InspectorData = $ReadOnly<{|
-  hierarchy: Array<{|
+export type InspectorData = $ReadOnly<{
+  hierarchy: Array<{
     name: ?string,
     getInspectorData: InspectorDataGetter,
-  |}>,
+  }>,
   selectedIndex: ?number,
   props: InspectorDataProps,
   source: ?InspectorDataSource,
-|}>;
+}>;
 
-export type TouchedViewDataAtPoint = $ReadOnly<{|
+export type TouchedViewDataAtPoint = $ReadOnly<{
   pointerY: number,
   touchedViewTag?: number,
   closestInstance?: mixed,
-  frame: $ReadOnly<{|
+  frame: $ReadOnly<{
     top: number,
     left: number,
     width: number,
     height: number,
-  |}>,
+  }>,
   ...InspectorData,
-|}>;
+}>;
 
 /**
  * Flat ReactNative renderer bundles are too big for Flow to parse efficiently.
@@ -268,18 +268,18 @@ export type LayoutAnimationProperty =
   | 'scaleY'
   | 'scaleXY';
 
-export type LayoutAnimationAnimationConfig = $ReadOnly<{|
+export type LayoutAnimationAnimationConfig = $ReadOnly<{
   duration?: number,
   delay?: number,
   springDamping?: number,
   initialVelocity?: number,
   type?: LayoutAnimationType,
   property?: LayoutAnimationProperty,
-|}>;
+}>;
 
-export type LayoutAnimationConfig = $ReadOnly<{|
+export type LayoutAnimationConfig = $ReadOnly<{
   duration: number,
   create?: LayoutAnimationAnimationConfig,
   update?: LayoutAnimationAnimationConfig,
   delete?: LayoutAnimationAnimationConfig,
-|}>;
+}>;
diff --git a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/deepDiffer.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/deepDiffer.js
index 8bc969ffb6523..0f228ba8ed2e0 100644
--- a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/deepDiffer.js
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/deepDiffer.js
@@ -10,7 +10,7 @@
 
 'use strict';
 
-type Options = {|+unsafelyIgnoreFunctions?: boolean|};
+type Options = {+unsafelyIgnoreFunctions?: boolean};
 
 /*
  * @returns {bool} true if different, false if equal
diff --git a/packages/react-native-renderer/src/legacy-events/ReactSyntheticEventType.js b/packages/react-native-renderer/src/legacy-events/ReactSyntheticEventType.js
index 436507b84ac19..cf2046977c0e1 100644
--- a/packages/react-native-renderer/src/legacy-events/ReactSyntheticEventType.js
+++ b/packages/react-native-renderer/src/legacy-events/ReactSyntheticEventType.js
@@ -11,27 +11,27 @@
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 import type {TopLevelType} from './TopLevelEventTypes';
 
-export type DispatchConfig = {|
+export type DispatchConfig = {
   dependencies?: Array<TopLevelType>,
-  phasedRegistrationNames: {|
+  phasedRegistrationNames: {
     bubbled: null | string,
     captured: null | string,
     skipBubbling?: ?boolean,
-  |},
+  },
   registrationName?: string,
-|};
+};
 
-export type CustomDispatchConfig = {|
-  phasedRegistrationNames: {|
+export type CustomDispatchConfig = {
+  phasedRegistrationNames: {
     bubbled: null,
     captured: null,
     skipBubbling?: ?boolean,
-  |},
+  },
   registrationName?: string,
   customEvent: true,
-|};
+};
 
-export type ReactSyntheticEvent = {|
+export type ReactSyntheticEvent = {
   dispatchConfig: DispatchConfig | CustomDispatchConfig,
   getPooled: (
     dispatchConfig: DispatchConfig | CustomDispatchConfig,
@@ -46,4 +46,4 @@ export type ReactSyntheticEvent = {|
   _targetInst: Fiber,
   type: string,
   currentTarget: null | EventTarget,
-|};
+};
diff --git a/packages/react-native-renderer/src/legacy-events/ResponderTouchHistoryStore.js b/packages/react-native-renderer/src/legacy-events/ResponderTouchHistoryStore.js
index af63b1fb21e20..dbca76d40179a 100644
--- a/packages/react-native-renderer/src/legacy-events/ResponderTouchHistoryStore.js
+++ b/packages/react-native-renderer/src/legacy-events/ResponderTouchHistoryStore.js
@@ -14,7 +14,7 @@ import {isStartish, isMoveish, isEndish} from './ResponderTopLevelEventTypes';
  * should typically only see IDs in the range of 1-20 because IDs get recycled
  * when touches end and start again.
  */
-type TouchRecord = {|
+type TouchRecord = {
   touchActive: boolean,
   startPageX: number,
   startPageY: number,
@@ -25,7 +25,7 @@ type TouchRecord = {|
   previousPageX: number,
   previousPageY: number,
   previousTimeStamp: number,
-|};
+};
 
 const MAX_TOUCH_BANK = 20;
 const touchBank: Array<TouchRecord> = [];
diff --git a/packages/react-native-renderer/src/legacy-events/accumulateInto.js b/packages/react-native-renderer/src/legacy-events/accumulateInto.js
index 974c0143a5504..7c9f17a757793 100644
--- a/packages/react-native-renderer/src/legacy-events/accumulateInto.js
+++ b/packages/react-native-renderer/src/legacy-events/accumulateInto.js
@@ -40,9 +40,11 @@ function accumulateInto<T>(
   // certain that x is an Array (x could be a string with concat method).
   if (isArray(current)) {
     if (isArray(next)) {
+      // $FlowFixMe `isArray` does not ensure array is mutable
       current.push.apply(current, next);
       return current;
     }
+    // $FlowFixMe `isArray` does not ensure array is mutable
     current.push(next);
     return current;
   }
diff --git a/packages/react-noop-renderer/src/ReactNoopFlightServer.js b/packages/react-noop-renderer/src/ReactNoopFlightServer.js
index 3a84a06d0843c..bd0badc535a8e 100644
--- a/packages/react-noop-renderer/src/ReactNoopFlightServer.js
+++ b/packages/react-noop-renderer/src/ReactNoopFlightServer.js
@@ -53,7 +53,7 @@ const ReactNoopFlightServer = ReactFlightServer({
   },
   resolveModuleMetaData(
     config: void,
-    reference: {$$typeof: Symbol, value: any},
+    reference: {$$typeof: symbol, value: any},
   ) {
     return saveModule(reference.value);
   },
diff --git a/packages/react-noop-renderer/src/ReactNoopServer.js b/packages/react-noop-renderer/src/ReactNoopServer.js
index e70de39ab3868..7e0a33b97942b 100644
--- a/packages/react-noop-renderer/src/ReactNoopServer.js
+++ b/packages/react-noop-renderer/src/ReactNoopServer.js
@@ -18,22 +18,22 @@ import type {ReactNodeList} from 'shared/ReactTypes';
 
 import ReactFizzServer from 'react-server';
 
-type Instance = {|
+type Instance = {
   type: string,
   children: Array<Instance | TextInstance | SuspenseInstance>,
   prop: any,
   hidden: boolean,
-|};
+};
 
-type TextInstance = {|
+type TextInstance = {
   text: string,
   hidden: boolean,
-|};
+};
 
-type SuspenseInstance = {|
+type SuspenseInstance = {
   state: 'pending' | 'complete' | 'client-render',
   children: Array<Instance | TextInstance | SuspenseInstance>,
-|};
+};
 
 type Placeholder = {
   parent: Instance | SuspenseInstance,
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index 858c562d48bf5..f2b6fc8b255e9 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -49,7 +49,7 @@ type Props = {
   top?: null | number,
   ...
 };
-type Instance = {|
+type Instance = {
   type: string,
   id: number,
   parent: number,
@@ -58,14 +58,14 @@ type Instance = {|
   prop: any,
   hidden: boolean,
   context: HostContext,
-|};
-type TextInstance = {|
+};
+type TextInstance = {
   text: string,
   id: number,
   parent: number,
   hidden: boolean,
   context: HostContext,
-|};
+};
 type HostContext = Object;
 type CreateRootOptions = {
   unstable_transitionCallbacks?: TransitionTracingCallbacks,
@@ -953,14 +953,14 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
     flushWithHostCounters(
       fn: () => void,
     ):
-      | {|
+      | {
           hostDiffCounter: number,
           hostUpdateCounter: number,
-        |}
-      | {|
+        }
+      | {
           hostDiffCounter: number,
           hostCloneCounter: number,
-        |} {
+        } {
       hostDiffCounter = 0;
       hostUpdateCounter = 0;
       hostCloneCounter = 0;
diff --git a/packages/react-pg/src/ReactPostgres.js b/packages/react-pg/src/ReactPostgres.js
index fc23025788780..85d840d0013f1 100644
--- a/packages/react-pg/src/ReactPostgres.js
+++ b/packages/react-pg/src/ReactPostgres.js
@@ -17,20 +17,20 @@ const Pending = 0;
 const Resolved = 1;
 const Rejected = 2;
 
-type PendingRecord = {|
+type PendingRecord = {
   status: 0,
   value: Wakeable,
-|};
+};
 
-type ResolvedRecord = {|
+type ResolvedRecord = {
   status: 1,
   value: mixed,
-|};
+};
 
-type RejectedRecord = {|
+type RejectedRecord = {
   status: 2,
   value: mixed,
-|};
+};
 
 type Record = PendingRecord | ResolvedRecord | RejectedRecord;
 
diff --git a/packages/react-reconciler/src/ReactCapturedValue.js b/packages/react-reconciler/src/ReactCapturedValue.js
index 64b1f18515d5a..abd76f03a0137 100644
--- a/packages/react-reconciler/src/ReactCapturedValue.js
+++ b/packages/react-reconciler/src/ReactCapturedValue.js
@@ -11,12 +11,12 @@ import type {Fiber} from './ReactInternalTypes';
 
 import {getStackByFiberInDevAndProd} from './ReactFiberComponentStack';
 
-export type CapturedValue<T> = {|
+export type CapturedValue<T> = {
   value: T,
   source: Fiber | null,
   stack: string | null,
   digest: string | null,
-|};
+};
 
 export function createCapturedValueAtFiber<T>(
   value: T,
diff --git a/packages/react-reconciler/src/ReactChildFiber.new.js b/packages/react-reconciler/src/ReactChildFiber.new.js
index 71971c03892ca..2e1a232e028db 100644
--- a/packages/react-reconciler/src/ReactChildFiber.new.js
+++ b/packages/react-reconciler/src/ReactChildFiber.new.js
@@ -80,6 +80,7 @@ if (__DEV__) {
       );
     }
 
+    // $FlowFixMe unable to narrow type from mixed to writable object
     child._store.validated = true;
 
     const componentName = getComponentNameFromFiber(returnFiber) || 'Component';
diff --git a/packages/react-reconciler/src/ReactChildFiber.old.js b/packages/react-reconciler/src/ReactChildFiber.old.js
index 86f75fbf65ea8..c6fdbcc728a29 100644
--- a/packages/react-reconciler/src/ReactChildFiber.old.js
+++ b/packages/react-reconciler/src/ReactChildFiber.old.js
@@ -80,6 +80,7 @@ if (__DEV__) {
       );
     }
 
+    // $FlowFixMe unable to narrow type from mixed to writable object
     child._store.validated = true;
 
     const componentName = getComponentNameFromFiber(returnFiber) || 'Component';
diff --git a/packages/react-reconciler/src/ReactFiberAct.new.js b/packages/react-reconciler/src/ReactFiberAct.new.js
index 27102b5e92531..bad7fd3dc52f7 100644
--- a/packages/react-reconciler/src/ReactFiberAct.new.js
+++ b/packages/react-reconciler/src/ReactFiberAct.new.js
@@ -23,12 +23,12 @@ export function isLegacyActEnvironment(fiber: Fiber) {
     // to false.
 
     const isReactActEnvironmentGlobal =
-      // $FlowExpectedError – Flow doesn't know about IS_REACT_ACT_ENVIRONMENT global
+      // $FlowFixMe – Flow doesn't know about IS_REACT_ACT_ENVIRONMENT global
       typeof IS_REACT_ACT_ENVIRONMENT !== 'undefined'
         ? IS_REACT_ACT_ENVIRONMENT
         : undefined;
 
-    // $FlowExpectedError - Flow doesn't know about jest
+    // $FlowFixMe - Flow doesn't know about jest
     const jestIsDefined = typeof jest !== 'undefined';
     return (
       warnsIfNotActing && jestIsDefined && isReactActEnvironmentGlobal !== false
@@ -40,7 +40,7 @@ export function isLegacyActEnvironment(fiber: Fiber) {
 export function isConcurrentActEnvironment() {
   if (__DEV__) {
     const isReactActEnvironmentGlobal =
-      // $FlowExpectedError – Flow doesn't know about IS_REACT_ACT_ENVIRONMENT global
+      // $FlowFixMe – Flow doesn't know about IS_REACT_ACT_ENVIRONMENT global
       typeof IS_REACT_ACT_ENVIRONMENT !== 'undefined'
         ? IS_REACT_ACT_ENVIRONMENT
         : undefined;
diff --git a/packages/react-reconciler/src/ReactFiberAct.old.js b/packages/react-reconciler/src/ReactFiberAct.old.js
index bcb4ad707a1be..6358ab66a3485 100644
--- a/packages/react-reconciler/src/ReactFiberAct.old.js
+++ b/packages/react-reconciler/src/ReactFiberAct.old.js
@@ -23,12 +23,12 @@ export function isLegacyActEnvironment(fiber: Fiber) {
     // to false.
 
     const isReactActEnvironmentGlobal =
-      // $FlowExpectedError – Flow doesn't know about IS_REACT_ACT_ENVIRONMENT global
+      // $FlowFixMe – Flow doesn't know about IS_REACT_ACT_ENVIRONMENT global
       typeof IS_REACT_ACT_ENVIRONMENT !== 'undefined'
         ? IS_REACT_ACT_ENVIRONMENT
         : undefined;
 
-    // $FlowExpectedError - Flow doesn't know about jest
+    // $FlowFixMe - Flow doesn't know about jest
     const jestIsDefined = typeof jest !== 'undefined';
     return (
       warnsIfNotActing && jestIsDefined && isReactActEnvironmentGlobal !== false
@@ -40,7 +40,7 @@ export function isLegacyActEnvironment(fiber: Fiber) {
 export function isConcurrentActEnvironment() {
   if (__DEV__) {
     const isReactActEnvironmentGlobal =
-      // $FlowExpectedError – Flow doesn't know about IS_REACT_ACT_ENVIRONMENT global
+      // $FlowFixMe – Flow doesn't know about IS_REACT_ACT_ENVIRONMENT global
       typeof IS_REACT_ACT_ENVIRONMENT !== 'undefined'
         ? IS_REACT_ACT_ENVIRONMENT
         : undefined;
diff --git a/packages/react-reconciler/src/ReactFiberCacheComponent.new.js b/packages/react-reconciler/src/ReactFiberCacheComponent.new.js
index 268f8c02f825f..2ef2c09d793e7 100644
--- a/packages/react-reconciler/src/ReactFiberCacheComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberCacheComponent.new.js
@@ -8,6 +8,7 @@
  */
 
 import type {ReactContext} from 'shared/ReactTypes';
+import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 
 import {enableCache} from 'shared/ReactFeatureFlags';
 import {REACT_CONTEXT_TYPE} from 'shared/ReactSymbols';
@@ -17,7 +18,7 @@ import * as Scheduler from 'scheduler';
 
 // In environments without AbortController (e.g. tests)
 // replace it with a lightweight shim that only has the features we use.
-const AbortControllerLocal = enableCache
+const AbortControllerLocal: typeof AbortController = enableCache
   ? typeof AbortController !== 'undefined'
     ? AbortController
     : (function AbortControllerShim() {
@@ -36,21 +37,21 @@ const AbortControllerLocal = enableCache
       }: AbortController)
   : (null: any);
 
-export type Cache = {|
+export type Cache = {
   controller: AbortControllerLocal,
   data: Map<() => mixed, mixed>,
   refCount: number,
-|};
+};
 
-export type CacheComponentState = {|
+export type CacheComponentState = {
   +parent: Cache,
   +cache: Cache,
-|};
+};
 
-export type SpawnedCachePool = {|
+export type SpawnedCachePool = {
   +parent: Cache,
   +pool: Cache,
-|};
+};
 
 // Intentionally not named imports because Rollup would
 // use dynamic dispatch for CommonJS interop named imports.
diff --git a/packages/react-reconciler/src/ReactFiberCacheComponent.old.js b/packages/react-reconciler/src/ReactFiberCacheComponent.old.js
index ff141e2389feb..672867abf7825 100644
--- a/packages/react-reconciler/src/ReactFiberCacheComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberCacheComponent.old.js
@@ -8,6 +8,7 @@
  */
 
 import type {ReactContext} from 'shared/ReactTypes';
+import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 
 import {enableCache} from 'shared/ReactFeatureFlags';
 import {REACT_CONTEXT_TYPE} from 'shared/ReactSymbols';
@@ -17,7 +18,7 @@ import * as Scheduler from 'scheduler';
 
 // In environments without AbortController (e.g. tests)
 // replace it with a lightweight shim that only has the features we use.
-const AbortControllerLocal = enableCache
+const AbortControllerLocal: typeof AbortController = enableCache
   ? typeof AbortController !== 'undefined'
     ? AbortController
     : (function AbortControllerShim() {
@@ -36,21 +37,21 @@ const AbortControllerLocal = enableCache
       }: AbortController)
   : (null: any);
 
-export type Cache = {|
+export type Cache = {
   controller: AbortControllerLocal,
   data: Map<() => mixed, mixed>,
   refCount: number,
-|};
+};
 
-export type CacheComponentState = {|
+export type CacheComponentState = {
   +parent: Cache,
   +cache: Cache,
-|};
+};
 
-export type SpawnedCachePool = {|
+export type SpawnedCachePool = {
   +parent: Cache,
   +pool: Cache,
-|};
+};
 
 // Intentionally not named imports because Rollup would
 // use dynamic dispatch for CommonJS interop named imports.
diff --git a/packages/react-reconciler/src/ReactFiberClassUpdateQueue.new.js b/packages/react-reconciler/src/ReactFiberClassUpdateQueue.new.js
index d3e6996a49a24..a38d9aaecb8c6 100644
--- a/packages/react-reconciler/src/ReactFiberClassUpdateQueue.new.js
+++ b/packages/react-reconciler/src/ReactFiberClassUpdateQueue.new.js
@@ -125,7 +125,7 @@ import {setIsStrictModeForDevtools} from './ReactFiberDevToolsHook.new';
 
 import assign from 'shared/assign';
 
-export type Update<State> = {|
+export type Update<State> = {
   // TODO: Temporary field. Will remove this by storing a map of
   // transition -> event time on the root.
   eventTime: number,
@@ -136,21 +136,21 @@ export type Update<State> = {|
   callback: (() => mixed) | null,
 
   next: Update<State> | null,
-|};
+};
 
-export type SharedQueue<State> = {|
+export type SharedQueue<State> = {
   pending: Update<State> | null,
   lanes: Lanes,
   hiddenCallbacks: Array<() => mixed> | null,
-|};
+};
 
-export type UpdateQueue<State> = {|
+export type UpdateQueue<State> = {
   baseState: State,
   firstBaseUpdate: Update<State> | null,
   lastBaseUpdate: Update<State> | null,
   shared: SharedQueue<State>,
   callbacks: Array<() => mixed> | null,
-|};
+};
 
 export const UpdateState = 0;
 export const ReplaceState = 1;
diff --git a/packages/react-reconciler/src/ReactFiberClassUpdateQueue.old.js b/packages/react-reconciler/src/ReactFiberClassUpdateQueue.old.js
index 38b43941fc1bf..94908d61df5e3 100644
--- a/packages/react-reconciler/src/ReactFiberClassUpdateQueue.old.js
+++ b/packages/react-reconciler/src/ReactFiberClassUpdateQueue.old.js
@@ -125,7 +125,7 @@ import {setIsStrictModeForDevtools} from './ReactFiberDevToolsHook.old';
 
 import assign from 'shared/assign';
 
-export type Update<State> = {|
+export type Update<State> = {
   // TODO: Temporary field. Will remove this by storing a map of
   // transition -> event time on the root.
   eventTime: number,
@@ -136,21 +136,21 @@ export type Update<State> = {|
   callback: (() => mixed) | null,
 
   next: Update<State> | null,
-|};
+};
 
-export type SharedQueue<State> = {|
+export type SharedQueue<State> = {
   pending: Update<State> | null,
   lanes: Lanes,
   hiddenCallbacks: Array<() => mixed> | null,
-|};
+};
 
-export type UpdateQueue<State> = {|
+export type UpdateQueue<State> = {
   baseState: State,
   firstBaseUpdate: Update<State> | null,
   lastBaseUpdate: Update<State> | null,
   shared: SharedQueue<State>,
   callbacks: Array<() => mixed> | null,
-|};
+};
 
 export const UpdateState = 0;
 export const ReplaceState = 1;
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index d2cd313a05ac8..c70e4ae3470e7 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -296,6 +296,7 @@ function safelyDetachRef(current: Fiber, nearestMountedAncestor: Fiber | null) {
         }
       }
     } else {
+      // $FlowFixMe unable to narrow type to RefObject
       ref.current = null;
     }
   }
@@ -1522,6 +1523,7 @@ function commitAttachRef(finishedWork: Fiber) {
         }
       }
 
+      // $FlowFixMe unable to narrow type to the non-function case
       ref.current = instanceToUse;
     }
   }
@@ -1542,6 +1544,7 @@ function commitDetachRef(current: Fiber) {
         currentRef(null);
       }
     } else {
+      // $FlowFixMe unable to narrow type to the non-function case
       currentRef.current = null;
     }
   }
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 70a68617763c3..4b5076a61c51f 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -296,6 +296,7 @@ function safelyDetachRef(current: Fiber, nearestMountedAncestor: Fiber | null) {
         }
       }
     } else {
+      // $FlowFixMe unable to narrow type to RefObject
       ref.current = null;
     }
   }
@@ -1522,6 +1523,7 @@ function commitAttachRef(finishedWork: Fiber) {
         }
       }
 
+      // $FlowFixMe unable to narrow type to the non-function case
       ref.current = instanceToUse;
     }
   }
@@ -1542,6 +1544,7 @@ function commitDetachRef(current: Fiber) {
         currentRef(null);
       }
     } else {
+      // $FlowFixMe unable to narrow type to the non-function case
       currentRef.current = null;
     }
   }
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index 135e9290f549f..592bef4fbd25d 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -662,8 +662,10 @@ function bubbleProperties(completedWork: Fiber) {
         // this value will reflect the amount of time spent working on a previous
         // render. In that case it should not bubble. We determine whether it was
         // cloned by comparing the child pointer.
+        // $FlowFixMe[unsafe-addition] addition with possible null/undefined value
         actualDuration += child.actualDuration;
 
+        // $FlowFixMe[unsafe-addition] addition with possible null/undefined value
         treeBaseDuration += child.treeBaseDuration;
         child = child.sibling;
       }
@@ -712,6 +714,7 @@ function bubbleProperties(completedWork: Fiber) {
         subtreeFlags |= child.subtreeFlags & StaticMask;
         subtreeFlags |= child.flags & StaticMask;
 
+        // $FlowFixMe[unsafe-addition] addition with possible null/undefined value
         treeBaseDuration += child.treeBaseDuration;
         child = child.sibling;
       }
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index 3fd1bffbc3a99..f3ba7bf0799a0 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -662,8 +662,10 @@ function bubbleProperties(completedWork: Fiber) {
         // this value will reflect the amount of time spent working on a previous
         // render. In that case it should not bubble. We determine whether it was
         // cloned by comparing the child pointer.
+        // $FlowFixMe[unsafe-addition] addition with possible null/undefined value
         actualDuration += child.actualDuration;
 
+        // $FlowFixMe[unsafe-addition] addition with possible null/undefined value
         treeBaseDuration += child.treeBaseDuration;
         child = child.sibling;
       }
@@ -712,6 +714,7 @@ function bubbleProperties(completedWork: Fiber) {
         subtreeFlags |= child.subtreeFlags & StaticMask;
         subtreeFlags |= child.flags & StaticMask;
 
+        // $FlowFixMe[unsafe-addition] addition with possible null/undefined value
         treeBaseDuration += child.treeBaseDuration;
         child = child.sibling;
       }
diff --git a/packages/react-reconciler/src/ReactFiberConcurrentUpdates.new.js b/packages/react-reconciler/src/ReactFiberConcurrentUpdates.new.js
index e496389782025..6b1ecbde7f018 100644
--- a/packages/react-reconciler/src/ReactFiberConcurrentUpdates.new.js
+++ b/packages/react-reconciler/src/ReactFiberConcurrentUpdates.new.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import type {FiberRoot} from './ReactInternalTypes';
+import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {
   UpdateQueue as HookQueue,
   Update as HookUpdate,
diff --git a/packages/react-reconciler/src/ReactFiberConcurrentUpdates.old.js b/packages/react-reconciler/src/ReactFiberConcurrentUpdates.old.js
index 7dd87358cf6a1..798506fd9b5ea 100644
--- a/packages/react-reconciler/src/ReactFiberConcurrentUpdates.old.js
+++ b/packages/react-reconciler/src/ReactFiberConcurrentUpdates.old.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import type {FiberRoot} from './ReactInternalTypes';
+import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {
   UpdateQueue as HookQueue,
   Update as HookUpdate,
diff --git a/packages/react-reconciler/src/ReactFiberHiddenContext.new.js b/packages/react-reconciler/src/ReactFiberHiddenContext.new.js
index 6f6309d6edb94..3ce3490a3990e 100644
--- a/packages/react-reconciler/src/ReactFiberHiddenContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberHiddenContext.new.js
@@ -22,6 +22,7 @@ type HiddenContext = {
   // order to reveal the hidden content.
   // TODO: Remove `subtreeLanes` context from work loop in favor of this one.
   baseLanes: number,
+  ...
 };
 
 // TODO: This isn't being used yet, but it's intended to replace the
diff --git a/packages/react-reconciler/src/ReactFiberHiddenContext.old.js b/packages/react-reconciler/src/ReactFiberHiddenContext.old.js
index c62fa3d12fa81..565dc4ae20e9f 100644
--- a/packages/react-reconciler/src/ReactFiberHiddenContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberHiddenContext.old.js
@@ -22,6 +22,7 @@ type HiddenContext = {
   // order to reveal the hidden content.
   // TODO: Remove `subtreeLanes` context from work loop in favor of this one.
   baseLanes: number,
+  ...
 };
 
 // TODO: This isn't being used yet, but it's intended to replace the
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 2c06f94d58119..da2254a682eb5 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -36,6 +36,10 @@ import {
   enableUseHook,
   enableUseMemoCacheHook,
 } from 'shared/ReactFeatureFlags';
+import {
+  REACT_CONTEXT_TYPE,
+  REACT_SERVER_CONTEXT_TYPE,
+} from 'shared/ReactSymbols';
 
 import {NoMode, ConcurrentMode, DebugTracingMode} from './ReactTypeOfMode';
 import {
@@ -122,21 +126,21 @@ import {
 
 const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;
 
-export type Update<S, A> = {|
+export type Update<S, A> = {
   lane: Lane,
   action: A,
   hasEagerState: boolean,
   eagerState: S | null,
   next: Update<S, A>,
-|};
+};
 
-export type UpdateQueue<S, A> = {|
+export type UpdateQueue<S, A> = {
   pending: Update<S, A> | null,
   lanes: Lanes,
   dispatch: (A => mixed) | null,
   lastRenderedReducer: ((S, A) => S) | null,
   lastRenderedState: S | null,
-|};
+};
 
 let didWarnAboutMismatchedHooksForComponent;
 let didWarnUncachedGetSnapshot;
@@ -144,36 +148,36 @@ if (__DEV__) {
   didWarnAboutMismatchedHooksForComponent = new Set();
 }
 
-export type Hook = {|
+export type Hook = {
   memoizedState: any,
   baseState: any,
   baseQueue: Update<any, any> | null,
   queue: any,
   next: Hook | null,
-|};
+};
 
-export type Effect = {|
+export type Effect = {
   tag: HookFlags,
   create: () => (() => void) | void,
   destroy: (() => void) | void,
   deps: Array<mixed> | null,
   next: Effect,
-|};
+};
 
-type StoreInstance<T> = {|
+type StoreInstance<T> = {
   value: T,
   getSnapshot: () => T,
-|};
+};
 
-type StoreConsistencyCheck<T> = {|
+type StoreConsistencyCheck<T> = {
   value: T,
   getSnapshot: () => T,
-|};
+};
 
-export type FunctionComponentUpdateQueue = {|
+export type FunctionComponentUpdateQueue = {
   lastEffect: Effect | null,
   stores: Array<StoreConsistencyCheck<any>> | null,
-|};
+};
 
 type BasicStateAction<S> = (S => S) | S;
 
@@ -714,68 +718,70 @@ function createFunctionComponentUpdateQueue(): FunctionComponentUpdateQueue {
 }
 
 function use<T>(usable: Usable<T>): T {
-  if (
-    usable !== null &&
-    typeof usable === 'object' &&
-    typeof usable.then === 'function'
-  ) {
-    // This is a thenable.
-    const thenable: Thenable<T> = (usable: any);
-
-    // Track the position of the thenable within this fiber.
-    const index = thenableIndexCounter;
-    thenableIndexCounter += 1;
-
-    switch (thenable.status) {
-      case 'fulfilled': {
-        const fulfilledValue: T = thenable.value;
-        return fulfilledValue;
-      }
-      case 'rejected': {
-        const rejectedError = thenable.reason;
-        throw rejectedError;
-      }
-      default: {
-        const prevThenableAtIndex: Thenable<T> | null = getPreviouslyUsedThenableAtIndex(
-          index,
-        );
-        if (prevThenableAtIndex !== null) {
-          switch (prevThenableAtIndex.status) {
-            case 'fulfilled': {
-              const fulfilledValue: T = prevThenableAtIndex.value;
-              return fulfilledValue;
-            }
-            case 'rejected': {
-              const rejectedError: mixed = prevThenableAtIndex.reason;
-              throw rejectedError;
-            }
-            default: {
-              // The thenable still hasn't resolved. Suspend with the same
-              // thenable as last time to avoid redundant listeners.
-              throw prevThenableAtIndex;
+  if (usable !== null && typeof usable === 'object') {
+    if (typeof usable.then === 'function') {
+      // This is a thenable.
+      const thenable: Thenable<T> = (usable: any);
+
+      // Track the position of the thenable within this fiber.
+      const index = thenableIndexCounter;
+      thenableIndexCounter += 1;
+
+      switch (thenable.status) {
+        case 'fulfilled': {
+          const fulfilledValue: T = thenable.value;
+          return fulfilledValue;
+        }
+        case 'rejected': {
+          const rejectedError = thenable.reason;
+          throw rejectedError;
+        }
+        default: {
+          const prevThenableAtIndex: Thenable<T> | null = getPreviouslyUsedThenableAtIndex(
+            index,
+          );
+          if (prevThenableAtIndex !== null) {
+            switch (prevThenableAtIndex.status) {
+              case 'fulfilled': {
+                const fulfilledValue: T = prevThenableAtIndex.value;
+                return fulfilledValue;
+              }
+              case 'rejected': {
+                const rejectedError: mixed = prevThenableAtIndex.reason;
+                throw rejectedError;
+              }
+              default: {
+                // The thenable still hasn't resolved. Suspend with the same
+                // thenable as last time to avoid redundant listeners.
+                throw prevThenableAtIndex;
+              }
             }
+          } else {
+            // This is the first time something has been used at this index.
+            // Stash the thenable at the current index so we can reuse it during
+            // the next attempt.
+            trackUsedThenable(thenable, index);
+
+            // Suspend.
+            // TODO: Throwing here is an implementation detail that allows us to
+            // unwind the call stack. But we shouldn't allow it to leak into
+            // userspace. Throw an opaque placeholder value instead of the
+            // actual thenable. If it doesn't get captured by the work loop, log
+            // a warning, because that means something in userspace must have
+            // caught it.
+            throw thenable;
           }
-        } else {
-          // This is the first time something has been used at this index.
-          // Stash the thenable at the current index so we can reuse it during
-          // the next attempt.
-          trackUsedThenable(thenable, index);
-
-          // Suspend.
-          // TODO: Throwing here is an implementation detail that allows us to
-          // unwind the call stack. But we shouldn't allow it to leak into
-          // userspace. Throw an opaque placeholder value instead of the
-          // actual thenable. If it doesn't get captured by the work loop, log
-          // a warning, because that means something in userspace must have
-          // caught it.
-          throw thenable;
         }
       }
+    } else if (
+      usable.$$typeof === REACT_CONTEXT_TYPE ||
+      usable.$$typeof === REACT_SERVER_CONTEXT_TYPE
+    ) {
+      const context: ReactContext<T> = (usable: any);
+      return readContext(context);
     }
   }
 
-  // TODO: Add support for Context
-
   // eslint-disable-next-line react-internal/safe-string-coercion
   throw new Error('An unsupported type was passed to use(): ' + String(usable));
 }
@@ -1028,14 +1034,14 @@ function rerenderReducer<S, I, A>(
   return [newState, dispatch];
 }
 
-type MutableSourceMemoizedState<Source, Snapshot> = {|
+type MutableSourceMemoizedState<Source, Snapshot> = {
   refs: {
     getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
     setSnapshot: Snapshot => void,
   },
   source: MutableSource<any>,
   subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
-|};
+};
 
 function readFromUnsubscribedMutableSource<Source, Snapshot>(
   root: FiberRoot,
@@ -1648,7 +1654,7 @@ function getCallerStackFrame(): string {
     : stackFrames.slice(2, 3).join('\n');
 }
 
-function mountRef<T>(initialValue: T): {|current: T|} {
+function mountRef<T>(initialValue: T): {current: T} {
   const hook = mountWorkInProgressHook();
   if (enableUseRefAccessWarning) {
     if (__DEV__) {
@@ -1717,7 +1723,7 @@ function mountRef<T>(initialValue: T): {|current: T|} {
   }
 }
 
-function updateRef<T>(initialValue: T): {|current: T|} {
+function updateRef<T>(initialValue: T): {current: T} {
   const hook = updateWorkInProgressHook();
   return hook.memoizedState;
 }
@@ -1811,7 +1817,7 @@ function updateLayoutEffect(
 
 function imperativeHandleEffect<T>(
   create: () => T,
-  ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
+  ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
 ) {
   if (typeof ref === 'function') {
     const refCallback = ref;
@@ -1840,7 +1846,7 @@ function imperativeHandleEffect<T>(
 }
 
 function mountImperativeHandle<T>(
-  ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
+  ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
   create: () => T,
   deps: Array<mixed> | void | null,
 ): void {
@@ -1868,7 +1874,7 @@ function mountImperativeHandle<T>(
 }
 
 function updateImperativeHandle<T>(
-  ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
+  ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
   create: () => T,
   deps: Array<mixed> | void | null,
 ): void {
@@ -2612,7 +2618,7 @@ if (__DEV__) {
       return mountEffect(create, deps);
     },
     useImperativeHandle<T>(
-      ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
+      ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
       create: () => T,
       deps: Array<mixed> | void | null,
     ): void {
@@ -2666,7 +2672,7 @@ if (__DEV__) {
         ReactCurrentDispatcher.current = prevDispatcher;
       }
     },
-    useRef<T>(initialValue: T): {|current: T|} {
+    useRef<T>(initialValue: T): {current: T} {
       currentHookNameInDev = 'useRef';
       mountHookTypesDev();
       return mountRef(initialValue);
@@ -2764,7 +2770,7 @@ if (__DEV__) {
       return mountEffect(create, deps);
     },
     useImperativeHandle<T>(
-      ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
+      ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
       create: () => T,
       deps: Array<mixed> | void | null,
     ): void {
@@ -2814,7 +2820,7 @@ if (__DEV__) {
         ReactCurrentDispatcher.current = prevDispatcher;
       }
     },
-    useRef<T>(initialValue: T): {|current: T|} {
+    useRef<T>(initialValue: T): {current: T} {
       currentHookNameInDev = 'useRef';
       updateHookTypesDev();
       return mountRef(initialValue);
@@ -2912,7 +2918,7 @@ if (__DEV__) {
       return updateEffect(create, deps);
     },
     useImperativeHandle<T>(
-      ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
+      ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
       create: () => T,
       deps: Array<mixed> | void | null,
     ): void {
@@ -2962,7 +2968,7 @@ if (__DEV__) {
         ReactCurrentDispatcher.current = prevDispatcher;
       }
     },
-    useRef<T>(initialValue: T): {|current: T|} {
+    useRef<T>(initialValue: T): {current: T} {
       currentHookNameInDev = 'useRef';
       updateHookTypesDev();
       return updateRef(initialValue);
@@ -3061,7 +3067,7 @@ if (__DEV__) {
       return updateEffect(create, deps);
     },
     useImperativeHandle<T>(
-      ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
+      ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
       create: () => T,
       deps: Array<mixed> | void | null,
     ): void {
@@ -3111,7 +3117,7 @@ if (__DEV__) {
         ReactCurrentDispatcher.current = prevDispatcher;
       }
     },
-    useRef<T>(initialValue: T): {|current: T|} {
+    useRef<T>(initialValue: T): {current: T} {
       currentHookNameInDev = 'useRef';
       updateHookTypesDev();
       return updateRef(initialValue);
@@ -3213,7 +3219,7 @@ if (__DEV__) {
       return mountEffect(create, deps);
     },
     useImperativeHandle<T>(
-      ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
+      ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
       create: () => T,
       deps: Array<mixed> | void | null,
     ): void {
@@ -3268,7 +3274,7 @@ if (__DEV__) {
         ReactCurrentDispatcher.current = prevDispatcher;
       }
     },
-    useRef<T>(initialValue: T): {|current: T|} {
+    useRef<T>(initialValue: T): {current: T} {
       currentHookNameInDev = 'useRef';
       warnInvalidHookAccess();
       mountHookTypesDev();
@@ -3388,7 +3394,7 @@ if (__DEV__) {
       return updateEffect(create, deps);
     },
     useImperativeHandle<T>(
-      ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
+      ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
       create: () => T,
       deps: Array<mixed> | void | null,
     ): void {
@@ -3443,7 +3449,7 @@ if (__DEV__) {
         ReactCurrentDispatcher.current = prevDispatcher;
       }
     },
-    useRef<T>(initialValue: T): {|current: T|} {
+    useRef<T>(initialValue: T): {current: T} {
       currentHookNameInDev = 'useRef';
       warnInvalidHookAccess();
       updateHookTypesDev();
@@ -3564,7 +3570,7 @@ if (__DEV__) {
       return updateEffect(create, deps);
     },
     useImperativeHandle<T>(
-      ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
+      ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
       create: () => T,
       deps: Array<mixed> | void | null,
     ): void {
@@ -3619,7 +3625,7 @@ if (__DEV__) {
         ReactCurrentDispatcher.current = prevDispatcher;
       }
     },
-    useRef<T>(initialValue: T): {|current: T|} {
+    useRef<T>(initialValue: T): {current: T} {
       currentHookNameInDev = 'useRef';
       warnInvalidHookAccess();
       updateHookTypesDev();
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index e258a9f824e20..4e53c1b2545dc 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -36,6 +36,10 @@ import {
   enableUseHook,
   enableUseMemoCacheHook,
 } from 'shared/ReactFeatureFlags';
+import {
+  REACT_CONTEXT_TYPE,
+  REACT_SERVER_CONTEXT_TYPE,
+} from 'shared/ReactSymbols';
 
 import {NoMode, ConcurrentMode, DebugTracingMode} from './ReactTypeOfMode';
 import {
@@ -122,21 +126,21 @@ import {
 
 const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;
 
-export type Update<S, A> = {|
+export type Update<S, A> = {
   lane: Lane,
   action: A,
   hasEagerState: boolean,
   eagerState: S | null,
   next: Update<S, A>,
-|};
+};
 
-export type UpdateQueue<S, A> = {|
+export type UpdateQueue<S, A> = {
   pending: Update<S, A> | null,
   lanes: Lanes,
   dispatch: (A => mixed) | null,
   lastRenderedReducer: ((S, A) => S) | null,
   lastRenderedState: S | null,
-|};
+};
 
 let didWarnAboutMismatchedHooksForComponent;
 let didWarnUncachedGetSnapshot;
@@ -144,36 +148,36 @@ if (__DEV__) {
   didWarnAboutMismatchedHooksForComponent = new Set();
 }
 
-export type Hook = {|
+export type Hook = {
   memoizedState: any,
   baseState: any,
   baseQueue: Update<any, any> | null,
   queue: any,
   next: Hook | null,
-|};
+};
 
-export type Effect = {|
+export type Effect = {
   tag: HookFlags,
   create: () => (() => void) | void,
   destroy: (() => void) | void,
   deps: Array<mixed> | null,
   next: Effect,
-|};
+};
 
-type StoreInstance<T> = {|
+type StoreInstance<T> = {
   value: T,
   getSnapshot: () => T,
-|};
+};
 
-type StoreConsistencyCheck<T> = {|
+type StoreConsistencyCheck<T> = {
   value: T,
   getSnapshot: () => T,
-|};
+};
 
-export type FunctionComponentUpdateQueue = {|
+export type FunctionComponentUpdateQueue = {
   lastEffect: Effect | null,
   stores: Array<StoreConsistencyCheck<any>> | null,
-|};
+};
 
 type BasicStateAction<S> = (S => S) | S;
 
@@ -714,68 +718,70 @@ function createFunctionComponentUpdateQueue(): FunctionComponentUpdateQueue {
 }
 
 function use<T>(usable: Usable<T>): T {
-  if (
-    usable !== null &&
-    typeof usable === 'object' &&
-    typeof usable.then === 'function'
-  ) {
-    // This is a thenable.
-    const thenable: Thenable<T> = (usable: any);
-
-    // Track the position of the thenable within this fiber.
-    const index = thenableIndexCounter;
-    thenableIndexCounter += 1;
-
-    switch (thenable.status) {
-      case 'fulfilled': {
-        const fulfilledValue: T = thenable.value;
-        return fulfilledValue;
-      }
-      case 'rejected': {
-        const rejectedError = thenable.reason;
-        throw rejectedError;
-      }
-      default: {
-        const prevThenableAtIndex: Thenable<T> | null = getPreviouslyUsedThenableAtIndex(
-          index,
-        );
-        if (prevThenableAtIndex !== null) {
-          switch (prevThenableAtIndex.status) {
-            case 'fulfilled': {
-              const fulfilledValue: T = prevThenableAtIndex.value;
-              return fulfilledValue;
-            }
-            case 'rejected': {
-              const rejectedError: mixed = prevThenableAtIndex.reason;
-              throw rejectedError;
-            }
-            default: {
-              // The thenable still hasn't resolved. Suspend with the same
-              // thenable as last time to avoid redundant listeners.
-              throw prevThenableAtIndex;
+  if (usable !== null && typeof usable === 'object') {
+    if (typeof usable.then === 'function') {
+      // This is a thenable.
+      const thenable: Thenable<T> = (usable: any);
+
+      // Track the position of the thenable within this fiber.
+      const index = thenableIndexCounter;
+      thenableIndexCounter += 1;
+
+      switch (thenable.status) {
+        case 'fulfilled': {
+          const fulfilledValue: T = thenable.value;
+          return fulfilledValue;
+        }
+        case 'rejected': {
+          const rejectedError = thenable.reason;
+          throw rejectedError;
+        }
+        default: {
+          const prevThenableAtIndex: Thenable<T> | null = getPreviouslyUsedThenableAtIndex(
+            index,
+          );
+          if (prevThenableAtIndex !== null) {
+            switch (prevThenableAtIndex.status) {
+              case 'fulfilled': {
+                const fulfilledValue: T = prevThenableAtIndex.value;
+                return fulfilledValue;
+              }
+              case 'rejected': {
+                const rejectedError: mixed = prevThenableAtIndex.reason;
+                throw rejectedError;
+              }
+              default: {
+                // The thenable still hasn't resolved. Suspend with the same
+                // thenable as last time to avoid redundant listeners.
+                throw prevThenableAtIndex;
+              }
             }
+          } else {
+            // This is the first time something has been used at this index.
+            // Stash the thenable at the current index so we can reuse it during
+            // the next attempt.
+            trackUsedThenable(thenable, index);
+
+            // Suspend.
+            // TODO: Throwing here is an implementation detail that allows us to
+            // unwind the call stack. But we shouldn't allow it to leak into
+            // userspace. Throw an opaque placeholder value instead of the
+            // actual thenable. If it doesn't get captured by the work loop, log
+            // a warning, because that means something in userspace must have
+            // caught it.
+            throw thenable;
           }
-        } else {
-          // This is the first time something has been used at this index.
-          // Stash the thenable at the current index so we can reuse it during
-          // the next attempt.
-          trackUsedThenable(thenable, index);
-
-          // Suspend.
-          // TODO: Throwing here is an implementation detail that allows us to
-          // unwind the call stack. But we shouldn't allow it to leak into
-          // userspace. Throw an opaque placeholder value instead of the
-          // actual thenable. If it doesn't get captured by the work loop, log
-          // a warning, because that means something in userspace must have
-          // caught it.
-          throw thenable;
         }
       }
+    } else if (
+      usable.$$typeof === REACT_CONTEXT_TYPE ||
+      usable.$$typeof === REACT_SERVER_CONTEXT_TYPE
+    ) {
+      const context: ReactContext<T> = (usable: any);
+      return readContext(context);
     }
   }
 
-  // TODO: Add support for Context
-
   // eslint-disable-next-line react-internal/safe-string-coercion
   throw new Error('An unsupported type was passed to use(): ' + String(usable));
 }
@@ -1028,14 +1034,14 @@ function rerenderReducer<S, I, A>(
   return [newState, dispatch];
 }
 
-type MutableSourceMemoizedState<Source, Snapshot> = {|
+type MutableSourceMemoizedState<Source, Snapshot> = {
   refs: {
     getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
     setSnapshot: Snapshot => void,
   },
   source: MutableSource<any>,
   subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
-|};
+};
 
 function readFromUnsubscribedMutableSource<Source, Snapshot>(
   root: FiberRoot,
@@ -1648,7 +1654,7 @@ function getCallerStackFrame(): string {
     : stackFrames.slice(2, 3).join('\n');
 }
 
-function mountRef<T>(initialValue: T): {|current: T|} {
+function mountRef<T>(initialValue: T): {current: T} {
   const hook = mountWorkInProgressHook();
   if (enableUseRefAccessWarning) {
     if (__DEV__) {
@@ -1717,7 +1723,7 @@ function mountRef<T>(initialValue: T): {|current: T|} {
   }
 }
 
-function updateRef<T>(initialValue: T): {|current: T|} {
+function updateRef<T>(initialValue: T): {current: T} {
   const hook = updateWorkInProgressHook();
   return hook.memoizedState;
 }
@@ -1811,7 +1817,7 @@ function updateLayoutEffect(
 
 function imperativeHandleEffect<T>(
   create: () => T,
-  ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
+  ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
 ) {
   if (typeof ref === 'function') {
     const refCallback = ref;
@@ -1840,7 +1846,7 @@ function imperativeHandleEffect<T>(
 }
 
 function mountImperativeHandle<T>(
-  ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
+  ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
   create: () => T,
   deps: Array<mixed> | void | null,
 ): void {
@@ -1868,7 +1874,7 @@ function mountImperativeHandle<T>(
 }
 
 function updateImperativeHandle<T>(
-  ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
+  ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
   create: () => T,
   deps: Array<mixed> | void | null,
 ): void {
@@ -2612,7 +2618,7 @@ if (__DEV__) {
       return mountEffect(create, deps);
     },
     useImperativeHandle<T>(
-      ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
+      ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
       create: () => T,
       deps: Array<mixed> | void | null,
     ): void {
@@ -2666,7 +2672,7 @@ if (__DEV__) {
         ReactCurrentDispatcher.current = prevDispatcher;
       }
     },
-    useRef<T>(initialValue: T): {|current: T|} {
+    useRef<T>(initialValue: T): {current: T} {
       currentHookNameInDev = 'useRef';
       mountHookTypesDev();
       return mountRef(initialValue);
@@ -2764,7 +2770,7 @@ if (__DEV__) {
       return mountEffect(create, deps);
     },
     useImperativeHandle<T>(
-      ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
+      ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
       create: () => T,
       deps: Array<mixed> | void | null,
     ): void {
@@ -2814,7 +2820,7 @@ if (__DEV__) {
         ReactCurrentDispatcher.current = prevDispatcher;
       }
     },
-    useRef<T>(initialValue: T): {|current: T|} {
+    useRef<T>(initialValue: T): {current: T} {
       currentHookNameInDev = 'useRef';
       updateHookTypesDev();
       return mountRef(initialValue);
@@ -2912,7 +2918,7 @@ if (__DEV__) {
       return updateEffect(create, deps);
     },
     useImperativeHandle<T>(
-      ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
+      ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
       create: () => T,
       deps: Array<mixed> | void | null,
     ): void {
@@ -2962,7 +2968,7 @@ if (__DEV__) {
         ReactCurrentDispatcher.current = prevDispatcher;
       }
     },
-    useRef<T>(initialValue: T): {|current: T|} {
+    useRef<T>(initialValue: T): {current: T} {
       currentHookNameInDev = 'useRef';
       updateHookTypesDev();
       return updateRef(initialValue);
@@ -3061,7 +3067,7 @@ if (__DEV__) {
       return updateEffect(create, deps);
     },
     useImperativeHandle<T>(
-      ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
+      ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
       create: () => T,
       deps: Array<mixed> | void | null,
     ): void {
@@ -3111,7 +3117,7 @@ if (__DEV__) {
         ReactCurrentDispatcher.current = prevDispatcher;
       }
     },
-    useRef<T>(initialValue: T): {|current: T|} {
+    useRef<T>(initialValue: T): {current: T} {
       currentHookNameInDev = 'useRef';
       updateHookTypesDev();
       return updateRef(initialValue);
@@ -3213,7 +3219,7 @@ if (__DEV__) {
       return mountEffect(create, deps);
     },
     useImperativeHandle<T>(
-      ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
+      ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
       create: () => T,
       deps: Array<mixed> | void | null,
     ): void {
@@ -3268,7 +3274,7 @@ if (__DEV__) {
         ReactCurrentDispatcher.current = prevDispatcher;
       }
     },
-    useRef<T>(initialValue: T): {|current: T|} {
+    useRef<T>(initialValue: T): {current: T} {
       currentHookNameInDev = 'useRef';
       warnInvalidHookAccess();
       mountHookTypesDev();
@@ -3388,7 +3394,7 @@ if (__DEV__) {
       return updateEffect(create, deps);
     },
     useImperativeHandle<T>(
-      ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
+      ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
       create: () => T,
       deps: Array<mixed> | void | null,
     ): void {
@@ -3443,7 +3449,7 @@ if (__DEV__) {
         ReactCurrentDispatcher.current = prevDispatcher;
       }
     },
-    useRef<T>(initialValue: T): {|current: T|} {
+    useRef<T>(initialValue: T): {current: T} {
       currentHookNameInDev = 'useRef';
       warnInvalidHookAccess();
       updateHookTypesDev();
@@ -3564,7 +3570,7 @@ if (__DEV__) {
       return updateEffect(create, deps);
     },
     useImperativeHandle<T>(
-      ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
+      ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
       create: () => T,
       deps: Array<mixed> | void | null,
     ): void {
@@ -3619,7 +3625,7 @@ if (__DEV__) {
         ReactCurrentDispatcher.current = prevDispatcher;
       }
     },
-    useRef<T>(initialValue: T): {|current: T|} {
+    useRef<T>(initialValue: T): {current: T} {
       currentHookNameInDev = 'useRef';
       warnInvalidHookAccess();
       updateHookTypesDev();
diff --git a/packages/react-reconciler/src/ReactFiberHotReloading.js b/packages/react-reconciler/src/ReactFiberHotReloading.js
index 35fa032d21160..0d3fdca45ceff 100644
--- a/packages/react-reconciler/src/ReactFiberHotReloading.js
+++ b/packages/react-reconciler/src/ReactFiberHotReloading.js
@@ -7,16 +7,11 @@
  * @flow
  */
 
-import {enableNewReconciler} from 'shared/ReactFeatureFlags';
+import type {Instance} from './ReactFiberHostConfig';
+import type {FiberRoot} from './ReactInternalTypes';
+import type {ReactNodeList} from 'shared/ReactTypes';
 
-export type {
-  Family,
-  RefreshUpdate,
-  SetRefreshHandler,
-  ScheduleRefresh,
-  ScheduleRoot,
-  FindHostInstancesForRefresh,
-} from './ReactFiberHotReloading';
+import {enableNewReconciler} from 'shared/ReactFeatureFlags';
 
 import {
   setRefreshHandler as setRefreshHandler_old,
@@ -42,6 +37,27 @@ import {
   findHostInstancesForRefresh as findHostInstancesForRefresh_new,
 } from './ReactFiberHotReloading.new';
 
+export type Family = {
+  current: any,
+};
+
+export type RefreshUpdate = {
+  staleFamilies: Set<Family>,
+  updatedFamilies: Set<Family>,
+};
+
+// Resolves type to a family.
+export type RefreshHandler = any => Family | void;
+
+// Used by React Refresh runtime through DevTools Global Hook.
+export type SetRefreshHandler = (handler: RefreshHandler | null) => void;
+export type ScheduleRefresh = (root: FiberRoot, update: RefreshUpdate) => void;
+export type ScheduleRoot = (root: FiberRoot, element: ReactNodeList) => void;
+export type FindHostInstancesForRefresh = (
+  root: FiberRoot,
+  families: Array<Family>,
+) => Set<Instance>;
+
 export const setRefreshHandler = enableNewReconciler
   ? setRefreshHandler_new
   : setRefreshHandler_old;
diff --git a/packages/react-reconciler/src/ReactFiberHotReloading.new.js b/packages/react-reconciler/src/ReactFiberHotReloading.new.js
index 22b78280f9cba..4f289fe4195e4 100644
--- a/packages/react-reconciler/src/ReactFiberHotReloading.new.js
+++ b/packages/react-reconciler/src/ReactFiberHotReloading.new.js
@@ -10,11 +10,19 @@
 /* eslint-disable react-internal/prod-error-codes */
 
 import type {ReactElement} from 'shared/ReactElementType';
-import type {Fiber} from './ReactInternalTypes';
-import type {FiberRoot} from './ReactInternalTypes';
+import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {Instance} from './ReactFiberHostConfig';
 import type {ReactNodeList} from 'shared/ReactTypes';
 
+import type {
+  Family,
+  FindHostInstancesForRefresh,
+  RefreshHandler,
+  RefreshUpdate,
+  ScheduleRefresh,
+  ScheduleRoot,
+} from './ReactFiberHotReloading';
+
 import {
   flushSync,
   scheduleUpdateOnFiber,
@@ -40,27 +48,6 @@ import {
   REACT_LAZY_TYPE,
 } from 'shared/ReactSymbols';
 
-export type Family = {|
-  current: any,
-|};
-
-export type RefreshUpdate = {|
-  staleFamilies: Set<Family>,
-  updatedFamilies: Set<Family>,
-|};
-
-// Resolves type to a family.
-type RefreshHandler = any => Family | void;
-
-// Used by React Refresh runtime through DevTools Global Hook.
-export type SetRefreshHandler = (handler: RefreshHandler | null) => void;
-export type ScheduleRefresh = (root: FiberRoot, update: RefreshUpdate) => void;
-export type ScheduleRoot = (root: FiberRoot, element: ReactNodeList) => void;
-export type FindHostInstancesForRefresh = (
-  root: FiberRoot,
-  families: Array<Family>,
-) => Set<Instance>;
-
 let resolveFamily: RefreshHandler | null = null;
 // $FlowFixMe Flow gets confused by a WeakSet feature check below.
 let failedBoundaries: WeakSet<Fiber> | null = null;
@@ -222,6 +209,7 @@ export function markFailedErrorBoundaryForHotReloading(fiber: Fiber) {
       return;
     }
     if (failedBoundaries === null) {
+      // $FlowFixMe Flow got confused by the feature check above.
       failedBoundaries = new WeakSet();
     }
     failedBoundaries.add(fiber);
diff --git a/packages/react-reconciler/src/ReactFiberHotReloading.old.js b/packages/react-reconciler/src/ReactFiberHotReloading.old.js
index 805176560c4bc..55f0f94cf8a44 100644
--- a/packages/react-reconciler/src/ReactFiberHotReloading.old.js
+++ b/packages/react-reconciler/src/ReactFiberHotReloading.old.js
@@ -10,11 +10,19 @@
 /* eslint-disable react-internal/prod-error-codes */
 
 import type {ReactElement} from 'shared/ReactElementType';
-import type {Fiber} from './ReactInternalTypes';
-import type {FiberRoot} from './ReactInternalTypes';
+import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {Instance} from './ReactFiberHostConfig';
 import type {ReactNodeList} from 'shared/ReactTypes';
 
+import type {
+  Family,
+  FindHostInstancesForRefresh,
+  RefreshHandler,
+  RefreshUpdate,
+  ScheduleRefresh,
+  ScheduleRoot,
+} from './ReactFiberHotReloading';
+
 import {
   flushSync,
   scheduleUpdateOnFiber,
@@ -40,27 +48,6 @@ import {
   REACT_LAZY_TYPE,
 } from 'shared/ReactSymbols';
 
-export type Family = {|
-  current: any,
-|};
-
-export type RefreshUpdate = {|
-  staleFamilies: Set<Family>,
-  updatedFamilies: Set<Family>,
-|};
-
-// Resolves type to a family.
-type RefreshHandler = any => Family | void;
-
-// Used by React Refresh runtime through DevTools Global Hook.
-export type SetRefreshHandler = (handler: RefreshHandler | null) => void;
-export type ScheduleRefresh = (root: FiberRoot, update: RefreshUpdate) => void;
-export type ScheduleRoot = (root: FiberRoot, element: ReactNodeList) => void;
-export type FindHostInstancesForRefresh = (
-  root: FiberRoot,
-  families: Array<Family>,
-) => Set<Instance>;
-
 let resolveFamily: RefreshHandler | null = null;
 // $FlowFixMe Flow gets confused by a WeakSet feature check below.
 let failedBoundaries: WeakSet<Fiber> | null = null;
@@ -222,6 +209,7 @@ export function markFailedErrorBoundaryForHotReloading(fiber: Fiber) {
       return;
     }
     if (failedBoundaries === null) {
+      // $FlowFixMe Flow got confused by the feature check above.
       failedBoundaries = new WeakSet();
     }
     failedBoundaries.add(fiber);
diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index 4aebeba7a205e..2dcbe70ee7960 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import type {FiberRoot} from './ReactInternalTypes';
+import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {Transition} from './ReactFiberTracingMarkerComponent.new';
 import type {ConcurrentUpdate} from './ReactFiberConcurrentUpdates.new';
 
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index 5861e9d3d3252..6042a1a31c429 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import type {FiberRoot} from './ReactInternalTypes';
+import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {Transition} from './ReactFiberTracingMarkerComponent.old';
 import type {ConcurrentUpdate} from './ReactFiberConcurrentUpdates.old';
 
diff --git a/packages/react-reconciler/src/ReactFiberOffscreenComponent.js b/packages/react-reconciler/src/ReactFiberOffscreenComponent.js
index 7bdaf83b90320..1c45f6135d689 100644
--- a/packages/react-reconciler/src/ReactFiberOffscreenComponent.js
+++ b/packages/react-reconciler/src/ReactFiberOffscreenComponent.js
@@ -15,7 +15,7 @@ import type {
   TracingMarkerInstance,
 } from './ReactFiberTracingMarkerComponent.new';
 
-export type OffscreenProps = {|
+export type OffscreenProps = {
   // TODO: Pick an API before exposing the Offscreen type. I've chosen an enum
   // for now, since we might have multiple variants. For example, hiding the
   // content without changing the layout.
@@ -24,32 +24,32 @@ export type OffscreenProps = {|
   // called "Offscreen." Possible alt: <Visibility />?
   mode?: OffscreenMode | null | void,
   children?: ReactNodeList,
-|};
+};
 
 // We use the existence of the state object as an indicator that the component
 // is hidden.
-export type OffscreenState = {|
+export type OffscreenState = {
   // TODO: This doesn't do anything, yet. It's always NoLanes. But eventually it
   // will represent the pending work that must be included in the render in
   // order to unhide the component.
   baseLanes: Lanes,
   cachePool: SpawnedCachePool | null,
-|};
+};
 
-export type OffscreenQueue = {|
+export type OffscreenQueue = {
   transitions: Array<Transition> | null,
   markerInstances: Array<TracingMarkerInstance> | null,
   wakeables: Set<Wakeable> | null,
-|};
+};
 
 type OffscreenVisibility = number;
 
 export const OffscreenVisible = /*                     */ 0b01;
 export const OffscreenPassiveEffectsConnected = /*     */ 0b10;
 
-export type OffscreenInstance = {|
+export type OffscreenInstance = {
   visibility: OffscreenVisibility,
   pendingMarkers: Set<TracingMarkerInstance> | null,
   transitions: Set<Transition> | null,
   retryCache: WeakSet<Wakeable> | Set<Wakeable> | null,
-|};
+};
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index f9899c93b9211..db77d28ff132b 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -120,7 +120,7 @@ type OpaqueRoot = FiberRoot;
 // Might add PROFILE later.
 type BundleType = 0 | 1;
 
-type DevToolsConfig = {|
+type DevToolsConfig = {
   bundleType: BundleType,
   version: string,
   rendererPackageName: string,
@@ -128,7 +128,7 @@ type DevToolsConfig = {|
   // Used by "inspect clicked DOM element" in React DevTools.
   findFiberByHostInstance?: (instance: Instance | TextInstance) => Fiber | null,
   rendererConfig?: RendererInspectionConfig,
-|};
+};
 
 let didWarnAboutNestedUpdates;
 let didWarnAboutFindNodeInStrictMode;
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index 58ee3656d501b..aabd5d4b2ab3e 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -120,7 +120,7 @@ type OpaqueRoot = FiberRoot;
 // Might add PROFILE later.
 type BundleType = 0 | 1;
 
-type DevToolsConfig = {|
+type DevToolsConfig = {
   bundleType: BundleType,
   version: string,
   rendererPackageName: string,
@@ -128,7 +128,7 @@ type DevToolsConfig = {|
   // Used by "inspect clicked DOM element" in React DevTools.
   findFiberByHostInstance?: (instance: Instance | TextInstance) => Fiber | null,
   rendererConfig?: RendererInspectionConfig,
-|};
+};
 
 let didWarnAboutNestedUpdates;
 let didWarnAboutFindNodeInStrictMode;
diff --git a/packages/react-reconciler/src/ReactFiberRoot.new.js b/packages/react-reconciler/src/ReactFiberRoot.new.js
index 892fe78ac1b1e..beaa5f509bc95 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.new.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.new.js
@@ -15,6 +15,7 @@ import type {
 } from './ReactInternalTypes';
 import type {RootTag} from './ReactRootTags';
 import type {Cache} from './ReactFiberCacheComponent.new';
+import type {Container} from './ReactFiberHostConfig';
 
 import {noTimeout, supportsHydration} from './ReactFiberHostConfig';
 import {createHostRootFiber} from './ReactFiber.new';
@@ -128,7 +129,7 @@ function FiberRootNode(
 }
 
 export function createFiberRoot(
-  containerInfo: any,
+  containerInfo: Container,
   tag: RootTag,
   hydrate: boolean,
   initialChildren: ReactNodeList,
diff --git a/packages/react-reconciler/src/ReactFiberRoot.old.js b/packages/react-reconciler/src/ReactFiberRoot.old.js
index f7e16f0bbdcc8..11221f86a8f4c 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.old.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.old.js
@@ -15,6 +15,7 @@ import type {
 } from './ReactInternalTypes';
 import type {RootTag} from './ReactRootTags';
 import type {Cache} from './ReactFiberCacheComponent.old';
+import type {Container} from './ReactFiberHostConfig';
 
 import {noTimeout, supportsHydration} from './ReactFiberHostConfig';
 import {createHostRootFiber} from './ReactFiber.old';
@@ -128,7 +129,7 @@ function FiberRootNode(
 }
 
 export function createFiberRoot(
-  containerInfo: any,
+  containerInfo: Container,
   tag: RootTag,
   hydrate: boolean,
   initialChildren: ReactNodeList,
diff --git a/packages/react-reconciler/src/ReactFiberStack.new.js b/packages/react-reconciler/src/ReactFiberStack.new.js
index 7cc4e330069ef..da4b05320dff4 100644
--- a/packages/react-reconciler/src/ReactFiberStack.new.js
+++ b/packages/react-reconciler/src/ReactFiberStack.new.js
@@ -9,7 +9,7 @@
 
 import type {Fiber} from './ReactInternalTypes';
 
-export type StackCursor<T> = {|current: T|};
+export type StackCursor<T> = {current: T};
 
 const valueStack: Array<any> = [];
 
diff --git a/packages/react-reconciler/src/ReactFiberStack.old.js b/packages/react-reconciler/src/ReactFiberStack.old.js
index 7cc4e330069ef..da4b05320dff4 100644
--- a/packages/react-reconciler/src/ReactFiberStack.old.js
+++ b/packages/react-reconciler/src/ReactFiberStack.old.js
@@ -9,7 +9,7 @@
 
 import type {Fiber} from './ReactInternalTypes';
 
-export type StackCursor<T> = {|current: T|};
+export type StackCursor<T> = {current: T};
 
 const valueStack: Array<any> = [];
 
diff --git a/packages/react-reconciler/src/ReactFiberSuspenseComponent.new.js b/packages/react-reconciler/src/ReactFiberSuspenseComponent.new.js
index a67a5fd8e6d1e..903dcc89cea64 100644
--- a/packages/react-reconciler/src/ReactFiberSuspenseComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberSuspenseComponent.new.js
@@ -20,7 +20,7 @@ import {
   isSuspenseInstanceFallback,
 } from './ReactFiberHostConfig';
 
-export type SuspenseProps = {|
+export type SuspenseProps = {
   children?: ReactNodeList,
   fallback?: ReactNodeList,
 
@@ -29,7 +29,7 @@ export type SuspenseProps = {|
 
   unstable_expectedLoadTime?: number,
   unstable_name?: string,
-|};
+};
 
 // A null SuspenseState represents an unsuspended normal Suspense boundary.
 // A non-null SuspenseState means that it is blocked for one reason or another.
@@ -38,7 +38,7 @@ export type SuspenseProps = {|
 //     isSuspenseInstanceFallback to query the reason for being dehydrated.
 // - A null dehydrated field means it's blocked by something suspending and
 //   we're currently showing a fallback instead.
-export type SuspenseState = {|
+export type SuspenseState = {
   // If this boundary is still dehydrated, we store the SuspenseInstance
   // here to indicate that it is dehydrated (flag) and for quick access
   // to check things like isSuspenseInstancePending.
@@ -48,11 +48,11 @@ export type SuspenseState = {|
   // OffscreenLane is the default for dehydrated boundaries.
   // NoLane is the default for normal boundaries, which turns into "normal" pri.
   retryLane: Lane,
-|};
+};
 
 export type SuspenseListTailMode = 'collapsed' | 'hidden' | void;
 
-export type SuspenseListRenderState = {|
+export type SuspenseListRenderState = {
   isBackwards: boolean,
   // The currently rendering tail row.
   rendering: null | Fiber,
@@ -64,7 +64,7 @@ export type SuspenseListRenderState = {|
   tail: null | Fiber,
   // Tail insertions setting.
   tailMode: SuspenseListTailMode,
-|};
+};
 
 export function findFirstSuspended(row: Fiber): null | Fiber {
   let node = row;
diff --git a/packages/react-reconciler/src/ReactFiberSuspenseComponent.old.js b/packages/react-reconciler/src/ReactFiberSuspenseComponent.old.js
index cdcde4fd67009..9b80ce79a8d08 100644
--- a/packages/react-reconciler/src/ReactFiberSuspenseComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberSuspenseComponent.old.js
@@ -20,7 +20,7 @@ import {
   isSuspenseInstanceFallback,
 } from './ReactFiberHostConfig';
 
-export type SuspenseProps = {|
+export type SuspenseProps = {
   children?: ReactNodeList,
   fallback?: ReactNodeList,
 
@@ -29,7 +29,7 @@ export type SuspenseProps = {|
 
   unstable_expectedLoadTime?: number,
   unstable_name?: string,
-|};
+};
 
 // A null SuspenseState represents an unsuspended normal Suspense boundary.
 // A non-null SuspenseState means that it is blocked for one reason or another.
@@ -38,7 +38,7 @@ export type SuspenseProps = {|
 //     isSuspenseInstanceFallback to query the reason for being dehydrated.
 // - A null dehydrated field means it's blocked by something suspending and
 //   we're currently showing a fallback instead.
-export type SuspenseState = {|
+export type SuspenseState = {
   // If this boundary is still dehydrated, we store the SuspenseInstance
   // here to indicate that it is dehydrated (flag) and for quick access
   // to check things like isSuspenseInstancePending.
@@ -48,11 +48,11 @@ export type SuspenseState = {|
   // OffscreenLane is the default for dehydrated boundaries.
   // NoLane is the default for normal boundaries, which turns into "normal" pri.
   retryLane: Lane,
-|};
+};
 
 export type SuspenseListTailMode = 'collapsed' | 'hidden' | void;
 
-export type SuspenseListRenderState = {|
+export type SuspenseListRenderState = {
   isBackwards: boolean,
   // The currently rendering tail row.
   rendering: null | Fiber,
@@ -64,7 +64,7 @@ export type SuspenseListRenderState = {|
   tail: null | Fiber,
   // Tail insertions setting.
   tailMode: SuspenseListTailMode,
-|};
+};
 
 export function findFirstSuspended(row: Fiber): null | Fiber {
   let node = row;
diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
index 1be1e7f930994..c37aa3b5d1658 100644
--- a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
@@ -48,18 +48,18 @@ export type BatchConfigTransition = {
 };
 
 // TODO: Is there a way to not include the tag or name here?
-export type TracingMarkerInstance = {|
+export type TracingMarkerInstance = {
   tag?: TracingMarkerTag,
   transitions: Set<Transition> | null,
   pendingBoundaries: PendingBoundaries | null,
   aborts: Array<TransitionAbort> | null,
   name: string | null,
-|};
+};
 
-export type TransitionAbort = {|
+export type TransitionAbort = {
   reason: 'error' | 'unknown' | 'marker' | 'suspense',
   name?: string | null,
-|};
+};
 
 export const TransitionRoot = 0;
 export const TransitionTracingMarker = 1;
diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
index e88930867851a..ede0d60fd1991 100644
--- a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
@@ -48,18 +48,18 @@ export type BatchConfigTransition = {
 };
 
 // TODO: Is there a way to not include the tag or name here?
-export type TracingMarkerInstance = {|
+export type TracingMarkerInstance = {
   tag?: TracingMarkerTag,
   transitions: Set<Transition> | null,
   pendingBoundaries: PendingBoundaries | null,
   aborts: Array<TransitionAbort> | null,
   name: string | null,
-|};
+};
 
-export type TransitionAbort = {|
+export type TransitionAbort = {
   reason: 'error' | 'unknown' | 'marker' | 'suspense',
   name?: string | null,
-|};
+};
 
 export const TransitionRoot = 0;
 export const TransitionTracingMarker = 1;
diff --git a/packages/react-reconciler/src/ReactFiberTransition.new.js b/packages/react-reconciler/src/ReactFiberTransition.new.js
index 527cb89877f62..c095c8e54f14a 100644
--- a/packages/react-reconciler/src/ReactFiberTransition.new.js
+++ b/packages/react-reconciler/src/ReactFiberTransition.new.js
@@ -6,7 +6,7 @@
  *
  * @flow
  */
-import type {FiberRoot} from './ReactInternalTypes';
+import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {Lanes} from './ReactFiberLane.new';
 import type {StackCursor} from './ReactFiberStack.new';
 import type {Cache, SpawnedCachePool} from './ReactFiberCacheComponent.new';
diff --git a/packages/react-reconciler/src/ReactFiberTransition.old.js b/packages/react-reconciler/src/ReactFiberTransition.old.js
index 8323559d58f8b..30c2ecfd4ea6c 100644
--- a/packages/react-reconciler/src/ReactFiberTransition.old.js
+++ b/packages/react-reconciler/src/ReactFiberTransition.old.js
@@ -6,7 +6,7 @@
  *
  * @flow
  */
-import type {FiberRoot} from './ReactInternalTypes';
+import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {Lanes} from './ReactFiberLane.old';
 import type {StackCursor} from './ReactFiberStack.old';
 import type {Cache, SpawnedCachePool} from './ReactFiberCacheComponent.old';
diff --git a/packages/react-reconciler/src/ReactFiberTransitionPool.old.js b/packages/react-reconciler/src/ReactFiberTransitionPool.old.js
index e78670aa3f94f..e89c798be1f95 100644
--- a/packages/react-reconciler/src/ReactFiberTransitionPool.old.js
+++ b/packages/react-reconciler/src/ReactFiberTransitionPool.old.js
@@ -6,7 +6,7 @@
  *
  * @flow
  */
-import type {FiberRoot} from './ReactInternalTypes';
+import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {Lanes} from './ReactFiberLane.old';
 import type {StackCursor} from './ReactFiberStack.old';
 import type {Cache, SpawnedCachePool} from './ReactFiberCacheComponent.old';
diff --git a/packages/react-reconciler/src/ReactFiberTreeContext.new.js b/packages/react-reconciler/src/ReactFiberTreeContext.new.js
index f9c5104ed6b13..f1c23f61b5a42 100644
--- a/packages/react-reconciler/src/ReactFiberTreeContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberTreeContext.new.js
@@ -60,6 +60,8 @@
 // log2(32) = 5 bits. That means we can lop bits off the end 5 at a time without
 // affecting the final result.
 
+import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
+
 import {getIsHydrating} from './ReactFiberHydrationContext.new';
 import {clz32} from './clz32';
 import {Forked, NoFlags} from './ReactFiberFlags';
diff --git a/packages/react-reconciler/src/ReactFiberTreeContext.old.js b/packages/react-reconciler/src/ReactFiberTreeContext.old.js
index 840335d00c4e4..69d7f75dbac1d 100644
--- a/packages/react-reconciler/src/ReactFiberTreeContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberTreeContext.old.js
@@ -60,6 +60,8 @@
 // log2(32) = 5 bits. That means we can lop bits off the end 5 at a time without
 // affecting the final result.
 
+import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
+
 import {getIsHydrating} from './ReactFiberHydrationContext.old';
 import {clz32} from './clz32';
 import {Forked, NoFlags} from './ReactFiberFlags';
diff --git a/packages/react-reconciler/src/ReactFiberWakeable.new.js b/packages/react-reconciler/src/ReactFiberWakeable.new.js
index 83bfad32c5cf1..e494aa34fc1f2 100644
--- a/packages/react-reconciler/src/ReactFiberWakeable.new.js
+++ b/packages/react-reconciler/src/ReactFiberWakeable.new.js
@@ -18,6 +18,7 @@ import type {
 let suspendedThenable: Thenable<mixed> | null = null;
 let adHocSuspendCount: number = 0;
 
+// TODO: Sparse arrays are bad for performance.
 let usedThenables: Array<Thenable<any> | void> | null = null;
 let lastUsedThenable: Thenable<any> | null = null;
 
@@ -74,6 +75,9 @@ export function trackSuspendedWakeable(wakeable: Wakeable) {
       suspendedThenable = null;
       break;
     default: {
+      // TODO: Only instrument the thenable if the status if not defined. If
+      // it's defined, but an unknown value, assume it's been instrumented by
+      // some custom userspace implementation.
       const pendingThenable: PendingThenable<mixed> = (thenable: any);
       pendingThenable.status = 'pending';
       pendingThenable.then(
diff --git a/packages/react-reconciler/src/ReactFiberWakeable.old.js b/packages/react-reconciler/src/ReactFiberWakeable.old.js
index 83bfad32c5cf1..e494aa34fc1f2 100644
--- a/packages/react-reconciler/src/ReactFiberWakeable.old.js
+++ b/packages/react-reconciler/src/ReactFiberWakeable.old.js
@@ -18,6 +18,7 @@ import type {
 let suspendedThenable: Thenable<mixed> | null = null;
 let adHocSuspendCount: number = 0;
 
+// TODO: Sparse arrays are bad for performance.
 let usedThenables: Array<Thenable<any> | void> | null = null;
 let lastUsedThenable: Thenable<any> | null = null;
 
@@ -74,6 +75,9 @@ export function trackSuspendedWakeable(wakeable: Wakeable) {
       suspendedThenable = null;
       break;
     default: {
+      // TODO: Only instrument the thenable if the status if not defined. If
+      // it's defined, but an unknown value, assume it's been instrumented by
+      // some custom userspace implementation.
       const pendingThenable: PendingThenable<mixed> = (thenable: any);
       pendingThenable.status = 'pending';
       pendingThenable.then(
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 229756596cc16..6f62aa4b1c0b1 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -124,6 +124,7 @@ import {
   LayoutMask,
   PassiveMask,
   PlacementDEV,
+  Visibility,
 } from './ReactFiberFlags';
 import {
   NoLanes,
@@ -1650,7 +1651,9 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes): Fiber {
   }
 
   if (workInProgress !== null) {
-    let interruptedWork = workInProgress.return;
+    let interruptedWork = workInProgressIsSuspended
+      ? workInProgress
+      : workInProgress.return;
     while (interruptedWork !== null) {
       const current = interruptedWork.alternate;
       unwindInterruptedWork(
@@ -2216,6 +2219,7 @@ function completeUnitOfWork(unitOfWork: Fiber): void {
         let actualDuration = completedWork.actualDuration;
         let child = completedWork.child;
         while (child !== null) {
+          // $FlowFixMe[unsafe-addition] addition with possible null/undefined value
           actualDuration += child.actualDuration;
           child = child.sibling;
         }
@@ -3170,6 +3174,11 @@ function recursivelyTraverseAndDoubleInvokeEffectsInDEV(
   parentFiber: Fiber,
   isInStrictMode: boolean,
 ) {
+  if ((parentFiber.subtreeFlags & (PlacementDEV | Visibility)) === NoFlags) {
+    // Parent's descendants have already had effects double invoked.
+    // Early exit to avoid unnecessary tree traversal.
+    return;
+  }
   let child = parentFiber.child;
   while (child !== null) {
     doubleInvokeEffectsInDEV(root, child, isInStrictMode);
@@ -3184,9 +3193,15 @@ function doubleInvokeEffectsInDEV(
 ) {
   const isStrictModeFiber = fiber.type === REACT_STRICT_MODE_TYPE;
   const isInStrictMode = parentIsInStrictMode || isStrictModeFiber;
+
   if (fiber.flags & PlacementDEV || fiber.tag === OffscreenComponent) {
     setCurrentDebugFiberInDEV(fiber);
-    if (isInStrictMode) {
+    const isNotOffscreen = fiber.tag !== OffscreenComponent;
+    // Checks if Offscreen is being revealed. For all other components, evaluates to true.
+    const hasOffscreenBecomeVisible =
+      isNotOffscreen ||
+      (fiber.flags & Visibility && fiber.memoizedState === null);
+    if (isInStrictMode && hasOffscreenBecomeVisible) {
       disappearLayoutEffects(fiber);
       disconnectPassiveEffect(fiber);
       reappearLayoutEffects(root, fiber.alternate, fiber, false);
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index c4caf55518a86..414e2e3343ed0 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -124,6 +124,7 @@ import {
   LayoutMask,
   PassiveMask,
   PlacementDEV,
+  Visibility,
 } from './ReactFiberFlags';
 import {
   NoLanes,
@@ -1650,7 +1651,9 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes): Fiber {
   }
 
   if (workInProgress !== null) {
-    let interruptedWork = workInProgress.return;
+    let interruptedWork = workInProgressIsSuspended
+      ? workInProgress
+      : workInProgress.return;
     while (interruptedWork !== null) {
       const current = interruptedWork.alternate;
       unwindInterruptedWork(
@@ -2216,6 +2219,7 @@ function completeUnitOfWork(unitOfWork: Fiber): void {
         let actualDuration = completedWork.actualDuration;
         let child = completedWork.child;
         while (child !== null) {
+          // $FlowFixMe[unsafe-addition] addition with possible null/undefined value
           actualDuration += child.actualDuration;
           child = child.sibling;
         }
@@ -3170,6 +3174,11 @@ function recursivelyTraverseAndDoubleInvokeEffectsInDEV(
   parentFiber: Fiber,
   isInStrictMode: boolean,
 ) {
+  if ((parentFiber.subtreeFlags & (PlacementDEV | Visibility)) === NoFlags) {
+    // Parent's descendants have already had effects double invoked.
+    // Early exit to avoid unnecessary tree traversal.
+    return;
+  }
   let child = parentFiber.child;
   while (child !== null) {
     doubleInvokeEffectsInDEV(root, child, isInStrictMode);
@@ -3184,9 +3193,15 @@ function doubleInvokeEffectsInDEV(
 ) {
   const isStrictModeFiber = fiber.type === REACT_STRICT_MODE_TYPE;
   const isInStrictMode = parentIsInStrictMode || isStrictModeFiber;
+
   if (fiber.flags & PlacementDEV || fiber.tag === OffscreenComponent) {
     setCurrentDebugFiberInDEV(fiber);
-    if (isInStrictMode) {
+    const isNotOffscreen = fiber.tag !== OffscreenComponent;
+    // Checks if Offscreen is being revealed. For all other components, evaluates to true.
+    const hasOffscreenBecomeVisible =
+      isNotOffscreen ||
+      (fiber.flags & Visibility && fiber.memoizedState === null);
+    if (isInStrictMode && hasOffscreenBecomeVisible) {
       disappearLayoutEffects(fiber);
       disconnectPassiveEffect(fiber);
       reappearLayoutEffects(root, fiber.alternate, fiber, false);
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index c8239dc2483e0..df7398c7963d0 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -70,7 +70,7 @@ export type Dependencies = {
 
 // A Fiber is work on a Component that needs to be done or was done. There can
 // be more than one per component.
-export type Fiber = {|
+export type Fiber = {
   // These first fields are conceptually members of an Instance. This used to
   // be split into a separate type and intersected with the other Fiber fields,
   // but until Flow fixes its intersection bugs, we've merged them into a
@@ -197,9 +197,9 @@ export type Fiber = {|
 
   // Used to verify that the order of hooks does not change between renders.
   _debugHookTypes?: Array<HookType> | null,
-|};
+};
 
-type BaseFiberRootProperties = {|
+type BaseFiberRootProperties = {
   // The type of root (legacy, batched, concurrent, etc.)
   tag: RootTag,
 
@@ -260,14 +260,14 @@ type BaseFiberRootProperties = {|
     error: mixed,
     errorInfo: {digest?: ?string, componentStack?: ?string},
   ) => void,
-|};
+};
 
 // The following attributes are only used by DevTools and are only present in DEV builds.
 // They enable DevTools Profiler UI to show which Fiber(s) scheduled a given commit.
-type UpdaterTrackingOnlyFiberRootProperties = {|
+type UpdaterTrackingOnlyFiberRootProperties = {
   memoizedUpdaters: Set<Fiber>,
   pendingUpdatersLaneMap: LaneMap<Set<Fiber>>,
-|};
+};
 
 export type SuspenseHydrationCallbacks = {
   onHydrated?: (suspenseInstance: SuspenseInstance) => void,
@@ -276,9 +276,9 @@ export type SuspenseHydrationCallbacks = {
 };
 
 // The follow fields are only used by enableSuspenseCallback for hydration.
-type SuspenseCallbackOnlyFiberRootProperties = {|
+type SuspenseCallbackOnlyFiberRootProperties = {
   hydrationCallbacks: null | SuspenseHydrationCallbacks,
-|};
+};
 
 export type TransitionTracingCallbacks = {
   onTransitionStart?: (transitionName: string, startTime: number) => void,
@@ -328,7 +328,7 @@ export type TransitionTracingCallbacks = {
 };
 
 // The following fields are only used in transition tracing in Profile builds
-type TransitionTracingOnlyFiberRootProperties = {|
+type TransitionTracingOnlyFiberRootProperties = {
   transitionCallbacks: null | TransitionTracingCallbacks,
   transitionLanes: Array<Set<Transition> | null>,
   // Transitions on the root can be represented as a bunch of tracing markers.
@@ -338,7 +338,7 @@ type TransitionTracingOnlyFiberRootProperties = {|
   // empty. We can represent this as a Map of transitions to suspense
   // boundary sets
   incompleteTransitions: Map<Transition, TracingMarkerInstance>,
-|};
+};
 
 // Exported FiberRoot type includes all properties,
 // To avoid requiring potentially error-prone :any casts throughout the project.
@@ -354,7 +354,7 @@ export type FiberRoot = {
 type BasicStateAction<S> = (S => S) | S;
 type Dispatch<A> = A => void;
 
-export type Dispatcher = {|
+export type Dispatcher = {
   use?: <T>(Usable<T>) => T,
   getCacheSignal?: () => AbortSignal,
   getCacheForType?: <T>(resourceType: () => T) => T,
@@ -366,7 +366,7 @@ export type Dispatcher = {|
     init?: (I) => S,
   ): [S, Dispatch<A>],
   useContext<T>(context: ReactContext<T>): T,
-  useRef<T>(initialValue: T): {|current: T|},
+  useRef<T>(initialValue: T): {current: T},
   useEffect(
     create: () => (() => void) | void,
     deps: Array<mixed> | void | null,
@@ -382,7 +382,7 @@ export type Dispatcher = {|
   useCallback<T>(callback: T, deps: Array<mixed> | void | null): T,
   useMemo<T>(nextCreate: () => T, deps: Array<mixed> | void | null): T,
   useImperativeHandle<T>(
-    ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
+    ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
     create: () => T,
     deps: Array<mixed> | void | null,
   ): void,
@@ -407,4 +407,4 @@ export type Dispatcher = {|
   useMemoCache?: (size: number) => Array<any>,
 
   unstable_isNewReconciler?: boolean,
-|};
+};
diff --git a/packages/react-reconciler/src/ReactProfilerTimer.new.js b/packages/react-reconciler/src/ReactProfilerTimer.new.js
index a5a14eae1c244..de88e711cbf76 100644
--- a/packages/react-reconciler/src/ReactProfilerTimer.new.js
+++ b/packages/react-reconciler/src/ReactProfilerTimer.new.js
@@ -122,6 +122,7 @@ function stopProfilerTimerIfRunningAndRecordDelta(
 
   if (profilerStartTime >= 0) {
     const elapsedTime = now() - profilerStartTime;
+    // $FlowFixMe[unsafe-addition] addition with possible null/undefined value
     fiber.actualDuration += elapsedTime;
     if (overrideBaseTime) {
       fiber.selfBaseDuration = elapsedTime;
@@ -215,6 +216,7 @@ function transferActualDuration(fiber: Fiber): void {
   // where we should count the work of multiple passes.
   let child = fiber.child;
   while (child) {
+    // $FlowFixMe[unsafe-addition] addition with possible null/undefined value
     fiber.actualDuration += child.actualDuration;
     child = child.sibling;
   }
diff --git a/packages/react-reconciler/src/ReactProfilerTimer.old.js b/packages/react-reconciler/src/ReactProfilerTimer.old.js
index a5a14eae1c244..de88e711cbf76 100644
--- a/packages/react-reconciler/src/ReactProfilerTimer.old.js
+++ b/packages/react-reconciler/src/ReactProfilerTimer.old.js
@@ -122,6 +122,7 @@ function stopProfilerTimerIfRunningAndRecordDelta(
 
   if (profilerStartTime >= 0) {
     const elapsedTime = now() - profilerStartTime;
+    // $FlowFixMe[unsafe-addition] addition with possible null/undefined value
     fiber.actualDuration += elapsedTime;
     if (overrideBaseTime) {
       fiber.selfBaseDuration = elapsedTime;
@@ -215,6 +216,7 @@ function transferActualDuration(fiber: Fiber): void {
   // where we should count the work of multiple passes.
   let child = fiber.child;
   while (child) {
+    // $FlowFixMe[unsafe-addition] addition with possible null/undefined value
     fiber.actualDuration += child.actualDuration;
     child = child.sibling;
   }
diff --git a/packages/react-reconciler/src/ReactTestSelectors.js b/packages/react-reconciler/src/ReactTestSelectors.js
index adadc8ed73e80..48640fd6c70b6 100644
--- a/packages/react-reconciler/src/ReactTestSelectors.js
+++ b/packages/react-reconciler/src/ReactTestSelectors.js
@@ -39,32 +39,32 @@ if (typeof Symbol === 'function' && Symbol.for) {
   TEXT_TYPE = symbolFor('selector.text');
 }
 
-type Type = Symbol | number;
+type Type = symbol | number;
 
-type ComponentSelector = {|
+type ComponentSelector = {
   $$typeof: Type,
   value: React$AbstractComponent<empty, mixed>,
-|};
+};
 
-type HasPseudoClassSelector = {|
+type HasPseudoClassSelector = {
   $$typeof: Type,
   value: Array<Selector>,
-|};
+};
 
-type RoleSelector = {|
+type RoleSelector = {
   $$typeof: Type,
   value: string,
-|};
+};
 
-type TextSelector = {|
+type TextSelector = {
   $$typeof: Type,
   value: string,
-|};
+};
 
-type TestNameSelector = {|
+type TestNameSelector = {
   $$typeof: Type,
   value: string,
-|};
+};
 
 type Selector =
   | ComponentSelector
@@ -364,12 +364,12 @@ export function getFindAllNodesFailureDescription(
   return null;
 }
 
-export type BoundingRect = {|
+export type BoundingRect = {
   x: number,
   y: number,
   width: number,
   height: number,
-|};
+};
 
 export function findBoundingRects(
   hostRoot: Instance,
@@ -514,7 +514,7 @@ export function observeVisibleRects(
   selectors: Array<Selector>,
   callback: (intersections: Array<{ratio: number, rect: BoundingRect}>) => void,
   options?: IntersectionObserverOptions,
-): {|disconnect: () => void|} {
+): {disconnect: () => void} {
   if (!supportsTestSelectors) {
     throw new Error('Test selector API is not supported by this renderer.');
   }
diff --git a/packages/react-reconciler/src/__tests__/ReactOffscreenStrictMode-test.js b/packages/react-reconciler/src/__tests__/ReactOffscreenStrictMode-test.js
index f750a9b7ef0d6..e6ab08cef5471 100644
--- a/packages/react-reconciler/src/__tests__/ReactOffscreenStrictMode-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactOffscreenStrictMode-test.js
@@ -71,6 +71,21 @@ describe('ReactOffscreenStrictMode', () => {
 
     log = [];
 
+    act(() => {
+      ReactNoop.render(
+        <React.StrictMode>
+          <Offscreen mode="hidden">
+            <Component label="A" />
+            <Component label="B" />
+          </Offscreen>
+        </React.StrictMode>,
+      );
+    });
+
+    expect(log).toEqual(['A: render', 'A: render', 'B: render', 'B: render']);
+
+    log = [];
+
     act(() => {
       ReactNoop.render(
         <React.StrictMode>
@@ -91,5 +106,51 @@ describe('ReactOffscreenStrictMode', () => {
       'A: useLayoutEffect mount',
       'A: useEffect mount',
     ]);
+
+    log = [];
+
+    act(() => {
+      ReactNoop.render(
+        <React.StrictMode>
+          <Offscreen mode="hidden">
+            <Component label="A" />
+          </Offscreen>
+        </React.StrictMode>,
+      );
+    });
+
+    expect(log).toEqual([
+      'A: useLayoutEffect unmount',
+      'A: useEffect unmount',
+      'A: render',
+      'A: render',
+    ]);
+  });
+
+  it('should not cause infinite render loop when StrictMode is used with Suspense and synchronous set states', () => {
+    // This is a regression test, see https://github.com/facebook/react/pull/25179 for more details.
+    function App() {
+      const [state, setState] = React.useState(false);
+
+      React.useLayoutEffect(() => {
+        setState(true);
+      }, []);
+
+      React.useEffect(() => {
+        // Empty useEffect with empty dependency array is needed to trigger infinite render loop.
+      }, []);
+
+      return state;
+    }
+
+    act(() => {
+      ReactNoop.render(
+        <React.StrictMode>
+          <React.Suspense>
+            <App />
+          </React.Suspense>
+        </React.StrictMode>,
+      );
+    });
   });
 });
diff --git a/packages/react-reconciler/src/__tests__/ReactWakeable-test.js b/packages/react-reconciler/src/__tests__/ReactWakeable-test.js
index 7d946e5cbd03c..bb15bc7a06862 100644
--- a/packages/react-reconciler/src/__tests__/ReactWakeable-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactWakeable-test.js
@@ -315,4 +315,75 @@ describe('ReactWakeable', () => {
     ]);
     expect(root).toMatchRenderedOutput('Caught an error: Oops!');
   });
+
+  // @gate enableUseHook
+  test('basic use(context)', () => {
+    const ContextA = React.createContext('');
+    const ContextB = React.createContext('B');
+
+    function Sync() {
+      const text = use(ContextA) + use(ContextB);
+      return text;
+    }
+
+    function App() {
+      return (
+        <ContextA.Provider value="A">
+          <Sync />
+        </ContextA.Provider>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    root.render(<App />);
+    expect(Scheduler).toFlushWithoutYielding();
+    expect(root).toMatchRenderedOutput('AB');
+  });
+
+  // @gate enableUseHook
+  test('interrupting while yielded should reset contexts', async () => {
+    let resolve;
+    const promise = new Promise(r => {
+      resolve = r;
+    });
+
+    const Context = React.createContext();
+
+    const lazy = React.lazy(() => {
+      return promise;
+    });
+
+    function ContextText() {
+      return <Text text={use(Context)} />;
+    }
+
+    function App({text}) {
+      return (
+        <div>
+          <Context.Provider value={text}>
+            {lazy}
+            <ContextText />
+          </Context.Provider>
+        </div>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    startTransition(() => {
+      root.render(<App text="world" />);
+    });
+    expect(Scheduler).toFlushUntilNextPaint([]);
+    expect(root).toMatchRenderedOutput(null);
+
+    await resolve({default: <Text key="hi" text="Hello " />});
+
+    // Higher priority update that interrupts the first render
+    ReactNoop.flushSync(() => {
+      root.render(<App text="world!" />);
+    });
+
+    expect(Scheduler).toHaveYielded(['Hello ', 'world!']);
+
+    expect(root).toMatchRenderedOutput(<div>Hello world!</div>);
+  });
 });
diff --git a/packages/react-reconciler/src/getComponentNameFromFiber.js b/packages/react-reconciler/src/getComponentNameFromFiber.js
index 979914b7c4ba5..883ac838b975d 100644
--- a/packages/react-reconciler/src/getComponentNameFromFiber.js
+++ b/packages/react-reconciler/src/getComponentNameFromFiber.js
@@ -8,6 +8,7 @@
  */
 
 import type {ReactContext, ReactProviderType} from 'shared/ReactTypes';
+import type {Fiber} from './ReactInternalTypes';
 
 import {enableLegacyHidden} from 'shared/ReactFeatureFlags';
 
diff --git a/packages/react-refresh/src/ReactFreshRuntime.js b/packages/react-refresh/src/ReactFreshRuntime.js
index 1ae5acfdfb535..f440275c2a7ac 100644
--- a/packages/react-refresh/src/ReactFreshRuntime.js
+++ b/packages/react-refresh/src/ReactFreshRuntime.js
@@ -21,19 +21,19 @@ import type {ReactNodeList} from 'shared/ReactTypes';
 
 import {REACT_MEMO_TYPE, REACT_FORWARD_REF_TYPE} from 'shared/ReactSymbols';
 
-type Signature = {|
+type Signature = {
   ownKey: string,
   forceReset: boolean,
   fullKey: string | null, // Contains keys of nested Hooks. Computed lazily.
   getCustomHooks: () => Array<Function>,
-|};
+};
 
-type RendererHelpers = {|
+type RendererHelpers = {
   findHostInstancesForRefresh: FindHostInstancesForRefresh,
   scheduleRefresh: ScheduleRefresh,
   scheduleRoot: ScheduleRoot,
   setRefreshHandler: SetRefreshHandler,
-|};
+};
 
 if (!__DEV__) {
   throw new Error(
@@ -47,14 +47,14 @@ const PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;
 // We never remove these associations.
 // It's OK to reference families, but use WeakMap/Set for types.
 const allFamiliesByID: Map<string, Family> = new Map();
-const allFamiliesByType: // $FlowIssue
+const allFamiliesByType: // $FlowFixMe
 WeakMap<any, Family> | Map<any, Family> = new PossiblyWeakMap();
-const allSignaturesByType: // $FlowIssue
+const allSignaturesByType: // $FlowFixMe
 WeakMap<any, Signature> | Map<any, Signature> = new PossiblyWeakMap();
 // This WeakMap is read by React, so we only put families
 // that have actually been edited here. This keeps checks fast.
-// $FlowIssue
-const updatedFamiliesByType: // $FlowIssue
+// $FlowFixMe
+const updatedFamiliesByType: // $FlowFixMe
 WeakMap<any, Family> | Map<any, Family> = new PossiblyWeakMap();
 
 // This is cleared on every performReactRefresh() call.
@@ -74,8 +74,8 @@ const failedRoots: Set<FiberRoot> = new Set();
 // In environments that support WeakMap, we also remember the last element for every root.
 // It needs to be weak because we do this even for roots that failed to mount.
 // If there is no WeakMap, we won't attempt to do retrying.
-// $FlowIssue
-const rootElements: WeakMap<any, ReactNodeList> | null = // $FlowIssue
+// $FlowFixMe
+const rootElements: WeakMap<any, ReactNodeList> | null = // $FlowFixMe
   typeof WeakMap === 'function' ? new WeakMap() : null;
 
 let isPerformingRefresh = false;
diff --git a/packages/react-server-dom-relay/src/ReactFlightDOMRelayClient.js b/packages/react-server-dom-relay/src/ReactFlightDOMRelayClient.js
index 6ea0b861aa7a9..ece3124bcf80e 100644
--- a/packages/react-server-dom-relay/src/ReactFlightDOMRelayClient.js
+++ b/packages/react-server-dom-relay/src/ReactFlightDOMRelayClient.js
@@ -24,8 +24,10 @@ export {createResponse, close};
 
 export function resolveRow(response: Response, chunk: RowEncoding): void {
   if (chunk[0] === 'J') {
+    // $FlowFixMe unable to refine on array indices
     resolveModel(response, chunk[1], chunk[2]);
   } else if (chunk[0] === 'M') {
+    // $FlowFixMe unable to refine on array indices
     resolveModule(response, chunk[1], chunk[2]);
   } else if (chunk[0] === 'S') {
     // $FlowFixMe: Flow doesn't support disjoint unions on tuples.
diff --git a/packages/react-server-dom-relay/src/ReactFlightDOMRelayProtocol.js b/packages/react-server-dom-relay/src/ReactFlightDOMRelayProtocol.js
index 60d19ecef3f78..d883068c9eaa7 100644
--- a/packages/react-server-dom-relay/src/ReactFlightDOMRelayProtocol.js
+++ b/packages/react-server-dom-relay/src/ReactFlightDOMRelayProtocol.js
@@ -15,7 +15,7 @@ export type JSONValue =
   | boolean
   | null
   | {+[key: string]: JSONValue}
-  | Array<JSONValue>;
+  | $ReadOnlyArray<JSONValue>;
 
 export type RowEncoding =
   | ['J', number, JSONValue]
diff --git a/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js b/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
index 0ec5b2cf0dc43..35a1b3e16d552 100644
--- a/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
+++ b/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
@@ -91,6 +91,8 @@ function convertModelToJSON(
       }
       return jsonArray;
     } else {
+      /* $FlowFixMe the old version of Flow doesn't have a good way to define
+       * an empty exact object. */
       const jsonObj: {[key: string]: JSONValue} = {};
       for (const nextKey in json) {
         if (hasOwnProperty.call(json, nextKey)) {
@@ -113,6 +115,7 @@ export function processModelChunk(
   id: number,
   model: ReactModel,
 ): Chunk {
+  // $FlowFixMe no good way to define an empty exact object
   const json = convertModelToJSON(request, {}, '', model);
   return ['J', id, json];
 }
@@ -159,6 +162,7 @@ export function flushBuffered(destination: Destination) {}
 export function beginWriting(destination: Destination) {}
 
 export function writeChunk(destination: Destination, chunk: Chunk): void {
+  // $FlowFixMe `Chunk` doesn't flow into `JSONValue` because of the `E` row type.
   emitRow(destination, chunk);
 }
 
@@ -166,6 +170,7 @@ export function writeChunkAndReturn(
   destination: Destination,
   chunk: Chunk,
 ): boolean {
+  // $FlowFixMe `Chunk` doesn't flow into `JSONValue` because of the `E` row type.
   emitRow(destination, chunk);
   return true;
 }
diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMClient.js b/packages/react-server-dom-webpack/src/ReactFlightDOMClient.js
index d8b5def41e041..32f8e794f4f70 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightDOMClient.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightDOMClient.js
@@ -35,12 +35,18 @@ function startReadingFromStream(
     }
     const buffer: Uint8Array = (value: any);
     processBinaryChunk(response, buffer);
-    return reader.read().then(progress, error);
+    return reader
+      .read()
+      .then(progress)
+      .catch(error);
   }
   function error(e) {
     reportGlobalError(response, e);
   }
-  reader.read().then(progress, error);
+  reader
+    .read()
+    .then(progress)
+    .catch(error);
 }
 
 function createFromReadableStream(
diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js b/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js
index 93d047e4a0439..2cbd609b473f2 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js
@@ -52,13 +52,13 @@ function renderToReadableStream(
   const stream = new ReadableStream(
     {
       type: 'bytes',
-      start(controller) {
+      start(controller): ?Promise<void> {
         startWork(request);
       },
-      pull(controller) {
+      pull(controller): ?Promise<void> {
         startFlowing(request, controller);
       },
-      cancel(reason) {},
+      cancel(reason): ?Promise<void> {},
     },
     // $FlowFixMe size() methods are not allowed on byte streams.
     {highWaterMark: 0},
diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js b/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js
index 69fa772a304a9..addf3758c12a8 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js
@@ -29,10 +29,10 @@ type Options = {
   identifierPrefix?: string,
 };
 
-type PipeableStream = {|
+type PipeableStream = {
   abort(reason: mixed): void,
   pipe<T: Writable>(destination: T): T,
-|};
+};
 
 function renderToPipeableStream(
   model: ReactModel,
diff --git a/packages/react-server-dom-webpack/src/ReactFlightServerWebpackBundlerConfig.js b/packages/react-server-dom-webpack/src/ReactFlightServerWebpackBundlerConfig.js
index caeed14a7b7b1..8d7dccae333f2 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightServerWebpackBundlerConfig.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightServerWebpackBundlerConfig.js
@@ -17,7 +17,7 @@ export type BundlerConfig = WebpackMap;
 
 // eslint-disable-next-line no-unused-vars
 export type ModuleReference<T> = {
-  $$typeof: Symbol,
+  $$typeof: symbol,
   filepath: string,
   name: string,
   async: boolean,
diff --git a/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js
index 0c1ec39aff903..9c89122b04edc 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js
@@ -52,7 +52,7 @@ module.exports = function register() {
             // we should resolve that with a client reference that unwraps the Promise on
             // the client.
             const then = function then(resolve, reject) {
-              const moduleReference: {[string]: any} = {
+              const moduleReference: {[string]: any, ...} = {
                 $$typeof: MODULE_REFERENCE,
                 filepath: target.filepath,
                 name: '*', // Represents the whole object instead of a particular import.
@@ -93,7 +93,7 @@ module.exports = function register() {
 
   Module._extensions['.client.js'] = function(module, path) {
     const moduleId = url.pathToFileURL(path).href;
-    const moduleReference: {[string]: any} = {
+    const moduleReference: {[string]: any, ...} = {
       $$typeof: MODULE_REFERENCE,
       filepath: moduleId,
       name: '*', // Represents the whole object instead of a particular import.
diff --git a/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js b/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js
index 0c49d293733c5..98d3058029fc5 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js
@@ -25,7 +25,7 @@ import {
 import isArray from 'shared/isArray';
 
 class ClientReferenceDependency extends ModuleDependency {
-  constructor(request) {
+  constructor(request: mixed) {
     super(request);
   }
 
@@ -327,7 +327,7 @@ export default class ReactFlightWebpackPlugin {
             contextModuleFactory.resolveDependencies(
               fs,
               options,
-              (err2: null | Error, deps: Array<ModuleDependency>) => {
+              (err2: null | Error, deps: Array<any /*ModuleDependency*/>) => {
                 if (err2) return cb(err2);
                 const clientRefDeps = deps.map(dep => {
                   // use userRequest instead of request. request always end with undefined which is wrong
diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
index 4b6995a9edb9d..9de3843764152 100644
--- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
+++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
@@ -19,6 +19,7 @@ global.setImmediate = cb => cb();
 
 let act;
 let clientExports;
+let clientModuleError;
 let webpackMap;
 let Stream;
 let React;
@@ -26,6 +27,7 @@ let ReactDOMClient;
 let ReactServerDOMWriter;
 let ReactServerDOMReader;
 let Suspense;
+let ErrorBoundary;
 
 describe('ReactFlightDOM', () => {
   beforeEach(() => {
@@ -33,6 +35,7 @@ describe('ReactFlightDOM', () => {
     act = require('jest-react').act;
     const WebpackMock = require('./utils/WebpackMock');
     clientExports = WebpackMock.clientExports;
+    clientModuleError = WebpackMock.clientModuleError;
     webpackMap = WebpackMock.webpackMap;
 
     Stream = require('stream');
@@ -41,6 +44,22 @@ describe('ReactFlightDOM', () => {
     ReactDOMClient = require('react-dom/client');
     ReactServerDOMWriter = require('react-server-dom-webpack/writer.node.server');
     ReactServerDOMReader = require('react-server-dom-webpack');
+
+    ErrorBoundary = class extends React.Component {
+      state = {hasError: false, error: null};
+      static getDerivedStateFromError(error) {
+        return {
+          hasError: true,
+          error,
+        };
+      }
+      render() {
+        if (this.state.hasError) {
+          return this.props.fallback(this.state.error);
+        }
+        return this.props.children;
+      }
+    };
   });
 
   function getTestStream() {
@@ -319,22 +338,6 @@ describe('ReactFlightDOM', () => {
 
     // Client Components
 
-    class ErrorBoundary extends React.Component {
-      state = {hasError: false, error: null};
-      static getDerivedStateFromError(error) {
-        return {
-          hasError: true,
-          error,
-        };
-      }
-      render() {
-        if (this.state.hasError) {
-          return this.props.fallback(this.state.error);
-        }
-        return this.props.children;
-      }
-    }
-
     function MyErrorBoundary({children}) {
       return (
         <ErrorBoundary fallback={e => <p>{e.message}</p>}>
@@ -605,22 +608,6 @@ describe('ReactFlightDOM', () => {
   it('should be able to complete after aborting and throw the reason client-side', async () => {
     const reportedErrors = [];
 
-    class ErrorBoundary extends React.Component {
-      state = {hasError: false, error: null};
-      static getDerivedStateFromError(error) {
-        return {
-          hasError: true,
-          error,
-        };
-      }
-      render() {
-        if (this.state.hasError) {
-          return this.props.fallback(this.state.error);
-        }
-        return this.props.children;
-      }
-    }
-
     const {writable, readable} = getTestStream();
     const {pipe, abort} = ReactServerDOMWriter.renderToPipeableStream(
       <div>
@@ -661,4 +648,159 @@ describe('ReactFlightDOM', () => {
 
     expect(reportedErrors).toEqual(['for reasons']);
   });
+
+  it('should be able to recover from a direct reference erroring client-side', async () => {
+    const reportedErrors = [];
+
+    const ClientComponent = clientExports(function({prop}) {
+      return 'This should never render';
+    });
+
+    const ClientReference = clientModuleError(new Error('module init error'));
+
+    const {writable, readable} = getTestStream();
+    const {pipe} = ReactServerDOMWriter.renderToPipeableStream(
+      <div>
+        <ClientComponent prop={ClientReference} />
+      </div>,
+      webpackMap,
+      {
+        onError(x) {
+          reportedErrors.push(x);
+        },
+      },
+    );
+    pipe(writable);
+    const response = ReactServerDOMReader.createFromReadableStream(readable);
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    function App({res}) {
+      return res.readRoot();
+    }
+
+    await act(async () => {
+      root.render(
+        <ErrorBoundary fallback={e => <p>{e.message}</p>}>
+          <Suspense fallback={<p>(loading)</p>}>
+            <App res={response} />
+          </Suspense>
+        </ErrorBoundary>,
+      );
+    });
+    expect(container.innerHTML).toBe('<p>module init error</p>');
+
+    expect(reportedErrors).toEqual([]);
+  });
+
+  it('should be able to recover from a direct reference erroring client-side async', async () => {
+    const reportedErrors = [];
+
+    const ClientComponent = clientExports(function({prop}) {
+      return 'This should never render';
+    });
+
+    let rejectPromise;
+    const ClientReference = await clientExports(
+      new Promise((resolve, reject) => {
+        rejectPromise = reject;
+      }),
+    );
+
+    const {writable, readable} = getTestStream();
+    const {pipe} = ReactServerDOMWriter.renderToPipeableStream(
+      <div>
+        <ClientComponent prop={ClientReference} />
+      </div>,
+      webpackMap,
+      {
+        onError(x) {
+          reportedErrors.push(x);
+        },
+      },
+    );
+    pipe(writable);
+    const response = ReactServerDOMReader.createFromReadableStream(readable);
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    function App({res}) {
+      return res.readRoot();
+    }
+
+    await act(async () => {
+      root.render(
+        <ErrorBoundary fallback={e => <p>{e.message}</p>}>
+          <Suspense fallback={<p>(loading)</p>}>
+            <App res={response} />
+          </Suspense>
+        </ErrorBoundary>,
+      );
+    });
+
+    expect(container.innerHTML).toBe('<p>(loading)</p>');
+
+    await act(async () => {
+      rejectPromise(new Error('async module init error'));
+    });
+
+    expect(container.innerHTML).toBe('<p>async module init error</p>');
+
+    expect(reportedErrors).toEqual([]);
+  });
+
+  it('should be able to recover from a direct reference erroring server-side', async () => {
+    const reportedErrors = [];
+
+    const ClientComponent = clientExports(function({prop}) {
+      return 'This should never render';
+    });
+
+    // We simulate a bug in the Webpack bundler which causes an error on the server.
+    for (const id in webpackMap) {
+      Object.defineProperty(webpackMap, id, {
+        get: () => {
+          throw new Error('bug in the bundler');
+        },
+      });
+    }
+
+    const {writable, readable} = getTestStream();
+    const {pipe} = ReactServerDOMWriter.renderToPipeableStream(
+      <div>
+        <ClientComponent />
+      </div>,
+      webpackMap,
+      {
+        onError(x) {
+          reportedErrors.push(x);
+        },
+      },
+    );
+    pipe(writable);
+
+    const response = ReactServerDOMReader.createFromReadableStream(readable);
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    function App({res}) {
+      return res.readRoot();
+    }
+
+    await act(async () => {
+      root.render(
+        <ErrorBoundary fallback={e => <p>{e.message}</p>}>
+          <Suspense fallback={<p>(loading)</p>}>
+            <App res={response} />
+          </Suspense>
+        </ErrorBoundary>,
+      );
+    });
+    expect(container.innerHTML).toBe('<p>bug in the bundler</p>');
+
+    expect(reportedErrors).toEqual([]);
+  });
 });
diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
index 43573af1df141..f477bba451a6e 100644
--- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
+++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
@@ -24,6 +24,7 @@ let ReactDOMServer;
 let ReactServerDOMWriter;
 let ReactServerDOMReader;
 let Suspense;
+let use;
 
 describe('ReactFlightDOMBrowser', () => {
   beforeEach(() => {
@@ -39,6 +40,7 @@ describe('ReactFlightDOMBrowser', () => {
     ReactServerDOMWriter = require('react-server-dom-webpack/writer.browser.server');
     ReactServerDOMReader = require('react-server-dom-webpack');
     Suspense = React.Suspense;
+    use = React.experimental_use;
   });
 
   async function waitForSuspense(fn) {
@@ -562,4 +564,183 @@ describe('ReactFlightDOMBrowser', () => {
 
     expect(reportedErrors).toEqual(['for reasons']);
   });
+
+  // @gate enableUseHook
+  it('basic use(promise)', async () => {
+    function Server() {
+      return (
+        use(Promise.resolve('A')) +
+        use(Promise.resolve('B')) +
+        use(Promise.resolve('C'))
+      );
+    }
+
+    const stream = ReactServerDOMWriter.renderToReadableStream(<Server />);
+    const response = ReactServerDOMReader.createFromReadableStream(stream);
+
+    function Client() {
+      return response.readRoot();
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(
+        <Suspense fallback="Loading...">
+          <Client />
+        </Suspense>,
+      );
+    });
+    expect(container.innerHTML).toBe('ABC');
+  });
+
+  // @gate enableUseHook
+  it('basic use(context)', async () => {
+    const ContextA = React.createServerContext('ContextA', '');
+    const ContextB = React.createServerContext('ContextB', 'B');
+
+    function ServerComponent() {
+      return use(ContextA) + use(ContextB);
+    }
+    function Server() {
+      return (
+        <ContextA.Provider value="A">
+          <ServerComponent />
+        </ContextA.Provider>
+      );
+    }
+    const stream = ReactServerDOMWriter.renderToReadableStream(<Server />);
+    const response = ReactServerDOMReader.createFromReadableStream(stream);
+
+    function Client() {
+      return response.readRoot();
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      // Client uses a different renderer.
+      // We reset _currentRenderer here to not trigger a warning about multiple
+      // renderers concurrently using this context
+      ContextA._currentRenderer = null;
+      root.render(<Client />);
+    });
+    expect(container.innerHTML).toBe('AB');
+  });
+
+  // @gate enableUseHook
+  it('use(promise) in multiple components', async () => {
+    function Child({prefix}) {
+      return prefix + use(Promise.resolve('C')) + use(Promise.resolve('D'));
+    }
+
+    function Parent() {
+      return (
+        <Child prefix={use(Promise.resolve('A')) + use(Promise.resolve('B'))} />
+      );
+    }
+
+    const stream = ReactServerDOMWriter.renderToReadableStream(<Parent />);
+    const response = ReactServerDOMReader.createFromReadableStream(stream);
+
+    function Client() {
+      return response.readRoot();
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(
+        <Suspense fallback="Loading...">
+          <Client />
+        </Suspense>,
+      );
+    });
+    expect(container.innerHTML).toBe('ABCD');
+  });
+
+  // @gate enableUseHook
+  it('using a rejected promise will throw', async () => {
+    const promiseA = Promise.resolve('A');
+    const promiseB = Promise.reject(new Error('Oops!'));
+    const promiseC = Promise.resolve('C');
+
+    // Jest/Node will raise an unhandled rejected error unless we await this. It
+    // works fine in the browser, though.
+    await expect(promiseB).rejects.toThrow('Oops!');
+
+    function Server() {
+      return use(promiseA) + use(promiseB) + use(promiseC);
+    }
+
+    const reportedErrors = [];
+    const stream = ReactServerDOMWriter.renderToReadableStream(
+      <Server />,
+      webpackMap,
+      {
+        onError(x) {
+          reportedErrors.push(x);
+        },
+      },
+    );
+    const response = ReactServerDOMReader.createFromReadableStream(stream);
+
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+      static getDerivedStateFromError(error) {
+        return {error};
+      }
+      render() {
+        if (this.state.error) {
+          return this.state.error.message;
+        }
+        return this.props.children;
+      }
+    }
+
+    function Client() {
+      return response.readRoot();
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(
+        <ErrorBoundary>
+          <Client />
+        </ErrorBoundary>,
+      );
+    });
+    expect(container.innerHTML).toBe('Oops!');
+    expect(reportedErrors.length).toBe(1);
+    expect(reportedErrors[0].message).toBe('Oops!');
+  });
+
+  // @gate enableUseHook
+  it("use a promise that's already been instrumented and resolved", async () => {
+    const thenable = {
+      status: 'fulfilled',
+      value: 'Hi',
+      then() {},
+    };
+
+    // This will never suspend because the thenable already resolved
+    function Server() {
+      return use(thenable);
+    }
+
+    const stream = ReactServerDOMWriter.renderToReadableStream(<Server />);
+    const response = ReactServerDOMReader.createFromReadableStream(stream);
+
+    function Client() {
+      return response.readRoot();
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(<Client />);
+    });
+    expect(container.innerHTML).toBe('Hi');
+  });
 });
diff --git a/packages/react-server-dom-webpack/src/__tests__/utils/WebpackMock.js b/packages/react-server-dom-webpack/src/__tests__/utils/WebpackMock.js
index 78f78505b6b2a..93d06bf2649a6 100644
--- a/packages/react-server-dom-webpack/src/__tests__/utils/WebpackMock.js
+++ b/packages/react-server-dom-webpack/src/__tests__/utils/WebpackMock.js
@@ -12,8 +12,12 @@ const Module = require('module');
 
 let webpackModuleIdx = 0;
 const webpackModules = {};
+const webpackErroredModules = {};
 const webpackMap = {};
 global.__webpack_require__ = function(id) {
+  if (webpackErroredModules[id]) {
+    throw webpackErroredModules[id];
+  }
   return webpackModules[id];
 };
 
@@ -36,6 +40,27 @@ Module._extensions['.client.js'] = previousLoader;
 exports.webpackMap = webpackMap;
 exports.webpackModules = webpackModules;
 
+exports.clientModuleError = function clientModuleError(moduleError) {
+  const idx = '' + webpackModuleIdx++;
+  webpackErroredModules[idx] = moduleError;
+  const path = url.pathToFileURL(idx).href;
+  webpackMap[path] = {
+    '': {
+      id: idx,
+      chunks: [],
+      name: '',
+    },
+    '*': {
+      id: idx,
+      chunks: [],
+      name: '*',
+    },
+  };
+  const mod = {exports: {}};
+  nodeLoader(mod, idx);
+  return mod.exports;
+};
+
 exports.clientExports = function clientExports(moduleExports) {
   const idx = '' + webpackModuleIdx++;
   webpackModules[idx] = moduleExports;
@@ -53,17 +78,20 @@ exports.clientExports = function clientExports(moduleExports) {
     },
   };
   if (typeof moduleExports.then === 'function') {
-    moduleExports.then(asyncModuleExports => {
-      for (const name in asyncModuleExports) {
-        webpackMap[path] = {
-          [name]: {
-            id: idx,
-            chunks: [],
-            name: name,
-          },
-        };
-      }
-    });
+    moduleExports.then(
+      asyncModuleExports => {
+        for (const name in asyncModuleExports) {
+          webpackMap[path] = {
+            [name]: {
+              id: idx,
+              chunks: [],
+              name: name,
+            },
+          };
+        }
+      },
+      () => {},
+    );
   }
   for (const name in moduleExports) {
     webpackMap[path] = {
diff --git a/packages/react-server-native-relay/src/ReactFlightNativeRelayClient.js b/packages/react-server-native-relay/src/ReactFlightNativeRelayClient.js
index 42b9efa73b471..cea39ac6f2642 100644
--- a/packages/react-server-native-relay/src/ReactFlightNativeRelayClient.js
+++ b/packages/react-server-native-relay/src/ReactFlightNativeRelayClient.js
@@ -24,8 +24,10 @@ export {createResponse, close};
 
 export function resolveRow(response: Response, chunk: RowEncoding): void {
   if (chunk[0] === 'J') {
+    // $FlowFixMe `Chunk` doesn't flow into `JSONValue` because of the `E` row type.
     resolveModel(response, chunk[1], chunk[2]);
   } else if (chunk[0] === 'M') {
+    // $FlowFixMe `Chunk` doesn't flow into `JSONValue` because of the `E` row type.
     resolveModule(response, chunk[1], chunk[2]);
   } else if (chunk[0] === 'S') {
     // $FlowFixMe: Flow doesn't support disjoint unions on tuples.
diff --git a/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js b/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
index 5c9360701ab8d..65d60ec334ea1 100644
--- a/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
+++ b/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
@@ -88,6 +88,7 @@ function convertModelToJSON(
       }
       return jsonArray;
     } else {
+      // $FlowFixMe no good way to define an empty exact object
       const jsonObj: {[key: string]: JSONValue} = {};
       for (const nextKey in json) {
         if (hasOwnProperty.call(json, nextKey)) {
@@ -110,6 +111,7 @@ export function processModelChunk(
   id: number,
   model: ReactModel,
 ): Chunk {
+  // $FlowFixMe no good way to define an empty exact object
   const json = convertModelToJSON(request, {}, '', model);
   return ['J', id, json];
 }
@@ -156,6 +158,7 @@ export function flushBuffered(destination: Destination) {}
 export function beginWriting(destination: Destination) {}
 
 export function writeChunk(destination: Destination, chunk: Chunk): void {
+  // $FlowFixMe `Chunk` doesn't flow into `JSONValue` because of the `E` row type.
   emitRow(destination, chunk);
 }
 
@@ -163,6 +166,7 @@ export function writeChunkAndReturn(
   destination: Destination,
   chunk: Chunk,
 ): boolean {
+  // $FlowFixMe `Chunk` doesn't flow into `JSONValue` because of the `E` row type.
   emitRow(destination, chunk);
   return true;
 }
diff --git a/packages/react-server/src/ReactFizzHooks.js b/packages/react-server/src/ReactFizzHooks.js
index 960800e903c2c..de67ccebcaf6b 100644
--- a/packages/react-server/src/ReactFizzHooks.js
+++ b/packages/react-server/src/ReactFizzHooks.js
@@ -15,37 +15,53 @@ import type {
   MutableSourceSubscribeFn,
   ReactContext,
   StartTransitionOptions,
+  Thenable,
+  Usable,
 } from 'shared/ReactTypes';
 
 import type {ResponseState} from './ReactServerFormatConfig';
 import type {Task} from './ReactFizzServer';
+import type {ThenableState} from './ReactFizzWakeable';
 
 import {readContext as readContextImpl} from './ReactFizzNewContext';
 import {getTreeId} from './ReactFizzTreeContext';
+import {
+  getPreviouslyUsedThenableAtIndex,
+  createThenableState,
+  trackUsedThenable,
+} from './ReactFizzWakeable';
 
 import {makeId} from './ReactServerFormatConfig';
 
-import {enableCache, enableUseMemoCacheHook} from 'shared/ReactFeatureFlags';
+import {
+  enableCache,
+  enableUseHook,
+  enableUseMemoCacheHook,
+} from 'shared/ReactFeatureFlags';
 import is from 'shared/objectIs';
+import {
+  REACT_SERVER_CONTEXT_TYPE,
+  REACT_CONTEXT_TYPE,
+} from 'shared/ReactSymbols';
 
 type BasicStateAction<S> = (S => S) | S;
 type Dispatch<A> = A => void;
 
-type Update<A> = {|
+type Update<A> = {
   action: A,
   next: Update<A> | null,
-|};
+};
 
-type UpdateQueue<A> = {|
+type UpdateQueue<A> = {
   last: Update<A> | null,
   dispatch: any,
-|};
+};
 
-type Hook = {|
+type Hook = {
   memoizedState: any,
   queue: UpdateQueue<any> | null,
   next: Hook | null,
-|};
+};
 
 let currentlyRenderingComponent: Object | null = null;
 let currentlyRenderingTask: Task | null = null;
@@ -57,6 +73,9 @@ let isReRender: boolean = false;
 let didScheduleRenderPhaseUpdate: boolean = false;
 // Counts the number of useId hooks in this component
 let localIdCounter: number = 0;
+// Counts the number of use(thenable) calls in this component
+let thenableIndexCounter: number = 0;
+let thenableState: ThenableState | null = null;
 // Lazily created map of render-phase updates
 let renderPhaseUpdates: Map<UpdateQueue<any>, Update<any>> | null = null;
 // Counter to prevent infinite loops.
@@ -169,7 +188,11 @@ function createWorkInProgressHook(): Hook {
   return workInProgressHook;
 }
 
-export function prepareToUseHooks(task: Task, componentIdentity: Object): void {
+export function prepareToUseHooks(
+  task: Task,
+  componentIdentity: Object,
+  prevThenableState: ThenableState | null,
+): void {
   currentlyRenderingComponent = componentIdentity;
   currentlyRenderingTask = task;
   if (__DEV__) {
@@ -178,13 +201,14 @@ export function prepareToUseHooks(task: Task, componentIdentity: Object): void {
 
   // The following should have already been reset
   // didScheduleRenderPhaseUpdate = false;
-  // localIdCounter = 0;
   // firstWorkInProgressHook = null;
   // numberOfReRenders = 0;
   // renderPhaseUpdates = null;
   // workInProgressHook = null;
 
   localIdCounter = 0;
+  thenableIndexCounter = 0;
+  thenableState = prevThenableState;
 }
 
 export function finishHooks(
@@ -203,6 +227,7 @@ export function finishHooks(
     // restarting until no more updates are scheduled.
     didScheduleRenderPhaseUpdate = false;
     localIdCounter = 0;
+    thenableIndexCounter = 0;
     numberOfReRenders += 1;
 
     // Start over from the beginning of the list
@@ -214,6 +239,12 @@ export function finishHooks(
   return children;
 }
 
+export function getThenableStateAfterSuspending() {
+  const state = thenableState;
+  thenableState = null;
+  return state;
+}
+
 export function checkDidRenderIdHook() {
   // This should be called immediately after every finishHooks call.
   // Conceptually, it's part of the return value of finishHooks; it's only a
@@ -389,7 +420,7 @@ function useMemo<T>(nextCreate: () => T, deps: Array<mixed> | void | null): T {
   return nextValue;
 }
 
-function useRef<T>(initialValue: T): {|current: T|} {
+function useRef<T>(initialValue: T): {current: T} {
   currentlyRenderingComponent = resolveCurrentlyRenderingComponent();
   workInProgressHook = createWorkInProgressHook();
   const previousRef = workInProgressHook.memoizedState;
@@ -529,6 +560,79 @@ function useId(): string {
   return makeId(responseState, treeId, localId);
 }
 
+function use<T>(usable: Usable<T>): T {
+  if (usable !== null && typeof usable === 'object') {
+    if (typeof usable.then === 'function') {
+      // This is a thenable.
+      const thenable: Thenable<T> = (usable: any);
+
+      // Track the position of the thenable within this fiber.
+      const index = thenableIndexCounter;
+      thenableIndexCounter += 1;
+
+      switch (thenable.status) {
+        case 'fulfilled': {
+          const fulfilledValue: T = thenable.value;
+          return fulfilledValue;
+        }
+        case 'rejected': {
+          const rejectedError = thenable.reason;
+          throw rejectedError;
+        }
+        default: {
+          const prevThenableAtIndex: Thenable<T> | null = getPreviouslyUsedThenableAtIndex(
+            thenableState,
+            index,
+          );
+          if (prevThenableAtIndex !== null) {
+            switch (prevThenableAtIndex.status) {
+              case 'fulfilled': {
+                const fulfilledValue: T = prevThenableAtIndex.value;
+                return fulfilledValue;
+              }
+              case 'rejected': {
+                const rejectedError: mixed = prevThenableAtIndex.reason;
+                throw rejectedError;
+              }
+              default: {
+                // The thenable still hasn't resolved. Suspend with the same
+                // thenable as last time to avoid redundant listeners.
+                throw prevThenableAtIndex;
+              }
+            }
+          } else {
+            // This is the first time something has been used at this index.
+            // Stash the thenable at the current index so we can reuse it during
+            // the next attempt.
+            if (thenableState === null) {
+              thenableState = createThenableState();
+            }
+            trackUsedThenable(thenableState, thenable, index);
+
+            // Suspend.
+            // TODO: Throwing here is an implementation detail that allows us to
+            // unwind the call stack. But we shouldn't allow it to leak into
+            // userspace. Throw an opaque placeholder value instead of the
+            // actual thenable. If it doesn't get captured by the work loop, log
+            // a warning, because that means something in userspace must have
+            // caught it.
+            throw thenable;
+          }
+        }
+      }
+    } else if (
+      usable.$$typeof === REACT_CONTEXT_TYPE ||
+      usable.$$typeof === REACT_SERVER_CONTEXT_TYPE
+    ) {
+      const context: ReactContext<T> = (usable: any);
+      return readContext(context);
+    }
+  }
+
+  // eslint-disable-next-line react-internal/safe-string-coercion
+  throw new Error('An unsupported type was passed to use(): ' + String(usable));
+}
+
 function unsupportedRefresh() {
   throw new Error('Cache cannot be refreshed during server rendering.');
 }
@@ -574,6 +678,9 @@ if (enableCache) {
 if (enableUseMemoCacheHook) {
   Dispatcher.useMemoCache = useMemoCache;
 }
+if (enableUseHook) {
+  Dispatcher.use = use;
+}
 
 export let currentResponseState: null | ResponseState = (null: any);
 export function setCurrentResponseState(
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index 7828c808f16c5..5f44458e7889c 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -17,6 +17,7 @@ import type {
   ReactContext,
   ReactProviderType,
   OffscreenMode,
+  Wakeable,
 } from 'shared/ReactTypes';
 import type {LazyComponent as LazyComponentType} from 'react/src/ReactLazy';
 import type {
@@ -27,6 +28,7 @@ import type {
 import type {ContextSnapshot} from './ReactFizzNewContext';
 import type {ComponentStackNode} from './ReactFizzComponentStack';
 import type {TreeContext} from './ReactFizzTreeContext';
+import type {ThenableState} from './ReactFizzWakeable';
 
 import {
   scheduleWork,
@@ -87,6 +89,7 @@ import {
   Dispatcher,
   currentResponseState,
   setCurrentResponseState,
+  getThenableStateAfterSuspending,
 } from './ReactFizzHooks';
 import {getStackByComponentStackNode} from './ReactFizzComponentStack';
 import {emptyTreeContext, pushTreeContext} from './ReactFizzTreeContext';
@@ -123,6 +126,7 @@ import {
 import assign from 'shared/assign';
 import getComponentNameFromType from 'shared/getComponentNameFromType';
 import isArray from 'shared/isArray';
+import {trackSuspendedWakeable} from './ReactFizzWakeable';
 
 const ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
 const ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
@@ -155,6 +159,7 @@ export type Task = {
   context: ContextSnapshot, // the current new context that this task is executing in
   treeContext: TreeContext, // the current tree context that this task is executing in
   componentStack: null | ComponentStackNode, // DEV-only component stack
+  thenableState: null | ThenableState,
 };
 
 const PENDING = 0;
@@ -297,6 +302,7 @@ export function createRequest(
   rootSegment.parentFlushed = true;
   const rootTask = createTask(
     request,
+    null,
     children,
     null,
     rootSegment,
@@ -336,6 +342,7 @@ function createSuspenseBoundary(
 
 function createTask(
   request: Request,
+  thenableState: ThenableState | null,
   node: ReactNodeList,
   blockedBoundary: Root | SuspenseBoundary,
   blockedSegment: Segment,
@@ -359,6 +366,7 @@ function createTask(
     legacyContext,
     context,
     treeContext,
+    thenableState,
   }: any);
   if (__DEV__) {
     task.componentStack = null;
@@ -592,6 +600,7 @@ function renderSuspenseBoundary(
   // on it yet in case we finish the main content, so we queue for later.
   const suspendedFallbackTask = createTask(
     request,
+    null,
     fallback,
     parentBoundary,
     boundarySegment,
@@ -665,12 +674,13 @@ function shouldConstruct(Component) {
 function renderWithHooks<Props, SecondArg>(
   request: Request,
   task: Task,
+  prevThenableState: ThenableState | null,
   Component: (p: Props, arg: SecondArg) => any,
   props: Props,
   secondArg: SecondArg,
 ): any {
   const componentIdentity = {};
-  prepareToUseHooks(task, componentIdentity);
+  prepareToUseHooks(task, componentIdentity, prevThenableState);
   const result = Component(props, secondArg);
   return finishHooks(Component, props, result, secondArg);
 }
@@ -708,13 +718,13 @@ function finishClassComponent(
         childContextTypes,
       );
       task.legacyContext = mergedContext;
-      renderNodeDestructive(request, task, nextChildren);
+      renderNodeDestructive(request, task, null, nextChildren);
       task.legacyContext = previousContext;
       return;
     }
   }
 
-  renderNodeDestructive(request, task, nextChildren);
+  renderNodeDestructive(request, task, null, nextChildren);
 }
 
 function renderClassComponent(
@@ -748,6 +758,7 @@ let hasWarnedAboutUsingContextAsConsumer = false;
 function renderIndeterminateComponent(
   request: Request,
   task: Task,
+  prevThenableState: ThenableState | null,
   Component: any,
   props: any,
 ): void {
@@ -776,7 +787,14 @@ function renderIndeterminateComponent(
     }
   }
 
-  const value = renderWithHooks(request, task, Component, props, legacyContext);
+  const value = renderWithHooks(
+    request,
+    task,
+    prevThenableState,
+    Component,
+    props,
+    legacyContext,
+  );
   const hasId = checkDidRenderIdHook();
 
   if (__DEV__) {
@@ -857,12 +875,12 @@ function renderIndeterminateComponent(
       const index = 0;
       task.treeContext = pushTreeContext(prevTreeContext, totalChildren, index);
       try {
-        renderNodeDestructive(request, task, value);
+        renderNodeDestructive(request, task, null, value);
       } finally {
         task.treeContext = prevTreeContext;
       }
     } else {
-      renderNodeDestructive(request, task, value);
+      renderNodeDestructive(request, task, null, value);
     }
   }
   popComponentStackInDEV(task);
@@ -942,12 +960,20 @@ function resolveDefaultProps(Component: any, baseProps: Object): Object {
 function renderForwardRef(
   request: Request,
   task: Task,
+  prevThenableState,
   type: any,
   props: Object,
   ref: any,
 ): void {
   pushFunctionComponentStackInDEV(task, type.render);
-  const children = renderWithHooks(request, task, type.render, props, ref);
+  const children = renderWithHooks(
+    request,
+    task,
+    prevThenableState,
+    type.render,
+    props,
+    ref,
+  );
   const hasId = checkDidRenderIdHook();
   if (hasId) {
     // This component materialized an id. We treat this as its own level, with
@@ -957,12 +983,12 @@ function renderForwardRef(
     const index = 0;
     task.treeContext = pushTreeContext(prevTreeContext, totalChildren, index);
     try {
-      renderNodeDestructive(request, task, children);
+      renderNodeDestructive(request, task, null, children);
     } finally {
       task.treeContext = prevTreeContext;
     }
   } else {
-    renderNodeDestructive(request, task, children);
+    renderNodeDestructive(request, task, null, children);
   }
   popComponentStackInDEV(task);
 }
@@ -970,13 +996,21 @@ function renderForwardRef(
 function renderMemo(
   request: Request,
   task: Task,
+  prevThenableState: ThenableState | null,
   type: any,
   props: Object,
   ref: any,
 ): void {
   const innerType = type.type;
   const resolvedProps = resolveDefaultProps(innerType, props);
-  renderElement(request, task, innerType, resolvedProps, ref);
+  renderElement(
+    request,
+    task,
+    prevThenableState,
+    innerType,
+    resolvedProps,
+    ref,
+  );
 }
 
 function renderContextConsumer(
@@ -1026,7 +1060,7 @@ function renderContextConsumer(
   const newValue = readContext(context);
   const newChildren = render(newValue);
 
-  renderNodeDestructive(request, task, newChildren);
+  renderNodeDestructive(request, task, null, newChildren);
 }
 
 function renderContextProvider(
@@ -1043,7 +1077,7 @@ function renderContextProvider(
     prevSnapshot = task.context;
   }
   task.context = pushProvider(context, value);
-  renderNodeDestructive(request, task, children);
+  renderNodeDestructive(request, task, null, children);
   task.context = popProvider(context);
   if (__DEV__) {
     if (prevSnapshot !== task.context) {
@@ -1057,6 +1091,7 @@ function renderContextProvider(
 function renderLazyComponent(
   request: Request,
   task: Task,
+  prevThenableState: ThenableState | null,
   lazyComponent: LazyComponentType<any, any>,
   props: Object,
   ref: any,
@@ -1066,7 +1101,14 @@ function renderLazyComponent(
   const init = lazyComponent._init;
   const Component = init(payload);
   const resolvedProps = resolveDefaultProps(Component, props);
-  renderElement(request, task, Component, resolvedProps, ref);
+  renderElement(
+    request,
+    task,
+    prevThenableState,
+    Component,
+    resolvedProps,
+    ref,
+  );
   popComponentStackInDEV(task);
 }
 
@@ -1078,13 +1120,14 @@ function renderOffscreen(request: Request, task: Task, props: Object): void {
   } else {
     // A visible Offscreen boundary is treated exactly like a fragment: a
     // pure indirection.
-    renderNodeDestructive(request, task, props.children);
+    renderNodeDestructive(request, task, null, props.children);
   }
 }
 
 function renderElement(
   request: Request,
   task: Task,
+  prevThenableState: ThenableState | null,
   type: any,
   props: Object,
   ref: any,
@@ -1094,7 +1137,13 @@ function renderElement(
       renderClassComponent(request, task, type, props);
       return;
     } else {
-      renderIndeterminateComponent(request, task, type, props);
+      renderIndeterminateComponent(
+        request,
+        task,
+        prevThenableState,
+        type,
+        props,
+      );
       return;
     }
   }
@@ -1118,7 +1167,7 @@ function renderElement(
     case REACT_STRICT_MODE_TYPE:
     case REACT_PROFILER_TYPE:
     case REACT_FRAGMENT_TYPE: {
-      renderNodeDestructive(request, task, props.children);
+      renderNodeDestructive(request, task, null, props.children);
       return;
     }
     case REACT_OFFSCREEN_TYPE: {
@@ -1128,13 +1177,13 @@ function renderElement(
     case REACT_SUSPENSE_LIST_TYPE: {
       pushBuiltInComponentStackInDEV(task, 'SuspenseList');
       // TODO: SuspenseList should control the boundaries.
-      renderNodeDestructive(request, task, props.children);
+      renderNodeDestructive(request, task, null, props.children);
       popComponentStackInDEV(task);
       return;
     }
     case REACT_SCOPE_TYPE: {
       if (enableScopeAPI) {
-        renderNodeDestructive(request, task, props.children);
+        renderNodeDestructive(request, task, null, props.children);
         return;
       }
       throw new Error('ReactDOMServer does not yet support scope components.');
@@ -1156,11 +1205,11 @@ function renderElement(
   if (typeof type === 'object' && type !== null) {
     switch (type.$$typeof) {
       case REACT_FORWARD_REF_TYPE: {
-        renderForwardRef(request, task, type, props, ref);
+        renderForwardRef(request, task, prevThenableState, type, props, ref);
         return;
       }
       case REACT_MEMO_TYPE: {
-        renderMemo(request, task, type, props, ref);
+        renderMemo(request, task, prevThenableState, type, props, ref);
         return;
       }
       case REACT_PROVIDER_TYPE: {
@@ -1172,7 +1221,7 @@ function renderElement(
         return;
       }
       case REACT_LAZY_TYPE: {
-        renderLazyComponent(request, task, type, props);
+        renderLazyComponent(request, task, prevThenableState, type, props);
         return;
       }
     }
@@ -1237,6 +1286,9 @@ function validateIterable(iterable, iteratorFn: Function): void {
 function renderNodeDestructive(
   request: Request,
   task: Task,
+  // The thenable state reused from the previous attempt, if any. This is almost
+  // always null, except when called by retryTask.
+  prevThenableState: ThenableState | null,
   node: ReactNodeList,
 ): void {
   if (__DEV__) {
@@ -1244,7 +1296,7 @@ function renderNodeDestructive(
     // a component stack at the right place in the tree. We don't do this in renderNode
     // becuase it is not called at every layer of the tree and we may lose frames
     try {
-      return renderNodeDestructiveImpl(request, task, node);
+      return renderNodeDestructiveImpl(request, task, prevThenableState, node);
     } catch (x) {
       if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
         // This is a Wakable, noop
@@ -1259,7 +1311,7 @@ function renderNodeDestructive(
       throw x;
     }
   } else {
-    return renderNodeDestructiveImpl(request, task, node);
+    return renderNodeDestructiveImpl(request, task, prevThenableState, node);
   }
 }
 
@@ -1268,6 +1320,7 @@ function renderNodeDestructive(
 function renderNodeDestructiveImpl(
   request: Request,
   task: Task,
+  prevThenableState: ThenableState | null,
   node: ReactNodeList,
 ): void {
   // Stash the node we're working on. We'll pick up from this task in case
@@ -1282,7 +1335,7 @@ function renderNodeDestructiveImpl(
         const type = element.type;
         const props = element.props;
         const ref = element.ref;
-        renderElement(request, task, type, props, ref);
+        renderElement(request, task, prevThenableState, type, props, ref);
         return;
       }
       case REACT_PORTAL_TYPE:
@@ -1316,7 +1369,7 @@ function renderNodeDestructiveImpl(
         } else {
           resolvedNode = init(payload);
         }
-        renderNodeDestructive(request, task, resolvedNode);
+        renderNodeDestructive(request, task, null, resolvedNode);
         return;
       }
     }
@@ -1417,6 +1470,7 @@ function renderChildrenArray(request, task, children) {
 function spawnNewSuspendedTask(
   request: Request,
   task: Task,
+  thenableState: ThenableState | null,
   x: Promise<any>,
 ): void {
   // Something suspended, we'll need to create a new segment and resolve it later.
@@ -1437,6 +1491,7 @@ function spawnNewSuspendedTask(
   segment.lastPushedText = false;
   const newTask = createTask(
     request,
+    thenableState,
     task.node,
     task.blockedBoundary,
     newSegment,
@@ -1445,6 +1500,9 @@ function spawnNewSuspendedTask(
     task.context,
     task.treeContext,
   );
+
+  trackSuspendedWakeable(x);
+
   if (__DEV__) {
     if (task.componentStack !== null) {
       // We pop one task off the stack because the node that suspended will be tried again,
@@ -1472,11 +1530,13 @@ function renderNode(request: Request, task: Task, node: ReactNodeList): void {
     previousComponentStack = task.componentStack;
   }
   try {
-    return renderNodeDestructive(request, task, node);
+    return renderNodeDestructive(request, task, null, node);
   } catch (x) {
     resetHooksState();
     if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
-      spawnNewSuspendedTask(request, task, x);
+      const thenableState = getThenableStateAfterSuspending();
+      spawnNewSuspendedTask(request, task, thenableState, x);
+
       // Restore the context. We assume that this will be restored by the inner
       // functions in case nothing throws so we don't use "finally" here.
       task.blockedSegment.formatContext = previousFormatContext;
@@ -1731,7 +1791,14 @@ function retryTask(request: Request, task: Task): void {
   try {
     // We call the destructive form that mutates this task. That way if something
     // suspends again, we can reuse the same task instead of spawning a new one.
-    renderNodeDestructive(request, task, task.node);
+
+    // Reset the task's thenable state before continuing, so that if a later
+    // component suspends we can reuse the same task object. If the same
+    // component suspends again, the thenable state will be restored.
+    const prevThenableState = task.thenableState;
+    task.thenableState = null;
+
+    renderNodeDestructive(request, task, prevThenableState, task.node);
     pushSegmentFinale(
       segment.chunks,
       request.responseState,
@@ -1748,6 +1815,10 @@ function retryTask(request: Request, task: Task): void {
       // Something suspended again, let's pick it back up later.
       const ping = task.ping;
       x.then(ping, ping);
+
+      const wakeable: Wakeable = x;
+      trackSuspendedWakeable(wakeable);
+      task.thenableState = getThenableStateAfterSuspending();
     } else {
       task.abortSet.delete(task);
       segment.status = ERRORED;
diff --git a/packages/react-server/src/ReactFizzWakeable.js b/packages/react-server/src/ReactFizzWakeable.js
new file mode 100644
index 0000000000000..5a42ed396c4d9
--- /dev/null
+++ b/packages/react-server/src/ReactFizzWakeable.js
@@ -0,0 +1,107 @@
+/**
+ * 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
+ */
+
+// Corresponds to ReactFiberWakeable and ReactFlightWakeable modules. Generally,
+// changes to one module should be reflected in the others.
+
+// TODO: Rename this module and the corresponding Fiber one to "Thenable"
+// instead of "Wakeable". Or some other more appropriate name.
+
+import type {
+  Wakeable,
+  Thenable,
+  PendingThenable,
+  FulfilledThenable,
+  RejectedThenable,
+} from 'shared/ReactTypes';
+
+// TODO: Sparse arrays are bad for performance.
+export opaque type ThenableState = Array<Thenable<any> | void>;
+
+export function createThenableState(): ThenableState {
+  // The ThenableState is created the first time a component suspends. If it
+  // suspends again, we'll reuse the same state.
+  return [];
+}
+
+export function trackSuspendedWakeable(wakeable: Wakeable) {
+  // If this wakeable isn't already a thenable, turn it into one now. Then,
+  // when we resume the work loop, we can check if its status is
+  // still pending.
+  // TODO: Get rid of the Wakeable type? It's superseded by UntrackedThenable.
+  const thenable: Thenable<mixed> = (wakeable: any);
+
+  // We use an expando to track the status and result of a thenable so that we
+  // can synchronously unwrap the value. Think of this as an extension of the
+  // Promise API, or a custom interface that is a superset of Thenable.
+  //
+  // If the thenable doesn't have a status, set it to "pending" and attach
+  // a listener that will update its status and result when it resolves.
+  switch (thenable.status) {
+    case 'pending':
+      // Since the status is already "pending", we can assume it will be updated
+      // when it resolves, either by React or something in userspace.
+      break;
+    case 'fulfilled':
+    case 'rejected':
+      // A thenable that already resolved shouldn't have been thrown, so this is
+      // unexpected. Suggests a mistake in a userspace data library. Don't track
+      // this thenable, because if we keep trying it will likely infinite loop
+      // without ever resolving.
+      // TODO: Log a warning?
+      break;
+    default: {
+      // TODO: Only instrument the thenable if the status if not defined. If
+      // it's defined, but an unknown value, assume it's been instrumented by
+      // some custom userspace implementation.
+      const pendingThenable: PendingThenable<mixed> = (thenable: any);
+      pendingThenable.status = 'pending';
+      pendingThenable.then(
+        fulfilledValue => {
+          if (thenable.status === 'pending') {
+            const fulfilledThenable: FulfilledThenable<mixed> = (thenable: any);
+            fulfilledThenable.status = 'fulfilled';
+            fulfilledThenable.value = fulfilledValue;
+          }
+        },
+        (error: mixed) => {
+          if (thenable.status === 'pending') {
+            const rejectedThenable: RejectedThenable<mixed> = (thenable: any);
+            rejectedThenable.status = 'rejected';
+            rejectedThenable.reason = error;
+          }
+        },
+      );
+      break;
+    }
+  }
+}
+
+export function trackUsedThenable<T>(
+  thenableState: ThenableState,
+  thenable: Thenable<T>,
+  index: number,
+) {
+  // This is only a separate function from trackSuspendedWakeable for symmetry
+  // with Fiber.
+  thenableState[index] = thenable;
+}
+
+export function getPreviouslyUsedThenableAtIndex<T>(
+  thenableState: ThenableState | null,
+  index: number,
+): Thenable<T> | null {
+  if (thenableState !== null) {
+    const thenable = thenableState[index];
+    if (thenable !== undefined) {
+      return thenable;
+    }
+  }
+  return null;
+}
diff --git a/packages/react-server/src/ReactFlightHooks.js b/packages/react-server/src/ReactFlightHooks.js
index a9782c712aca2..dfb234b15ad27 100644
--- a/packages/react-server/src/ReactFlightHooks.js
+++ b/packages/react-server/src/ReactFlightHooks.js
@@ -9,11 +9,20 @@
 
 import type {Dispatcher as DispatcherType} from 'react-reconciler/src/ReactInternalTypes';
 import type {Request} from './ReactFlightServer';
-import type {ReactServerContext} from 'shared/ReactTypes';
+import type {ReactServerContext, Thenable, Usable} from 'shared/ReactTypes';
+import type {ThenableState} from './ReactFlightWakeable';
 import {REACT_SERVER_CONTEXT_TYPE} from 'shared/ReactSymbols';
 import {readContext as readContextImpl} from './ReactFlightNewContext';
+import {enableUseHook} from 'shared/ReactFeatureFlags';
+import {
+  getPreviouslyUsedThenableAtIndex,
+  createThenableState,
+  trackUsedThenable,
+} from './ReactFlightWakeable';
 
 let currentRequest = null;
+let thenableIndexCounter = 0;
+let thenableState = null;
 
 export function prepareToUseHooksForRequest(request: Request) {
   currentRequest = request;
@@ -23,10 +32,25 @@ export function resetHooksForRequest() {
   currentRequest = null;
 }
 
+export function prepareToUseHooksForComponent(
+  prevThenableState: ThenableState | null,
+) {
+  thenableIndexCounter = 0;
+  thenableState = prevThenableState;
+}
+
+export function getThenableStateAfterSuspending() {
+  const state = thenableState;
+  thenableState = null;
+  return state;
+}
+
 function readContext<T>(context: ReactServerContext<T>): T {
   if (__DEV__) {
     if (context.$$typeof !== REACT_SERVER_CONTEXT_TYPE) {
-      console.error('Only ServerContext is supported in Flight');
+      console.error(
+        'Only createServerContext is supported in Server Components.',
+      );
     }
     if (currentCache === null) {
       console.error(
@@ -81,6 +105,7 @@ export const Dispatcher: DispatcherType = {
   useMemoCache(size: number): Array<any> {
     return new Array(size);
   },
+  use: enableUseHook ? use : (unsupportedHook: any),
 };
 
 function unsupportedHook(): void {
@@ -114,3 +139,73 @@ function useId(): string {
   // use 'S' for Flight components to distinguish from 'R' and 'r' in Fizz/Client
   return ':' + currentRequest.identifierPrefix + 'S' + id.toString(32) + ':';
 }
+
+function use<T>(usable: Usable<T>): T {
+  if (usable !== null && typeof usable === 'object') {
+    if (typeof usable.then === 'function') {
+      // This is a thenable.
+      const thenable: Thenable<T> = (usable: any);
+
+      // Track the position of the thenable within this fiber.
+      const index = thenableIndexCounter;
+      thenableIndexCounter += 1;
+
+      switch (thenable.status) {
+        case 'fulfilled': {
+          const fulfilledValue: T = thenable.value;
+          return fulfilledValue;
+        }
+        case 'rejected': {
+          const rejectedError = thenable.reason;
+          throw rejectedError;
+        }
+        default: {
+          const prevThenableAtIndex: Thenable<T> | null = getPreviouslyUsedThenableAtIndex(
+            thenableState,
+            index,
+          );
+          if (prevThenableAtIndex !== null) {
+            switch (prevThenableAtIndex.status) {
+              case 'fulfilled': {
+                const fulfilledValue: T = prevThenableAtIndex.value;
+                return fulfilledValue;
+              }
+              case 'rejected': {
+                const rejectedError: mixed = prevThenableAtIndex.reason;
+                throw rejectedError;
+              }
+              default: {
+                // The thenable still hasn't resolved. Suspend with the same
+                // thenable as last time to avoid redundant listeners.
+                throw prevThenableAtIndex;
+              }
+            }
+          } else {
+            // This is the first time something has been used at this index.
+            // Stash the thenable at the current index so we can reuse it during
+            // the next attempt.
+            if (thenableState === null) {
+              thenableState = createThenableState();
+            }
+            trackUsedThenable(thenableState, thenable, index);
+
+            // Suspend.
+            // TODO: Throwing here is an implementation detail that allows us to
+            // unwind the call stack. But we shouldn't allow it to leak into
+            // userspace. Throw an opaque placeholder value instead of the
+            // actual thenable. If it doesn't get captured by the work loop, log
+            // a warning, because that means something in userspace must have
+            // caught it.
+            throw thenable;
+          }
+        }
+      }
+    } else if (usable.$$typeof === REACT_SERVER_CONTEXT_TYPE) {
+      const context: ReactServerContext<T> = (usable: any);
+      return readContext(context);
+    }
+  }
+
+  // eslint-disable-next-line react-internal/safe-string-coercion
+  throw new Error('An unsupported type was passed to use(): ' + String(usable));
+}
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index 1577687c0040e..6f26f8b88f693 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -16,9 +16,11 @@ import type {
   ModuleKey,
 } from './ReactFlightServerConfig';
 import type {ContextSnapshot} from './ReactFlightNewContext';
+import type {ThenableState} from './ReactFlightWakeable';
 import type {
   ReactProviderType,
   ServerContextJSONValue,
+  Wakeable,
 } from 'shared/ReactTypes';
 
 import {
@@ -44,6 +46,8 @@ import {
   Dispatcher,
   getCurrentCache,
   prepareToUseHooksForRequest,
+  prepareToUseHooksForComponent,
+  getThenableStateAfterSuspending,
   resetHooksForRequest,
   setCurrentCache,
 } from './ReactFlightHooks';
@@ -54,6 +58,7 @@ import {
   getActiveContext,
   rootContextSnapshot,
 } from './ReactFlightNewContext';
+import {trackSuspendedWakeable} from './ReactFlightWakeable';
 
 import {
   REACT_ELEMENT_TYPE,
@@ -81,6 +86,7 @@ export type ReactModel =
   | string
   | boolean
   | number
+  | symbol
   | null
   | Iterable<ReactModel>
   | ReactModelObject;
@@ -98,6 +104,7 @@ type Task = {
   model: ReactModel,
   ping: () => void,
   context: ContextSnapshot,
+  thenableState: ThenableState | null,
 };
 
 export type Request = {
@@ -113,7 +120,7 @@ export type Request = {
   completedModuleChunks: Array<Chunk>,
   completedJSONChunks: Array<Chunk>,
   completedErrorChunks: Array<Chunk>,
-  writtenSymbols: Map<Symbol, number>,
+  writtenSymbols: Map<symbol, number>,
   writtenModules: Map<ModuleKey, number>,
   writtenProviders: Map<string, number>,
   identifierPrefix: string,
@@ -185,6 +192,7 @@ function attemptResolveElement(
   key: null | React$Key,
   ref: mixed,
   props: any,
+  prevThenableState: ThenableState | null,
 ): ReactModel {
   if (ref !== null && ref !== undefined) {
     // When the ref moves to the regular props object this will implicitly
@@ -200,6 +208,7 @@ function attemptResolveElement(
       return [REACT_ELEMENT_TYPE, type, key, props];
     }
     // This is a server-side component.
+    prepareToUseHooksForComponent(prevThenableState);
     return type(props);
   } else if (typeof type === 'string') {
     // This is a host element. E.g. HTML.
@@ -225,14 +234,27 @@ function attemptResolveElement(
         const payload = type._payload;
         const init = type._init;
         const wrappedType = init(payload);
-        return attemptResolveElement(wrappedType, key, ref, props);
+        return attemptResolveElement(
+          wrappedType,
+          key,
+          ref,
+          props,
+          prevThenableState,
+        );
       }
       case REACT_FORWARD_REF_TYPE: {
         const render = type.render;
+        prepareToUseHooksForComponent(prevThenableState);
         return render(props, undefined);
       }
       case REACT_MEMO_TYPE: {
-        return attemptResolveElement(type.type, key, ref, props);
+        return attemptResolveElement(
+          type.type,
+          key,
+          ref,
+          props,
+          prevThenableState,
+        );
       }
       case REACT_PROVIDER_TYPE: {
         pushProvider(type._context, props.value);
@@ -250,6 +272,7 @@ function attemptResolveElement(
             );
           }
         }
+        // $FlowFixMe issue discovered when updating Flow
         return [
           REACT_ELEMENT_TYPE,
           type,
@@ -286,6 +309,7 @@ function createTask(
     model,
     context,
     ping: () => pingTask(request, task),
+    thenableState: null,
   };
   abortSet.add(task);
   return task;
@@ -442,7 +466,7 @@ function describeValueForErrorMessage(value: ReactModel): string {
 
 function describeObjectForErrorMessage(
   objectOrArray:
-    | {+[key: string | number]: ReactModel}
+    | {+[key: string | number]: ReactModel, ...}
     | $ReadOnlyArray<ReactModel>,
   expandedName?: string,
 ): string {
@@ -472,7 +496,7 @@ function describeObjectForErrorMessage(
     return str;
   } else {
     let str = '{';
-    const object: {+[key: string | number]: ReactModel} = objectOrArray;
+    const object: {+[key: string | number]: ReactModel, ...} = objectOrArray;
     const names = Object.keys(object);
     for (let i = 0; i < names.length; i++) {
       if (i > 0) {
@@ -569,6 +593,7 @@ export function resolveModelToJSON(
             element.key,
             element.ref,
             element.props,
+            null,
           );
           break;
         }
@@ -591,6 +616,11 @@ export function resolveModelToJSON(
         );
         const ping = newTask.ping;
         x.then(ping, ping);
+
+        const wakeable: Wakeable = x;
+        trackSuspendedWakeable(wakeable);
+        newTask.thenableState = getThenableStateAfterSuspending();
+
         return serializeByRefID(newTask.id);
       } else {
         logRecoverableError(request, x);
@@ -669,6 +699,7 @@ export function resolveModelToJSON(
       }
     }
 
+    // $FlowFixMe
     return value;
   }
 
@@ -718,12 +749,17 @@ export function resolveModelToJSON(
     if (existingId !== undefined) {
       return serializeByValueID(existingId);
     }
-    const name = value.description;
+    // $FlowFixMe `description` might be undefined
+    const name: string = value.description;
 
+    // $FlowFixMe `name` might be undefined
     if (Symbol.for(name) !== value) {
       throw new Error(
         'Only global symbols received from Symbol.for(...) can be passed to client components. ' +
-          `The symbol Symbol.for(${value.description}) cannot be found among global symbols. ` +
+          `The symbol Symbol.for(${
+            // $FlowFixMe `description` might be undefined
+            value.description
+          }) cannot be found among global symbols. ` +
           `Remove ${describeKeyForErrorMessage(
             key,
           )} from this object, or avoid the entire object: ${describeObjectForErrorMessage(
@@ -805,6 +841,7 @@ function emitModuleChunk(
   id: number,
   moduleMetaData: ModuleMetaData,
 ): void {
+  // $FlowFixMe ModuleMetaData is not a ReactModel
   const processedChunk = processModuleChunk(request, id, moduleMetaData);
   request.completedModuleChunks.push(processedChunk);
 }
@@ -828,16 +865,22 @@ function retryTask(request: Request, task: Task): void {
     // We completed this by other means before we had a chance to retry it.
     return;
   }
+
   switchContext(task.context);
   try {
     let value = task.model;
-    while (
+    if (
       typeof value === 'object' &&
       value !== null &&
       (value: any).$$typeof === REACT_ELEMENT_TYPE
     ) {
       // TODO: Concatenate keys of parents onto children.
       const element: React$Element<any> = (value: any);
+
+      // When retrying a component, reuse the thenableState from the
+      // previous attempt.
+      const prevThenableState = task.thenableState;
+
       // Attempt to render the server component.
       // Doing this here lets us reuse this same task if the next component
       // also suspends.
@@ -847,8 +890,34 @@ function retryTask(request: Request, task: Task): void {
         element.key,
         element.ref,
         element.props,
+        prevThenableState,
       );
+
+      // Successfully finished this component. We're going to keep rendering
+      // using the same task, but we reset its thenable state before continuing.
+      task.thenableState = null;
+
+      // Keep rendering and reuse the same task. This inner loop is separate
+      // from the render above because we don't need to reset the thenable state
+      // until the next time something suspends and retries.
+      while (
+        typeof value === 'object' &&
+        value !== null &&
+        (value: any).$$typeof === REACT_ELEMENT_TYPE
+      ) {
+        // TODO: Concatenate keys of parents onto children.
+        const nextElement: React$Element<any> = (value: any);
+        task.model = value;
+        value = attemptResolveElement(
+          nextElement.type,
+          nextElement.key,
+          nextElement.ref,
+          nextElement.props,
+          null,
+        );
+      }
     }
+
     const processedChunk = processModelChunk(request, task.id, value);
     request.completedJSONChunks.push(processedChunk);
     request.abortableTasks.delete(task);
@@ -858,6 +927,10 @@ function retryTask(request: Request, task: Task): void {
       // Something suspended again, let's pick it back up later.
       const ping = task.ping;
       x.then(ping, ping);
+
+      const wakeable: Wakeable = x;
+      trackSuspendedWakeable(wakeable);
+      task.thenableState = getThenableStateAfterSuspending();
       return;
     } else {
       request.abortableTasks.delete(task);
@@ -902,7 +975,7 @@ function abortTask(task: Task, request: Request, errorId: number): void {
   // has a single value referencing the error.
   const ref = serializeByValueID(errorId);
   const processedChunk = processReferenceChunk(request, task.id, ref);
-  request.completedJSONChunks.push(processedChunk);
+  request.completedErrorChunks.push(processedChunk);
 }
 
 function flushCompletedChunks(
diff --git a/packages/react-server/src/ReactFlightServerConfigStream.js b/packages/react-server/src/ReactFlightServerConfigStream.js
index b9772ef6f2ea9..6320f28d585b6 100644
--- a/packages/react-server/src/ReactFlightServerConfigStream.js
+++ b/packages/react-server/src/ReactFlightServerConfigStream.js
@@ -94,7 +94,8 @@ export function processModelChunk(
   id: number,
   model: ReactModel,
 ): Chunk {
-  const json = stringify(model, request.toJSON);
+  // $FlowFixMe: `json` might be `undefined` when model is a symbol.
+  const json: string = stringify(model, request.toJSON);
   const row = serializeRowHeader('J', id) + json + '\n';
   return stringToChunk(row);
 }
@@ -114,7 +115,8 @@ export function processModuleChunk(
   id: number,
   moduleMetaData: ReactModel,
 ): Chunk {
-  const json = stringify(moduleMetaData);
+  // $FlowFixMe: `json` might be `undefined` when moduleMetaData is a symbol.
+  const json: string = stringify(moduleMetaData);
   const row = serializeRowHeader('M', id) + json + '\n';
   return stringToChunk(row);
 }
diff --git a/packages/react-server/src/ReactFlightWakeable.js b/packages/react-server/src/ReactFlightWakeable.js
new file mode 100644
index 0000000000000..c3eda3c16aee6
--- /dev/null
+++ b/packages/react-server/src/ReactFlightWakeable.js
@@ -0,0 +1,111 @@
+/**
+ * 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
+ */
+
+// Corresponds to ReactFiberWakeable and ReactFizzWakeable modules. Generally,
+// changes to one module should be reflected in the others.
+
+// TODO: Rename this module and the corresponding Fiber one to "Thenable"
+// instead of "Wakeable". Or some other more appropriate name.
+
+import type {
+  Wakeable,
+  Thenable,
+  PendingThenable,
+  FulfilledThenable,
+  RejectedThenable,
+} from 'shared/ReactTypes';
+
+// TODO: Sparse arrays are bad for performance.
+export opaque type ThenableState = Array<Thenable<any> | void>;
+
+export function createThenableState(): ThenableState {
+  // The ThenableState is created the first time a component suspends. If it
+  // suspends again, we'll reuse the same state.
+  return [];
+}
+
+export function trackSuspendedWakeable(wakeable: Wakeable) {
+  // If this wakeable isn't already a thenable, turn it into one now. Then,
+  // when we resume the work loop, we can check if its status is
+  // still pending.
+  // TODO: Get rid of the Wakeable type? It's superseded by UntrackedThenable.
+  const thenable: Thenable<mixed> = (wakeable: any);
+
+  // We use an expando to track the status and result of a thenable so that we
+  // can synchronously unwrap the value. Think of this as an extension of the
+  // Promise API, or a custom interface that is a superset of Thenable.
+  //
+  // If the thenable doesn't have a status, set it to "pending" and attach
+  // a listener that will update its status and result when it resolves.
+  switch (thenable.status) {
+    case 'pending':
+      // Since the status is already "pending", we can assume it will be updated
+      // when it resolves, either by React or something in userspace.
+      break;
+    case 'fulfilled':
+    case 'rejected':
+      // A thenable that already resolved shouldn't have been thrown, so this is
+      // unexpected. Suggests a mistake in a userspace data library. Don't track
+      // this thenable, because if we keep trying it will likely infinite loop
+      // without ever resolving.
+      // TODO: Log a warning?
+      break;
+    default: {
+      // TODO: Only instrument the thenable if the status if not defined. If
+      // it's defined, but an unknown value, assume it's been instrumented by
+      // some custom userspace implementation.
+      const pendingThenable: PendingThenable<mixed> = (thenable: any);
+      pendingThenable.status = 'pending';
+      pendingThenable.then(
+        fulfilledValue => {
+          if (thenable.status === 'pending') {
+            const fulfilledThenable: FulfilledThenable<mixed> = (thenable: any);
+            fulfilledThenable.status = 'fulfilled';
+            fulfilledThenable.value = fulfilledValue;
+          }
+        },
+        (error: mixed) => {
+          if (thenable.status === 'pending') {
+            const rejectedThenable: RejectedThenable<mixed> = (thenable: any);
+            rejectedThenable.status = 'rejected';
+            rejectedThenable.reason = error;
+          }
+        },
+      );
+      break;
+    }
+  }
+}
+
+export function trackUsedThenable<T>(
+  thenableState: ThenableState,
+  thenable: Thenable<T>,
+  index: number,
+) {
+  // This is only a separate function from trackSuspendedWakeable for symmetry
+  // with Fiber.
+  // TODO: Disallow throwing a thenable directly. It must go through `use` (or
+  // some equivalent for internal Suspense implementations). We can't do this in
+  // Fiber yet because it's a breaking change but we can do it in Server
+  // Components because Server Components aren't released yet.
+  thenableState[index] = thenable;
+}
+
+export function getPreviouslyUsedThenableAtIndex<T>(
+  thenableState: ThenableState | null,
+  index: number,
+): Thenable<T> | null {
+  if (thenableState !== null) {
+    const thenable = thenableState[index];
+    if (thenable !== undefined) {
+      return thenable;
+    }
+  }
+  return null;
+}
diff --git a/packages/react-test-renderer/src/ReactTestHostConfig.js b/packages/react-test-renderer/src/ReactTestHostConfig.js
index e049c3500c700..b452893ab2a9e 100644
--- a/packages/react-test-renderer/src/ReactTestHostConfig.js
+++ b/packages/react-test-renderer/src/ReactTestHostConfig.js
@@ -12,12 +12,12 @@ import {DefaultEventPriority} from 'react-reconciler/src/ReactEventPriorities';
 
 export type Type = string;
 export type Props = Object;
-export type Container = {|
+export type Container = {
   children: Array<Instance | TextInstance>,
   createNodeMock: Function,
   tag: 'CONTAINER',
-|};
-export type Instance = {|
+};
+export type Instance = {
   type: string,
   props: Object,
   isHidden: boolean,
@@ -25,12 +25,12 @@ export type Instance = {|
   internalInstanceHandle: Object,
   rootContainerInstance: Container,
   tag: 'INSTANCE',
-|};
-export type TextInstance = {|
+};
+export type TextInstance = {
   text: string,
   isHidden: boolean,
   tag: 'TEXT',
-|};
+};
 export type HydratableInstance = Instance | TextInstance;
 export type PublicInstance = Instance | TextInstance;
 export type HostContext = Object;
@@ -40,7 +40,7 @@ export type TimeoutHandle = TimeoutID;
 export type NoTimeout = -1;
 export type EventResponder = any;
 
-export type RendererInspectionConfig = $ReadOnly<{||}>;
+export type RendererInspectionConfig = $ReadOnly<{}>;
 
 export * from 'react-reconciler/src/ReactFiberHostConfigWithNoPersistence';
 export * from 'react-reconciler/src/ReactFiberHostConfigWithNoHydration';
diff --git a/packages/react-test-renderer/src/ReactTestRenderer.js b/packages/react-test-renderer/src/ReactTestRenderer.js
index 76911d701de79..ae2e532b270eb 100644
--- a/packages/react-test-renderer/src/ReactTestRenderer.js
+++ b/packages/react-test-renderer/src/ReactTestRenderer.js
@@ -61,12 +61,12 @@ type TestRendererOptions = {
   ...
 };
 
-type ReactTestRendererJSON = {|
+type ReactTestRendererJSON = {
   type: string,
   props: {[propName: string]: any, ...},
   children: null | Array<ReactTestRendererNode>,
-  $$typeof?: Symbol, // Optional because we add it with defineProperty().
-|};
+  $$typeof?: symbol, // Optional because we add it with defineProperty().
+};
 type ReactTestRendererNode = ReactTestRendererJSON | string;
 
 type FindOptions = $Shape<{
diff --git a/packages/react/src/ReactChildren.js b/packages/react/src/ReactChildren.js
index d0562f53e3bc9..686d39a5716a9 100644
--- a/packages/react/src/ReactChildren.js
+++ b/packages/react/src/ReactChildren.js
@@ -137,9 +137,12 @@ function mapIntoArray(
           escapedPrefix +
             // $FlowFixMe Flow incorrectly thinks React.Portal doesn't have a key
             (mappedChild.key && (!child || child.key !== mappedChild.key)
-              ? // $FlowFixMe Flow incorrectly thinks existing element's key can be a number
-                // eslint-disable-next-line react-internal/safe-string-coercion
-                escapeUserProvidedKey('' + mappedChild.key) + '/'
+              ? escapeUserProvidedKey(
+                  // eslint-disable-next-line react-internal/safe-string-coercion
+                  '' +
+                    // $FlowFixMe Flow incorrectly thinks existing element's key can be a number
+                    mappedChild.key,
+                ) + '/'
               : '') +
             childKey,
         );
@@ -190,6 +193,7 @@ function mapIntoArray(
       const iterator = iteratorFn.call(iterableChildren);
       let step;
       let ii = 0;
+      // $FlowFixMe `iteratorFn` might return null according to typing.
       while (!(step = iterator.next()).done) {
         child = step.value;
         nextName = nextNamePrefix + getElementKey(child, ii++);
@@ -222,7 +226,7 @@ function mapIntoArray(
   return subtreeCount;
 }
 
-type MapFunc = (child: ?React$Node) => ?ReactNodeList;
+type MapFunc = (child: ?React$Node, index: number) => ?ReactNodeList;
 
 /**
  * Maps children that are typically specified as `props.children`.
diff --git a/packages/react/src/ReactHooks.js b/packages/react/src/ReactHooks.js
index 74699ea673e07..7192f9aea5e39 100644
--- a/packages/react/src/ReactHooks.js
+++ b/packages/react/src/ReactHooks.js
@@ -94,7 +94,7 @@ export function useReducer<S, I, A>(
   return dispatcher.useReducer(reducer, initialArg, init);
 }
 
-export function useRef<T>(initialValue: T): {|current: T|} {
+export function useRef<T>(initialValue: T): {current: T} {
   const dispatcher = resolveDispatcher();
   return dispatcher.useRef(initialValue);
 }
@@ -140,7 +140,7 @@ export function useMemo<T>(
 }
 
 export function useImperativeHandle<T>(
-  ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
+  ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
   create: () => T,
   deps: Array<mixed> | void | null,
 ): void {
diff --git a/packages/react/src/ReactLazy.js b/packages/react/src/ReactLazy.js
index 6bfa6cbdec413..3dba009277e07 100644
--- a/packages/react/src/ReactLazy.js
+++ b/packages/react/src/ReactLazy.js
@@ -28,7 +28,7 @@ type PendingPayload = {
 
 type ResolvedPayload<T> = {
   _status: 1,
-  _result: {default: T},
+  _result: {default: T, ...},
 };
 
 type RejectedPayload = {
@@ -43,7 +43,7 @@ type Payload<T> =
   | RejectedPayload;
 
 export type LazyComponent<T, P> = {
-  $$typeof: Symbol | number,
+  $$typeof: symbol | number,
   _payload: P,
   _init: (payload: P) => T,
 };
diff --git a/packages/react/src/ReactSharedSubset.experimental.js b/packages/react/src/ReactSharedSubset.experimental.js
index 4a9ad873c1dc8..b05ec07302ed3 100644
--- a/packages/react/src/ReactSharedSubset.experimental.js
+++ b/packages/react/src/ReactSharedSubset.experimental.js
@@ -17,9 +17,9 @@ export {
   SuspenseList,
   cloneElement,
   createElement,
-  createMutableSource as unstable_createMutableSource,
   createRef,
   createServerContext,
+  experimental_use,
   forwardRef,
   isValidElement,
   lazy,
@@ -32,10 +32,6 @@ export {
   useCallback,
   useContext,
   useDebugValue,
-  useDeferredValue,
-  useDeferredValue as unstable_useDeferredValue,
   useMemo,
-  useMutableSource as unstable_useMutableSource,
-  useTransition,
   version,
 } from './React';
diff --git a/packages/scheduler/src/SchedulerMinHeap.js b/packages/scheduler/src/SchedulerMinHeap.js
index 3a562b44cdb30..b8585e10358f4 100644
--- a/packages/scheduler/src/SchedulerMinHeap.js
+++ b/packages/scheduler/src/SchedulerMinHeap.js
@@ -8,10 +8,10 @@
  */
 
 type Heap = Array<Node>;
-type Node = {|
+type Node = {
   id: number,
   sortIndex: number,
-|};
+};
 
 export function push(heap: Heap, node: Node): void {
   const index = heap.length;
diff --git a/packages/scheduler/src/forks/SchedulerPostTask.js b/packages/scheduler/src/forks/SchedulerPostTask.js
index c07f7f03819c3..8169bf1acc945 100644
--- a/packages/scheduler/src/forks/SchedulerPostTask.js
+++ b/packages/scheduler/src/forks/SchedulerPostTask.js
@@ -17,9 +17,9 @@ declare class TaskController {
 
 type PostTaskPriorityLevel = 'user-blocking' | 'user-visible' | 'background';
 
-type CallbackNode = {|
+type CallbackNode = {
   _controller: TaskController,
-|};
+};
 
 import {
   ImmediatePriority,
diff --git a/packages/shared/CheckStringCoercion.js b/packages/shared/CheckStringCoercion.js
index 305572f8462c7..e8fbf64a99b88 100644
--- a/packages/shared/CheckStringCoercion.js
+++ b/packages/shared/CheckStringCoercion.js
@@ -26,6 +26,7 @@ function typeName(value: mixed): string {
       (hasToStringTag && (value: any)[Symbol.toStringTag]) ||
       (value: any).constructor.name ||
       'Object';
+    // $FlowFixMe
     return type;
   }
 }
diff --git a/packages/shared/ReactElementType.js b/packages/shared/ReactElementType.js
index 8e61126575afb..998aff18a4c9b 100644
--- a/packages/shared/ReactElementType.js
+++ b/packages/shared/ReactElementType.js
@@ -7,12 +7,12 @@
  * @flow
  */
 
-export type Source = {|
+export type Source = {
   fileName: string,
   lineNumber: number,
-|};
+};
 
-export type ReactElement = {|
+export type ReactElement = {
   $$typeof: any,
   type: any,
   key: any,
@@ -26,4 +26,4 @@ export type ReactElement = {|
   _self: React$Element<any>,
   _shadowChildren: any,
   _source: Source,
-|};
+};
diff --git a/packages/shared/ReactServerContextRegistry.js b/packages/shared/ReactServerContextRegistry.js
index ab8421b3c329a..d8f7c7082940e 100644
--- a/packages/shared/ReactServerContextRegistry.js
+++ b/packages/shared/ReactServerContextRegistry.js
@@ -17,6 +17,7 @@ export function getOrCreateServerContext(globalName: string) {
   if (!ContextRegistry[globalName]) {
     ContextRegistry[globalName] = createServerContext(
       globalName,
+      // $FlowFixMe function signature doesn't reflect the symbol value
       REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED,
     );
   }
diff --git a/packages/shared/ReactSymbols.js b/packages/shared/ReactSymbols.js
index 6ff9305fa7b00..50f4fba27d98a 100644
--- a/packages/shared/ReactSymbols.js
+++ b/packages/shared/ReactSymbols.js
@@ -40,7 +40,7 @@ export const REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED = Symbol.for(
 const MAYBE_ITERATOR_SYMBOL = Symbol.iterator;
 const FAUX_ITERATOR_SYMBOL = '@@iterator';
 
-export function getIteratorFn(maybeIterable: ?any): ?() => ?Iterator<*> {
+export function getIteratorFn(maybeIterable: ?any): ?() => ?Iterator<any> {
   if (maybeIterable === null || typeof maybeIterable !== 'object') {
     return null;
   }
diff --git a/packages/shared/ReactTypes.js b/packages/shared/ReactTypes.js
index 7dacd489e4b8a..5ef83306706af 100644
--- a/packages/shared/ReactTypes.js
+++ b/packages/shared/ReactTypes.js
@@ -7,6 +7,8 @@
  * @flow
  */
 
+import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
+
 export type ReactNode =
   | React$Element<any>
   | ReactPortal
@@ -24,7 +26,7 @@ export type ReactNodeList = ReactEmpty | React$Node;
 export type ReactText = string | number;
 
 export type ReactProvider<T> = {
-  $$typeof: Symbol | number,
+  $$typeof: symbol | number,
   type: ReactProviderType<T>,
   key: null | string,
   ref: null,
@@ -37,13 +39,13 @@ export type ReactProvider<T> = {
 };
 
 export type ReactProviderType<T> = {
-  $$typeof: Symbol | number,
+  $$typeof: symbol | number,
   _context: ReactContext<T>,
   ...
 };
 
 export type ReactConsumer<T> = {
-  $$typeof: Symbol | number,
+  $$typeof: symbol | number,
   type: ReactContext<T>,
   key: null | string,
   ref: null,
@@ -55,7 +57,7 @@ export type ReactConsumer<T> = {
 };
 
 export type ReactContext<T> = {
-  $$typeof: Symbol | number,
+  $$typeof: symbol | number,
   Consumer: ReactContext<T>,
   Provider: ReactProviderType<T>,
   _currentValue: T,
@@ -85,7 +87,7 @@ export type ServerContextJSONValue =
 export type ReactServerContext<T: any> = ReactContext<T>;
 
 export type ReactPortal = {
-  $$typeof: Symbol | number,
+  $$typeof: symbol | number,
   key: null | string,
   containerInfo: any,
   children: ReactNodeList,
@@ -94,13 +96,13 @@ export type ReactPortal = {
   ...
 };
 
-export type RefObject = {|
+export type RefObject = {
   current: any,
-|};
+};
 
-export type ReactScope = {|
-  $$typeof: Symbol | number,
-|};
+export type ReactScope = {
+  $$typeof: symbol | number,
+};
 
 export type ReactScopeQuery = (
   type: string,
@@ -108,12 +110,12 @@ export type ReactScopeQuery = (
   instance: mixed,
 ) => boolean;
 
-export type ReactScopeInstance = {|
+export type ReactScopeInstance = {
   DO_NOT_USE_queryAllNodes(ReactScopeQuery): null | Array<Object>,
   DO_NOT_USE_queryFirstNode(ReactScopeQuery): null | Object,
   containsNode(Object): boolean,
   getChildContextValues: <T>(context: ReactContext<T>) => Array<T>,
-|};
+};
 
 // Mutable source version can be anything (e.g. number, string, immutable data structure)
 // so long as it changes every time any part of the source changes.
@@ -133,7 +135,7 @@ export type MutableSourceGetVersionFn = (
   source: $NonMaybeType<mixed>,
 ) => MutableSourceVersion;
 
-export type MutableSource<Source: $NonMaybeType<mixed>> = {|
+export type MutableSource<Source: $NonMaybeType<mixed>> = {
   _source: Source,
 
   _getVersion: MutableSourceGetVersionFn,
@@ -163,7 +165,7 @@ export type MutableSource<Source: $NonMaybeType<mixed>> = {|
   // See https://github.com/facebook/react/issues/19948
   _currentlyRenderingFiber?: Fiber | null,
   _initialVersionAsOfFirstRender?: MutableSourceVersion | null,
-|};
+};
 
 // The subset of a Thenable required by things thrown by Suspense.
 // This doesn't require a value to be passed to either handler.
@@ -213,5 +215,4 @@ export type StartTransitionOptions = {
   name?: string,
 };
 
-// TODO: Add Context support
-export type Usable<T> = Thenable<T>;
+export type Usable<T> = Thenable<T> | ReactContext<T>;
diff --git a/packages/shared/isValidElementType.js b/packages/shared/isValidElementType.js
index 87424982afc11..c0e4cdc769323 100644
--- a/packages/shared/isValidElementType.js
+++ b/packages/shared/isValidElementType.js
@@ -33,7 +33,7 @@ import {
   enableLegacyHidden,
 } from './ReactFeatureFlags';
 
-const REACT_MODULE_REFERENCE: Symbol = Symbol.for('react.module.reference');
+const REACT_MODULE_REFERENCE: symbol = Symbol.for('react.module.reference');
 
 export default function isValidElementType(type: mixed) {
   if (typeof type === 'string' || typeof type === 'function') {
diff --git a/packages/use-subscription/src/useSubscription.js b/packages/use-subscription/src/useSubscription.js
index 3ca633a5ad57d..b7987633dadf1 100644
--- a/packages/use-subscription/src/useSubscription.js
+++ b/packages/use-subscription/src/useSubscription.js
@@ -22,9 +22,9 @@ export function useSubscription<Value>({
   // This function is passed an event handler to attach to the subscription.
   // It should return an unsubscribe function that removes the handler.
   subscribe,
-}: {|
+}: {
   getCurrentValue: () => Value,
   subscribe: (callback: Function) => () => void,
-|}): Value {
+}): Value {
   return useSyncExternalStore(subscribe, getCurrentValue);
 }
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index 423b30de52dd2..4817eadd99031 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -423,5 +423,6 @@
   "435": "Unexpected Suspense handler tag (%s). This is a bug in React.",
   "436": "Stylesheet resources need a unique representation in the DOM while hydrating and more than one matching DOM Node was found. To fix, ensure you are only rendering one stylesheet link with an href attribute of \"%s\".",
   "437": "the \"precedence\" prop for links to stylesheets expects to receive a string but received something of type \"%s\" instead.",
-  "438": "An unsupported type was passed to use(): %s"
+  "438": "An unsupported type was passed to use(): %s",
+  "439": "We didn't expect to see a forward reference. This is a bug in the React Server."
 }
diff --git a/scripts/flow/config/flowconfig b/scripts/flow/config/flowconfig
index c0647c95468af..9b47998da9880 100644
--- a/scripts/flow/config/flowconfig
+++ b/scripts/flow/config/flowconfig
@@ -43,21 +43,11 @@ server.max_workers=4
 esproposal.class_static_fields=enable
 esproposal.class_instance_fields=enable
 esproposal.optional_chaining=enable
+exact_by_default=true
+munge_underscores=false
 
 # Substituted by createFlowConfig.js:
 %REACT_RENDERER_FLOW_OPTIONS%
 
-munge_underscores=false
-
-suppress_type=$FlowIssue
-suppress_type=$FlowFixMe
-suppress_type=$FixMe
-suppress_type=$FlowExpectedError
-
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
-suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
-
 [version]
-^0.97.0
+^0.132.0
diff --git a/scripts/flow/environment.js b/scripts/flow/environment.js
index f97bd32a43212..8b9a8aa43c991 100644
--- a/scripts/flow/environment.js
+++ b/scripts/flow/environment.js
@@ -25,13 +25,13 @@ declare module 'create-react-class' {
   declare var exports: React$CreateClass;
 }
 
-declare var trustedTypes: {|
+declare var trustedTypes: {
   isHTML: (value: any) => boolean,
   isScript: (value: any) => boolean,
   isScriptURL: (value: any) => boolean,
   // TrustedURLs are deprecated and will be removed soon: https://github.com/WICG/trusted-types/pull/204
   isURL?: (value: any) => boolean,
-|};
+};
 
 // ReactFeatureFlags www fork
 declare module 'ReactFeatureFlags' {
diff --git a/scripts/flow/react-native-host-hooks.js b/scripts/flow/react-native-host-hooks.js
index 896964f063643..86f5cabe7400c 100644
--- a/scripts/flow/react-native-host-hooks.js
+++ b/scripts/flow/react-native-host-hooks.js
@@ -9,25 +9,30 @@
 
 /* eslint-disable */
 
-import type {
-  MeasureOnSuccessCallback,
-  MeasureInWindowOnSuccessCallback,
-  MeasureLayoutOnSuccessCallback,
-  ReactNativeBaseComponentViewConfig,
-  ViewConfigGetter,
-} from 'react-native-renderer/src/ReactNativeTypes';
-import type {RNTopLevelEventType} from 'react-native-renderer/src/legacy-events/TopLevelEventTypes';
-import type {CapturedError} from 'react-reconciler/src/ReactCapturedValue';
-import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
-
-type DeepDifferOptions = {|+unsafelyIgnoreFunctions?: boolean|};
-type RawEventEmitterEvent = $ReadOnly<{|
+// libdefs cannot actually import. These are supposed to be the types imported
+// from 'react-native-renderer/src/ReactNativeTypes'
+type __MeasureOnSuccessCallback = any;
+type __MeasureInWindowOnSuccessCallback = any;
+type __MeasureLayoutOnSuccessCallback = any;
+type __ReactNativeBaseComponentViewConfig = any;
+type __ViewConfigGetter = any;
+
+// libdefs cannot actually import. This is supposed to be the type imported
+// from 'react-native-renderer/src/legacy-events/TopLevelEventTypes';
+type __RNTopLevelEventType = any;
+
+// libdefs cannot actually import. This is supposed to be the type imported
+// from 'react-reconciler/src/ReactCapturedValue'
+type __CapturedError = any;
+
+type DeepDifferOptions = {+unsafelyIgnoreFunctions?: boolean};
+type RawEventEmitterEvent = $ReadOnly<{
   eventName: string,
   // We expect, but do not/cannot require, that nativeEvent is an object
   // with the properties: key, elementType (string), type (string), tag (numeric),
   // and a stateNode of the native element/Fiber the event was emitted to.
-  nativeEvent: {[string]: mixed},
-|}>;
+  nativeEvent: {[string]: mixed, ...},
+}>;
 
 declare module 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface' {
   declare export function deepDiffer(
@@ -53,7 +58,7 @@ declare module 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface'
     ...
   };
   declare export var ReactFiberErrorDialog: {
-    showErrorDialog: (error: CapturedError) => boolean,
+    showErrorDialog: (error: __CapturedError) => boolean,
     ...
   };
   declare export var Platform: {OS: string, ...};
@@ -130,8 +135,8 @@ declare module 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface'
     customDirectEventTypes: Object,
     eventTypes: Object,
 
-    register: (name: string, callback: ViewConfigGetter) => string,
-    get: (name: string) => ReactNativeBaseComponentViewConfig,
+    register: (name: string, callback: __ViewConfigGetter) => string,
+    get: (name: string) => __ReactNativeBaseComponentViewConfig,
     ...
   };
   declare export var RawEventEmitter: {
@@ -166,7 +171,7 @@ declare var nativeFabricUIManager: {
   registerEventHandler: (
     callback: (
       eventTarget: null | Object,
-      type: RNTopLevelEventType,
+      type: __RNTopLevelEventType,
       payload: Object,
     ) => void,
   ) => void,
@@ -174,22 +179,22 @@ declare var nativeFabricUIManager: {
   dispatchCommand: (node: Object, command: string, args: Array<any>) => void,
   sendAccessibilityEvent: (node: Object, eventTypeName: string) => void,
 
-  measure: (node: Node, callback: MeasureOnSuccessCallback) => void,
+  measure: (node: Node, callback: __MeasureOnSuccessCallback) => void,
   measureInWindow: (
     node: Node,
-    callback: MeasureInWindowOnSuccessCallback,
+    callback: __MeasureInWindowOnSuccessCallback,
   ) => void,
   measureLayout: (
     node: Node,
     relativeNode: Node,
     onFail: () => void,
-    onSuccess: MeasureLayoutOnSuccessCallback,
+    onSuccess: __MeasureLayoutOnSuccessCallback,
   ) => void,
   findNodeAtPoint: (
     node: Node,
     locationX: number,
     locationY: number,
-    callback: (Fiber) => void,
+    callback: (Object) => void,
   ) => void,
   setIsJSResponder: (
     node: Node,
diff --git a/scripts/rollup/shims/react-native/ReactNativeViewConfigRegistry.js b/scripts/rollup/shims/react-native/ReactNativeViewConfigRegistry.js
index de5211f09be91..7894a689b377b 100644
--- a/scripts/rollup/shims/react-native/ReactNativeViewConfigRegistry.js
+++ b/scripts/rollup/shims/react-native/ReactNativeViewConfigRegistry.js
@@ -15,19 +15,19 @@ import invariant from 'invariant';
 
 // Event configs
 const customBubblingEventTypes: {
-  [eventName: string]: $ReadOnly<{|
-    phasedRegistrationNames: $ReadOnly<{|
+  [eventName: string]: $ReadOnly<{
+    phasedRegistrationNames: $ReadOnly<{
       captured: string,
       bubbled: string,
       skipBubbling?: ?boolean,
-    |}>,
-  |}>,
+    }>,
+  }>,
   ...,
 } = {};
 const customDirectEventTypes: {
-  [eventName: string]: $ReadOnly<{|
+  [eventName: string]: $ReadOnly<{
     registrationName: string,
-  |}>,
+  }>,
   ...,
 } = {};
 
diff --git a/yarn.lock b/yarn.lock
index 4f9e9225b382c..2d71503a7a340 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4622,9 +4622,9 @@ buffer-fill@^1.0.0:
   integrity sha1-+PeLdniYiO858gXNY39o5wISKyw=
 
 buffer-from@^1.0.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
-  integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
+  integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
 
 buffer-indexof@^1.0.0:
   version "1.1.1"
@@ -5287,22 +5287,12 @@ commander@2.9.0:
   dependencies:
     graceful-readlink ">= 1.0.0"
 
-commander@^2.18.0, commander@^2.3.0, commander@^2.6.0:
-  version "2.20.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.0.tgz#d58bb2b5c1ee8f87b0d340027e9e94e222c5a422"
-  integrity sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==
-
-commander@^2.20.0, commander@^2.8.1:
+commander@^2.18.0, commander@^2.20.0, commander@^2.3.0, commander@^2.6.0, commander@^2.8.1:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
 
-commander@^4.0.1:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.0.tgz#545983a0603fe425bc672d66c9e3c89c42121a83"
-  integrity sha512-NIQrwvv9V39FHgGFm36+U9SMQzbiHvU79k+iADraJTpmrFFfx7Ds0IvDoAdZsDrknlkRk14OYoWXb57uTh7/sw==
-
-commander@^4.1.1:
+commander@^4.0.1, commander@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
   integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
@@ -5628,11 +5618,11 @@ cross-env@^3.1.4:
     is-windows "^1.0.0"
 
 cross-fetch@^3.0.4:
-  version "3.1.4"
-  resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.1.4.tgz#9723f3a3a247bf8b89039f3a380a9244e8fa2f39"
-  integrity sha512-1eAtFWdIubi6T4XPy6ei9iUFoKpUkIF971QLN8lIvvvwueI65+Nw5haMNKUwfJxabqlIIDODJKGrQ66gxC0PbQ==
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.1.5.tgz#e1389f44d9e7ba767907f7af8454787952ab534f"
+  integrity sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==
   dependencies:
-    node-fetch "2.6.1"
+    node-fetch "2.6.7"
 
 cross-spawn@6.0.5, cross-spawn@^6.0.0, cross-spawn@^6.0.5:
   version "6.0.5"
@@ -7924,10 +7914,10 @@ flatted@^2.0.0:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138"
   integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==
 
-flow-bin@0.97:
-  version "0.97.0"
-  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.97.0.tgz#036ffcfc27503367a9d906ec9d843a0aa6f6bb83"
-  integrity sha512-jXjD05gkatLuC4+e28frH1hZoRwr1iASP6oJr61Q64+kR4kmzaS+AdFBhYgoYS5kpoe4UzwDebWK8ETQFNh00w==
+flow-bin@^0.132:
+  version "0.132.0"
+  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.132.0.tgz#8bf80a79630db24bd1422dc2cc4b5e97f97ccb98"
+  integrity sha512-S1g/vnAyNaLUdajmuUHCMl30qqye12gS6mr4LVyswf1k+JDF4efs6SfKmptuvnpitF3LGCVf0TIffChP8ljwnw==
 
 fluent-syntax@0.13.0:
   version "0.13.0"
@@ -10445,9 +10435,9 @@ jetpack-id@1.0.0:
   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==
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/jpeg-js/-/jpeg-js-0.4.4.tgz#a9f1c6f1f9f0fa80cdb3484ed9635054d28936aa"
+  integrity sha512-WZzeDOEtTOBK4Mdsar0IqEU5sMr3vSV2RqkAIzUEV2BHnUfKGyswWFPFwK5EeDo93K3FohSHbLAjj0s1Wzd+dg==
 
 jpegtran-bin@^4.0.0:
   version "4.0.0"
@@ -10682,9 +10672,9 @@ jsx-ast-utils@^2.4.1:
     object.assign "^4.1.0"
 
 jszip@^2.4.0:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/jszip/-/jszip-2.6.1.tgz#b88f3a7b2e67a2a048152982c7a3756d9c4828f0"
-  integrity sha1-uI86ey5noqBIFSmCx6N1bZxIKPA=
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/jszip/-/jszip-2.7.0.tgz#c420b1e1aa800490724a0dd277e8cca950bc2c41"
+  integrity sha512-JIsRKRVC3gTRo2vM4Wy9WBC3TRcfnIZU8k65Phi3izkvPH975FowRYtKGT6PxevA0XnJ/yO8b0QwV0ydVyQwfw==
   dependencies:
     pako "~1.0.2"
 
@@ -11664,9 +11654,9 @@ mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@^0.5.5, mkdirp@~0.5.1:
     minimist "^1.2.5"
 
 moment@^2.10.6:
-  version "2.24.0"
-  resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
-  integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
+  version "2.29.4"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
+  integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
 
 move-concurrently@^1.0.1:
   version "1.0.1"
@@ -11837,10 +11827,12 @@ node-environment-flags@^1.0.5:
     object.getownpropertydescriptors "^2.0.3"
     semver "^5.7.0"
 
-node-fetch@2.6.1:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
-  integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==
+node-fetch@2.6.7, node-fetch@^2.3.0, node-fetch@^2.6.0:
+  version "2.6.7"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.7.tgz#24de9fba827e3b4ae44dc8b20256a379160052ad"
+  integrity sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==
+  dependencies:
+    whatwg-url "^5.0.0"
 
 node-fetch@^1.0.1:
   version "1.7.3"
@@ -11850,11 +11842,6 @@ node-fetch@^1.0.1:
     encoding "^0.1.11"
     is-stream "^1.0.1"
 
-node-fetch@^2.3.0, node-fetch@^2.6.0:
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.0.tgz#e633456386d4aa55863f676a7ab0daa8fdecb0fd"
-  integrity sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA==
-
 node-forge@0.9.0:
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.9.0.tgz#d624050edbb44874adca12bb9a52ec63cb782579"
@@ -12633,12 +12620,7 @@ pako@~0.2.0:
   resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75"
   integrity sha1-8/dSL073gjSNqBYbrZ7P1Rv4OnU=
 
-pako@~1.0.2:
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.10.tgz#4328badb5086a426aa90f541977d4955da5c9732"
-  integrity sha512-0DTvPVU3ed8+HNXOu5Bs+o//Mbdj9VNQMUOe9oKCwh8l0GNwpTDMKCWbRjgtD291AWnkAgkqA/LOnQS8AmS1tw==
-
-pako@~1.0.5:
+pako@~1.0.2, pako@~1.0.5:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
   integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
@@ -14948,7 +14930,7 @@ source-map-support@0.5.16:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
 
-source-map-support@0.5.19, source-map-support@^0.5.16, source-map-support@^0.5.17, source-map-support@~0.5.12:
+source-map-support@0.5.19:
   version "0.5.19"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"
   integrity sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==
@@ -14963,10 +14945,10 @@ source-map-support@^0.4.18:
   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"
-  integrity sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==
+source-map-support@^0.5.16, source-map-support@^0.5.17, source-map-support@^0.5.6, source-map-support@~0.5.12, source-map-support@~0.5.4:
+  version "0.5.21"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.21.tgz#04fe7c7f9e1ed2d662233c28cb2b35b9f63f6e4f"
+  integrity sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==
   dependencies:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
@@ -15669,19 +15651,10 @@ terser-webpack-plugin@^1.4.3:
     webpack-sources "^1.4.0"
     worker-farm "^1.7.0"
 
-terser@^4.1.2:
-  version "4.6.13"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-4.6.13.tgz#e879a7364a5e0db52ba4891ecde007422c56a916"
-  integrity sha512-wMvqukYgVpQlymbnNbabVZbtM6PN63AzqexpwJL8tbh/mRT9LE5o+ruVduAGL7D6Fpjl+Q+06U5I9Ul82odAhw==
-  dependencies:
-    commander "^2.20.0"
-    source-map "~0.6.1"
-    source-map-support "~0.5.12"
-
-terser@^4.6.3:
-  version "4.8.0"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-4.8.0.tgz#63056343d7c70bb29f3af665865a46fe03a0df17"
-  integrity sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==
+terser@^4.1.2, terser@^4.6.3:
+  version "4.8.1"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-4.8.1.tgz#a00e5634562de2239fd404c649051bf6fc21144f"
+  integrity sha512-4GnLC0x667eJG0ewJTa6z/yXrbLGv80D9Ru6HIpCQmO+Q4PfEtBFi0ObSckqwL6VyQv/7ENJieXHo2ANmdQwgw==
   dependencies:
     commander "^2.20.0"
     source-map "~0.6.1"
@@ -15924,6 +15897,11 @@ tr46@^2.0.2:
   dependencies:
     punycode "^2.1.1"
 
+tr46@~0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
+  integrity sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==
+
 traverse-chain@~0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/traverse-chain/-/traverse-chain-0.1.0.tgz#61dbc2d53b69ff6091a12a168fd7d433107e40f1"
@@ -16655,6 +16633,11 @@ web-streams-polyfill@^3.1.1:
   resolved "https://registry.yarnpkg.com/web-streams-polyfill/-/web-streams-polyfill-3.1.1.tgz#1516f2d4ea8f1bdbfed15eb65cb2df87098c8364"
   integrity sha512-Czi3fG883e96T4DLEPRvufrF2ydhOOW1+1a6c3gNjH2aIh50DNFBdfwh2AKoOf1rXvpvavAoA11Qdq9+BKjE0Q==
 
+webidl-conversions@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
+  integrity sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==
+
 webidl-conversions@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
@@ -16914,6 +16897,14 @@ whatwg-url@8.1.0, whatwg-url@^8.0.0:
     tr46 "^2.0.2"
     webidl-conversions "^5.0.0"
 
+whatwg-url@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d"
+  integrity sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==
+  dependencies:
+    tr46 "~0.0.3"
+    webidl-conversions "^3.0.0"
+
 whatwg-url@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-7.0.0.tgz#fde926fa54a599f3adf82dff25a9f7be02dc6edd"