diff --git a/.eslintrc.js b/.eslintrc.js
index 941c2e3b23ca8..878dd08fda653 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -415,9 +415,7 @@ module.exports = {
       },
     },
     {
-      files: [
-        'packages/react-native-renderer/**/*.js',
-      ],
+      files: ['packages/react-native-renderer/**/*.js'],
       globals: {
         nativeFabricUIManager: 'readonly',
       },
@@ -456,6 +454,7 @@ module.exports = {
     $ReadOnlyArray: 'readonly',
     $ArrayBufferView: 'readonly',
     $Shape: 'readonly',
+    ReturnType: 'readonly',
     AnimationFrameID: 'readonly',
     // For Flow type annotation. Only `BigInt` is valid at runtime.
     bigint: 'readonly',
@@ -492,7 +491,6 @@ module.exports = {
     ReadableStreamController: 'readonly',
     RequestInfo: 'readonly',
     RequestOptions: 'readonly',
-    ResponseState: 'readonly',
     StoreAsGlobal: 'readonly',
     symbol: 'readonly',
     SyntheticEvent: 'readonly',
diff --git a/README.md b/README.md
index 766c673306a86..b7a7f30f4cc71 100644
--- a/README.md
+++ b/README.md
@@ -6,7 +6,7 @@ React is a JavaScript library for building user interfaces.
 * **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).
+[Learn how to use React in your project](https://react.dev/learn).
 
 ## Installation
 
@@ -20,9 +20,9 @@ You can use React as a `<script>` tag from a [CDN](https://reactjs.org/docs/cdn-
 
 ## Documentation
 
-You can find the React documentation [on the website](https://reactjs.org/).  
+You can find the React documentation [on the website](https://react.dev/).  
 
-Check out the [Getting Started](https://reactjs.org/docs/getting-started.html) page for a quick overview.
+Check out the [Getting Started](https://react.dev/learn) page for a quick overview.
 
 The documentation is divided into several sections:
 
diff --git a/fixtures/flight/server/global.js b/fixtures/flight/server/global.js
index 16184287b1228..70ccb05ca83ac 100644
--- a/fixtures/flight/server/global.js
+++ b/fixtures/flight/server/global.js
@@ -138,11 +138,15 @@ app.all('/', async function (req, res, next) {
       // For HTML, we're a "client" emulator that runs the client code,
       // so we start by consuming the RSC payload. This needs a module
       // map that reverse engineers the client-side path to the SSR path.
-      const root = await createFromNodeStream(rscResponse, moduleMap);
+      const {root, formState} = await createFromNodeStream(
+        rscResponse,
+        moduleMap
+      );
       // Render it into HTML by resolving the client components
       res.set('Content-type', 'text/html');
       const {pipe} = renderToPipeableStream(root, {
         bootstrapScripts: mainJSChunks,
+        experimental_formState: formState,
       });
       pipe(res);
     } catch (e) {
diff --git a/fixtures/flight/server/region.js b/fixtures/flight/server/region.js
index 4beae03ff35ee..e89f113b7cad6 100644
--- a/fixtures/flight/server/region.js
+++ b/fixtures/flight/server/region.js
@@ -46,7 +46,7 @@ const {readFile} = require('fs').promises;
 
 const React = require('react');
 
-async function renderApp(res, returnValue) {
+async function renderApp(res, returnValue, formState) {
   const {renderToPipeableStream} = await import(
     'react-server-dom-webpack/server'
   );
@@ -93,13 +93,13 @@ async function renderApp(res, returnValue) {
     React.createElement(App),
   ];
   // For client-invoked server actions we refresh the tree and return a return value.
-  const payload = returnValue ? {returnValue, root} : root;
+  const payload = {root, returnValue, formState};
   const {pipe} = renderToPipeableStream(payload, moduleMap);
   pipe(res);
 }
 
 app.get('/', async function (req, res) {
-  await renderApp(res, null);
+  await renderApp(res, null, null);
 });
 
 app.post('/', bodyParser.text(), async function (req, res) {
@@ -108,6 +108,7 @@ app.post('/', bodyParser.text(), async function (req, res) {
     decodeReply,
     decodeReplyFromBusboy,
     decodeAction,
+    decodeFormState,
   } = await import('react-server-dom-webpack/server');
   const serverReference = req.get('rsc-action');
   if (serverReference) {
@@ -139,7 +140,7 @@ app.post('/', bodyParser.text(), async function (req, res) {
       // We handle the error on the client
     }
     // Refresh the client and return the value
-    renderApp(res, result);
+    renderApp(res, result, null);
   } else {
     // This is the progressive enhancement case
     const UndiciRequest = require('undici').Request;
@@ -153,12 +154,14 @@ app.post('/', bodyParser.text(), async function (req, res) {
     const action = await decodeAction(formData);
     try {
       // Wait for any mutations
-      await action();
+      const result = await action();
+      const formState = decodeFormState(result, formData);
+      renderApp(res, null, formState);
     } catch (x) {
       const {setServerState} = await import('../src/ServerState.js');
       setServerState('Error: ' + x.message);
+      renderApp(res, null, null);
     }
-    renderApp(res, null);
   }
 });
 
diff --git a/fixtures/flight/src/App.js b/fixtures/flight/src/App.js
index 201a55a43a208..7a14beb460def 100644
--- a/fixtures/flight/src/App.js
+++ b/fixtures/flight/src/App.js
@@ -10,8 +10,12 @@ const Counter3 = await(AsyncModule);
 import ShowMore from './ShowMore.js';
 import Button from './Button.js';
 import Form from './Form.js';
+import {Dynamic} from './Dynamic.js';
+import {Client} from './Client.js';
 
-import {like, greet} from './actions.js';
+import {Note} from './cjs/Note.js';
+
+import {like, greet, increment} from './actions.js';
 
 import {getServerState} from './ServerState.js';
 
@@ -28,9 +32,9 @@ export default async function App() {
       <body>
         <Container>
           <h1>{getServerState()}</h1>
-          <Counter />
-          <Counter2 />
-          <Counter3 />
+          <Counter incrementAction={increment} />
+          <Counter2 incrementAction={increment} />
+          <Counter3 incrementAction={increment} />
           <ul>
             {todos.map(todo => (
               <li key={todo.id}>{todo.text}</li>
@@ -43,6 +47,11 @@ export default async function App() {
           <div>
             <Button action={like}>Like</Button>
           </div>
+          <div>
+            loaded statically: <Dynamic />
+          </div>
+          <Client />
+          <Note />
         </Container>
       </body>
     </html>
diff --git a/fixtures/flight/src/Client.js b/fixtures/flight/src/Client.js
new file mode 100644
index 0000000000000..dccd250e24c7f
--- /dev/null
+++ b/fixtures/flight/src/Client.js
@@ -0,0 +1,21 @@
+'use client';
+
+import * as React from 'react';
+
+let LazyDynamic = React.lazy(() =>
+  import('./Dynamic.js').then(exp => ({default: exp.Dynamic}))
+);
+
+export function Client() {
+  const [loaded, load] = React.useReducer(() => true, false);
+
+  return loaded ? (
+    <div>
+      loaded dynamically: <LazyDynamic />
+    </div>
+  ) : (
+    <div>
+      <button onClick={load}>Load dynamic import Component</button>
+    </div>
+  );
+}
diff --git a/fixtures/flight/src/Counter.js b/fixtures/flight/src/Counter.js
index 8785424ca469f..5af74369a1eb8 100644
--- a/fixtures/flight/src/Counter.js
+++ b/fixtures/flight/src/Counter.js
@@ -1,14 +1,17 @@
 'use client';
 
 import * as React from 'react';
+import {experimental_useFormState as useFormState} from 'react-dom';
 
 import Container from './Container.js';
 
-export function Counter() {
-  const [count, setCount] = React.useState(0);
+export function Counter({incrementAction}) {
+  const [count, incrementFormAction] = useFormState(incrementAction, 0);
   return (
     <Container>
-      <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>
+      <form>
+        <button formAction={incrementFormAction}>Count: {count}</button>
+      </form>
     </Container>
   );
 }
diff --git a/fixtures/flight/src/Dynamic.js b/fixtures/flight/src/Dynamic.js
new file mode 100644
index 0000000000000..dac88887cfb53
--- /dev/null
+++ b/fixtures/flight/src/Dynamic.js
@@ -0,0 +1,12 @@
+'use client';
+
+import * as React from 'react';
+
+export function Dynamic() {
+  return (
+    <div>
+      This client component should be loaded in a single chunk even when it is
+      used as both a client reference and as a dynamic import.
+    </div>
+  );
+}
diff --git a/fixtures/flight/src/actions.js b/fixtures/flight/src/actions.js
index 3d26189979c2f..aa19871a9dcbb 100644
--- a/fixtures/flight/src/actions.js
+++ b/fixtures/flight/src/actions.js
@@ -18,3 +18,7 @@ export async function greet(formData) {
   }
   return 'Hi ' + name + '!';
 }
+
+export async function increment(n) {
+  return n + 1;
+}
diff --git a/fixtures/flight/src/cjs/Note.js b/fixtures/flight/src/cjs/Note.js
new file mode 100644
index 0000000000000..181b4b5dfb03e
--- /dev/null
+++ b/fixtures/flight/src/cjs/Note.js
@@ -0,0 +1,11 @@
+'use client';
+
+var React = require('react');
+
+function Note() {
+  return 'This component was exported on a commonJS module and imported into ESM as a named import.';
+}
+
+module.exports = {
+  Note,
+};
diff --git a/fixtures/flight/src/index.js b/fixtures/flight/src/index.js
index d75feee56ec36..dd5a6b02b7681 100644
--- a/fixtures/flight/src/index.js
+++ b/fixtures/flight/src/index.js
@@ -24,21 +24,33 @@ async function callServer(id, args) {
   return returnValue;
 }
 
-let data = createFromFetch(
-  fetch('/', {
-    headers: {
-      Accept: 'text/x-component',
-    },
-  }),
-  {
-    callServer,
-  }
-);
-
 function Shell({data}) {
-  const [root, setRoot] = useState(use(data));
+  const [root, setRoot] = useState(data);
   updateRoot = setRoot;
   return root;
 }
 
-ReactDOM.hydrateRoot(document, <Shell data={data} />);
+async function hydrateApp() {
+  const {root, returnValue, formState} = await createFromFetch(
+    fetch('/', {
+      headers: {
+        Accept: 'text/x-component',
+      },
+    }),
+    {
+      callServer,
+    }
+  );
+
+  ReactDOM.hydrateRoot(document, <Shell data={root} />, {
+    // TODO: This part doesn't actually work because the server only returns
+    // form state during the request that submitted the form. Which means it
+    // the state needs to be transported as part of the HTML stream. We intend
+    // to add a feature to Fizz for this, but for now it's up to the
+    // metaframework to implement correctly.
+    experimental_formState: formState,
+  });
+}
+
+// Remove this line to simulate MPA behavior
+hydrateApp();
diff --git a/fixtures/flight/yarn.lock b/fixtures/flight/yarn.lock
index 5fb49d7bf624d..89eeb091c7136 100644
--- a/fixtures/flight/yarn.lock
+++ b/fixtures/flight/yarn.lock
@@ -2690,17 +2690,17 @@
     fastq "^1.6.0"
 
 "@pmmmwh/react-refresh-webpack-plugin@^0.5.3":
-  version "0.5.7"
-  resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.7.tgz#58f8217ba70069cc6a73f5d7e05e85b458c150e2"
-  integrity sha512-bcKCAzF0DV2IIROp9ZHkRJa6O4jy7NlnHdWL3GmcUxYWNjLXkK5kfELELwEfSP5hXPfVL/qOGMAROuMQb9GG8Q==
+  version "0.5.11"
+  resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.11.tgz#7c2268cedaa0644d677e8c4f377bc8fb304f714a"
+  integrity sha512-7j/6vdTym0+qZ6u4XbSAxrWBGYSdCfTzySkj7WAFgDLmSyWlOrWvpyzxlFh5jtw9dn0oL/jtW+06XfFiisN3JQ==
   dependencies:
     ansi-html-community "^0.0.8"
     common-path-prefix "^3.0.0"
-    core-js-pure "^3.8.1"
+    core-js-pure "^3.23.3"
     error-stack-parser "^2.0.6"
     find-up "^5.0.0"
     html-entities "^2.1.0"
-    loader-utils "^2.0.0"
+    loader-utils "^2.0.4"
     schema-utils "^3.0.0"
     source-map "^0.7.3"
 
@@ -3002,7 +3002,7 @@
     expect "^28.0.0"
     pretty-format "^28.0.0"
 
-"@types/json-schema@*", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.6":
+"@types/json-schema@*", "@types/json-schema@^7.0.5":
   version "7.0.6"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.6.tgz#f4c7ec43e81b319a9815115031709f26987891f0"
   integrity sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw==
@@ -4050,10 +4050,10 @@ core-js-compat@^3.30.1, core-js-compat@^3.30.2:
   dependencies:
     browserslist "^4.21.5"
 
-core-js-pure@^3.8.1:
-  version "3.24.1"
-  resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.24.1.tgz#8839dde5da545521bf282feb7dc6d0b425f39fd3"
-  integrity sha512-r1nJk41QLLPyozHUUPmILCEMtMw24NG4oWK6RbsDdjzQgg9ZvrUsPBj1MnG0wXXp1DCDU6j+wUvEmBSrtRbLXg==
+core-js-pure@^3.23.3:
+  version "3.32.1"
+  resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.32.1.tgz#5775b88f9062885f67b6d7edce59984e89d276f3"
+  integrity sha512-f52QZwkFVDPf7UEQZGHKx6NYxsxmVGJe5DIvbzOdRMJlmT6yv0KDjR8rmy3ngr/t5wU54c7Sp/qIJH0ppbhVpQ==
 
 cosmiconfig@^6.0.0:
   version "6.0.0"
@@ -4582,11 +4582,11 @@ error-ex@^1.3.1:
     is-arrayish "^0.2.1"
 
 error-stack-parser@^2.0.6:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/error-stack-parser/-/error-stack-parser-2.0.6.tgz#5a99a707bd7a4c58a797902d48d82803ede6aad8"
-  integrity sha512-d51brTeqC+BHlwF0BhPtcYgF5nlzf9ZZ0ZIUQNZpc9ZB9qw5IJ2diTrBY9jlCJkTLITYPjmiX6OWCwH+fuyNgQ==
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/error-stack-parser/-/error-stack-parser-2.1.4.tgz#229cb01cdbfa84440bfa91876285b94680188286"
+  integrity sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==
   dependencies:
-    stackframe "^1.1.1"
+    stackframe "^1.3.4"
 
 es-abstract@^1.12.0:
   version "1.16.0"
@@ -4751,8 +4751,9 @@ fast-glob@^3.2.11, fast-glob@^3.2.9:
     micromatch "^4.0.4"
 
 fast-json-stable-stringify@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz#d5142c0caee6b1189f87d3a76111064f86c8bbf2"
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
+  integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
 
 fast-levenshtein@~2.0.4:
   version "2.0.6"
@@ -5074,9 +5075,9 @@ html-encoding-sniffer@^2.0.1:
     whatwg-encoding "^1.0.5"
 
 html-entities@^2.1.0:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-2.3.3.tgz#117d7626bece327fc8baace8868fa6f5ef856e46"
-  integrity sha512-DV5Ln36z34NNTDgnz0EWGBLZENelNAtkiFA4kyNOG2tDI6Mz1uSWiq1wAKdyjnJwyDiDO7Fa2SO1CTxPXL8VxA==
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-2.4.0.tgz#edd0cee70402584c8c76cc2c0556db09d1f45061"
+  integrity sha512-igBTJcNNNhvZFRtm8uA6xMY6xYleeDwn3PeBCkDz7tHttv4F2hsDI2aPgNERWzvRcNYHNT3ymRaQzllmXj4YsQ==
 
 html-escaper@^2.0.0:
   version "2.0.2"
@@ -5958,17 +5959,23 @@ json-parse-even-better-errors@^2.3.0, json-parse-even-better-errors@^2.3.1:
 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-traverse@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz#ae7bcb3656ab77a73ba5c49bf654f38e6b6860e2"
   integrity sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==
 
-json5@^2.1.0, json5@^2.1.2, json5@^2.2.1:
+json5@^2.1.0, json5@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.1.tgz#655d50ed1e6f95ad1a3caababd2b0efda10b395c"
   integrity sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==
 
+json5@^2.1.2:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
+  integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
+
 jsonfile@^6.0.1:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-6.1.0.tgz#bc55b2634793c679ec6403094eb13698a6ec0aae"
@@ -6017,7 +6024,7 @@ loader-runner@^4.2.0:
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.3.0.tgz#c1b4a163b99f614830353b16755e7149ac2314e1"
   integrity sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==
 
-loader-utils@^2.0.0:
+loader-utils@^2.0.0, loader-utils@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.4.tgz#8b5cb38b5c34a9a018ee1fc0e6a066d1dfcc528c"
   integrity sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==
@@ -7260,7 +7267,12 @@ pstree.remy@^1.1.8:
   resolved "https://registry.yarnpkg.com/pstree.remy/-/pstree.remy-1.1.8.tgz#c242224f4a67c21f686839bbdb4ac282b8373d3a"
   integrity sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==
 
-punycode@^2.1.0, punycode@^2.1.1:
+punycode@^2.1.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.0.tgz#f67fa67c94da8f4d0cfff981aee4118064199b8f"
+  integrity sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==
+
+punycode@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
 
@@ -7688,11 +7700,11 @@ schema-utils@^2.6.5:
     ajv-keywords "^3.5.2"
 
 schema-utils@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.0.0.tgz#67502f6aa2b66a2d4032b4279a2944978a0913ef"
-  integrity sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.3.0.tgz#f50a88877c3c01652a15b622ae9e9795df7a60fe"
+  integrity sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==
   dependencies:
-    "@types/json-schema" "^7.0.6"
+    "@types/json-schema" "^7.0.8"
     ajv "^6.12.5"
     ajv-keywords "^3.5.2"
 
@@ -7862,9 +7874,9 @@ source-map@^0.5.0:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
 
 source-map@^0.7.3:
-  version "0.7.3"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
-  integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.4.tgz#a9bbe705c9d8846f4e08ff6765acf0f1b0898656"
+  integrity sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==
 
 spawn-command@^0.0.2-1:
   version "0.0.2-1"
@@ -7886,10 +7898,10 @@ stack-utils@^2.0.3:
   dependencies:
     escape-string-regexp "^2.0.0"
 
-stackframe@^1.1.1:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-1.2.0.tgz#52429492d63c62eb989804c11552e3d22e779303"
-  integrity sha512-GrdeshiRmS1YLMYgzF16olf2jJ/IzxXY9lhKOskuVziubpTYcYqyOwYeJKzQkwy7uN0fYSsbsC4RQaXf9LCrYA==
+stackframe@^1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-1.3.4.tgz#b881a004c8c149a5e8efef37d51b16e412943310"
+  integrity sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw==
 
 statuses@2.0.1:
   version "2.0.1"
@@ -8379,8 +8391,9 @@ update-browserslist-db@^1.0.5:
     picocolors "^1.0.0"
 
 uri-js@^4.2.2:
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.2.2.tgz#94c540e1ff772956e2299507c010aea6c8838eb0"
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"
+  integrity sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==
   dependencies:
     punycode "^2.1.0"
 
diff --git a/package.json b/package.json
index 494097f3dbac5..77f706ed994df 100644
--- a/package.json
+++ b/package.json
@@ -64,14 +64,14 @@
     "eslint-plugin-react-internal": "link:./scripts/eslint-rules",
     "fbjs-scripts": "^3.0.1",
     "filesize": "^6.0.1",
-    "flow-bin": "^0.209.0",
-    "flow-remove-types": "^2.209.0",
+    "flow-bin": "^0.217.0",
+    "flow-remove-types": "^2.217.0",
     "glob": "^7.1.6",
     "glob-stream": "^6.1.0",
     "google-closure-compiler": "^20230206.0.0",
     "gzip-size": "^5.1.1",
-    "hermes-eslint": "^0.9.0",
-    "hermes-parser": "^0.9.0",
+    "hermes-eslint": "^0.15.1",
+    "hermes-parser": "^0.15.1",
     "jest": "^29.4.2",
     "jest-cli": "^29.4.2",
     "jest-diff": "^29.4.2",
@@ -97,7 +97,6 @@
     "tmp": "^0.1.0",
     "typescript": "^3.7.5",
     "web-streams-polyfill": "^3.1.1",
-    "webpack": "^4.41.2",
     "yargs": "^15.3.1"
   },
   "devEngines": {
diff --git a/packages/react-art/src/ReactFiberConfigART.js b/packages/react-art/src/ReactFiberConfigART.js
index 89c5489ebbca6..d0ae53019cac6 100644
--- a/packages/react-art/src/ReactFiberConfigART.js
+++ b/packages/react-art/src/ReactFiberConfigART.js
@@ -15,10 +15,8 @@ import {DefaultEventPriority} from 'react-reconciler/src/ReactEventPriorities';
 const pooledTransform = new Transform();
 
 const NO_CONTEXT = {};
-const UPDATE_SIGNAL = {};
 if (__DEV__) {
   Object.freeze(NO_CONTEXT);
-  Object.freeze(UPDATE_SIGNAL);
 }
 
 /** Helper Methods */
@@ -312,10 +310,6 @@ export function prepareForCommit() {
   return null;
 }
 
-export function prepareUpdate(domElement, type, oldProps, newProps) {
-  return UPDATE_SIGNAL;
-}
-
 export function resetAfterCommit() {
   // Noop
 }
diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js
index 522a11e6d9da8..cfbe30e671c78 100644
--- a/packages/react-client/src/ReactFlightClient.js
+++ b/packages/react-client/src/ReactFlightClient.js
@@ -17,11 +17,16 @@ import type {
   StringDecoder,
 } from './ReactFlightClientConfig';
 
-import type {HintModel} from 'react-server/src/ReactFlightServerConfig';
+import type {
+  HintCode,
+  HintModel,
+} from 'react-server/src/ReactFlightServerConfig';
 
 import type {CallServerCallback} from './ReactFlightReplyClient';
 
-import {enableBinaryFlight} from 'shared/ReactFeatureFlags';
+import type {Postpone} from 'react/src/ReactPostpone';
+
+import {enableBinaryFlight, enablePostpone} from 'shared/ReactFeatureFlags';
 
 import {
   resolveClientReference,
@@ -31,15 +36,15 @@ import {
   readPartialStringChunk,
   readFinalStringChunk,
   createStringDecoder,
-  usedWithSSR,
 } from './ReactFlightClientConfig';
 
-import {
-  encodeFormAction,
-  knownServerReferences,
-} from './ReactFlightReplyClient';
+import {registerServerReference} from './ReactFlightReplyClient';
 
-import {REACT_LAZY_TYPE, REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';
+import {
+  REACT_LAZY_TYPE,
+  REACT_ELEMENT_TYPE,
+  REACT_POSTPONE_TYPE,
+} from 'shared/ReactSymbols';
 
 import {getOrCreateServerContext} from 'shared/ReactServerContextRegistry';
 
@@ -226,7 +231,7 @@ function createBlockedChunk<T>(response: Response): BlockedChunk<T> {
 
 function createErrorChunk<T>(
   response: Response,
-  error: ErrorWithDigest,
+  error: Error | Postpone,
 ): ErroredChunk<T> {
   // $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
   return new Chunk(ERRORED, null, error, response);
@@ -539,12 +544,7 @@ function createServerReferenceProxy<A: Iterable<any>, T>(
       return callServer(metaData.id, bound.concat(args));
     });
   };
-  // Expose encoder for use by SSR.
-  if (usedWithSSR) {
-    // Only expose this in builds that would actually use it. Not needed on the client.
-    (proxy: any).$$FORM_ACTION = encodeFormAction;
-  }
-  knownServerReferences.set(proxy, metaData);
+  registerServerReference(proxy, metaData);
   return proxy;
 }
 
@@ -867,12 +867,63 @@ function resolveErrorDev(
   }
 }
 
-function resolveHint(
+function resolvePostponeProd(response: Response, id: number): void {
+  if (__DEV__) {
+    // These errors should never make it into a build so we don't need to encode them in codes.json
+    // eslint-disable-next-line react-internal/prod-error-codes
+    throw new Error(
+      'resolvePostponeProd should never be called in development mode. Use resolvePostponeDev instead. This is a bug in React.',
+    );
+  }
+  const error = new Error(
+    'A Server Component was postponed. The reason is omitted in production' +
+      ' builds to avoid leaking sensitive details.',
+  );
+  const postponeInstance: Postpone = (error: any);
+  postponeInstance.$$typeof = REACT_POSTPONE_TYPE;
+  postponeInstance.stack = 'Error: ' + error.message;
+  const chunks = response._chunks;
+  const chunk = chunks.get(id);
+  if (!chunk) {
+    chunks.set(id, createErrorChunk(response, postponeInstance));
+  } else {
+    triggerErrorOnChunk(chunk, postponeInstance);
+  }
+}
+
+function resolvePostponeDev(
   response: Response,
-  code: string,
+  id: number,
+  reason: string,
+  stack: string,
+): void {
+  if (!__DEV__) {
+    // These errors should never make it into a build so we don't need to encode them in codes.json
+    // eslint-disable-next-line react-internal/prod-error-codes
+    throw new Error(
+      'resolvePostponeDev should never be called in production mode. Use resolvePostponeProd instead. This is a bug in React.',
+    );
+  }
+  // eslint-disable-next-line react-internal/prod-error-codes
+  const error = new Error(reason || '');
+  const postponeInstance: Postpone = (error: any);
+  postponeInstance.$$typeof = REACT_POSTPONE_TYPE;
+  postponeInstance.stack = stack;
+  const chunks = response._chunks;
+  const chunk = chunks.get(id);
+  if (!chunk) {
+    chunks.set(id, createErrorChunk(response, postponeInstance));
+  } else {
+    triggerErrorOnChunk(chunk, postponeInstance);
+  }
+}
+
+function resolveHint<Code: HintCode>(
+  response: Response,
+  code: Code,
   model: UninitializedModel,
 ): void {
-  const hintModel: HintModel = parseModel(response, model);
+  const hintModel: HintModel<Code> = parseModel(response, model);
   dispatchHint(code, hintModel);
 }
 
@@ -996,7 +1047,7 @@ function processFullRow(
       return;
     }
     case 72 /* "H" */: {
-      const code = row[0];
+      const code: HintCode = (row[0]: any);
       resolveHint(response, code, row.slice(1));
       return;
     }
@@ -1019,6 +1070,23 @@ function processFullRow(
       resolveText(response, id, row);
       return;
     }
+    case 80 /* "P" */: {
+      if (enablePostpone) {
+        if (__DEV__) {
+          const postponeInfo = JSON.parse(row);
+          resolvePostponeDev(
+            response,
+            id,
+            postponeInfo.reason,
+            postponeInfo.stack,
+          );
+        } else {
+          resolvePostponeProd(response, id);
+        }
+        return;
+      }
+    }
+    // Fallthrough
     default: /* """ "{" "[" "t" "f" "n" "0" - "9" */ {
       // We assume anything else is JSON.
       resolveModel(response, id, row);
diff --git a/packages/react-client/src/ReactFlightReplyClient.js b/packages/react-client/src/ReactFlightReplyClient.js
index 13820c748291a..57989237481ed 100644
--- a/packages/react-client/src/ReactFlightReplyClient.js
+++ b/packages/react-client/src/ReactFlightReplyClient.js
@@ -7,7 +7,13 @@
  * @flow
  */
 
-import type {Thenable, ReactCustomFormAction} from 'shared/ReactTypes';
+import type {
+  Thenable,
+  PendingThenable,
+  FulfilledThenable,
+  RejectedThenable,
+  ReactCustomFormAction,
+} from 'shared/ReactTypes';
 
 import {
   REACT_ELEMENT_TYPE,
@@ -23,10 +29,6 @@ import {
 } from 'shared/ReactSerializationErrors';
 
 import isArray from 'shared/isArray';
-import type {
-  FulfilledThenable,
-  RejectedThenable,
-} from '../../shared/ReactTypes';
 
 import {usedWithSSR} from './ReactFlightClientConfig';
 
@@ -44,7 +46,7 @@ export type CallServerCallback = <A, T>(id: any, args: A) => Promise<T>;
 
 export type ServerReferenceId = any;
 
-export const knownServerReferences: WeakMap<
+const knownServerReferences: WeakMap<
   Function,
   {id: ServerReferenceId, bound: null | Thenable<Array<any>>},
 > = new WeakMap();
@@ -488,6 +490,109 @@ export function encodeFormAction(
   };
 }
 
+function isSignatureEqual(
+  this: any => Promise<any>,
+  referenceId: ServerReferenceId,
+  numberOfBoundArgs: number,
+): boolean {
+  const reference = knownServerReferences.get(this);
+  if (!reference) {
+    throw new Error(
+      'Tried to encode a Server Action from a different instance than the encoder is from. ' +
+        'This is a bug in React.',
+    );
+  }
+  if (reference.id !== referenceId) {
+    // These are different functions.
+    return false;
+  }
+  // Now check if the number of bound arguments is the same.
+  const boundPromise = reference.bound;
+  if (boundPromise === null) {
+    // No bound arguments.
+    return numberOfBoundArgs === 0;
+  }
+  // Unwrap the bound arguments array by suspending, if necessary. As with
+  // encodeFormData, this means isSignatureEqual can only be called while React
+  // is rendering.
+  switch (boundPromise.status) {
+    case 'fulfilled': {
+      const boundArgs = boundPromise.value;
+      return boundArgs.length === numberOfBoundArgs;
+    }
+    case 'pending': {
+      throw boundPromise;
+    }
+    case 'rejected': {
+      throw boundPromise.reason;
+    }
+    default: {
+      if (typeof boundPromise.status === 'string') {
+        // Only instrument the thenable if the status if not defined.
+      } else {
+        const pendingThenable: PendingThenable<Array<any>> =
+          (boundPromise: any);
+        pendingThenable.status = 'pending';
+        pendingThenable.then(
+          (boundArgs: Array<any>) => {
+            const fulfilledThenable: FulfilledThenable<Array<any>> =
+              (boundPromise: any);
+            fulfilledThenable.status = 'fulfilled';
+            fulfilledThenable.value = boundArgs;
+          },
+          (error: mixed) => {
+            const rejectedThenable: RejectedThenable<number> =
+              (boundPromise: any);
+            rejectedThenable.status = 'rejected';
+            rejectedThenable.reason = error;
+          },
+        );
+      }
+      throw boundPromise;
+    }
+  }
+}
+
+export function registerServerReference(
+  proxy: any,
+  reference: {id: ServerReferenceId, bound: null | Thenable<Array<any>>},
+) {
+  // Expose encoder for use by SSR, as well as a special bind that can be used to
+  // keep server capabilities.
+  if (usedWithSSR) {
+    // Only expose this in builds that would actually use it. Not needed on the client.
+    Object.defineProperties((proxy: any), {
+      $$FORM_ACTION: {value: encodeFormAction},
+      $$IS_SIGNATURE_EQUAL: {value: isSignatureEqual},
+      bind: {value: bind},
+    });
+  }
+  knownServerReferences.set(proxy, reference);
+}
+
+// $FlowFixMe[method-unbinding]
+const FunctionBind = Function.prototype.bind;
+// $FlowFixMe[method-unbinding]
+const ArraySlice = Array.prototype.slice;
+function bind(this: Function) {
+  // $FlowFixMe[unsupported-syntax]
+  const newFn = FunctionBind.apply(this, arguments);
+  const reference = knownServerReferences.get(this);
+  if (reference) {
+    const args = ArraySlice.call(arguments, 1);
+    let boundPromise = null;
+    if (reference.bound !== null) {
+      boundPromise = Promise.resolve((reference.bound: any)).then(boundArgs =>
+        boundArgs.concat(args),
+      );
+    } else {
+      boundPromise = Promise.resolve(args);
+    }
+    registerServerReference(newFn, {id: reference.id, bound: boundPromise});
+  }
+  return newFn;
+}
+
 export function createServerReference<A: Iterable<any>, T>(
   id: ServerReferenceId,
   callServer: CallServerCallback,
@@ -497,11 +602,6 @@ export function createServerReference<A: Iterable<any>, T>(
     const args = Array.prototype.slice.call(arguments);
     return callServer(id, args);
   };
-  // Expose encoder for use by SSR.
-  if (usedWithSSR) {
-    // Only expose this in builds that would actually use it. Not needed on the client.
-    (proxy: any).$$FORM_ACTION = encodeFormAction;
-  }
-  knownServerReferences.set(proxy, {id: id, bound: null});
+  registerServerReference(proxy, {id, bound: null});
   return proxy;
 }
diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-browser-esm.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-browser-esm.js
new file mode 100644
index 0000000000000..53058d0d18841
--- /dev/null
+++ b/packages/react-client/src/forks/ReactFlightClientConfig.dom-browser-esm.js
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from 'react-client/src/ReactFlightClientConfigBrowser';
+export * from 'react-server-dom-esm/src/ReactFlightClientConfigESMBundler';
+export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
+export const usedWithSSR = false;
diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-legacy.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-legacy.js
index 212290670bd57..0ad00d57cdac4 100644
--- a/packages/react-client/src/forks/ReactFlightClientConfig.dom-legacy.js
+++ b/packages/react-client/src/forks/ReactFlightClientConfig.dom-legacy.js
@@ -8,6 +8,16 @@
  */
 
 export * from 'react-client/src/ReactFlightClientConfigBrowser';
-export * from 'react-server-dom-webpack/src/ReactFlightClientConfigWebpackBundler';
 export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
+
+export type Response = any;
+export opaque type SSRManifest = mixed;
+export opaque type ServerManifest = mixed;
+export opaque type ServerReferenceId = string;
+export opaque type ClientReferenceMetadata = mixed;
+export opaque type ClientReference<T> = mixed; // eslint-disable-line no-unused-vars
+export const resolveClientReference: any = null;
+export const resolveServerReference: any = null;
+export const preloadModule: any = null;
+export const requireModule: any = null;
 export const usedWithSSR = true;
diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-esm.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-esm.js
index a4a68b8773170..8390c4c06b439 100644
--- a/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-esm.js
+++ b/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-esm.js
@@ -7,7 +7,6 @@
  * @flow
  */
 
-// This should really have a Node and a Browser fork but to avoid too many configs we limit this to build the same for both
 export * from 'react-client/src/ReactFlightClientConfigBrowser';
 export * from 'react-server-dom-esm/src/ReactFlightClientConfigESMBundler';
 export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index 12edb27766761..5a649792c030b 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.28.0",
+  "version": "4.28.4",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-extensions/build.js b/packages/react-devtools-extensions/build.js
index 11a62474779e9..4d95af2a0a1aa 100644
--- a/packages/react-devtools-extensions/build.js
+++ b/packages/react-devtools-extensions/build.js
@@ -52,16 +52,17 @@ const preProcess = async (destinationPath, tempPath) => {
   await ensureDir(tempPath); // Create temp dir for this new build
 };
 
-const build = async (tempPath, manifestPath) => {
+const build = async (tempPath, manifestPath, envExtension = {}) => {
   const binPath = join(tempPath, 'bin');
   const zipPath = join(tempPath, 'zip');
+  const mergedEnv = {...process.env, ...envExtension};
 
   const webpackPath = join(__dirname, 'node_modules', '.bin', 'webpack');
   execSync(
     `${webpackPath} --config webpack.config.js --output-path ${binPath}`,
     {
       cwd: __dirname,
-      env: process.env,
+      env: mergedEnv,
       stdio: 'inherit',
     },
   );
@@ -69,7 +70,7 @@ const build = async (tempPath, manifestPath) => {
     `${webpackPath} --config webpack.backend.js --output-path ${binPath}`,
     {
       cwd: __dirname,
-      env: process.env,
+      env: mergedEnv,
       stdio: 'inherit',
     },
   );
@@ -132,16 +133,32 @@ const postProcess = async (tempPath, destinationPath) => {
   await remove(tempPath); // Clean up temp directory and files
 };
 
+const SUPPORTED_BUILDS = ['chrome', 'firefox', 'edge'];
+
 const main = async buildId => {
+  if (!SUPPORTED_BUILDS.includes(buildId)) {
+    throw new Error(
+      `Unexpected build id - "${buildId}". Use one of ${JSON.stringify(
+        SUPPORTED_BUILDS,
+      )}.`,
+    );
+  }
+
   const root = join(__dirname, buildId);
   const manifestPath = join(root, 'manifest.json');
   const destinationPath = join(root, 'build');
 
+  const envExtension = {
+    IS_CHROME: buildId === 'chrome',
+    IS_FIREFOX: buildId === 'firefox',
+    IS_EDGE: buildId === 'edge',
+  };
+
   try {
     const tempPath = join(__dirname, 'build', buildId);
     await ensureLocalBuild();
     await preProcess(destinationPath, tempPath);
-    await build(tempPath, manifestPath);
+    await build(tempPath, manifestPath, envExtension);
 
     const builtUnpackedPath = join(destinationPath, 'unpacked');
     await postProcess(tempPath, destinationPath);
diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
index cb8398e848faf..151cf1fe22030 100644
--- a/packages/react-devtools-extensions/chrome/manifest.json
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 3,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "4.28.0",
-  "version_name": "4.28.0",
+  "version": "4.28.4",
+  "version_name": "4.28.4",
   "minimum_chrome_version": "102",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/edge/build.js b/packages/react-devtools-extensions/edge/build.js
index 21fa6e5383c22..246f49e6897f4 100644
--- a/packages/react-devtools-extensions/edge/build.js
+++ b/packages/react-devtools-extensions/edge/build.js
@@ -6,6 +6,7 @@ const chalk = require('chalk');
 const {execSync} = require('child_process');
 const {join} = require('path');
 const {argv} = require('yargs');
+
 const build = require('../build');
 
 const main = async () => {
@@ -15,15 +16,7 @@ const main = async () => {
 
   const cwd = join(__dirname, 'build');
   if (crx) {
-    const crxPath = join(
-      __dirname,
-      '..',
-      '..',
-      '..',
-      'node_modules',
-      '.bin',
-      'crx'
-    );
+    const crxPath = join(__dirname, '..', 'node_modules', '.bin', 'crx');
 
     execSync(`${crxPath} pack ./unpacked -o ReactDevTools.crx`, {
       cwd,
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
index 6390b8e6f4b76..cc65806200fc2 100644
--- a/packages/react-devtools-extensions/edge/manifest.json
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 3,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
-  "version": "4.28.0",
-  "version_name": "4.28.0",
+  "version": "4.28.4",
+  "version_name": "4.28.4",
   "minimum_chrome_version": "102",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index 50289ec468d6f..4f5a9894b8e64 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -2,11 +2,11 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Firefox Developer Tools.",
-  "version": "4.28.0",
+  "version": "4.28.4",
   "applications": {
     "gecko": {
       "id": "@react-devtools",
-      "strict_min_version": "55.0"
+      "strict_min_version": "102.0"
     }
   },
   "icons": {
@@ -41,7 +41,9 @@
     "file:///*",
     "http://*/*",
     "https://*/*",
-    "clipboardWrite"
+    "clipboardWrite",
+    "scripting",
+    "devtools"
   ],
   "content_scripts": [
     {
diff --git a/packages/react-devtools-extensions/panel.html b/packages/react-devtools-extensions/panel.html
index 60fd1bdf13ff2..ccbb16ad25cae 100644
--- a/packages/react-devtools-extensions/panel.html
+++ b/packages/react-devtools-extensions/panel.html
@@ -22,11 +22,44 @@
                 right: 0;
                 bottom: 0;
             }
+            .no-react-disclaimer {
+              margin: 16px;
+              font-family: Courier, monospace, serif;
+              font-size: 16px;
+              animation: fadeIn .5s ease-in-out forwards;
+            }
+
+            @keyframes fadeIn {
+              0% {
+                opacity: 0;
+              }
+              100% {
+                opacity: 1;
+              }
+            }
+
+            @media (prefers-color-scheme: dark) {
+              :root {
+                color-scheme: dark;
+              }
+
+              @supports (-moz-appearance:none) {
+                :root {
+                  background: black;
+                }
+
+                body {
+                  color: white;
+                }
+              }
+            }
         </style>
     </head>
     <body>
         <!-- main react mount point -->
-        <div id="container">Unable to find React on the page.</div>
+        <div id="container">
+          <h1 class="no-react-disclaimer">Looks like this page doesn't have React, or it hasn't been loaded yet.</h1>
+        </div>
         <script src="./build/panel.js"></script>
     </body>
 </html>
diff --git a/packages/react-devtools-extensions/popups/shared.css b/packages/react-devtools-extensions/popups/shared.css
index cd3d35d005897..731a2036c374b 100644
--- a/packages/react-devtools-extensions/popups/shared.css
+++ b/packages/react-devtools-extensions/popups/shared.css
@@ -4,4 +4,20 @@ html, body {
 
 body {
   margin: 8px;
-}
\ No newline at end of file
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    color-scheme: dark;
+  }
+
+  @supports (-moz-appearance:none) {
+    :root {
+      background: black;
+    }
+
+    body {
+      color: white;
+    }
+  }
+}
diff --git a/packages/react-devtools-extensions/src/background.js b/packages/react-devtools-extensions/src/background.js
deleted file mode 100644
index 302f55ae8e531..0000000000000
--- a/packages/react-devtools-extensions/src/background.js
+++ /dev/null
@@ -1,245 +0,0 @@
-/* global chrome */
-
-'use strict';
-
-import {IS_FIREFOX, EXTENSION_CONTAINED_VERSIONS} from './utils';
-
-const ports = {};
-
-async function dynamicallyInjectContentScripts() {
-  const contentScriptsToInject = [
-    {
-      id: 'hook',
-      matches: ['<all_urls>'],
-      js: ['build/installHook.js'],
-      runAt: 'document_start',
-      world: chrome.scripting.ExecutionWorld.MAIN,
-    },
-    {
-      id: 'renderer',
-      matches: ['<all_urls>'],
-      js: ['build/renderer.js'],
-      runAt: 'document_start',
-      world: chrome.scripting.ExecutionWorld.MAIN,
-    },
-  ];
-
-  try {
-    // For some reason dynamically injected scripts might be already registered
-    // Registering them again will fail, which will result into
-    // __REACT_DEVTOOLS_GLOBAL_HOOK__ hook not being injected
-
-    // Not specifying ids, because Chrome throws an error
-    // if id of non-injected script is provided
-    await chrome.scripting.unregisterContentScripts();
-
-    // equivalent logic for Firefox is in prepareInjection.js
-    // Manifest V3 method of injecting content script
-    // TODO(hoxyq): migrate Firefox to V3 manifests
-    // Note: the "world" option in registerContentScripts is only available in Chrome v102+
-    // It's critical since it allows us to directly run scripts on the "main" world on the page
-    // "document_start" allows it to run before the page's scripts
-    // so the hook can be detected by react reconciler
-    await chrome.scripting.registerContentScripts(contentScriptsToInject);
-  } catch (error) {
-    console.error(error);
-  }
-}
-
-if (!IS_FIREFOX) {
-  dynamicallyInjectContentScripts();
-}
-
-chrome.runtime.onConnect.addListener(function (port) {
-  let tab = null;
-  let name = null;
-  if (isNumeric(port.name)) {
-    tab = port.name;
-    name = 'devtools';
-    installProxy(+port.name);
-  } else {
-    tab = port.sender.tab.id;
-    name = 'content-script';
-  }
-
-  if (!ports[tab]) {
-    ports[tab] = {
-      devtools: null,
-      'content-script': null,
-    };
-  }
-  ports[tab][name] = port;
-
-  if (ports[tab].devtools && ports[tab]['content-script']) {
-    doublePipe(ports[tab].devtools, ports[tab]['content-script'], tab);
-  }
-});
-
-function isNumeric(str: string): boolean {
-  return +str + '' === str;
-}
-
-function installProxy(tabId: number) {
-  if (IS_FIREFOX) {
-    chrome.tabs.executeScript(tabId, {file: '/build/proxy.js'}, function () {});
-  } else {
-    chrome.scripting.executeScript({
-      target: {tabId: tabId},
-      files: ['/build/proxy.js'],
-    });
-  }
-}
-
-function doublePipe(one, two, tabId) {
-  one.onMessage.addListener(lOne);
-  function lOne(message) {
-    try {
-      two.postMessage(message);
-    } catch (e) {
-      if (__DEV__) {
-        console.log(`Broken pipe ${tabId}: `, e);
-      }
-      shutdown();
-    }
-  }
-  two.onMessage.addListener(lTwo);
-  function lTwo(message) {
-    try {
-      one.postMessage(message);
-    } catch (e) {
-      if (__DEV__) {
-        console.log(`Broken pipe ${tabId}: `, e);
-      }
-      shutdown();
-    }
-  }
-  function shutdown() {
-    one.onMessage.removeListener(lOne);
-    two.onMessage.removeListener(lTwo);
-    one.disconnect();
-    two.disconnect();
-    // clean up so that we can rebuild the double pipe if the page is reloaded
-    ports[tabId] = null;
-  }
-  one.onDisconnect.addListener(shutdown);
-  two.onDisconnect.addListener(shutdown);
-}
-
-function setIconAndPopup(reactBuildType, tabId) {
-  const action = IS_FIREFOX ? chrome.browserAction : chrome.action;
-  action.setIcon({
-    tabId: tabId,
-    path: {
-      '16': chrome.runtime.getURL(`icons/16-${reactBuildType}.png`),
-      '32': chrome.runtime.getURL(`icons/32-${reactBuildType}.png`),
-      '48': chrome.runtime.getURL(`icons/48-${reactBuildType}.png`),
-      '128': chrome.runtime.getURL(`icons/128-${reactBuildType}.png`),
-    },
-  });
-  action.setPopup({
-    tabId: tabId,
-    popup: chrome.runtime.getURL(`popups/${reactBuildType}.html`),
-  });
-}
-
-function isRestrictedBrowserPage(url) {
-  return !url || new URL(url).protocol === 'chrome:';
-}
-
-function checkAndHandleRestrictedPageIfSo(tab) {
-  if (tab && isRestrictedBrowserPage(tab.url)) {
-    setIconAndPopup('restricted', tab.id);
-  }
-}
-
-// update popup page of any existing open tabs, if they are restricted browser pages.
-// we can't update for any other types (prod,dev,outdated etc)
-// as the content script needs to be injected at document_start itself for those kinds of detection
-// TODO: Show a different popup page(to reload current page probably) for old tabs, opened before the extension is installed
-if (!IS_FIREFOX) {
-  chrome.tabs.query({}, tabs => tabs.forEach(checkAndHandleRestrictedPageIfSo));
-  chrome.tabs.onCreated.addListener((tabId, changeInfo, tab) =>
-    checkAndHandleRestrictedPageIfSo(tab),
-  );
-}
-
-// Listen to URL changes on the active tab and update the DevTools icon.
-chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
-  if (IS_FIREFOX) {
-    // We don't properly detect protected URLs in Firefox at the moment.
-    // However we can reset the DevTools icon to its loading state when the URL changes.
-    // It will be updated to the correct icon by the onMessage callback below.
-    if (tab.active && changeInfo.status === 'loading') {
-      setIconAndPopup('disabled', tabId);
-    }
-  } else {
-    // Don't reset the icon to the loading state for Chrome or Edge.
-    // The onUpdated callback fires more frequently for these browsers,
-    // often after onMessage has been called.
-    checkAndHandleRestrictedPageIfSo(tab);
-  }
-});
-
-chrome.runtime.onMessage.addListener((request, sender) => {
-  const tab = sender.tab;
-  // sender.tab.id from content script points to the tab that injected the content script
-  if (tab) {
-    const id = tab.id;
-    // This is sent from the hook content script.
-    // It tells us a renderer has attached.
-    if (request.hasDetectedReact) {
-      setIconAndPopup(request.reactBuildType, id);
-    } else {
-      const devtools = ports[id]?.devtools;
-      switch (request.payload?.type) {
-        case 'fetch-file-with-cache-complete':
-        case 'fetch-file-with-cache-error':
-          // Forward the result of fetch-in-page requests back to the extension.
-          devtools?.postMessage(request);
-          break;
-        // This is sent from the backend manager running on a page
-        case 'react-devtools-required-backends':
-          const backendsToDownload = [];
-          request.payload.versions.forEach(version => {
-            if (EXTENSION_CONTAINED_VERSIONS.includes(version)) {
-              if (!IS_FIREFOX) {
-                // equivalent logic for Firefox is in prepareInjection.js
-                chrome.scripting.executeScript({
-                  target: {tabId: id},
-                  files: [`/build/react_devtools_backend_${version}.js`],
-                  world: chrome.scripting.ExecutionWorld.MAIN,
-                });
-              }
-            } else {
-              backendsToDownload.push(version);
-            }
-          });
-          // Request the necessary backends in the extension DevTools UI
-          // TODO: handle this message in main.js to build the UI
-          devtools?.postMessage({
-            payload: {
-              type: 'react-devtools-additional-backends',
-              versions: backendsToDownload,
-            },
-          });
-          break;
-      }
-    }
-  }
-  // sender.tab.id from devtools page may not exist, or point to the undocked devtools window
-  // so we use the payload to get the tab id
-  if (request.payload?.tabId) {
-    const tabId = request.payload?.tabId;
-    // This is sent from the devtools page when it is ready for injecting the backend
-    if (request.payload.type === 'react-devtools-inject-backend-manager') {
-      if (!IS_FIREFOX) {
-        // equivalent logic for Firefox is in prepareInjection.js
-        chrome.scripting.executeScript({
-          target: {tabId},
-          files: ['/build/backendManager.js'],
-          world: chrome.scripting.ExecutionWorld.MAIN,
-        });
-      }
-    }
-  }
-});
diff --git a/packages/react-devtools-extensions/src/background/dynamicallyInjectContentScripts.js b/packages/react-devtools-extensions/src/background/dynamicallyInjectContentScripts.js
new file mode 100644
index 0000000000000..45fe394974004
--- /dev/null
+++ b/packages/react-devtools-extensions/src/background/dynamicallyInjectContentScripts.js
@@ -0,0 +1,79 @@
+/* global chrome */
+
+import {IS_FIREFOX} from '../utils';
+
+// Firefox doesn't support ExecutionWorld.MAIN yet
+// equivalent logic for Firefox is in prepareInjection.js
+const contentScriptsToInject = IS_FIREFOX
+  ? [
+      {
+        id: '@react-devtools/proxy',
+        js: ['build/proxy.js'],
+        matches: ['<all_urls>'],
+        persistAcrossSessions: true,
+        runAt: 'document_end',
+      },
+      {
+        id: '@react-devtools/file-fetcher',
+        js: ['build/fileFetcher.js'],
+        matches: ['<all_urls>'],
+        persistAcrossSessions: true,
+        runAt: 'document_end',
+      },
+    ]
+  : [
+      {
+        id: '@react-devtools/proxy',
+        js: ['build/proxy.js'],
+        matches: ['<all_urls>'],
+        persistAcrossSessions: true,
+        runAt: 'document_end',
+        world: chrome.scripting.ExecutionWorld.ISOLATED,
+      },
+      {
+        id: '@react-devtools/file-fetcher',
+        js: ['build/fileFetcher.js'],
+        matches: ['<all_urls>'],
+        persistAcrossSessions: true,
+        runAt: 'document_end',
+        world: chrome.scripting.ExecutionWorld.ISOLATED,
+      },
+      {
+        id: '@react-devtools/hook',
+        js: ['build/installHook.js'],
+        matches: ['<all_urls>'],
+        persistAcrossSessions: true,
+        runAt: 'document_start',
+        world: chrome.scripting.ExecutionWorld.MAIN,
+      },
+      {
+        id: '@react-devtools/renderer',
+        js: ['build/renderer.js'],
+        matches: ['<all_urls>'],
+        persistAcrossSessions: true,
+        runAt: 'document_start',
+        world: chrome.scripting.ExecutionWorld.MAIN,
+      },
+    ];
+
+async function dynamicallyInjectContentScripts() {
+  try {
+    // Using this, instead of filtering registered scrips with `chrome.scripting.getRegisteredScripts`
+    // because of https://bugs.chromium.org/p/chromium/issues/detail?id=1393762
+    // This fixes registering proxy content script in incognito mode
+    await chrome.scripting.unregisterContentScripts();
+
+    // equivalent logic for Firefox is in prepareInjection.js
+    // Manifest V3 method of injecting content script
+    // TODO(hoxyq): migrate Firefox to V3 manifests
+    // Note: the "world" option in registerContentScripts is only available in Chrome v102+
+    // It's critical since it allows us to directly run scripts on the "main" world on the page
+    // "document_start" allows it to run before the page's scripts
+    // so the hook can be detected by react reconciler
+    await chrome.scripting.registerContentScripts(contentScriptsToInject);
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+dynamicallyInjectContentScripts();
diff --git a/packages/react-devtools-extensions/src/background/executeScript.js b/packages/react-devtools-extensions/src/background/executeScript.js
new file mode 100644
index 0000000000000..af48726be028c
--- /dev/null
+++ b/packages/react-devtools-extensions/src/background/executeScript.js
@@ -0,0 +1,58 @@
+/* global chrome */
+
+import {IS_FIREFOX} from '../utils';
+
+// Firefox doesn't support ExecutionWorld.MAIN yet
+// https://bugzilla.mozilla.org/show_bug.cgi?id=1736575
+function executeScriptForFirefoxInMainWorld({target, files}) {
+  return chrome.scripting.executeScript({
+    target,
+    func: fileNames => {
+      function injectScriptSync(src) {
+        let code = '';
+        const request = new XMLHttpRequest();
+        request.addEventListener('load', function () {
+          code = this.responseText;
+        });
+        request.open('GET', src, false);
+        request.send();
+
+        const script = document.createElement('script');
+        script.textContent = code;
+
+        // This script runs before the <head> element is created,
+        // so we add the script to <html> instead.
+        if (document.documentElement) {
+          document.documentElement.appendChild(script);
+        }
+
+        if (script.parentNode) {
+          script.parentNode.removeChild(script);
+        }
+      }
+
+      fileNames.forEach(file => injectScriptSync(chrome.runtime.getURL(file)));
+    },
+    args: [files],
+  });
+}
+
+export function executeScriptInIsolatedWorld({target, files}) {
+  return chrome.scripting.executeScript({
+    target,
+    files,
+    world: chrome.scripting.ExecutionWorld.ISOLATED,
+  });
+}
+
+export function executeScriptInMainWorld({target, files}) {
+  if (IS_FIREFOX) {
+    return executeScriptForFirefoxInMainWorld({target, files});
+  }
+
+  return chrome.scripting.executeScript({
+    target,
+    files,
+    world: chrome.scripting.ExecutionWorld.MAIN,
+  });
+}
diff --git a/packages/react-devtools-extensions/src/background/index.js b/packages/react-devtools-extensions/src/background/index.js
new file mode 100644
index 0000000000000..b25eb53033193
--- /dev/null
+++ b/packages/react-devtools-extensions/src/background/index.js
@@ -0,0 +1,214 @@
+/* global chrome */
+
+'use strict';
+
+import './dynamicallyInjectContentScripts';
+import './tabsManager';
+
+import {
+  handleDevToolsPageMessage,
+  handleBackendManagerMessage,
+  handleReactDevToolsHookMessage,
+  handleFetchResourceContentScriptMessage,
+} from './messageHandlers';
+
+/*
+  {
+    [tabId]: {
+      extension: ExtensionPort,
+      proxy: ProxyPort,
+      disconnectPipe: Function,
+    },
+    ...
+   }
+ */
+const ports = {};
+
+function registerTab(tabId) {
+  if (!ports[tabId]) {
+    ports[tabId] = {
+      extension: null,
+      proxy: null,
+      disconnectPipe: null,
+    };
+  }
+}
+
+function registerExtensionPort(port, tabId) {
+  ports[tabId].extension = port;
+
+  port.onDisconnect.addListener(() => {
+    // This should delete disconnectPipe from ports dictionary
+    ports[tabId].disconnectPipe?.();
+
+    delete ports[tabId].extension;
+  });
+}
+
+function registerProxyPort(port, tabId) {
+  ports[tabId].proxy = port;
+
+  // In case proxy port was disconnected from the other end, from content script
+  // This can happen if content script was detached, when user does in-tab navigation
+  // This listener should never be called when we call port.disconnect() from this (background/index.js) script
+  port.onDisconnect.addListener(() => {
+    ports[tabId].disconnectPipe?.();
+
+    delete ports[tabId].proxy;
+  });
+}
+
+function isNumeric(str: string): boolean {
+  return +str + '' === str;
+}
+
+chrome.runtime.onConnect.addListener(port => {
+  if (port.name === 'proxy') {
+    // Might not be present for restricted pages in Firefox
+    if (port.sender?.tab?.id == null) {
+      // Not disconnecting it, so it would not reconnect
+      return;
+    }
+
+    // Proxy content script is executed in tab, so it should have it specified.
+    const tabId = port.sender.tab.id;
+
+    if (ports[tabId]?.proxy) {
+      ports[tabId].disconnectPipe?.();
+      ports[tabId].proxy.disconnect();
+    }
+
+    registerTab(tabId);
+    registerProxyPort(port, tabId);
+
+    if (ports[tabId].extension) {
+      connectExtensionAndProxyPorts(
+        ports[tabId].extension,
+        ports[tabId].proxy,
+        tabId,
+      );
+    }
+
+    return;
+  }
+
+  if (isNumeric(port.name)) {
+    // DevTools page port doesn't have tab id specified, because its sender is the extension.
+    const tabId = +port.name;
+
+    registerTab(tabId);
+    registerExtensionPort(port, tabId);
+
+    if (ports[tabId].proxy) {
+      connectExtensionAndProxyPorts(
+        ports[tabId].extension,
+        ports[tabId].proxy,
+        tabId,
+      );
+    }
+
+    return;
+  }
+
+  // I am not sure if we should throw here
+  console.warn(`Unknown port ${port.name} connected`);
+});
+
+function connectExtensionAndProxyPorts(extensionPort, proxyPort, tabId) {
+  if (!extensionPort) {
+    throw new Error(
+      `Attempted to connect ports, when extension port is not present`,
+    );
+  }
+
+  if (!proxyPort) {
+    throw new Error(
+      `Attempted to connect ports, when proxy port is not present`,
+    );
+  }
+
+  if (ports[tabId].disconnectPipe) {
+    throw new Error(
+      `Attempted to connect already connected ports for tab with id ${tabId}`,
+    );
+  }
+
+  function extensionPortMessageListener(message) {
+    try {
+      proxyPort.postMessage(message);
+    } catch (e) {
+      if (__DEV__) {
+        console.log(`Broken pipe ${tabId}: `, e);
+      }
+
+      disconnectListener();
+    }
+  }
+
+  function proxyPortMessageListener(message) {
+    try {
+      extensionPort.postMessage(message);
+    } catch (e) {
+      if (__DEV__) {
+        console.log(`Broken pipe ${tabId}: `, e);
+      }
+
+      disconnectListener();
+    }
+  }
+
+  function disconnectListener() {
+    extensionPort.onMessage.removeListener(extensionPortMessageListener);
+    proxyPort.onMessage.removeListener(proxyPortMessageListener);
+
+    // We handle disconnect() calls manually, based on each specific case
+    // No need to disconnect other port here
+
+    delete ports[tabId].disconnectPipe;
+  }
+
+  ports[tabId].disconnectPipe = disconnectListener;
+
+  extensionPort.onMessage.addListener(extensionPortMessageListener);
+  proxyPort.onMessage.addListener(proxyPortMessageListener);
+
+  extensionPort.onDisconnect.addListener(disconnectListener);
+  proxyPort.onDisconnect.addListener(disconnectListener);
+}
+
+chrome.runtime.onMessage.addListener((message, sender) => {
+  switch (message?.source) {
+    case 'devtools-page': {
+      handleDevToolsPageMessage(message);
+      break;
+    }
+    case 'react-devtools-fetch-resource-content-script': {
+      handleFetchResourceContentScriptMessage(message);
+      break;
+    }
+    case 'react-devtools-backend-manager': {
+      handleBackendManagerMessage(message, sender);
+      break;
+    }
+    case 'react-devtools-hook': {
+      handleReactDevToolsHookMessage(message, sender);
+    }
+  }
+});
+
+chrome.tabs.onActivated.addListener(({tabId: activeTabId}) => {
+  for (const registeredTabId in ports) {
+    if (
+      ports[registeredTabId].proxy != null &&
+      ports[registeredTabId].extension != null
+    ) {
+      const numericRegisteredTabId = +registeredTabId;
+      const event =
+        activeTabId === numericRegisteredTabId
+          ? 'resumeElementPolling'
+          : 'pauseElementPolling';
+
+      ports[registeredTabId].extension.postMessage({event});
+    }
+  }
+});
diff --git a/packages/react-devtools-extensions/src/background/messageHandlers.js b/packages/react-devtools-extensions/src/background/messageHandlers.js
new file mode 100644
index 0000000000000..5afcd6aadcc07
--- /dev/null
+++ b/packages/react-devtools-extensions/src/background/messageHandlers.js
@@ -0,0 +1,103 @@
+/* global chrome */
+
+import setExtensionIconAndPopup from './setExtensionIconAndPopup';
+import {executeScriptInMainWorld} from './executeScript';
+
+import {EXTENSION_CONTAINED_VERSIONS} from '../utils';
+
+export function handleReactDevToolsHookMessage(message, sender) {
+  const {payload} = message;
+
+  switch (payload?.type) {
+    case 'react-renderer-attached': {
+      setExtensionIconAndPopup(payload.reactBuildType, sender.tab.id);
+
+      break;
+    }
+  }
+}
+
+export function handleBackendManagerMessage(message, sender) {
+  const {payload} = message;
+
+  switch (payload?.type) {
+    case 'require-backends': {
+      payload.versions.forEach(version => {
+        if (EXTENSION_CONTAINED_VERSIONS.includes(version)) {
+          executeScriptInMainWorld({
+            target: {tabId: sender.tab.id},
+            files: [`/build/react_devtools_backend_${version}.js`],
+          });
+        }
+      });
+
+      break;
+    }
+  }
+}
+
+export function handleDevToolsPageMessage(message) {
+  const {payload} = message;
+
+  switch (payload?.type) {
+    // Proxy this message from DevTools page to content script via chrome.tabs.sendMessage
+    case 'fetch-file-with-cache': {
+      const {
+        payload: {tabId, url},
+      } = message;
+
+      if (!tabId) {
+        throw new Error("Couldn't fetch file sources: tabId not specified");
+      }
+
+      if (!url) {
+        throw new Error("Couldn't fetch file sources: url not specified");
+      }
+
+      chrome.tabs.sendMessage(tabId, {
+        source: 'devtools-page',
+        payload: {
+          type: 'fetch-file-with-cache',
+          url,
+        },
+      });
+
+      break;
+    }
+
+    case 'inject-backend-manager': {
+      const {
+        payload: {tabId},
+      } = message;
+
+      if (!tabId) {
+        throw new Error("Couldn't inject backend manager: tabId not specified");
+      }
+
+      executeScriptInMainWorld({
+        target: {tabId},
+        files: ['/build/backendManager.js'],
+      });
+
+      break;
+    }
+  }
+}
+
+export function handleFetchResourceContentScriptMessage(message) {
+  const {payload} = message;
+
+  switch (payload?.type) {
+    case 'fetch-file-with-cache-complete':
+    case 'fetch-file-with-cache-error':
+      // Forward the result of fetch-in-page requests back to the DevTools page.
+      // We switch the source here because of inconsistency between Firefox and Chrome
+      // In Chromium this message will be propagated from content script to DevTools page
+      // For Firefox, only background script will get this message, so we need to forward it to DevTools page
+      chrome.runtime.sendMessage({
+        source: 'react-devtools-background',
+        payload,
+      });
+      break;
+  }
+}
diff --git a/packages/react-devtools-extensions/src/background/setExtensionIconAndPopup.js b/packages/react-devtools-extensions/src/background/setExtensionIconAndPopup.js
new file mode 100644
index 0000000000000..11caa35e2011b
--- /dev/null
+++ b/packages/react-devtools-extensions/src/background/setExtensionIconAndPopup.js
@@ -0,0 +1,26 @@
+/* global chrome */
+
+'use strict';
+
+import {IS_FIREFOX} from 'react-devtools-extensions/src/utils';
+
+function setExtensionIconAndPopup(reactBuildType, tabId) {
+  const action = IS_FIREFOX ? chrome.browserAction : chrome.action;
+
+  action.setIcon({
+    tabId,
+    path: {
+      '16': chrome.runtime.getURL(`icons/16-${reactBuildType}.png`),
+      '32': chrome.runtime.getURL(`icons/32-${reactBuildType}.png`),
+      '48': chrome.runtime.getURL(`icons/48-${reactBuildType}.png`),
+      '128': chrome.runtime.getURL(`icons/128-${reactBuildType}.png`),
+    },
+  });
+
+  action.setPopup({
+    tabId,
+    popup: chrome.runtime.getURL(`popups/${reactBuildType}.html`),
+  });
+}
+
+export default setExtensionIconAndPopup;
diff --git a/packages/react-devtools-extensions/src/background/tabsManager.js b/packages/react-devtools-extensions/src/background/tabsManager.js
new file mode 100644
index 0000000000000..15c78f090ac1f
--- /dev/null
+++ b/packages/react-devtools-extensions/src/background/tabsManager.js
@@ -0,0 +1,45 @@
+/* global chrome */
+
+'use strict';
+
+import {IS_FIREFOX} from 'react-devtools-extensions/src/utils';
+
+import setExtensionIconAndPopup from './setExtensionIconAndPopup';
+
+function isRestrictedBrowserPage(url) {
+  return !url || new URL(url).protocol === 'chrome:';
+}
+
+function checkAndHandleRestrictedPageIfSo(tab) {
+  if (tab && isRestrictedBrowserPage(tab.url)) {
+    setExtensionIconAndPopup('restricted', tab.id);
+  }
+}
+
+// update popup page of any existing open tabs, if they are restricted browser pages.
+// we can't update for any other types (prod,dev,outdated etc)
+// as the content script needs to be injected at document_start itself for those kinds of detection
+// TODO: Show a different popup page(to reload current page probably) for old tabs, opened before the extension is installed
+if (!IS_FIREFOX) {
+  chrome.tabs.query({}, tabs => tabs.forEach(checkAndHandleRestrictedPageIfSo));
+  chrome.tabs.onCreated.addListener((tabId, changeInfo, tab) =>
+    checkAndHandleRestrictedPageIfSo(tab),
+  );
+}
+
+// Listen to URL changes on the active tab and update the DevTools icon.
+chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
+  if (IS_FIREFOX) {
+    // We don't properly detect protected URLs in Firefox at the moment.
+    // However, we can reset the DevTools icon to its loading state when the URL changes.
+    // It will be updated to the correct icon by the onMessage callback below.
+    if (tab.active && changeInfo.status === 'loading') {
+      setExtensionIconAndPopup('disabled', tabId);
+    }
+  } else {
+    // Don't reset the icon to the loading state for Chrome or Edge.
+    // The onUpdated callback fires more frequently for these browsers,
+    // often after onMessage has been called.
+    checkAndHandleRestrictedPageIfSo(tab);
+  }
+});
diff --git a/packages/react-devtools-extensions/src/backendManager.js b/packages/react-devtools-extensions/src/contentScripts/backendManager.js
similarity index 97%
rename from packages/react-devtools-extensions/src/backendManager.js
rename to packages/react-devtools-extensions/src/contentScripts/backendManager.js
index a77ca2f9601c6..36a2ab19aa411 100644
--- a/packages/react-devtools-extensions/src/backendManager.js
+++ b/packages/react-devtools-extensions/src/contentScripts/backendManager.js
@@ -12,7 +12,7 @@ import type {
   ReactRenderer,
 } from 'react-devtools-shared/src/backend/types';
 import {hasAssignedBackend} from 'react-devtools-shared/src/backend/utils';
-import {COMPACT_VERSION_NAME} from './utils';
+import {COMPACT_VERSION_NAME} from 'react-devtools-extensions/src/utils';
 
 let welcomeHasInitialized = false;
 
@@ -170,7 +170,7 @@ function updateRequiredBackends() {
     {
       source: 'react-devtools-backend-manager',
       payload: {
-        type: 'react-devtools-required-backends',
+        type: 'require-backends',
         versions: Array.from(requiredBackends),
       },
     },
diff --git a/packages/react-devtools-extensions/src/contentScripts/fileFetcher.js b/packages/react-devtools-extensions/src/contentScripts/fileFetcher.js
new file mode 100644
index 0000000000000..198b4f68cd301
--- /dev/null
+++ b/packages/react-devtools-extensions/src/contentScripts/fileFetcher.js
@@ -0,0 +1,48 @@
+/* global chrome */
+
+function fetchResource(url) {
+  const reject = value => {
+    chrome.runtime.sendMessage({
+      source: 'react-devtools-fetch-resource-content-script',
+      payload: {
+        type: 'fetch-file-with-cache-error',
+        url,
+        value,
+      },
+    });
+  };
+
+  const resolve = value => {
+    chrome.runtime.sendMessage({
+      source: 'react-devtools-fetch-resource-content-script',
+      payload: {
+        type: 'fetch-file-with-cache-complete',
+        url,
+        value,
+      },
+    });
+  };
+
+  fetch(url, {cache: 'force-cache'}).then(
+    response => {
+      if (response.ok) {
+        response
+          .text()
+          .then(text => resolve(text))
+          .catch(error => reject(null));
+      } else {
+        reject(null);
+      }
+    },
+    error => reject(null),
+  );
+}
+
+chrome.runtime.onMessage.addListener(message => {
+  if (
+    message?.source === 'devtools-page' &&
+    message?.payload?.type === 'fetch-file-with-cache'
+  ) {
+    fetchResource(message.payload.url);
+  }
+});
diff --git a/packages/react-devtools-extensions/src/contentScripts/installHook.js b/packages/react-devtools-extensions/src/contentScripts/installHook.js
index c02a66342ffc2..2d33cdd89036d 100644
--- a/packages/react-devtools-extensions/src/contentScripts/installHook.js
+++ b/packages/react-devtools-extensions/src/contentScripts/installHook.js
@@ -10,8 +10,11 @@ if (!window.hasOwnProperty('__REACT_DEVTOOLS_GLOBAL_HOOK__')) {
     function ({reactBuildType}) {
       window.postMessage(
         {
-          source: 'react-devtools-detector',
-          reactBuildType,
+          source: 'react-devtools-hook',
+          payload: {
+            type: 'react-renderer-attached',
+            reactBuildType,
+          },
         },
         '*',
       );
diff --git a/packages/react-devtools-extensions/src/contentScripts/prepareInjection.js b/packages/react-devtools-extensions/src/contentScripts/prepareInjection.js
index a62cce3903f46..8f7b6405cb0a8 100644
--- a/packages/react-devtools-extensions/src/contentScripts/prepareInjection.js
+++ b/packages/react-devtools-extensions/src/contentScripts/prepareInjection.js
@@ -1,11 +1,9 @@
 /* global chrome */
 
 import nullthrows from 'nullthrows';
-import {SESSION_STORAGE_RELOAD_AND_PROFILE_KEY} from 'react-devtools-shared/src/constants';
-import {sessionStorageGetItem} from 'react-devtools-shared/src/storage';
-import {IS_FIREFOX, EXTENSION_CONTAINED_VERSIONS} from '../utils';
+import {IS_FIREFOX} from '../utils';
 
-// We run scripts on the page via the service worker (backgroud.js) for
+// We run scripts on the page via the service worker (background/index.js) for
 // Manifest V3 extensions (Chrome & Edge).
 // We need to inject this code for Firefox only because it does not support ExecutionWorld.MAIN
 // https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/scripting/ExecutionWorld
@@ -29,7 +27,7 @@ function injectScriptSync(src) {
   nullthrows(script.parentNode).removeChild(script);
 }
 
-let lastDetectionResult;
+let lastSentDevToolsHookMessage;
 
 // We want to detect when a renderer attaches, and notify the "background page"
 // (which is shared between tabs and can highlight the React icon).
@@ -41,73 +39,14 @@ window.addEventListener('message', function onMessage({data, source}) {
   if (source !== window || !data) {
     return;
   }
-  switch (data.source) {
-    case 'react-devtools-detector':
-      lastDetectionResult = {
-        hasDetectedReact: true,
-        reactBuildType: data.reactBuildType,
-      };
-      chrome.runtime.sendMessage(lastDetectionResult);
-      break;
-    case 'react-devtools-extension':
-      if (data.payload?.type === 'fetch-file-with-cache') {
-        const url = data.payload.url;
-
-        const reject = value => {
-          chrome.runtime.sendMessage({
-            source: 'react-devtools-content-script',
-            payload: {
-              type: 'fetch-file-with-cache-error',
-              url,
-              value,
-            },
-          });
-        };
 
-        const resolve = value => {
-          chrome.runtime.sendMessage({
-            source: 'react-devtools-content-script',
-            payload: {
-              type: 'fetch-file-with-cache-complete',
-              url,
-              value,
-            },
-          });
-        };
+  // We keep this logic here and not in `proxy.js`, because proxy content script is injected later at `document_end`
+  if (data.source === 'react-devtools-hook') {
+    const {source: messageSource, payload} = data;
+    const message = {source: messageSource, payload};
 
-        fetch(url, {cache: 'force-cache'}).then(
-          response => {
-            if (response.ok) {
-              response
-                .text()
-                .then(text => resolve(text))
-                .catch(error => reject(null));
-            } else {
-              reject(null);
-            }
-          },
-          error => reject(null),
-        );
-      }
-      break;
-    case 'react-devtools-inject-backend-manager':
-      if (IS_FIREFOX) {
-        injectScriptSync(chrome.runtime.getURL('build/backendManager.js'));
-      }
-      break;
-    case 'react-devtools-backend-manager':
-      if (IS_FIREFOX) {
-        data.payload?.versions?.forEach(version => {
-          if (EXTENSION_CONTAINED_VERSIONS.includes(version)) {
-            injectScriptSync(
-              chrome.runtime.getURL(
-                `/build/react_devtools_backend_${version}.js`,
-              ),
-            );
-          }
-        });
-      }
-      break;
+    lastSentDevToolsHookMessage = message;
+    chrome.runtime.sendMessage(message);
   }
 });
 
@@ -116,19 +55,16 @@ window.addEventListener('message', function onMessage({data, source}) {
 // replay the last detection result if the content script is active and the
 // document has been hidden and shown again.
 window.addEventListener('pageshow', function ({target}) {
-  if (!lastDetectionResult || target !== window.document) {
+  if (!lastSentDevToolsHookMessage || target !== window.document) {
     return;
   }
-  chrome.runtime.sendMessage(lastDetectionResult);
+
+  chrome.runtime.sendMessage(lastSentDevToolsHookMessage);
 });
 
 if (IS_FIREFOX) {
-  // If we have just reloaded to profile, we need to inject the renderer interface before the app loads.
-  if (
-    sessionStorageGetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true'
-  ) {
-    injectScriptSync(chrome.runtime.getURL('build/renderer.js'));
-  }
+  injectScriptSync(chrome.runtime.getURL('build/renderer.js'));
+
   // Inject a __REACT_DEVTOOLS_GLOBAL_HOOK__ global for React to interact with.
   // Only do this for HTML documents though, to avoid e.g. breaking syntax highlighting for XML docs.
   switch (document.contentType) {
diff --git a/packages/react-devtools-extensions/src/contentScripts/proxy.js b/packages/react-devtools-extensions/src/contentScripts/proxy.js
index 3bf4bf5cab445..8ffeeffb2af53 100644
--- a/packages/react-devtools-extensions/src/contentScripts/proxy.js
+++ b/packages/react-devtools-extensions/src/contentScripts/proxy.js
@@ -2,7 +2,37 @@
 
 'use strict';
 
-let backendDisconnected: boolean = false;
+window.addEventListener('pageshow', function ({target}) {
+  // Firefox's behaviour for injecting this content script can be unpredictable
+  // While navigating the history, some content scripts might not be re-injected and still be alive
+  if (!window.__REACT_DEVTOOLS_PROXY_INJECTED__) {
+    window.__REACT_DEVTOOLS_PROXY_INJECTED__ = true;
+
+    connectPort();
+    sayHelloToBackendManager();
+
+    // The backend waits to install the global hook until notified by the content script.
+    // In the event of a page reload, the content script might be loaded before the backend manager is injected.
+    // Because of this we need to poll the backend manager until it has been initialized.
+    const intervalID = setInterval(() => {
+      if (backendInitialized) {
+        clearInterval(intervalID);
+      } else {
+        sayHelloToBackendManager();
+      }
+    }, 500);
+  }
+});
+
+window.addEventListener('pagehide', function ({target}) {
+  if (target !== window.document) {
+    return;
+  }
+
+  delete window.__REACT_DEVTOOLS_PROXY_INJECTED__;
+});
+
+let port = null;
 let backendInitialized: boolean = false;
 
 function sayHelloToBackendManager() {
@@ -26,59 +56,49 @@ function handleMessageFromDevtools(message) {
 }
 
 function handleMessageFromPage(event) {
-  if (event.source === window && event.data) {
+  if (event.source !== window || !event.data) {
+    return;
+  }
+
+  switch (event.data.source) {
     // This is a message from a bridge (initialized by a devtools backend)
-    if (event.data.source === 'react-devtools-bridge') {
+    case 'react-devtools-bridge': {
       backendInitialized = true;
 
       port.postMessage(event.data.payload);
+      break;
     }
-    // This is a message from the backend manager
-    if (event.data.source === 'react-devtools-backend-manager') {
+
+    // This is a message from the backend manager, which runs in ExecutionWorld.MAIN
+    // and can't use `chrome.runtime.sendMessage`
+    case 'react-devtools-backend-manager': {
+      const {source, payload} = event.data;
+
       chrome.runtime.sendMessage({
-        payload: event.data.payload,
+        source,
+        payload,
       });
+      break;
     }
   }
 }
 
 function handleDisconnect() {
-  backendDisconnected = true;
-
   window.removeEventListener('message', handleMessageFromPage);
+  port = null;
 
-  window.postMessage(
-    {
-      source: 'react-devtools-content-script',
-      payload: {
-        type: 'event',
-        event: 'shutdown',
-      },
-    },
-    '*',
-  );
+  connectPort();
 }
 
-// proxy from main page to devtools (via the background page)
-const port = chrome.runtime.connect({
-  name: 'content-script',
-});
-port.onMessage.addListener(handleMessageFromDevtools);
-port.onDisconnect.addListener(handleDisconnect);
-
-window.addEventListener('message', handleMessageFromPage);
-
-sayHelloToBackendManager();
-
-// The backend waits to install the global hook until notified by the content script.
-// In the event of a page reload, the content script might be loaded before the backend manager is injected.
-// Because of this we need to poll the backend manager until it has been initialized.
-if (!backendInitialized) {
-  const intervalID = setInterval(() => {
-    if (backendInitialized || backendDisconnected) {
-      clearInterval(intervalID);
-    } else {
-      sayHelloToBackendManager();
-    }
-  }, 500);
+// Creates port from application page to the React DevTools' service worker
+// Which then connects it with extension port
+function connectPort() {
+  port = chrome.runtime.connect({
+    name: 'proxy',
+  });
+
+  window.addEventListener('message', handleMessageFromPage);
+
+  port.onMessage.addListener(handleMessageFromDevtools);
+  port.onDisconnect.addListener(handleDisconnect);
 }
diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
deleted file mode 100644
index 56907fd6ffb8a..0000000000000
--- a/packages/react-devtools-extensions/src/main.js
+++ /dev/null
@@ -1,562 +0,0 @@
-/* global chrome */
-
-import {createElement} from 'react';
-import {flushSync} from 'react-dom';
-import {createRoot} from 'react-dom/client';
-import Bridge from 'react-devtools-shared/src/bridge';
-import Store from 'react-devtools-shared/src/devtools/store';
-import {IS_CHROME, IS_EDGE, getBrowserTheme} from './utils';
-import {registerDevToolsEventLogger} from 'react-devtools-shared/src/registerDevToolsEventLogger';
-import {
-  getAppendComponentStack,
-  getBreakOnConsoleErrors,
-  getSavedComponentFilters,
-  getShowInlineWarningsAndErrors,
-  getHideConsoleLogsInStrictMode,
-} from 'react-devtools-shared/src/utils';
-import {
-  localStorageGetItem,
-  localStorageRemoveItem,
-  localStorageSetItem,
-} from 'react-devtools-shared/src/storage';
-import DevTools from 'react-devtools-shared/src/devtools/views/DevTools';
-import {
-  __DEBUG__,
-  LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY,
-} from 'react-devtools-shared/src/constants';
-import {logEvent} from 'react-devtools-shared/src/Logger';
-
-const LOCAL_STORAGE_SUPPORTS_PROFILING_KEY =
-  'React::DevTools::supportsProfiling';
-
-// rAF never fires on devtools_page (because it's in the background)
-// https://bugs.chromium.org/p/chromium/issues/detail?id=1241986#c31
-// Since we render React elements here, we need to polyfill it with setTimeout
-// The polyfill is based on https://gist.github.com/jalbam/5fe05443270fa6d8136238ec72accbc0
-const FRAME_TIME = 16;
-let lastTime = 0;
-window.requestAnimationFrame = function (callback, element) {
-  const now = window.performance.now();
-  const nextTime = Math.max(lastTime + FRAME_TIME, now);
-  return setTimeout(function () {
-    callback((lastTime = nextTime));
-  }, nextTime - now);
-};
-window.cancelAnimationFrame = clearTimeout;
-
-let panelCreated = false;
-
-// The renderer interface can't read saved component filters directly,
-// because they are stored in localStorage within the context of the extension.
-// Instead it relies on the extension to pass filters through.
-function syncSavedPreferences() {
-  chrome.devtools.inspectedWindow.eval(
-    `window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = ${JSON.stringify(
-      getAppendComponentStack(),
-    )};
-    window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ = ${JSON.stringify(
-      getBreakOnConsoleErrors(),
-    )};
-    window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = ${JSON.stringify(
-      getSavedComponentFilters(),
-    )};
-    window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ = ${JSON.stringify(
-      getShowInlineWarningsAndErrors(),
-    )};
-    window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = ${JSON.stringify(
-      getHideConsoleLogsInStrictMode(),
-    )};
-    window.__REACT_DEVTOOLS_BROWSER_THEME__ = ${JSON.stringify(
-      getBrowserTheme(),
-    )};`,
-  );
-}
-
-syncSavedPreferences();
-
-function createPanelIfReactLoaded() {
-  if (panelCreated) {
-    return;
-  }
-
-  chrome.devtools.inspectedWindow.eval(
-    'window.__REACT_DEVTOOLS_GLOBAL_HOOK__ && window.__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.size > 0',
-    function (pageHasReact, error) {
-      if (!pageHasReact || panelCreated) {
-        return;
-      }
-
-      panelCreated = true;
-
-      clearInterval(loadCheckInterval);
-
-      let bridge = null;
-      let store = null;
-
-      let profilingData = null;
-
-      let componentsPortalContainer = null;
-      let profilerPortalContainer = null;
-
-      let cloneStyleTags = null;
-      let mostRecentOverrideTab = null;
-      let render = null;
-      let root = null;
-
-      const tabId = chrome.devtools.inspectedWindow.tabId;
-
-      registerDevToolsEventLogger('extension', async () => {
-        // TODO: after we upgrade to Manifest V3, chrome.tabs.query returns a Promise
-        // without the callback.
-        return new Promise(resolve => {
-          chrome.tabs.query({active: true, currentWindow: true}, tabs => {
-            resolve({
-              page_url: tabs[0]?.url,
-            });
-          });
-        });
-      });
-
-      function initBridgeAndStore() {
-        const port = chrome.runtime.connect({
-          name: String(tabId),
-        });
-        // Looks like `port.onDisconnect` does not trigger on in-tab navigation like new URL or back/forward navigation,
-        // so it makes no sense to handle it here.
-
-        bridge = new Bridge({
-          listen(fn) {
-            const listener = message => fn(message);
-            // Store the reference so that we unsubscribe from the same object.
-            const portOnMessage = port.onMessage;
-            portOnMessage.addListener(listener);
-            return () => {
-              portOnMessage.removeListener(listener);
-            };
-          },
-          send(event: string, payload: any, transferable?: Array<any>) {
-            port.postMessage({event, payload}, transferable);
-          },
-        });
-        bridge.addListener('reloadAppForProfiling', () => {
-          localStorageSetItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY, 'true');
-          chrome.devtools.inspectedWindow.eval('window.location.reload();');
-        });
-        bridge.addListener('syncSelectionToNativeElementsPanel', () => {
-          setBrowserSelectionFromReact();
-        });
-
-        // This flag lets us tip the Store off early that we expect to be profiling.
-        // This avoids flashing a temporary "Profiling not supported" message in the Profiler tab,
-        // after a user has clicked the "reload and profile" button.
-        let isProfiling = false;
-        let supportsProfiling = false;
-        if (
-          localStorageGetItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY) === 'true'
-        ) {
-          supportsProfiling = true;
-          isProfiling = true;
-          localStorageRemoveItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY);
-        }
-
-        if (store !== null) {
-          profilingData = store.profilerStore.profilingData;
-        }
-
-        bridge.addListener('extensionBackendInitialized', () => {
-          // Initialize the renderer's trace-updates setting.
-          // This handles the case of navigating to a new page after the DevTools have already been shown.
-          bridge.send(
-            'setTraceUpdatesEnabled',
-            localStorageGetItem(LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY) ===
-              'true',
-          );
-        });
-
-        store = new Store(bridge, {
-          isProfiling,
-          supportsReloadAndProfile: IS_CHROME || IS_EDGE,
-          supportsProfiling,
-          // At this time, the timeline can only parse Chrome performance profiles.
-          supportsTimeline: IS_CHROME,
-          supportsTraceUpdates: true,
-        });
-        if (!isProfiling) {
-          store.profilerStore.profilingData = profilingData;
-        }
-
-        // Initialize the backend only once the Store has been initialized.
-        // Otherwise the Store may miss important initial tree op codes.
-        if (IS_CHROME || IS_EDGE) {
-          chrome.runtime.sendMessage({
-            source: 'react-devtools-main',
-            payload: {
-              type: 'react-devtools-inject-backend-manager',
-              tabId,
-            },
-          });
-        } else {
-          // Firefox does not support executing script in ExecutionWorld.MAIN from content script.
-          // see prepareInjection.js
-          chrome.devtools.inspectedWindow.eval(
-            `window.postMessage({ source: 'react-devtools-inject-backend-manager' }, '*');`,
-            function (response, evalError) {
-              if (evalError) {
-                console.error(evalError);
-              }
-            },
-          );
-        }
-
-        const viewAttributeSourceFunction = (id, path) => {
-          const rendererID = store.getRendererIDForElement(id);
-          if (rendererID != null) {
-            // Ask the renderer interface to find the specified attribute,
-            // and store it as a global variable on the window.
-            bridge.send('viewAttributeSource', {id, path, rendererID});
-
-            setTimeout(() => {
-              // Ask Chrome to display the location of the attribute,
-              // assuming the renderer found a match.
-              chrome.devtools.inspectedWindow.eval(`
-                if (window.$attribute != null) {
-                  inspect(window.$attribute);
-                }
-              `);
-            }, 100);
-          }
-        };
-
-        const viewElementSourceFunction = id => {
-          const rendererID = store.getRendererIDForElement(id);
-          if (rendererID != null) {
-            // Ask the renderer interface to determine the component function,
-            // and store it as a global variable on the window
-            bridge.send('viewElementSource', {id, rendererID});
-
-            setTimeout(() => {
-              // Ask Chrome to display the location of the component function,
-              // or a render method if it is a Class (ideally Class instance, not type)
-              // assuming the renderer found one.
-              chrome.devtools.inspectedWindow.eval(`
-                if (window.$type != null) {
-                  if (
-                    window.$type &&
-                    window.$type.prototype &&
-                    window.$type.prototype.isReactComponent
-                  ) {
-                    // inspect Component.render, not constructor
-                    inspect(window.$type.prototype.render);
-                  } else {
-                    // inspect Functional Component
-                    inspect(window.$type);
-                  }
-                }
-              `);
-            }, 100);
-          }
-        };
-
-        const viewUrlSourceFunction = (url, line, col) => {
-          chrome.devtools.panels.openResource(url, line, col);
-        };
-
-        let debugIDCounter = 0;
-
-        // For some reason in Firefox, chrome.runtime.sendMessage() from a content script
-        // never reaches the chrome.runtime.onMessage event listener.
-        let fetchFileWithCaching = null;
-        if (IS_CHROME) {
-          const fetchFromNetworkCache = (url, resolve, reject) => {
-            // Debug ID allows us to avoid re-logging (potentially long) URL strings below,
-            // while also still associating (potentially) interleaved logs with the original request.
-            let debugID = null;
-
-            if (__DEBUG__) {
-              debugID = debugIDCounter++;
-              console.log(`[main] fetchFromNetworkCache(${debugID})`, url);
-            }
-
-            chrome.devtools.network.getHAR(harLog => {
-              for (let i = 0; i < harLog.entries.length; i++) {
-                const entry = harLog.entries[i];
-                if (url === entry.request.url) {
-                  if (__DEBUG__) {
-                    console.log(
-                      `[main] fetchFromNetworkCache(${debugID}) Found matching URL in HAR`,
-                      url,
-                    );
-                  }
-
-                  entry.getContent(content => {
-                    if (content) {
-                      if (__DEBUG__) {
-                        console.log(
-                          `[main] fetchFromNetworkCache(${debugID}) Content retrieved`,
-                        );
-                      }
-
-                      resolve(content);
-                    } else {
-                      if (__DEBUG__) {
-                        console.log(
-                          `[main] fetchFromNetworkCache(${debugID}) Invalid content returned by getContent()`,
-                          content,
-                        );
-                      }
-
-                      // Edge case where getContent() returned null; fall back to fetch.
-                      fetchFromPage(url, resolve, reject);
-                    }
-                  });
-
-                  return;
-                }
-              }
-
-              if (__DEBUG__) {
-                console.log(
-                  `[main] fetchFromNetworkCache(${debugID}) No cached request found in getHAR()`,
-                );
-              }
-
-              // No matching URL found; fall back to fetch.
-              fetchFromPage(url, resolve, reject);
-            });
-          };
-
-          const fetchFromPage = (url, resolve, reject) => {
-            if (__DEBUG__) {
-              console.log('[main] fetchFromPage()', url);
-            }
-
-            function onPortMessage({payload, source}) {
-              if (source === 'react-devtools-content-script') {
-                switch (payload?.type) {
-                  case 'fetch-file-with-cache-complete':
-                    chrome.runtime.onMessage.removeListener(onPortMessage);
-                    resolve(payload.value);
-                    break;
-                  case 'fetch-file-with-cache-error':
-                    chrome.runtime.onMessage.removeListener(onPortMessage);
-                    reject(payload.value);
-                    break;
-                }
-              }
-            }
-
-            chrome.runtime.onMessage.addListener(onPortMessage);
-
-            chrome.devtools.inspectedWindow.eval(`
-              window.postMessage({
-                source: 'react-devtools-extension',
-                payload: {
-                  type: 'fetch-file-with-cache',
-                  url: "${url}",
-                },
-              });
-            `);
-          };
-
-          // Fetching files from the extension won't make use of the network cache
-          // for resources that have already been loaded by the page.
-          // This helper function allows the extension to request files to be fetched
-          // by the content script (running in the page) to increase the likelihood of a cache hit.
-          fetchFileWithCaching = url => {
-            return new Promise((resolve, reject) => {
-              // Try fetching from the Network cache first.
-              // If DevTools was opened after the page started loading, we may have missed some requests.
-              // So fall back to a fetch() from the page and hope we get a cached response that way.
-              fetchFromNetworkCache(url, resolve, reject);
-            });
-          };
-        }
-
-        // TODO (Webpack 5) Hopefully we can remove this prop after the Webpack 5 migration.
-        const hookNamesModuleLoaderFunction = () =>
-          import(
-            /* webpackChunkName: 'parseHookNames' */ 'react-devtools-shared/src/hooks/parseHookNames'
-          );
-
-        root = createRoot(document.createElement('div'));
-
-        render = (overrideTab = mostRecentOverrideTab) => {
-          mostRecentOverrideTab = overrideTab;
-          root.render(
-            createElement(DevTools, {
-              bridge,
-              browserTheme: getBrowserTheme(),
-              componentsPortalContainer,
-              enabledInspectedElementContextMenu: true,
-              fetchFileWithCaching,
-              hookNamesModuleLoaderFunction,
-              overrideTab,
-              profilerPortalContainer,
-              showTabBar: false,
-              store,
-              warnIfUnsupportedVersionDetected: true,
-              viewAttributeSourceFunction,
-              viewElementSourceFunction,
-              viewUrlSourceFunction,
-            }),
-          );
-        };
-
-        render();
-      }
-
-      cloneStyleTags = () => {
-        const linkTags = [];
-        // eslint-disable-next-line no-for-of-loops/no-for-of-loops
-        for (const linkTag of document.getElementsByTagName('link')) {
-          if (linkTag.rel === 'stylesheet') {
-            const newLinkTag = document.createElement('link');
-            // eslint-disable-next-line no-for-of-loops/no-for-of-loops
-            for (const attribute of linkTag.attributes) {
-              newLinkTag.setAttribute(attribute.nodeName, attribute.nodeValue);
-            }
-            linkTags.push(newLinkTag);
-          }
-        }
-        return linkTags;
-      };
-
-      initBridgeAndStore();
-
-      function ensureInitialHTMLIsCleared(container) {
-        if (container._hasInitialHTMLBeenCleared) {
-          return;
-        }
-        container.innerHTML = '';
-        container._hasInitialHTMLBeenCleared = true;
-      }
-
-      function setBrowserSelectionFromReact() {
-        // This is currently only called on demand when you press "view DOM".
-        // In the future, if Chrome adds an inspect() that doesn't switch tabs,
-        // we could make this happen automatically when you select another component.
-        chrome.devtools.inspectedWindow.eval(
-          '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 !== $0) ?' +
-            '(inspect(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0), true) :' +
-            'false',
-          (didSelectionChange, evalError) => {
-            if (evalError) {
-              console.error(evalError);
-            }
-          },
-        );
-      }
-
-      function setReactSelectionFromBrowser() {
-        // When the user chooses a different node in the browser Elements tab,
-        // copy it over to the hook object so that we can sync the selection.
-        chrome.devtools.inspectedWindow.eval(
-          '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__ && window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 !== $0) ?' +
-            '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 = $0, true) :' +
-            'false',
-          (didSelectionChange, evalError) => {
-            if (evalError) {
-              console.error(evalError);
-            } else if (didSelectionChange) {
-              // Remember to sync the selection next time we show Components tab.
-              needsToSyncElementSelection = true;
-            }
-          },
-        );
-      }
-
-      setReactSelectionFromBrowser();
-      chrome.devtools.panels.elements.onSelectionChanged.addListener(() => {
-        setReactSelectionFromBrowser();
-      });
-
-      let currentPanel = null;
-      let needsToSyncElementSelection = false;
-
-      chrome.devtools.panels.create(
-        IS_CHROME || IS_EDGE ? '⚛️ Components' : 'Components',
-        IS_EDGE ? 'icons/production.svg' : '',
-        'panel.html',
-        extensionPanel => {
-          extensionPanel.onShown.addListener(panel => {
-            if (needsToSyncElementSelection) {
-              needsToSyncElementSelection = false;
-              bridge.send('syncSelectionFromNativeElementsPanel');
-            }
-
-            if (currentPanel === panel) {
-              return;
-            }
-
-            currentPanel = panel;
-            componentsPortalContainer = panel.container;
-
-            if (componentsPortalContainer != null) {
-              ensureInitialHTMLIsCleared(componentsPortalContainer);
-              render('components');
-              panel.injectStyles(cloneStyleTags);
-              logEvent({event_name: 'selected-components-tab'});
-            }
-          });
-          extensionPanel.onHidden.addListener(panel => {
-            // TODO: Stop highlighting and stuff.
-          });
-        },
-      );
-
-      chrome.devtools.panels.create(
-        IS_CHROME || IS_EDGE ? '⚛️ Profiler' : 'Profiler',
-        IS_EDGE ? 'icons/production.svg' : '',
-        'panel.html',
-        extensionPanel => {
-          extensionPanel.onShown.addListener(panel => {
-            if (currentPanel === panel) {
-              return;
-            }
-
-            currentPanel = panel;
-            profilerPortalContainer = panel.container;
-
-            if (profilerPortalContainer != null) {
-              ensureInitialHTMLIsCleared(profilerPortalContainer);
-              render('profiler');
-              panel.injectStyles(cloneStyleTags);
-              logEvent({event_name: 'selected-profiler-tab'});
-            }
-          });
-        },
-      );
-
-      chrome.devtools.network.onNavigated.removeListener(checkPageForReact);
-
-      // Re-initialize DevTools panel when a new page is loaded.
-      chrome.devtools.network.onNavigated.addListener(function onNavigated() {
-        // Re-initialize saved filters on navigation,
-        // since global values stored on window get reset in this case.
-        syncSavedPreferences();
-
-        // It's easiest to recreate the DevTools panel (to clean up potential stale state).
-        // We can revisit this in the future as a small optimization.
-        flushSync(() => root.unmount());
-
-        initBridgeAndStore();
-      });
-    },
-  );
-}
-
-// Load (or reload) the DevTools extension when the user navigates to a new page.
-function checkPageForReact() {
-  syncSavedPreferences();
-  createPanelIfReactLoaded();
-}
-
-chrome.devtools.network.onNavigated.addListener(checkPageForReact);
-
-// Check to see if React has loaded once per second in case React is added
-// after page load
-const loadCheckInterval = setInterval(function () {
-  createPanelIfReactLoaded();
-}, 1000);
-
-createPanelIfReactLoaded();
diff --git a/packages/react-devtools-extensions/src/main/cloneStyleTags.js b/packages/react-devtools-extensions/src/main/cloneStyleTags.js
new file mode 100644
index 0000000000000..dd84e01fc9ef8
--- /dev/null
+++ b/packages/react-devtools-extensions/src/main/cloneStyleTags.js
@@ -0,0 +1,21 @@
+function cloneStyleTags() {
+  const linkTags = [];
+
+  // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+  for (const linkTag of document.getElementsByTagName('link')) {
+    if (linkTag.rel === 'stylesheet') {
+      const newLinkTag = document.createElement('link');
+
+      // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+      for (const attribute of linkTag.attributes) {
+        newLinkTag.setAttribute(attribute.nodeName, attribute.nodeValue);
+      }
+
+      linkTags.push(newLinkTag);
+    }
+  }
+
+  return linkTags;
+}
+
+export default cloneStyleTags;
diff --git a/packages/react-devtools-extensions/src/main/debounce.js b/packages/react-devtools-extensions/src/main/debounce.js
new file mode 100644
index 0000000000000..5ca765002f2fa
--- /dev/null
+++ b/packages/react-devtools-extensions/src/main/debounce.js
@@ -0,0 +1,10 @@
+function debounce(fn, timeout) {
+  let executionTimeoutId = null;
+
+  return (...args) => {
+    clearTimeout(executionTimeoutId);
+    executionTimeoutId = setTimeout(fn, timeout, ...args);
+  };
+}
+
+export default debounce;
diff --git a/packages/react-devtools-extensions/src/main/elementSelection.js b/packages/react-devtools-extensions/src/main/elementSelection.js
new file mode 100644
index 0000000000000..54d5422776cb1
--- /dev/null
+++ b/packages/react-devtools-extensions/src/main/elementSelection.js
@@ -0,0 +1,42 @@
+/* global chrome */
+
+export function setBrowserSelectionFromReact() {
+  // This is currently only called on demand when you press "view DOM".
+  // In the future, if Chrome adds an inspect() that doesn't switch tabs,
+  // we could make this happen automatically when you select another component.
+  chrome.devtools.inspectedWindow.eval(
+    '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 !== $0) ?' +
+      '(inspect(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0), true) :' +
+      'false',
+    (didSelectionChange, evalError) => {
+      if (evalError) {
+        console.error(evalError);
+      }
+    },
+  );
+}
+
+export function setReactSelectionFromBrowser(bridge) {
+  // When the user chooses a different node in the browser Elements tab,
+  // copy it over to the hook object so that we can sync the selection.
+  chrome.devtools.inspectedWindow.eval(
+    '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__ && window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 !== $0) ?' +
+      '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 = $0, true) :' +
+      'false',
+    (didSelectionChange, evalError) => {
+      if (evalError) {
+        console.error(evalError);
+      } else if (didSelectionChange) {
+        if (!bridge) {
+          console.error(
+            'Browser element selection changed, but bridge was not initialized',
+          );
+          return;
+        }
+
+        // Remember to sync the selection next time we show Components tab.
+        bridge.send('syncSelectionFromNativeElementsPanel');
+      }
+    },
+  );
+}
diff --git a/packages/react-devtools-extensions/src/main/fetchFileWithCaching.js b/packages/react-devtools-extensions/src/main/fetchFileWithCaching.js
new file mode 100644
index 0000000000000..6aee0969a3229
--- /dev/null
+++ b/packages/react-devtools-extensions/src/main/fetchFileWithCaching.js
@@ -0,0 +1,123 @@
+/* global chrome */
+
+import {__DEBUG__} from 'react-devtools-shared/src/constants';
+
+let debugIDCounter = 0;
+
+const debugLog = (...args) => {
+  if (__DEBUG__) {
+    console.log(...args);
+  }
+};
+
+const fetchFromNetworkCache = (url, resolve, reject) => {
+  // Debug ID allows us to avoid re-logging (potentially long) URL strings below,
+  // while also still associating (potentially) interleaved logs with the original request.
+  let debugID = null;
+
+  if (__DEBUG__) {
+    debugID = debugIDCounter++;
+    debugLog(`[main] fetchFromNetworkCache(${debugID})`, url);
+  }
+
+  chrome.devtools.network.getHAR(harLog => {
+    for (let i = 0; i < harLog.entries.length; i++) {
+      const entry = harLog.entries[i];
+      if (url !== entry.request.url) {
+        continue;
+      }
+
+      debugLog(
+        `[main] fetchFromNetworkCache(${debugID}) Found matching URL in HAR`,
+        url,
+      );
+
+      if (entry.getContent != null) {
+        entry.getContent(content => {
+          if (content) {
+            debugLog(
+              `[main] fetchFromNetworkCache(${debugID}) Content retrieved`,
+            );
+
+            resolve(content);
+          } else {
+            debugLog(
+              `[main] fetchFromNetworkCache(${debugID}) Invalid content returned by getContent()`,
+              content,
+            );
+
+            // Edge case where getContent() returned null; fall back to fetch.
+            fetchFromPage(url, resolve, reject);
+          }
+        });
+      } else {
+        const content = entry.response.content.text;
+
+        if (content != null) {
+          debugLog(
+            `[main] fetchFromNetworkCache(${debugID}) Content retrieved`,
+          );
+          resolve(content);
+        } else {
+          debugLog(
+            `[main] fetchFromNetworkCache(${debugID}) Invalid content returned from entry.response.content`,
+            content,
+          );
+          fetchFromPage(url, resolve, reject);
+        }
+      }
+    }
+
+    debugLog(
+      `[main] fetchFromNetworkCache(${debugID}) No cached request found in getHAR()`,
+    );
+
+    // No matching URL found; fall back to fetch.
+    fetchFromPage(url, resolve, reject);
+  });
+};
+
+const fetchFromPage = async (url, resolve, reject) => {
+  debugLog('[main] fetchFromPage()', url);
+
+  function onPortMessage({payload, source}) {
+    if (source === 'react-devtools-background') {
+      switch (payload?.type) {
+        case 'fetch-file-with-cache-complete':
+          chrome.runtime.onMessage.removeListener(onPortMessage);
+          resolve(payload.value);
+          break;
+        case 'fetch-file-with-cache-error':
+          chrome.runtime.onMessage.removeListener(onPortMessage);
+          reject(payload.value);
+          break;
+      }
+    }
+  }
+
+  chrome.runtime.onMessage.addListener(onPortMessage);
+
+  chrome.runtime.sendMessage({
+    source: 'devtools-page',
+    payload: {
+      type: 'fetch-file-with-cache',
+      tabId: chrome.devtools.inspectedWindow.tabId,
+      url,
+    },
+  });
+};
+
+// Fetching files from the extension won't make use of the network cache
+// for resources that have already been loaded by the page.
+// This helper function allows the extension to request files to be fetched
+// by the content script (running in the page) to increase the likelihood of a cache hit.
+const fetchFileWithCaching = url => {
+  return new Promise((resolve, reject) => {
+    // Try fetching from the Network cache first.
+    // If DevTools was opened after the page started loading, we may have missed some requests.
+    // So fall back to a fetch() from the page and hope we get a cached response that way.
+    fetchFromNetworkCache(url, resolve, reject);
+  });
+};
+
+export default fetchFileWithCaching;
diff --git a/packages/react-devtools-extensions/src/main/getProfilingFlags.js b/packages/react-devtools-extensions/src/main/getProfilingFlags.js
new file mode 100644
index 0000000000000..760b0e48355e2
--- /dev/null
+++ b/packages/react-devtools-extensions/src/main/getProfilingFlags.js
@@ -0,0 +1,23 @@
+import {
+  localStorageGetItem,
+  localStorageRemoveItem,
+} from 'react-devtools-shared/src/storage';
+import {LOCAL_STORAGE_SUPPORTS_PROFILING_KEY} from 'react-devtools-shared/src/constants';
+
+function getProfilingFlags() {
+  // This flag lets us tip the Store off early that we expect to be profiling.
+  // This avoids flashing a temporary "Profiling not supported" message in the Profiler tab,
+  // after a user has clicked the "reload and profile" button.
+  let isProfiling = false;
+  let supportsProfiling = false;
+
+  if (localStorageGetItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY) === 'true') {
+    supportsProfiling = true;
+    isProfiling = true;
+    localStorageRemoveItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY);
+  }
+
+  return {isProfiling, supportsProfiling};
+}
+
+export default getProfilingFlags;
diff --git a/packages/react-devtools-extensions/src/main/index.js b/packages/react-devtools-extensions/src/main/index.js
new file mode 100644
index 0000000000000..555d35fe5d372
--- /dev/null
+++ b/packages/react-devtools-extensions/src/main/index.js
@@ -0,0 +1,457 @@
+/* global chrome */
+
+import {createElement} from 'react';
+import {flushSync} from 'react-dom';
+import {createRoot} from 'react-dom/client';
+import Bridge from 'react-devtools-shared/src/bridge';
+import Store from 'react-devtools-shared/src/devtools/store';
+import {IS_CHROME, IS_EDGE, getBrowserTheme, IS_FIREFOX} from '../utils';
+import {
+  localStorageGetItem,
+  localStorageSetItem,
+} from 'react-devtools-shared/src/storage';
+import DevTools from 'react-devtools-shared/src/devtools/views/DevTools';
+import {
+  LOCAL_STORAGE_SUPPORTS_PROFILING_KEY,
+  LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY,
+} from 'react-devtools-shared/src/constants';
+import {logEvent} from 'react-devtools-shared/src/Logger';
+
+import {
+  setBrowserSelectionFromReact,
+  setReactSelectionFromBrowser,
+} from './elementSelection';
+import {startReactPolling} from './reactPolling';
+import cloneStyleTags from './cloneStyleTags';
+import fetchFileWithCaching from './fetchFileWithCaching';
+import injectBackendManager from './injectBackendManager';
+import syncSavedPreferences from './syncSavedPreferences';
+import registerEventsLogger from './registerEventsLogger';
+import getProfilingFlags from './getProfilingFlags';
+import debounce from './debounce';
+import './requestAnimationFramePolyfill';
+
+function createBridge() {
+  bridge = new Bridge({
+    listen(fn) {
+      const bridgeListener = message => fn(message);
+      // Store the reference so that we unsubscribe from the same object.
+      const portOnMessage = port.onMessage;
+      portOnMessage.addListener(bridgeListener);
+
+      lastSubscribedBridgeListener = bridgeListener;
+
+      return () => {
+        port?.onMessage.removeListener(bridgeListener);
+        lastSubscribedBridgeListener = null;
+      };
+    },
+
+    send(event: string, payload: any, transferable?: Array<any>) {
+      port?.postMessage({event, payload}, transferable);
+    },
+  });
+
+  bridge.addListener('reloadAppForProfiling', () => {
+    localStorageSetItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY, 'true');
+    chrome.devtools.inspectedWindow.eval('window.location.reload();');
+  });
+
+  bridge.addListener(
+    'syncSelectionToNativeElementsPanel',
+    setBrowserSelectionFromReact,
+  );
+
+  bridge.addListener('extensionBackendInitialized', () => {
+    // Initialize the renderer's trace-updates setting.
+    // This handles the case of navigating to a new page after the DevTools have already been shown.
+    bridge.send(
+      'setTraceUpdatesEnabled',
+      localStorageGetItem(LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY) === 'true',
+    );
+  });
+
+  const onBrowserElementSelectionChanged = () =>
+    setReactSelectionFromBrowser(bridge);
+  const onBridgeShutdown = () => {
+    chrome.devtools.panels.elements.onSelectionChanged.removeListener(
+      onBrowserElementSelectionChanged,
+    );
+  };
+
+  bridge.addListener('shutdown', onBridgeShutdown);
+
+  chrome.devtools.panels.elements.onSelectionChanged.addListener(
+    onBrowserElementSelectionChanged,
+  );
+}
+
+function createBridgeAndStore() {
+  createBridge();
+
+  const {isProfiling, supportsProfiling} = getProfilingFlags();
+
+  store = new Store(bridge, {
+    isProfiling,
+    supportsReloadAndProfile: IS_CHROME || IS_EDGE,
+    supportsProfiling,
+    // At this time, the timeline can only parse Chrome performance profiles.
+    supportsTimeline: IS_CHROME,
+    supportsTraceUpdates: true,
+  });
+
+  if (!isProfiling) {
+    // We previously stored this in performCleanup function
+    store.profilerStore.profilingData = profilingData;
+  }
+
+  // Initialize the backend only once the Store has been initialized.
+  // Otherwise, the Store may miss important initial tree op codes.
+  injectBackendManager(chrome.devtools.inspectedWindow.tabId);
+
+  const viewAttributeSourceFunction = (id, path) => {
+    const rendererID = store.getRendererIDForElement(id);
+    if (rendererID != null) {
+      // Ask the renderer interface to find the specified attribute,
+      // and store it as a global variable on the window.
+      bridge.send('viewAttributeSource', {id, path, rendererID});
+
+      setTimeout(() => {
+        // Ask Chrome to display the location of the attribute,
+        // assuming the renderer found a match.
+        chrome.devtools.inspectedWindow.eval(`
+                if (window.$attribute != null) {
+                  inspect(window.$attribute);
+                }
+              `);
+      }, 100);
+    }
+  };
+
+  const viewElementSourceFunction = id => {
+    const rendererID = store.getRendererIDForElement(id);
+    if (rendererID != null) {
+      // Ask the renderer interface to determine the component function,
+      // and store it as a global variable on the window
+      bridge.send('viewElementSource', {id, rendererID});
+
+      setTimeout(() => {
+        // Ask Chrome to display the location of the component function,
+        // or a render method if it is a Class (ideally Class instance, not type)
+        // assuming the renderer found one.
+        chrome.devtools.inspectedWindow.eval(`
+                if (window.$type != null) {
+                  if (
+                    window.$type &&
+                    window.$type.prototype &&
+                    window.$type.prototype.isReactComponent
+                  ) {
+                    // inspect Component.render, not constructor
+                    inspect(window.$type.prototype.render);
+                  } else {
+                    // inspect Functional Component
+                    inspect(window.$type);
+                  }
+                }
+              `);
+      }, 100);
+    }
+  };
+
+  // TODO (Webpack 5) Hopefully we can remove this prop after the Webpack 5 migration.
+  const hookNamesModuleLoaderFunction = () =>
+    import(
+      /* webpackChunkName: 'parseHookNames' */ 'react-devtools-shared/src/hooks/parseHookNames'
+    );
+
+  root = createRoot(document.createElement('div'));
+
+  render = (overrideTab = mostRecentOverrideTab) => {
+    mostRecentOverrideTab = overrideTab;
+
+    root.render(
+      createElement(DevTools, {
+        bridge,
+        browserTheme: getBrowserTheme(),
+        componentsPortalContainer,
+        enabledInspectedElementContextMenu: true,
+        fetchFileWithCaching,
+        hookNamesModuleLoaderFunction,
+        overrideTab,
+        profilerPortalContainer,
+        showTabBar: false,
+        store,
+        warnIfUnsupportedVersionDetected: true,
+        viewAttributeSourceFunction,
+        viewElementSourceFunction,
+        viewUrlSourceFunction,
+      }),
+    );
+  };
+}
+
+const viewUrlSourceFunction = (url, line, col) => {
+  chrome.devtools.panels.openResource(url, line, col);
+};
+
+function ensureInitialHTMLIsCleared(container) {
+  if (container._hasInitialHTMLBeenCleared) {
+    return;
+  }
+
+  container.innerHTML = '';
+  container._hasInitialHTMLBeenCleared = true;
+}
+
+function createComponentsPanel() {
+  if (componentsPortalContainer) {
+    // Panel is created and user opened it at least once
+    ensureInitialHTMLIsCleared(componentsPortalContainer);
+    render('components');
+
+    return;
+  }
+
+  if (componentsPanel) {
+    // Panel is created, but wasn't opened yet, so no document is present for it
+    return;
+  }
+
+  chrome.devtools.panels.create(
+    IS_CHROME || IS_EDGE ? '⚛️ Components' : 'Components',
+    IS_EDGE ? 'icons/production.svg' : '',
+    'panel.html',
+    createdPanel => {
+      componentsPanel = createdPanel;
+
+      createdPanel.onShown.addListener(portal => {
+        componentsPortalContainer = portal.container;
+        if (componentsPortalContainer != null && render) {
+          ensureInitialHTMLIsCleared(componentsPortalContainer);
+
+          render('components');
+          portal.injectStyles(cloneStyleTags);
+
+          logEvent({event_name: 'selected-components-tab'});
+        }
+      });
+
+      // TODO: we should listen to createdPanel.onHidden to unmount some listeners
+      // and potentially stop highlighting
+    },
+  );
+}
+
+function createProfilerPanel() {
+  if (profilerPortalContainer) {
+    // Panel is created and user opened it at least once
+    ensureInitialHTMLIsCleared(profilerPortalContainer);
+    render('profiler');
+
+    return;
+  }
+
+  if (profilerPanel) {
+    // Panel is created, but wasn't opened yet, so no document is present for it
+    return;
+  }
+
+  chrome.devtools.panels.create(
+    IS_CHROME || IS_EDGE ? '⚛️ Profiler' : 'Profiler',
+    IS_EDGE ? 'icons/production.svg' : '',
+    'panel.html',
+    createdPanel => {
+      profilerPanel = createdPanel;
+
+      createdPanel.onShown.addListener(portal => {
+        profilerPortalContainer = portal.container;
+        if (profilerPortalContainer != null && render) {
+          ensureInitialHTMLIsCleared(profilerPortalContainer);
+
+          render('profiler');
+          portal.injectStyles(cloneStyleTags);
+
+          logEvent({event_name: 'selected-profiler-tab'});
+        }
+      });
+    },
+  );
+}
+
+function performInTabNavigationCleanup() {
+  // Potentially, if react hasn't loaded yet and user performs in-tab navigation
+  clearReactPollingInstance();
+
+  if (store !== null) {
+    // Store profiling data, so it can be used later
+    profilingData = store.profilerStore.profilingData;
+  }
+
+  // If panels were already created, and we have already mounted React root to display
+  // tabs (Components or Profiler), we should unmount root first and render them again
+  if ((componentsPortalContainer || profilerPortalContainer) && root) {
+    // It's easiest to recreate the DevTools panel (to clean up potential stale state).
+    // We can revisit this in the future as a small optimization.
+    // This should also emit bridge.shutdown, but only if this root was mounted
+    flushSync(() => root.unmount());
+  } else {
+    // In case Browser DevTools were opened, but user never pressed on extension panels
+    // They were never mounted and there is nothing to unmount, but we need to emit shutdown event
+    // because bridge was already created
+    bridge?.shutdown();
+  }
+
+  // Do not nullify componentsPanelPortal and profilerPanelPortal on purpose,
+  // They are not recreated when user does in-tab navigation, and they can only be accessed via
+  // callback in onShown listener, which is called only when panel has been shown
+  // This event won't be emitted again after in-tab navigation, if DevTools panel keeps being opened
+
+  // Do not clean mostRecentOverrideTab on purpose, so we remember last opened
+  // React DevTools tab, when user does in-tab navigation
+
+  store = null;
+  bridge = null;
+  render = null;
+  root = null;
+}
+
+function performFullCleanup() {
+  // Potentially, if react hasn't loaded yet and user closed the browser DevTools
+  clearReactPollingInstance();
+
+  if ((componentsPortalContainer || profilerPortalContainer) && root) {
+    // This should also emit bridge.shutdown, but only if this root was mounted
+    flushSync(() => root.unmount());
+  } else {
+    bridge?.shutdown();
+  }
+
+  componentsPortalContainer = null;
+  profilerPortalContainer = null;
+  root = null;
+
+  mostRecentOverrideTab = null;
+  store = null;
+  bridge = null;
+  render = null;
+
+  port?.disconnect();
+  port = null;
+}
+
+function connectExtensionPort() {
+  if (port) {
+    throw new Error('DevTools port was already connected');
+  }
+
+  const tabId = chrome.devtools.inspectedWindow.tabId;
+  port = chrome.runtime.connect({
+    name: String(tabId),
+  });
+
+  // If DevTools port was reconnected and Bridge was already created
+  // We should subscribe bridge to this port events
+  // This could happen if service worker dies and all ports are disconnected,
+  // but later user continues the session and Chrome reconnects all ports
+  // Bridge object is still in-memory, though
+  if (lastSubscribedBridgeListener) {
+    port.onMessage.addListener(lastSubscribedBridgeListener);
+  }
+
+  // This port may be disconnected by Chrome at some point, this callback
+  // will be executed only if this port was disconnected from the other end
+  // so, when we call `port.disconnect()` from this script,
+  // this should not trigger this callback and port reconnection
+  port.onDisconnect.addListener(() => {
+    port = null;
+    connectExtensionPort();
+  });
+}
+
+function mountReactDevTools() {
+  reactPollingInstance = null;
+
+  registerEventsLogger();
+
+  createBridgeAndStore();
+
+  setReactSelectionFromBrowser(bridge);
+
+  createComponentsPanel();
+  createProfilerPanel();
+}
+
+let reactPollingInstance = null;
+function clearReactPollingInstance() {
+  reactPollingInstance?.abort();
+  reactPollingInstance = null;
+}
+
+function showNoReactDisclaimer() {
+  if (componentsPortalContainer) {
+    componentsPortalContainer.innerHTML =
+      '<h1 class="no-react-disclaimer">Looks like this page doesn\'t have React, or it hasn\'t been loaded yet.</h1>';
+    delete componentsPortalContainer._hasInitialHTMLBeenCleared;
+  }
+
+  if (profilerPortalContainer) {
+    profilerPortalContainer.innerHTML =
+      '<h1 class="no-react-disclaimer">Looks like this page doesn\'t have React, or it hasn\'t been loaded yet.</h1>';
+    delete profilerPortalContainer._hasInitialHTMLBeenCleared;
+  }
+}
+
+function mountReactDevToolsWhenReactHasLoaded() {
+  reactPollingInstance = startReactPolling(
+    mountReactDevTools,
+    5, // ~5 seconds
+    showNoReactDisclaimer,
+  );
+}
+
+let bridge = null;
+let lastSubscribedBridgeListener = null;
+let store = null;
+
+let profilingData = null;
+
+let componentsPanel = null;
+let profilerPanel = null;
+let componentsPortalContainer = null;
+let profilerPortalContainer = null;
+
+let mostRecentOverrideTab = null;
+let render = null;
+let root = null;
+
+let port = null;
+
+// Re-initialize saved filters on navigation,
+// since global values stored on window get reset in this case.
+chrome.devtools.network.onNavigated.addListener(syncSavedPreferences);
+
+// In case when multiple navigation events emitted in a short period of time
+// This debounced callback primarily used to avoid mounting React DevTools multiple times, which results
+// into subscribing to the same events from Bridge and window multiple times
+// In this case, we will handle `operations` event twice or more and user will see
+// `Cannot add node "1" because a node with that id is already in the Store.`
+const debouncedOnNavigatedListener = debounce(() => {
+  performInTabNavigationCleanup();
+  mountReactDevToolsWhenReactHasLoaded();
+}, 500);
+
+// Cleanup previous page state and remount everything
+chrome.devtools.network.onNavigated.addListener(debouncedOnNavigatedListener);
+
+// Should be emitted when browser DevTools are closed
+if (IS_FIREFOX) {
+  // For some reason Firefox doesn't emit onBeforeUnload event
+  window.addEventListener('unload', performFullCleanup);
+} else {
+  window.addEventListener('beforeunload', performFullCleanup);
+}
+
+connectExtensionPort();
+
+syncSavedPreferences();
+mountReactDevToolsWhenReactHasLoaded();
diff --git a/packages/react-devtools-extensions/src/main/injectBackendManager.js b/packages/react-devtools-extensions/src/main/injectBackendManager.js
new file mode 100644
index 0000000000000..e70cb95a9a5ca
--- /dev/null
+++ b/packages/react-devtools-extensions/src/main/injectBackendManager.js
@@ -0,0 +1,13 @@
+/* global chrome */
+
+function injectBackendManager(tabId) {
+  chrome.runtime.sendMessage({
+    source: 'devtools-page',
+    payload: {
+      type: 'inject-backend-manager',
+      tabId,
+    },
+  });
+}
+
+export default injectBackendManager;
diff --git a/packages/react-devtools-extensions/src/main/reactPolling.js b/packages/react-devtools-extensions/src/main/reactPolling.js
new file mode 100644
index 0000000000000..9bb034c6a1091
--- /dev/null
+++ b/packages/react-devtools-extensions/src/main/reactPolling.js
@@ -0,0 +1,103 @@
+/* global chrome */
+
+class CouldNotFindReactOnThePageError extends Error {
+  constructor() {
+    super("Could not find React, or it hasn't been loaded yet");
+
+    // Maintains proper stack trace for where our error was thrown (only available on V8)
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(this, CouldNotFindReactOnThePageError);
+    }
+
+    this.name = 'CouldNotFindReactOnThePageError';
+  }
+}
+
+export function startReactPolling(
+  onReactFound,
+  attemptsThreshold,
+  onCouldNotFindReactAfterReachingAttemptsThreshold,
+) {
+  let status = 'idle';
+
+  function abort() {
+    status = 'aborted';
+  }
+
+  // This function will call onSuccess only if React was found and polling is not aborted, onError will be called for every other case
+  function checkIfReactPresentInInspectedWindow(onSuccess, onError) {
+    chrome.devtools.inspectedWindow.eval(
+      'window.__REACT_DEVTOOLS_GLOBAL_HOOK__ && window.__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.size > 0',
+      (pageHasReact, exceptionInfo) => {
+        if (status === 'aborted') {
+          onError(
+            'Polling was aborted, user probably navigated to the other page',
+          );
+          return;
+        }
+
+        if (exceptionInfo) {
+          const {code, description, isError, isException, value} =
+            exceptionInfo;
+
+          if (isException) {
+            onError(
+              `Received error while checking if react has loaded: ${value}`,
+            );
+            return;
+          }
+
+          if (isError) {
+            onError(
+              `Received error with code ${code} while checking if react has loaded: "${description}"`,
+            );
+            return;
+          }
+        }
+
+        if (pageHasReact) {
+          onSuccess();
+          return;
+        }
+
+        onError(new CouldNotFindReactOnThePageError());
+      },
+    );
+  }
+
+  // Just a Promise wrapper around `checkIfReactPresentInInspectedWindow`
+  // returns a Promise, which will resolve only if React has been found on the page
+  function poll(attempt) {
+    return new Promise((resolve, reject) => {
+      checkIfReactPresentInInspectedWindow(resolve, reject);
+    }).catch(error => {
+      if (error instanceof CouldNotFindReactOnThePageError) {
+        if (attempt === attemptsThreshold) {
+          onCouldNotFindReactAfterReachingAttemptsThreshold();
+        }
+
+        // Start next attempt in 0.5s
+        return new Promise(r => setTimeout(r, 500)).then(() =>
+          poll(attempt + 1),
+        );
+      }
+
+      // Propagating every other Error
+      throw error;
+    });
+  }
+
+  poll(1)
+    .then(onReactFound)
+    .catch(error => {
+      // Log propagated errors only if polling was not aborted
+      // Some errors are expected when user performs in-tab navigation and `.eval()` is still being executed
+      if (status === 'aborted') {
+        return;
+      }
+
+      console.error(error);
+    });
+
+  return {abort};
+}
diff --git a/packages/react-devtools-extensions/src/main/registerEventsLogger.js b/packages/react-devtools-extensions/src/main/registerEventsLogger.js
new file mode 100644
index 0000000000000..5234866fd546c
--- /dev/null
+++ b/packages/react-devtools-extensions/src/main/registerEventsLogger.js
@@ -0,0 +1,18 @@
+/* global chrome */
+
+import {registerDevToolsEventLogger} from 'react-devtools-shared/src/registerDevToolsEventLogger';
+
+function registerEventsLogger() {
+  registerDevToolsEventLogger('extension', async () => {
+    // TODO: after we upgrade to Firefox Manifest V3, chrome.tabs.query returns a Promise without the callback.
+    return new Promise(resolve => {
+      chrome.tabs.query({active: true}, tabs => {
+        resolve({
+          page_url: tabs[0]?.url,
+        });
+      });
+    });
+  });
+}
+
+export default registerEventsLogger;
diff --git a/packages/react-devtools-extensions/src/main/requestAnimationFramePolyfill.js b/packages/react-devtools-extensions/src/main/requestAnimationFramePolyfill.js
new file mode 100644
index 0000000000000..ccd9a361d9c04
--- /dev/null
+++ b/packages/react-devtools-extensions/src/main/requestAnimationFramePolyfill.js
@@ -0,0 +1,17 @@
+// rAF never fires on devtools_page (because it's in the background)
+// https://bugs.chromium.org/p/chromium/issues/detail?id=1241986#c31
+// Since we render React elements here, we need to polyfill it with setTimeout
+// The polyfill is based on https://gist.github.com/jalbam/5fe05443270fa6d8136238ec72accbc0
+const FRAME_TIME = 16;
+let lastTime = 0;
+
+window.requestAnimationFrame = function (callback, element) {
+  const now = window.performance.now();
+  const nextTime = Math.max(lastTime + FRAME_TIME, now);
+
+  return setTimeout(function () {
+    callback((lastTime = nextTime));
+  }, nextTime - now);
+};
+
+window.cancelAnimationFrame = clearTimeout;
diff --git a/packages/react-devtools-extensions/src/main/syncSavedPreferences.js b/packages/react-devtools-extensions/src/main/syncSavedPreferences.js
new file mode 100644
index 0000000000000..6ceed86fcd06d
--- /dev/null
+++ b/packages/react-devtools-extensions/src/main/syncSavedPreferences.js
@@ -0,0 +1,38 @@
+/* global chrome */
+
+import {
+  getAppendComponentStack,
+  getBreakOnConsoleErrors,
+  getSavedComponentFilters,
+  getShowInlineWarningsAndErrors,
+  getHideConsoleLogsInStrictMode,
+} from 'react-devtools-shared/src/utils';
+import {getBrowserTheme} from 'react-devtools-extensions/src/utils';
+
+// The renderer interface can't read saved component filters directly,
+// because they are stored in localStorage within the context of the extension.
+// Instead it relies on the extension to pass filters through.
+function syncSavedPreferences() {
+  chrome.devtools.inspectedWindow.eval(
+    `window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = ${JSON.stringify(
+      getAppendComponentStack(),
+    )};
+    window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ = ${JSON.stringify(
+      getBreakOnConsoleErrors(),
+    )};
+    window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = ${JSON.stringify(
+      getSavedComponentFilters(),
+    )};
+    window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ = ${JSON.stringify(
+      getShowInlineWarningsAndErrors(),
+    )};
+    window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = ${JSON.stringify(
+      getHideConsoleLogsInStrictMode(),
+    )};
+    window.__REACT_DEVTOOLS_BROWSER_THEME__ = ${JSON.stringify(
+      getBrowserTheme(),
+    )};`,
+  );
+}
+
+export default syncSavedPreferences;
diff --git a/packages/react-devtools-extensions/src/utils.js b/packages/react-devtools-extensions/src/utils.js
index 9fc9f2502eec1..91311dcc766bb 100644
--- a/packages/react-devtools-extensions/src/utils.js
+++ b/packages/react-devtools-extensions/src/utils.js
@@ -2,26 +2,9 @@
 
 import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevTools';
 
-export const IS_EDGE = navigator.userAgent.indexOf('Edg') >= 0;
-export const IS_FIREFOX = navigator.userAgent.indexOf('Firefox') >= 0;
-export const IS_CHROME = IS_EDGE === false && IS_FIREFOX === false;
-
-export type BrowserName = 'Chrome' | 'Firefox' | 'Edge';
-
-export function getBrowserName(): BrowserName {
-  if (IS_EDGE) {
-    return 'Edge';
-  }
-  if (IS_FIREFOX) {
-    return 'Firefox';
-  }
-  if (IS_CHROME) {
-    return 'Chrome';
-  }
-  throw new Error(
-    'Expected browser name to be one of Chrome, Edge or Firefox.',
-  );
-}
+export const IS_EDGE: boolean = process.env.IS_EDGE;
+export const IS_FIREFOX: boolean = process.env.IS_FIREFOX;
+export const IS_CHROME: boolean = process.env.IS_CHROME;
 
 export function getBrowserTheme(): BrowserTheme {
   if (IS_CHROME) {
diff --git a/packages/react-devtools-extensions/webpack.backend.js b/packages/react-devtools-extensions/webpack.backend.js
index e613415e2362b..87d4d8e2fbd02 100644
--- a/packages/react-devtools-extensions/webpack.backend.js
+++ b/packages/react-devtools-extensions/webpack.backend.js
@@ -34,6 +34,10 @@ const __DEV__ = NODE_ENV === 'development';
 
 const DEVTOOLS_VERSION = getVersionString(process.env.DEVTOOLS_VERSION);
 
+const IS_CHROME = process.env.IS_CHROME === 'true';
+const IS_FIREFOX = process.env.IS_FIREFOX === 'true';
+const IS_EDGE = process.env.IS_EDGE === 'true';
+
 const featureFlagTarget = process.env.FEATURE_FLAG_TARGET || 'extension-oss';
 
 module.exports = {
@@ -79,6 +83,9 @@ module.exports = {
       'process.env.LIGHT_MODE_DIMMED_WARNING_COLOR': `"${LIGHT_MODE_DIMMED_WARNING_COLOR}"`,
       'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"${LIGHT_MODE_DIMMED_ERROR_COLOR}"`,
       'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"${LIGHT_MODE_DIMMED_LOG_COLOR}"`,
+      'process.env.IS_CHROME': IS_CHROME,
+      'process.env.IS_FIREFOX': IS_FIREFOX,
+      'process.env.IS_EDGE': IS_EDGE,
     }),
     new DevToolsIgnorePlugin({
       shouldIgnorePath: function (path) {
diff --git a/packages/react-devtools-extensions/webpack.config.js b/packages/react-devtools-extensions/webpack.config.js
index 202c3ad086015..e6c3ca931bb51 100644
--- a/packages/react-devtools-extensions/webpack.config.js
+++ b/packages/react-devtools-extensions/webpack.config.js
@@ -2,6 +2,7 @@
 
 const {resolve} = require('path');
 const Webpack = require('webpack');
+const TerserPlugin = require('terser-webpack-plugin');
 const {
   DARK_MODE_DIMMED_WARNING_COLOR,
   DARK_MODE_DIMMED_ERROR_COLOR,
@@ -35,6 +36,10 @@ const DEVTOOLS_VERSION = getVersionString(process.env.DEVTOOLS_VERSION);
 const EDITOR_URL = process.env.EDITOR_URL || null;
 const LOGGING_URL = process.env.LOGGING_URL || null;
 
+const IS_CHROME = process.env.IS_CHROME === 'true';
+const IS_FIREFOX = process.env.IS_FIREFOX === 'true';
+const IS_EDGE = process.env.IS_EDGE === 'true';
+
 const featureFlagTarget = process.env.FEATURE_FLAG_TARGET || 'extension-oss';
 
 const babelOptions = {
@@ -50,9 +55,10 @@ module.exports = {
   mode: __DEV__ ? 'development' : 'production',
   devtool: __DEV__ ? 'cheap-module-source-map' : false,
   entry: {
-    background: './src/background.js',
-    backendManager: './src/backendManager.js',
-    main: './src/main.js',
+    background: './src/background/index.js',
+    backendManager: './src/contentScripts/backendManager.js',
+    fileFetcher: './src/contentScripts/fileFetcher.js',
+    main: './src/main/index.js',
     panel: './src/panel.js',
     proxy: './src/contentScripts/proxy.js',
     prepareInjection: './src/contentScripts/prepareInjection.js',
@@ -80,7 +86,21 @@ module.exports = {
     },
   },
   optimization: {
-    minimize: false,
+    minimize: !__DEV__,
+    minimizer: [
+      new TerserPlugin({
+        terserOptions: {
+          compress: false,
+          mangle: {
+            keep_fnames: true,
+          },
+          format: {
+            comments: false,
+          },
+        },
+        extractComments: false,
+      }),
+    ],
   },
   plugins: [
     new Webpack.ProvidePlugin({
@@ -105,6 +125,9 @@ module.exports = {
       'process.env.LIGHT_MODE_DIMMED_WARNING_COLOR': `"${LIGHT_MODE_DIMMED_WARNING_COLOR}"`,
       'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"${LIGHT_MODE_DIMMED_ERROR_COLOR}"`,
       'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"${LIGHT_MODE_DIMMED_LOG_COLOR}"`,
+      'process.env.IS_CHROME': IS_CHROME,
+      'process.env.IS_FIREFOX': IS_FIREFOX,
+      'process.env.IS_EDGE': IS_EDGE,
     }),
   ],
   module: {
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index 270119f7a8cc9..b651289d57b18 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-inline",
-  "version": "4.28.0",
+  "version": "4.28.4",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
index bc50e175e9c3c..7f70586bd6f71 100644
--- a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
+++ b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
@@ -461,10 +461,6 @@ describe('InspectedElement', () => {
     // This test causes an intermediate error to be logged but we can ignore it.
     jest.spyOn(console, 'error').mockImplementation(() => {});
 
-    // Wait for our check-for-updates poll to get the new data.
-    jest.runOnlyPendingTimers();
-    await Promise.resolve();
-
     // Clear the frontend cache to simulate DevTools being closed and re-opened.
     // The backend still thinks the most recently-inspected element is still cached,
     // so the frontend needs to tell it to resend a full value.
@@ -1072,7 +1068,6 @@ describe('InspectedElement', () => {
       await TestUtilsAct(async () => {
         await TestRendererAct(async () => {
           inspectElementPath(path);
-          jest.runOnlyPendingTimers();
         });
       });
 
@@ -1227,7 +1222,6 @@ describe('InspectedElement', () => {
       await TestUtilsAct(async () => {
         await TestRendererAct(async () => {
           inspectElementPath(path);
-          jest.runOnlyPendingTimers();
         });
       });
 
@@ -1309,7 +1303,6 @@ describe('InspectedElement', () => {
       await TestUtilsAct(async () => {
         await TestRendererAct(async () => {
           inspectElementPath(path);
-          jest.runOnlyPendingTimers();
         });
       });
 
@@ -1470,9 +1463,8 @@ describe('InspectedElement', () => {
 
     async function loadPath(path) {
       await TestUtilsAct(async () => {
-        await TestRendererAct(async () => {
+        await TestRendererAct(() => {
           inspectElementPath(path);
-          jest.runOnlyPendingTimers();
         });
       });
 
@@ -1597,9 +1589,8 @@ describe('InspectedElement', () => {
 
     async function loadPath(path) {
       await TestUtilsAct(async () => {
-        await TestRendererAct(async () => {
+        await TestRendererAct(() => {
           inspectElementPath(path);
-          jest.runOnlyPendingTimers();
         });
       });
 
@@ -1640,9 +1631,11 @@ describe('InspectedElement', () => {
     expect(inspectedElement.props).toMatchInlineSnapshot(`
       {
         "nestedObject": {
-          "a": Dehydrated {
-            "preview_short": {…},
-            "preview_long": {b: {…}, value: 2},
+          "a": {
+            "b": {
+              "value": 2,
+            },
+            "value": 2,
           },
           "value": 2,
         },
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index e694339687483..050793aa107b6 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -1419,22 +1419,20 @@ export function attach(
 
     const boundHasOwnProperty = hasOwnProperty.bind(queue);
 
-    // Detect the shape of useState() or useReducer()
+    // Detect the shape of useState() / useReducer() / useTransition()
     // using the attributes that are unique to these hooks
     // but also stable (e.g. not tied to current Lanes implementation)
-    const isStateOrReducer =
-      boundHasOwnProperty('pending') &&
-      boundHasOwnProperty('dispatch') &&
-      typeof queue.dispatch === 'function';
+    // We don't check for dispatch property, because useTransition doesn't have it
+    if (boundHasOwnProperty('pending')) {
+      return true;
+    }
 
     // Detect useSyncExternalStore()
-    const isSyncExternalStore =
+    return (
       boundHasOwnProperty('value') &&
       boundHasOwnProperty('getSnapshot') &&
-      typeof queue.getSnapshot === 'function';
-
-    // These are the only types of hooks that can schedule an update.
-    return isStateOrReducer || isSyncExternalStore;
+      typeof queue.getSnapshot === 'function'
+    );
   }
 
   function didStatefulHookChange(prev: any, next: any): boolean {
@@ -2345,6 +2343,18 @@ export function attach(
       const prevFallbackChildSet = prevFiberChild
         ? prevFiberChild.sibling
         : null;
+
+      if (prevFallbackChildSet == null && nextFallbackChildSet != null) {
+        mountFiberRecursively(
+          nextFallbackChildSet,
+          shouldIncludeInTree ? nextFiber : parentFiber,
+          true,
+          traceNearestHostComponentUpdate,
+        );
+
+        shouldResetChildren = true;
+      }
+
       if (
         nextFallbackChildSet != null &&
         prevFallbackChildSet != null &&
diff --git a/packages/react-devtools-shared/src/backendAPI.js b/packages/react-devtools-shared/src/backendAPI.js
index 8d5cb409fe403..fcbfb423a7f01 100644
--- a/packages/react-devtools-shared/src/backendAPI.js
+++ b/packages/react-devtools-shared/src/backendAPI.js
@@ -11,6 +11,7 @@ import {hydrate, fillInPath} from 'react-devtools-shared/src/hydration';
 import {separateDisplayNameAndHOCs} from 'react-devtools-shared/src/utils';
 import Store from 'react-devtools-shared/src/devtools/store';
 import TimeoutError from 'react-devtools-shared/src/errors/TimeoutError';
+import ElementPollingCancellationError from 'react-devtools-shared/src/errors/ElementPollingCancellationError';
 
 import type {
   InspectedElement as InspectedElementBackend,
@@ -138,7 +139,7 @@ export function storeAsGlobal({
   });
 }
 
-const TIMEOUT_DELAY = 5000;
+const TIMEOUT_DELAY = 10_000;
 
 let requestCounter = 0;
 
@@ -151,10 +152,17 @@ function getPromiseForRequestID<T>(
   return new Promise((resolve, reject) => {
     const cleanup = () => {
       bridge.removeListener(eventType, onInspectedElement);
+      bridge.removeListener('shutdown', onDisconnect);
+      bridge.removeListener('pauseElementPolling', onDisconnect);
 
       clearTimeout(timeoutID);
     };
 
+    const onDisconnect = () => {
+      cleanup();
+      reject(new ElementPollingCancellationError());
+    };
+
     const onInspectedElement = (data: any) => {
       if (data.responseID === requestID) {
         cleanup();
@@ -168,6 +176,8 @@ function getPromiseForRequestID<T>(
     };
 
     bridge.addListener(eventType, onInspectedElement);
+    bridge.addListener('shutdown', onDisconnect);
+    bridge.addListener('pauseElementPolling', onDisconnect);
 
     const timeoutID = setTimeout(onTimeout, TIMEOUT_DELAY);
   });
diff --git a/packages/react-devtools-shared/src/bridge.js b/packages/react-devtools-shared/src/bridge.js
index f4576e65096c6..b5876ddb33623 100644
--- a/packages/react-devtools-shared/src/bridge.js
+++ b/packages/react-devtools-shared/src/bridge.js
@@ -263,6 +263,9 @@ type FrontendEvents = {
   overrideHookState: [OverrideHookState],
   overrideProps: [OverrideValue],
   overrideState: [OverrideValue],
+
+  resumeElementPolling: [],
+  pauseElementPolling: [],
 };
 
 class Bridge<
diff --git a/packages/react-devtools-shared/src/constants.js b/packages/react-devtools-shared/src/constants.js
index 5c2454a36f909..b73c178bf2980 100644
--- a/packages/react-devtools-shared/src/constants.js
+++ b/packages/react-devtools-shared/src/constants.js
@@ -39,6 +39,9 @@ export const SESSION_STORAGE_LAST_SELECTION_KEY =
 export const LOCAL_STORAGE_OPEN_IN_EDITOR_URL =
   'React::DevTools::openInEditorUrl';
 
+export const LOCAL_STORAGE_OPEN_IN_EDITOR_URL_PRESET =
+  'React::DevTools::openInEditorUrlPreset';
+
 export const LOCAL_STORAGE_PARSE_HOOK_NAMES_KEY =
   'React::DevTools::parseHookNames';
 
@@ -65,4 +68,7 @@ export const LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY =
 export const LOCAL_STORAGE_HIDE_CONSOLE_LOGS_IN_STRICT_MODE =
   'React::DevTools::hideConsoleLogsInStrictMode';
 
+export const LOCAL_STORAGE_SUPPORTS_PROFILING_KEY =
+  'React::DevTools::supportsProfiling';
+
 export const PROFILER_EXPORT_VERSION = 5;
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 8d5f02c1a02f0..eca9f80f2bb32 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
@@ -219,8 +219,11 @@ export default function InspectedElementWrapper(_: Props): React.Node {
     }
 
     const url = new URL(editorURL);
-    url.href = url.href.replace('{path}', source.fileName);
-    url.href = url.href.replace('{line}', String(source.lineNumber));
+    url.href = url.href
+      .replace('{path}', source.fileName)
+      .replace('{line}', String(source.lineNumber))
+      .replace('%7Bpath%7D', source.fileName)
+      .replace('%7Bline%7D', String(source.lineNumber));
     window.open(url);
   }, [inspectedElement, editorURL]);
 
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 13bc39ba2f467..c1b7ac777f11a 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
@@ -24,8 +24,8 @@ import {
 import {TreeStateContext} from './TreeContext';
 import {BridgeContext, StoreContext} from '../context';
 import {
-  checkForUpdate,
   inspectElement,
+  startElementUpdatesPolling,
 } from 'react-devtools-shared/src/inspectedElementCache';
 import {
   clearHookNamesCache,
@@ -59,8 +59,6 @@ type Context = {
 export const InspectedElementContext: ReactContext<Context> =
   createContext<Context>(((null: any): Context));
 
-const POLL_INTERVAL = 1000;
-
 export type Props = {
   children: ReactNodeList,
 };
@@ -107,6 +105,8 @@ export function InspectedElementContextController({
     parseHookNamesByDefault || alreadyLoadedHookNames,
   );
 
+  const [bridgeIsAlive, setBridgeIsAliveStatus] = useState<boolean>(true);
+
   const elementHasChanged = element !== null && element !== state.element;
 
   // Reset the cached inspected paths when a new element is selected.
@@ -213,16 +213,34 @@ export function InspectedElementContextController({
     }
   }, [state]);
 
+  useEffect(() => {
+    // Assuming that new bridge is always alive at this moment
+    setBridgeIsAliveStatus(true);
+
+    const listener = () => setBridgeIsAliveStatus(false);
+    bridge.addListener('shutdown', listener);
+
+    return () => bridge.removeListener('shutdown', listener);
+  }, [bridge]);
+
   // Periodically poll the selected element for updates.
   useEffect(() => {
-    if (element !== null) {
-      const checkForUpdateWrapper = () => {
-        checkForUpdate({bridge, element, refresh, store});
-        timeoutID = setTimeout(checkForUpdateWrapper, POLL_INTERVAL);
-      };
-      let timeoutID = setTimeout(checkForUpdateWrapper, POLL_INTERVAL);
+    if (element !== null && bridgeIsAlive) {
+      const {abort, pause, resume} = startElementUpdatesPolling({
+        bridge,
+        element,
+        refresh,
+        store,
+      });
+
+      bridge.addListener('resumeElementPolling', resume);
+      bridge.addListener('pauseElementPolling', pause);
+
       return () => {
-        clearTimeout(timeoutID);
+        bridge.removeListener('resumeElementPolling', resume);
+        bridge.removeListener('pauseElementPolling', pause);
+
+        abort();
       };
     }
   }, [
@@ -232,6 +250,7 @@ export function InspectedElementContextController({
     // No sense to ping right away after e.g. inspecting/hydrating a path.
     inspectedElement,
     state,
+    bridgeIsAlive,
   ]);
 
   const value = useMemo<Context>(
diff --git a/packages/react-devtools-shared/src/devtools/views/DevTools.js b/packages/react-devtools-shared/src/devtools/views/DevTools.js
index ea7a996d3235c..3eef04ece7c63 100644
--- a/packages/react-devtools-shared/src/devtools/views/DevTools.js
+++ b/packages/react-devtools-shared/src/devtools/views/DevTools.js
@@ -269,6 +269,7 @@ export default function DevTools({
   useEffect(() => {
     logEvent({event_name: 'loaded-dev-tools'});
   }, []);
+
   return (
     <BridgeContext.Provider value={bridge}>
       <StoreContext.Provider value={store}>
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 023116060e62a..99a5ab2d103f0 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js
@@ -16,7 +16,10 @@ import {
   useRef,
   useState,
 } from 'react';
-import {LOCAL_STORAGE_OPEN_IN_EDITOR_URL} from '../../../constants';
+import {
+  LOCAL_STORAGE_OPEN_IN_EDITOR_URL,
+  LOCAL_STORAGE_OPEN_IN_EDITOR_URL_PRESET,
+} from '../../../constants';
 import {useLocalStorage, useSubscription} from '../hooks';
 import {StoreContext} from '../context';
 import Button from '../Button';
@@ -51,6 +54,8 @@ import type {
   RegExpComponentFilter,
 } from 'react-devtools-shared/src/types';
 
+const vscodeFilepath = 'vscode://file/{path}:{line}';
+
 export default function ComponentsSettings(_: {}): React.Node {
   const store = useContext(StoreContext);
   const {parseHookNames, setParseHookNames} = useContext(SettingsContext);
@@ -83,6 +88,10 @@ export default function ComponentsSettings(_: {}): React.Node {
     [setParseHookNames],
   );
 
+  const [openInEditorURLPreset, setOpenInEditorURLPreset] = useLocalStorage<
+    'vscode' | 'custom',
+  >(LOCAL_STORAGE_OPEN_IN_EDITOR_URL_PRESET, 'custom');
+
   const [openInEditorURL, setOpenInEditorURL] = useLocalStorage<string>(
     LOCAL_STORAGE_OPEN_IN_EDITOR_URL,
     getDefaultOpenInEditorURL(),
@@ -209,6 +218,10 @@ export default function ComponentsSettings(_: {}): React.Node {
     });
   }, []);
 
+  const removeAllFilter = () => {
+    setComponentFilters([]);
+  };
+
   const toggleFilterIsEnabled = useCallback(
     (componentFilter: ComponentFilter, isEnabled: boolean) => {
       setComponentFilters(prevComponentFilters => {
@@ -280,15 +293,32 @@ export default function ComponentsSettings(_: {}): React.Node {
 
       <label className={styles.OpenInURLSetting}>
         Open in Editor URL:{' '}
-        <input
-          className={styles.Input}
-          type="text"
-          placeholder={process.env.EDITOR_URL ?? 'vscode://file/{path}:{line}'}
-          value={openInEditorURL}
-          onChange={event => {
-            setOpenInEditorURL(event.target.value);
-          }}
-        />
+        <select
+          className={styles.Select}
+          value={openInEditorURLPreset}
+          onChange={({currentTarget}) => {
+            const selectedValue = currentTarget.value;
+            setOpenInEditorURLPreset(selectedValue);
+            if (selectedValue === 'vscode') {
+              setOpenInEditorURL(vscodeFilepath);
+            } else if (selectedValue === 'custom') {
+              setOpenInEditorURL('');
+            }
+          }}>
+          <option value="vscode">VS Code</option>
+          <option value="custom">Custom</option>
+        </select>
+        {openInEditorURLPreset === 'custom' && (
+          <input
+            className={styles.Input}
+            type="text"
+            placeholder={process.env.EDITOR_URL ? process.env.EDITOR_URL : ''}
+            value={openInEditorURL}
+            onChange={event => {
+              setOpenInEditorURL(event.target.value);
+            }}
+          />
+        )}
       </label>
 
       <div className={styles.Header}>Hide components where...</div>
@@ -408,11 +438,16 @@ export default function ComponentsSettings(_: {}): React.Node {
           ))}
         </tbody>
       </table>
-
-      <Button onClick={addFilter}>
+      <Button onClick={addFilter} title="Add filter">
         <ButtonIcon className={styles.ButtonIcon} type="add" />
         Add filter
       </Button>
+      {componentFilters.length > 0 && (
+        <Button onClick={removeAllFilter} title="Delete all filters">
+          <ButtonIcon className={styles.ButtonIcon} type="delete" />
+          Delete all filters
+        </Button>
+      )}
     </div>
   );
 }
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css
index de0b8da9e6f0f..c803f611908f4 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css
@@ -88,6 +88,7 @@
   border: 1px solid var(--color-border);
   border-radius: 0.125rem;
   padding: 0.125rem;
+  margin-left: .5rem;
 }
 
 .InvalidRegExp,
diff --git a/packages/react-devtools-shared/src/errors/ElementPollingCancellationError.js b/packages/react-devtools-shared/src/errors/ElementPollingCancellationError.js
new file mode 100644
index 0000000000000..c30a9f77a58b1
--- /dev/null
+++ b/packages/react-devtools-shared/src/errors/ElementPollingCancellationError.js
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export default class ElementPollingCancellationError extends Error {
+  constructor() {
+    super();
+
+    // Maintains proper stack trace for where our error was thrown (only available on V8)
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(this, ElementPollingCancellationError);
+    }
+
+    this.name = 'ElementPollingCancellationError';
+  }
+}
diff --git a/packages/react-devtools-shared/src/hook.js b/packages/react-devtools-shared/src/hook.js
index 39af7daa374ce..4df992e23ea61 100644
--- a/packages/react-devtools-shared/src/hook.js
+++ b/packages/react-devtools-shared/src/hook.js
@@ -320,7 +320,7 @@ export function installHook(target: any): DevToolsHook | null {
 
   let uidCounter = 0;
 
-  function inject(renderer: ReactRenderer) {
+  function inject(renderer: ReactRenderer): number {
     const id = ++uidCounter;
     renderers.set(id, renderer);
 
diff --git a/packages/react-devtools-shared/src/inspectedElementCache.js b/packages/react-devtools-shared/src/inspectedElementCache.js
index f0fb6c542ef32..bfa9fb1092406 100644
--- a/packages/react-devtools-shared/src/inspectedElementCache.js
+++ b/packages/react-devtools-shared/src/inspectedElementCache.js
@@ -11,8 +11,9 @@ import {
   unstable_getCacheForType as getCacheForType,
   startTransition,
 } from 'react';
-import Store from './devtools/store';
-import {inspectElement as inspectElementMutableSource} from './inspectedElementMutableSource';
+import Store from 'react-devtools-shared/src/devtools/store';
+import {inspectElement as inspectElementMutableSource} from 'react-devtools-shared/src/inspectedElementMutableSource';
+import ElementPollingCancellationError from 'react-devtools-shared/src//errors/ElementPollingCancellationError';
 
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 import type {Wakeable} from 'shared/ReactTypes';
@@ -177,35 +178,111 @@ export function checkForUpdate({
   element: Element,
   refresh: RefreshFunction,
   store: Store,
-}): void {
+}): void | Promise<void> {
   const {id} = element;
   const rendererID = store.getRendererIDForElement(id);
-  if (rendererID != null) {
-    inspectElementMutableSource({
-      bridge,
-      element,
-      path: null,
-      rendererID: ((rendererID: any): number),
-    }).then(
-      ([inspectedElement, responseType]: [
-        InspectedElementFrontend,
-        InspectedElementResponseType,
-      ]) => {
-        if (responseType === 'full-data') {
-          startTransition(() => {
-            const [key, value] = createCacheSeed(element, inspectedElement);
-            refresh(key, value);
-          });
+
+  if (rendererID == null) {
+    return;
+  }
+
+  return inspectElementMutableSource({
+    bridge,
+    element,
+    path: null,
+    rendererID,
+  }).then(
+    ([inspectedElement, responseType]: [
+      InspectedElementFrontend,
+      InspectedElementResponseType,
+    ]) => {
+      if (responseType === 'full-data') {
+        startTransition(() => {
+          const [key, value] = createCacheSeed(element, inspectedElement);
+          refresh(key, value);
+        });
+      }
+    },
+  );
+}
+
+function createPromiseWhichResolvesInOneSecond() {
+  return new Promise(resolve => setTimeout(resolve, 1000));
+}
+
+type PollingStatus = 'idle' | 'running' | 'paused' | 'aborted';
+
+export function startElementUpdatesPolling({
+  bridge,
+  element,
+  refresh,
+  store,
+}: {
+  bridge: FrontendBridge,
+  element: Element,
+  refresh: RefreshFunction,
+  store: Store,
+}): {abort: () => void, pause: () => void, resume: () => void} {
+  let status: PollingStatus = 'idle';
+
+  function abort() {
+    status = 'aborted';
+  }
+
+  function resume() {
+    if (status === 'running' || status === 'aborted') {
+      return;
+    }
+
+    status = 'idle';
+    poll();
+  }
+
+  function pause() {
+    if (status === 'paused' || status === 'aborted') {
+      return;
+    }
+
+    status = 'paused';
+  }
+
+  function poll(): Promise<void> {
+    status = 'running';
+
+    return Promise.allSettled([
+      checkForUpdate({bridge, element, refresh, store}),
+      createPromiseWhichResolvesInOneSecond(),
+    ])
+      .then(([{status: updateStatus, reason}]) => {
+        // There isn't much to do about errors in this case,
+        // but we should at least log them, so they aren't silent.
+        // Log only if polling is still active, we can't handle the case when
+        // request was sent, and then bridge was remounted (for example, when user did navigate to a new page),
+        // but at least we can mark that polling was aborted
+        if (updateStatus === 'rejected' && status !== 'aborted') {
+          // This is expected Promise rejection, no need to log it
+          if (reason instanceof ElementPollingCancellationError) {
+            return;
+          }
+
+          console.error(reason);
         }
-      },
+      })
+      .finally(() => {
+        const shouldContinuePolling =
+          status !== 'aborted' && status !== 'paused';
 
-      // There isn't much to do about errors in this case,
-      // but we should at least log them so they aren't silent.
-      error => {
-        console.error(error);
-      },
-    );
+        status = 'idle';
+
+        if (shouldContinuePolling) {
+          return poll();
+        }
+      });
   }
+
+  poll();
+
+  return {abort, resume, pause};
 }
 
 export function clearCacheBecauseOfError(refresh: RefreshFunction): void {
diff --git a/packages/react-devtools-timeline/package.json b/packages/react-devtools-timeline/package.json
index 970edc5496b11..6ae9e6bdbd813 100644
--- a/packages/react-devtools-timeline/package.json
+++ b/packages/react-devtools-timeline/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "react-devtools-timeline",
-  "version": "4.28.0",
+  "version": "4.28.4",
   "license": "MIT",
   "dependencies": {
     "@elg/speedscope": "1.9.0-a6f84db",
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index e0c16ea03f088..c503a95712c17 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -4,6 +4,58 @@
 
 ---
 
+### 4.28.4
+September 25, 2023
+
+#### Features
+* feat:-Added a delete all filters action and added title to the add filter a… ([Biki-das](https://github.com/Biki-das) in [#27332](https://github.com/facebook/react/pull/27332))
+* feat[devtools/extension]: add dark theme for popup ([rakleed](https://github.com/rakleed) in [#27330](https://github.com/facebook/react/pull/27330))
+
+#### Bugfixes
+* refactor[devtools/extension]: refactored messaging logic across different parts of the extension ([hoxyq](https://github.com/hoxyq) in [#27417](https://github.com/facebook/react/pull/27417))
+* fix[devtools/extension]: added a workaround for proxy content script injection in firefox ([hoxyq](https://github.com/hoxyq) in [#27375](https://github.com/facebook/react/pull/27375))
+* fix[devtools/useTransition]: don't check for dispatch property when determining if hook is stateful ([hoxyq](https://github.com/hoxyq) in [#27365](https://github.com/facebook/react/pull/27365))
+* feat[devtools/extension]: show disclaimer when page doesnt run react and refactor react polling logic ([hoxyq](https://github.com/hoxyq) in [#27373](https://github.com/facebook/react/pull/27373))
+* fix[devtools/extension]: unregister dynamically injected content scripts instead of filtering ([hoxyq](https://github.com/hoxyq) in [#27369](https://github.com/facebook/react/pull/27369))
+* refactor[devtools/extension]: more stable element updates polling to avoid timed out errors ([hoxyq](https://github.com/hoxyq) in [#27357](https://github.com/facebook/react/pull/27357))
+
+---
+
+### 4.28.3
+September 5, 2023
+
+* refactor[devtools/extension]: handle ports disconnection, instead of frequent reconnection ([hoxyq](https://github.com/hoxyq) in [#27336](https://github.com/facebook/react/pull/27336))
+* refactor[devtools/extension]: migrate from using setInterval for polling if react is loaded ([hoxyq](https://github.com/hoxyq) in [#27323](https://github.com/facebook/react/pull/27323))
+* fix[devtools/extension]: fixed duplicating panels in firefox ([hoxyq](https://github.com/hoxyq) in [#27320](https://github.com/facebook/react/pull/27320))
+
+---
+
+### 4.28.2
+August 30, 2023
+
+#### Bugfixes
+* fix[devtools/extension]: handle tab navigation events before react is loaded ([hoxyq](https://github.com/hoxyq) in [#27316](https://github.com/facebook/react/pull/27316))
+
+---
+
+### 4.28.1
+August 29, 2023
+
+#### Features
+* feat: added open in editor to appear by default ([Biki-das](https://github.com/Biki-das) in [#26949](https://github.com/facebook/react/pull/26949))
+
+#### Bugfixes
+* refactor: refactored devtools browser extension scripts to improve port management and service worker lifetime ([hoxyq](https://github.com/hoxyq) in [#27215](https://github.com/facebook/react/pull/27215))
+* fix[devtools]: allow element updates polling only if bridge is alive ([hoxyq](https://github.com/hoxyq) in [#27067](https://github.com/facebook/react/pull/27067))
+* refactor: resolve browser via env variables based on build rather than user agent ([hoxyq](https://github.com/hoxyq) in [#27179](https://github.com/facebook/react/pull/27179))
+* fix[devtools/updateFiberRecursively]: mount suspense fallback set in timed out case ([hoxyq](https://github.com/hoxyq) in [#27147](https://github.com/facebook/react/pull/27147))
+* fix[devtools/inspect]: null check memoized props before trying to call hasOwnProperty ([hoxyq](https://github.com/hoxyq) in [#27057](https://github.com/facebook/react/pull/27057))
+
+#### Other
+* refactor[devtools/extension]: minify production builds to strip comments ([hoxyq](https://github.com/hoxyq) in [#27304](https://github.com/facebook/react/pull/27304))
+
+---
+
 ### 4.28.0
 July 4, 2023
 
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index f2bef3b12afbf..577a98ac3d1c9 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.28.0",
+  "version": "4.28.4",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -27,7 +27,7 @@
     "electron": "^23.1.2",
     "ip": "^1.1.4",
     "minimist": "^1.2.3",
-    "react-devtools-core": "4.28.0",
+    "react-devtools-core": "4.28.4",
     "update-notifier": "^2.1.0"
   }
 }
diff --git a/packages/react-dom-bindings/src/client/CSSPropertyOperations.js b/packages/react-dom-bindings/src/client/CSSPropertyOperations.js
index 521f4c67fc66b..55fd43ec479d0 100644
--- a/packages/react-dom-bindings/src/client/CSSPropertyOperations.js
+++ b/packages/react-dom-bindings/src/client/CSSPropertyOperations.js
@@ -11,7 +11,6 @@ import hyphenateStyleName from '../shared/hyphenateStyleName';
 import warnValidStyle from '../shared/warnValidStyle';
 import isUnitlessNumber from '../shared/isUnitlessNumber';
 import {checkCSSPropertyStringCoercion} from 'shared/CheckStringCoercion';
-import {diffInCommitPhase} from 'shared/ReactFeatureFlags';
 
 /**
  * Operations for dealing with CSS properties.
@@ -126,7 +125,7 @@ export function setValueForStyles(node, styles, prevStyles) {
 
   const style = node.style;
 
-  if (diffInCommitPhase && prevStyles != null) {
+  if (prevStyles != null) {
     if (__DEV__) {
       validateShorthandPropertyCollisionInDev(prevStyles, styles);
     }
@@ -200,10 +199,7 @@ function expandShorthandMap(styles) {
  *   {font: 'foo', fontVariant: 'bar'} -> {font: 'foo'}
  *   becomes .style.fontVariant = ''
  */
-export function validateShorthandPropertyCollisionInDev(
-  prevStyles,
-  nextStyles,
-) {
+function validateShorthandPropertyCollisionInDev(prevStyles, nextStyles) {
   if (__DEV__) {
     if (!nextStyles) {
       return;
diff --git a/packages/react-dom-bindings/src/client/ReactDOMComponent.js b/packages/react-dom-bindings/src/client/ReactDOMComponent.js
index 6454ee7c2d424..cbd51de23412d 100644
--- a/packages/react-dom-bindings/src/client/ReactDOMComponent.js
+++ b/packages/react-dom-bindings/src/client/ReactDOMComponent.js
@@ -55,7 +55,6 @@ import setTextContent from './setTextContent';
 import {
   createDangerousStringForStyles,
   setValueForStyles,
-  validateShorthandPropertyCollisionInDev,
 } from './CSSPropertyOperations';
 import {SVG_NAMESPACE, MATH_NAMESPACE} from './DOMNamespaces';
 import isCustomElement from '../shared/isCustomElement';
@@ -74,7 +73,6 @@ import {
   disableIEWorkarounds,
   enableTrustedTypesIntegration,
   enableFilterEmptyStringAttributesDOM,
-  diffInCommitPhase,
 } from 'shared/ReactFeatureFlags';
 import {
   mediaEventTypes,
@@ -501,7 +499,7 @@ function setProp(
             // eslint-disable-next-line no-script-url
             "javascript:throw new Error('" +
               'A React form was unexpectedly submitted. If you called form.submit() manually, ' +
-              "consider using form.requestSubmit() instead. If you're trying to use " +
+              "consider using form.requestSubmit() instead. If you\\'re trying to use " +
               'event.stopPropagation() in a submit event handler, consider also calling ' +
               'event.preventDefault().' +
               "')",
@@ -1341,119 +1339,6 @@ export function setInitialProperties(
   }
 }
 
-// Calculate the diff between the two objects.
-export function diffProperties(
-  domElement: Element,
-  tag: string,
-  lastProps: Object,
-  nextProps: Object,
-): null | Array<mixed> {
-  if (__DEV__) {
-    validatePropertiesInDevelopment(tag, nextProps);
-  }
-
-  let updatePayload: null | Array<any> = null;
-
-  let propKey;
-  let styleName;
-  let styleUpdates = null;
-  for (propKey in lastProps) {
-    if (
-      nextProps.hasOwnProperty(propKey) ||
-      !lastProps.hasOwnProperty(propKey) ||
-      lastProps[propKey] == null
-    ) {
-      continue;
-    }
-    switch (propKey) {
-      case 'style': {
-        const lastStyle = lastProps[propKey];
-        for (styleName in lastStyle) {
-          if (lastStyle.hasOwnProperty(styleName)) {
-            if (!styleUpdates) {
-              styleUpdates = ({}: {[string]: $FlowFixMe});
-            }
-            styleUpdates[styleName] = '';
-          }
-        }
-        break;
-      }
-      default: {
-        // For all other deleted properties we add it to the queue. We use
-        // the allowed property list in the commit phase instead.
-        (updatePayload = updatePayload || []).push(propKey, null);
-      }
-    }
-  }
-  for (propKey in nextProps) {
-    const nextProp = nextProps[propKey];
-    const lastProp = lastProps != null ? lastProps[propKey] : undefined;
-    if (
-      nextProps.hasOwnProperty(propKey) &&
-      nextProp !== lastProp &&
-      (nextProp != null || lastProp != null)
-    ) {
-      switch (propKey) {
-        case 'style': {
-          if (lastProp) {
-            // Unset styles on `lastProp` but not on `nextProp`.
-            for (styleName in lastProp) {
-              if (
-                lastProp.hasOwnProperty(styleName) &&
-                (!nextProp || !nextProp.hasOwnProperty(styleName))
-              ) {
-                if (!styleUpdates) {
-                  styleUpdates = ({}: {[string]: string});
-                }
-                styleUpdates[styleName] = '';
-              }
-            }
-            // Update styles that changed since `lastProp`.
-            for (styleName in nextProp) {
-              if (
-                nextProp.hasOwnProperty(styleName) &&
-                lastProp[styleName] !== nextProp[styleName]
-              ) {
-                if (!styleUpdates) {
-                  styleUpdates = ({}: {[string]: $FlowFixMe});
-                }
-                styleUpdates[styleName] = nextProp[styleName];
-              }
-            }
-          } else {
-            // Relies on `updateStylesByID` not mutating `styleUpdates`.
-            if (!styleUpdates) {
-              if (!updatePayload) {
-                updatePayload = [];
-              }
-              updatePayload.push(propKey, styleUpdates);
-            }
-            styleUpdates = nextProp;
-          }
-          break;
-        }
-        case 'is':
-          if (__DEV__) {
-            console.error(
-              'Cannot update the "is" prop after it has been initialized.',
-            );
-          }
-        // Fall through
-        default: {
-          (updatePayload = updatePayload || []).push(propKey, nextProp);
-        }
-      }
-    }
-  }
-  if (styleUpdates) {
-    if (__DEV__) {
-      validateShorthandPropertyCollisionInDev(lastProps.style, nextProps.style);
-    }
-    (updatePayload = updatePayload || []).push('style', styleUpdates);
-  }
-  return updatePayload;
-}
-
 export function updateProperties(
   domElement: Element,
   tag: string,
@@ -1924,305 +1809,6 @@ export function updateProperties(
   }
 }
 
-// Apply the diff.
-export function updatePropertiesWithDiff(
-  domElement: Element,
-  updatePayload: Array<any>,
-  tag: string,
-  lastProps: Object,
-  nextProps: Object,
-): void {
-  switch (tag) {
-    case 'div':
-    case 'span':
-    case 'svg':
-    case 'path':
-    case 'a':
-    case 'g':
-    case 'p':
-    case 'li': {
-      // Fast track the most common tag types
-      break;
-    }
-    case 'input': {
-      const name = nextProps.name;
-      const type = nextProps.type;
-      const value = nextProps.value;
-      const defaultValue = nextProps.defaultValue;
-      const lastDefaultValue = lastProps.defaultValue;
-      const checked = nextProps.checked;
-      const defaultChecked = nextProps.defaultChecked;
-      for (let i = 0; i < updatePayload.length; i += 2) {
-        const propKey = updatePayload[i];
-        const propValue = updatePayload[i + 1];
-        switch (propKey) {
-          case 'type': {
-            break;
-          }
-          case 'name': {
-            break;
-          }
-          case 'checked': {
-            break;
-          }
-          case 'defaultChecked': {
-            break;
-          }
-          case 'value': {
-            break;
-          }
-          case 'defaultValue': {
-            break;
-          }
-          case 'children':
-          case 'dangerouslySetInnerHTML': {
-            if (propValue != null) {
-              throw new Error(
-                `${tag} is a void element tag and must neither have \`children\` nor ` +
-                  'use `dangerouslySetInnerHTML`.',
-              );
-            }
-            break;
-          }
-          default: {
-            setProp(
-              domElement,
-              tag,
-              propKey,
-              propValue,
-              nextProps,
-              lastProps[propKey],
-            );
-          }
-        }
-      }
-
-      if (__DEV__) {
-        const wasControlled =
-          lastProps.type === 'checkbox' || lastProps.type === 'radio'
-            ? lastProps.checked != null
-            : lastProps.value != null;
-        const isControlled =
-          nextProps.type === 'checkbox' || nextProps.type === 'radio'
-            ? nextProps.checked != null
-            : nextProps.value != null;
-
-        if (
-          !wasControlled &&
-          isControlled &&
-          !didWarnUncontrolledToControlled
-        ) {
-          console.error(
-            'A component is changing an uncontrolled input to be controlled. ' +
-              'This is likely caused by the value changing from undefined to ' +
-              'a defined value, which should not happen. ' +
-              'Decide between using a controlled or uncontrolled input ' +
-              'element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components',
-          );
-          didWarnUncontrolledToControlled = true;
-        }
-        if (
-          wasControlled &&
-          !isControlled &&
-          !didWarnControlledToUncontrolled
-        ) {
-          console.error(
-            'A component is changing a controlled input to be uncontrolled. ' +
-              'This is likely caused by the value changing from a defined to ' +
-              'undefined, which should not happen. ' +
-              'Decide between using a controlled or uncontrolled input ' +
-              'element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components',
-          );
-          didWarnControlledToUncontrolled = true;
-        }
-      }
-
-      // Update the wrapper around inputs *after* updating props. This has to
-      // happen after updating the rest of props. Otherwise HTML5 input validations
-      // raise warnings and prevent the new value from being assigned.
-      updateInput(
-        domElement,
-        value,
-        defaultValue,
-        lastDefaultValue,
-        checked,
-        defaultChecked,
-        type,
-        name,
-      );
-      return;
-    }
-    case 'select': {
-      const value = nextProps.value;
-      const defaultValue = nextProps.defaultValue;
-      const multiple = nextProps.multiple;
-      const wasMultiple = lastProps.multiple;
-      for (let i = 0; i < updatePayload.length; i += 2) {
-        const propKey = updatePayload[i];
-        const propValue = updatePayload[i + 1];
-        switch (propKey) {
-          case 'value': {
-            // This is handled by updateWrapper below.
-            break;
-          }
-          // defaultValue are ignored by setProp
-          default: {
-            setProp(
-              domElement,
-              tag,
-              propKey,
-              propValue,
-              nextProps,
-              lastProps[propKey],
-            );
-          }
-        }
-      }
-      // <select> value update needs to occur after <option> children
-      // reconciliation
-      updateSelect(domElement, value, defaultValue, multiple, wasMultiple);
-      return;
-    }
-    case 'textarea': {
-      const value = nextProps.value;
-      const defaultValue = nextProps.defaultValue;
-      for (let i = 0; i < updatePayload.length; i += 2) {
-        const propKey = updatePayload[i];
-        const propValue = updatePayload[i + 1];
-        switch (propKey) {
-          case 'value': {
-            // This is handled by updateWrapper below.
-            break;
-          }
-          case 'children': {
-            // TODO: This doesn't actually do anything if it updates.
-            break;
-          }
-          case 'dangerouslySetInnerHTML': {
-            if (propValue != null) {
-              // TODO: Do we really need a special error message for this. It's also pretty blunt.
-              throw new Error(
-                '`dangerouslySetInnerHTML` does not make sense on <textarea>.',
-              );
-            }
-            break;
-          }
-          // defaultValue is ignored by setProp
-          default: {
-            setProp(
-              domElement,
-              tag,
-              propKey,
-              propValue,
-              nextProps,
-              lastProps[propKey],
-            );
-          }
-        }
-      }
-      updateTextarea(domElement, value, defaultValue);
-      return;
-    }
-    case 'option': {
-      for (let i = 0; i < updatePayload.length; i += 2) {
-        const propKey = updatePayload[i];
-        const propValue = updatePayload[i + 1];
-        switch (propKey) {
-          case 'selected': {
-            // TODO: Remove support for selected on option.
-            (domElement: any).selected =
-              propValue &&
-              typeof propValue !== 'function' &&
-              typeof propValue !== 'symbol';
-            break;
-          }
-          default: {
-            setProp(
-              domElement,
-              tag,
-              propKey,
-              propValue,
-              nextProps,
-              lastProps[propKey],
-            );
-          }
-        }
-      }
-      return;
-    }
-    case 'img':
-    case 'link':
-    case 'area':
-    case 'base':
-    case 'br':
-    case 'col':
-    case 'embed':
-    case 'hr':
-    case 'keygen':
-    case 'meta':
-    case 'param':
-    case 'source':
-    case 'track':
-    case 'wbr':
-    case 'menuitem': {
-      // Void elements
-      for (let i = 0; i < updatePayload.length; i += 2) {
-        const propKey = updatePayload[i];
-        const propValue = updatePayload[i + 1];
-        switch (propKey) {
-          case 'children':
-          case 'dangerouslySetInnerHTML': {
-            if (propValue != null) {
-              // TODO: Can we make this a DEV warning to avoid this deny list?
-              throw new Error(
-                `${tag} is a void element tag and must neither have \`children\` nor ` +
-                  'use `dangerouslySetInnerHTML`.',
-              );
-            }
-            break;
-          }
-          // defaultChecked and defaultValue are ignored by setProp
-          default: {
-            setProp(
-              domElement,
-              tag,
-              propKey,
-              propValue,
-              nextProps,
-              lastProps[propKey],
-            );
-          }
-        }
-      }
-      return;
-    }
-    default: {
-      if (isCustomElement(tag, nextProps)) {
-        for (let i = 0; i < updatePayload.length; i += 2) {
-          const propKey = updatePayload[i];
-          const propValue = updatePayload[i + 1];
-          setPropOnCustomElement(
-            domElement,
-            tag,
-            propKey,
-            propValue,
-            nextProps,
-            lastProps[propKey],
-          );
-        }
-        return;
-      }
-    }
-  }
-
-  // Apply the diff.
-  for (let i = 0; i < updatePayload.length; i += 2) {
-    const propKey = updatePayload[i];
-    const propValue = updatePayload[i + 1];
-    setProp(domElement, tag, propKey, propValue, nextProps, lastProps[propKey]);
-  }
-}
-
 function getPossibleStandardName(propName: string): string | null {
   if (__DEV__) {
     const lowerCasedName = propName.toLowerCase();
@@ -3094,7 +2680,7 @@ export function diffHydratedProperties(
   isConcurrentMode: boolean,
   shouldWarnDev: boolean,
   hostContext: HostContext,
-): null | Array<mixed> {
+): void {
   if (__DEV__) {
     validatePropertiesInDevelopment(tag, props);
   }
@@ -3192,8 +2778,6 @@ export function diffHydratedProperties(
       break;
   }
 
-  let updatePayload = null;
-
   const children = props.children;
   // For text content children we compare against textContent. This
   // might match additional HTML that is hidden when we read it using
@@ -3215,17 +2799,13 @@ export function diffHydratedProperties(
         );
       }
       if (!isConcurrentMode || !enableClientRenderFallbackOnTextMismatch) {
-        if (diffInCommitPhase) {
-          // We really should be patching this in the commit phase but since
-          // this only affects legacy mode hydration which is deprecated anyway
-          // we can get away with it.
-          // Host singletons get their children appended and don't use the text
-          // content mechanism.
-          if (!enableHostSingletons || tag !== 'body') {
-            domElement.textContent = (children: any);
-          }
-        } else {
-          updatePayload = ['children', children];
+        // We really should be patching this in the commit phase but since
+        // this only affects legacy mode hydration which is deprecated anyway
+        // we can get away with it.
+        // Host singletons get their children appended and don't use the text
+        // content mechanism.
+        if (!enableHostSingletons || tag !== 'body') {
+          domElement.textContent = (children: any);
         }
       }
     }
@@ -3281,8 +2861,6 @@ export function diffHydratedProperties(
       warnForExtraAttributes(extraAttributes);
     }
   }
-
-  return updatePayload;
 }
 
 export function diffHydratedText(
diff --git a/packages/react-dom-bindings/src/client/ReactDOMInput.js b/packages/react-dom-bindings/src/client/ReactDOMInput.js
index 409bf1e907650..4411887e3cbf0 100644
--- a/packages/react-dom-bindings/src/client/ReactDOMInput.js
+++ b/packages/react-dom-bindings/src/client/ReactDOMInput.js
@@ -388,10 +388,6 @@ export function restoreControlledInputState(element: Element, props: Object) {
         );
       }
 
-      // We need update the tracked value on the named cousin since the value
-      // was changed but the input saw no event or value set
-      updateValueIfChanged(otherNode);
-
       // If this is a controlled radio button group, forcing the input that
       // was previously checked to update will cause it to be come re-checked
       // as appropriate.
@@ -406,6 +402,16 @@ export function restoreControlledInputState(element: Element, props: Object) {
         otherProps.name,
       );
     }
+
+    // If any updateInput() call set .checked to true, an input in this group
+    // (often, `rootNode` itself) may have become unchecked
+    for (let i = 0; i < group.length; i++) {
+      const otherNode = ((group[i]: any): HTMLInputElement);
+      if (otherNode.form !== rootNode.form) {
+        continue;
+      }
+      updateValueIfChanged(otherNode);
+    }
   }
 }
 
diff --git a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
index 1149e442f98ea..0e42d00847995 100644
--- a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
+++ b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
@@ -20,10 +20,12 @@ import type {ReactScopeInstance} from 'shared/ReactTypes';
 import type {AncestorInfoDev} from './validateDOMNesting';
 import type {FormStatus} from 'react-dom-bindings/src/shared/ReactDOMFormActions';
 import type {
-  PrefetchDNSOptions,
-  PreconnectOptions,
-  PreloadOptions,
-  PreinitOptions,
+  CrossOriginEnum,
+  PreloadImplOptions,
+  PreloadModuleImplOptions,
+  PreinitStyleOptions,
+  PreinitScriptOptions,
+  PreinitModuleScriptOptions,
 } from 'react-dom/src/shared/ReactDOMTypes';
 
 import {NotPending} from 'react-dom-bindings/src/shared/ReactDOMFormActions';
@@ -52,9 +54,7 @@ export {detachDeletedInstance};
 import {hasRole} from './DOMAccessibilityRoles';
 import {
   setInitialProperties,
-  diffProperties,
   updateProperties,
-  updatePropertiesWithDiff,
   diffHydratedProperties,
   diffHydratedText,
   trapClickOnNonInteractiveElement,
@@ -94,8 +94,8 @@ import {
   enableFloat,
   enableHostSingletons,
   enableTrustedTypesIntegration,
-  diffInCommitPhase,
   enableFormActions,
+  enableAsyncActions,
 } from 'shared/ReactFeatureFlags';
 import {
   HostComponent,
@@ -104,12 +104,7 @@ import {
   HostSingleton,
 } from 'react-reconciler/src/ReactWorkTags';
 import {listenToAllSupportedEvents} from '../events/DOMPluginEventSystem';
-import {
-  validatePreinitArguments,
-  validateLinkPropsForStyleResource,
-  getValueDescriptorExpectingObjectForWarning,
-  getValueDescriptorExpectingEnumForWarning,
-} from '../shared/ReactDOMResourceValidation';
+import {validateLinkPropsForStyleResource} from '../shared/ReactDOMResourceValidation';
 import escapeSelectorAttributeValueInsideDoubleQuotes from './escapeSelectorAttributeValueInsideDoubleQuotes';
 
 export type Type = string;
@@ -158,7 +153,12 @@ export type TextInstance = Text;
 export interface SuspenseInstance extends Comment {
   _reactRetry?: () => void;
 }
-export type HydratableInstance = Instance | TextInstance | SuspenseInstance;
+type FormStateMarkerInstance = Comment;
+export type HydratableInstance =
+  | Instance
+  | TextInstance
+  | SuspenseInstance
+  | FormStateMarkerInstance;
 export type PublicInstance = Element | Text;
 export type HostContextDev = {
   context: HostContextProd,
@@ -185,6 +185,8 @@ const SUSPENSE_START_DATA = '$';
 const SUSPENSE_END_DATA = '/$';
 const SUSPENSE_PENDING_START_DATA = '$?';
 const SUSPENSE_FALLBACK_START_DATA = '$!';
+const FORM_STATE_IS_MATCHING = 'F!';
+const FORM_STATE_IS_NOT_MATCHING = 'F';
 
 const STYLE = 'style';
 
@@ -541,20 +543,6 @@ export function finalizeInitialChildren(
   }
 }
 
-export function prepareUpdate(
-  domElement: Instance,
-  type: string,
-  oldProps: Props,
-  newProps: Props,
-  hostContext: HostContext,
-): null | Array<mixed> {
-  if (diffInCommitPhase) {
-    // TODO: Figure out how to validateDOMNesting when children turn into a string.
-    return null;
-  }
-  return diffProperties(domElement, type, oldProps, newProps);
-}
-
 export function shouldSetTextContent(type: string, props: Props): boolean {
   return (
     type === 'textarea' ||
@@ -707,19 +695,8 @@ export function commitUpdate(
   newProps: Props,
   internalInstanceHandle: Object,
 ): void {
-  if (diffInCommitPhase) {
-    // Diff and update the properties.
-    updateProperties(domElement, type, oldProps, newProps);
-  } else {
-    // Apply the diff to the DOM node.
-    updatePropertiesWithDiff(
-      domElement,
-      updatePayload,
-      type,
-      oldProps,
-      newProps,
-    );
-  }
+  // Diff and update the properties.
+  updateProperties(domElement, type, oldProps, newProps);
 
   // Update the props handle so that we know which props are the ones with
   // with current event handlers.
@@ -1206,7 +1183,15 @@ export function canHydrateTextInstance(
   if (text === '') return null;
 
   while (instance.nodeType !== TEXT_NODE) {
-    if (!inRootOrSingleton || !enableHostSingletons) {
+    if (
+      enableFormActions &&
+      instance.nodeType === ELEMENT_NODE &&
+      instance.nodeName === 'INPUT' &&
+      (instance: any).type === 'hidden'
+    ) {
+      // If we have extra hidden inputs, we don't mismatch. This allows us to
+      // embed extra form data in the original form.
+    } else if (!inRootOrSingleton || !enableHostSingletons) {
       return null;
     }
     const nextInstance = getNextHydratableSibling(instance);
@@ -1281,6 +1266,37 @@ export function registerSuspenseInstanceRetry(
   instance._reactRetry = callback;
 }
 
+export function canHydrateFormStateMarker(
+  instance: HydratableInstance,
+  inRootOrSingleton: boolean,
+): null | FormStateMarkerInstance {
+  while (instance.nodeType !== COMMENT_NODE) {
+    if (!inRootOrSingleton || !enableHostSingletons) {
+      return null;
+    }
+    const nextInstance = getNextHydratableSibling(instance);
+    if (nextInstance === null) {
+      return null;
+    }
+    instance = nextInstance;
+  }
+  const nodeData = (instance: any).data;
+  if (
+    nodeData === FORM_STATE_IS_MATCHING ||
+    nodeData === FORM_STATE_IS_NOT_MATCHING
+  ) {
+    const markerInstance: FormStateMarkerInstance = (instance: any);
+    return markerInstance;
+  }
+  return null;
+}
+
+export function isFormStateMarkerMatching(
+  markerInstance: FormStateMarkerInstance,
+): boolean {
+  return markerInstance.data === FORM_STATE_IS_MATCHING;
+}
+
 function getNextHydratable(node: ?Node) {
   // Skip non-hydratable nodes.
   for (; node != null; node = ((node: any): Node).nextSibling) {
@@ -1293,7 +1309,11 @@ function getNextHydratable(node: ?Node) {
       if (
         nodeData === SUSPENSE_START_DATA ||
         nodeData === SUSPENSE_FALLBACK_START_DATA ||
-        nodeData === SUSPENSE_PENDING_START_DATA
+        nodeData === SUSPENSE_PENDING_START_DATA ||
+        (enableFormActions &&
+          enableAsyncActions &&
+          (nodeData === FORM_STATE_IS_MATCHING ||
+            nodeData === FORM_STATE_IS_NOT_MATCHING))
       ) {
         break;
       }
@@ -1336,7 +1356,7 @@ export function hydrateInstance(
   hostContext: HostContext,
   internalInstanceHandle: Object,
   shouldWarnDev: boolean,
-): null | Array<mixed> {
+): void {
   precacheFiberNode(internalInstanceHandle, instance);
   // TODO: Possibly defer this until the commit phase where all the events
   // get attached.
@@ -1347,7 +1367,7 @@ export function hydrateInstance(
   const isConcurrentMode =
     ((internalInstanceHandle: Fiber).mode & ConcurrentMode) !== NoMode;
 
-  return diffHydratedProperties(
+  diffHydratedProperties(
     instance,
     type,
     props,
@@ -2018,6 +2038,11 @@ type PreloadProps = {
   href: ?string,
   [string]: mixed,
 };
+type PreloadModuleProps = {
+  rel: 'modulepreload',
+  href: string,
+  [string]: mixed,
+};
 
 export type RootResources = {
   hoistableStyles: Map<string, StyleResource>,
@@ -2029,7 +2054,8 @@ export function prepareToCommitHoistables() {
 }
 
 // global collections of Resources
-const preloadPropsMap: Map<string, PreloadProps> = new Map();
+const preloadPropsMap: Map<string, PreloadProps | PreloadModuleProps> =
+  new Map();
 const preconnectsSet: Set<string> = new Set();
 
 export type HoistableRoot = Document | ShadowRoot;
@@ -2060,7 +2086,10 @@ export const ReactDOMClientDispatcher: HostDispatcher = {
   prefetchDNS,
   preconnect,
   preload,
-  preinit,
+  preloadModule,
+  preinitStyle,
+  preinitScript,
+  preinitModuleScript,
 };
 
 // We expect this to get inlined. It is a function mostly to communicate the special nature of
@@ -2075,8 +2104,8 @@ function getDocumentForImperativeFloatMethods(): Document {
 
 function preconnectAs(
   rel: 'preconnect' | 'dns-prefetch',
-  crossOrigin: null | '' | 'use-credentials',
   href: string,
+  crossOrigin: ?CrossOriginEnum,
 ) {
   const ownerDocument = getDocumentForImperativeFloatMethods();
   if (typeof href === 'string' && href) {
@@ -2100,119 +2129,37 @@ function preconnectAs(
   }
 }
 
-function prefetchDNS(href: string, options?: ?PrefetchDNSOptions) {
+function prefetchDNS(href: string) {
   if (!enableFloat) {
     return;
   }
-  if (__DEV__) {
-    if (typeof href !== 'string' || !href) {
-      console.error(
-        'ReactDOM.prefetchDNS(): Expected the `href` argument (first) to be a non-empty string but encountered %s instead.',
-        getValueDescriptorExpectingObjectForWarning(href),
-      );
-    } else if (options != null) {
-      if (
-        typeof options === 'object' &&
-        hasOwnProperty.call(options, 'crossOrigin')
-      ) {
-        console.error(
-          'ReactDOM.prefetchDNS(): Expected only one argument, `href`, but encountered %s as a second argument instead. This argument is reserved for future options and is currently disallowed. It looks like the you are attempting to set a crossOrigin property for this DNS lookup hint. Browsers do not perform DNS queries using CORS and setting this attribute on the resource hint has no effect. Try calling ReactDOM.prefetchDNS() with just a single string argument, `href`.',
-          getValueDescriptorExpectingEnumForWarning(options),
-        );
-      } else {
-        console.error(
-          'ReactDOM.prefetchDNS(): Expected only one argument, `href`, but encountered %s as a second argument instead. This argument is reserved for future options and is currently disallowed. Try calling ReactDOM.prefetchDNS() with just a single string argument, `href`.',
-          getValueDescriptorExpectingEnumForWarning(options),
-        );
-      }
-    }
-  }
-  preconnectAs('dns-prefetch', null, href);
+  preconnectAs('dns-prefetch', href, null);
 }
 
-function preconnect(href: string, options?: ?PreconnectOptions) {
+function preconnect(href: string, crossOrigin?: ?CrossOriginEnum) {
   if (!enableFloat) {
     return;
   }
-  if (__DEV__) {
-    if (typeof href !== 'string' || !href) {
-      console.error(
-        'ReactDOM.preconnect(): Expected the `href` argument (first) to be a non-empty string but encountered %s instead.',
-        getValueDescriptorExpectingObjectForWarning(href),
-      );
-    } else if (options != null && typeof options !== 'object') {
-      console.error(
-        'ReactDOM.preconnect(): Expected the `options` argument (second) to be an object but encountered %s instead. The only supported option at this time is `crossOrigin` which accepts a string.',
-        getValueDescriptorExpectingEnumForWarning(options),
-      );
-    } else if (options != null && typeof options.crossOrigin !== 'string') {
-      console.error(
-        'ReactDOM.preconnect(): Expected the `crossOrigin` option (second argument) to be a string but encountered %s instead. Try removing this option or passing a string value instead.',
-        getValueDescriptorExpectingObjectForWarning(options.crossOrigin),
-      );
-    }
-  }
-  const crossOrigin =
-    options == null || typeof options.crossOrigin !== 'string'
-      ? null
-      : options.crossOrigin === 'use-credentials'
-      ? 'use-credentials'
-      : '';
-  preconnectAs('preconnect', crossOrigin, href);
+  preconnectAs('preconnect', href, crossOrigin);
 }
 
-function preload(href: string, options: PreloadOptions) {
+function preload(href: string, as: string, options?: ?PreloadImplOptions) {
   if (!enableFloat) {
     return;
   }
-  if (__DEV__) {
-    // TODO move this to ReactDOMFloat and expose a stricter function interface or possibly
-    // typed functions (preloadImage, preloadStyle, ...)
-    let encountered = '';
-    if (typeof href !== 'string' || !href) {
-      encountered += `The \`href\` argument encountered was ${getValueDescriptorExpectingObjectForWarning(
-        href,
-      )}.`;
-    }
-    if (options == null || typeof options !== 'object') {
-      encountered += `The \`options\` argument encountered was ${getValueDescriptorExpectingObjectForWarning(
-        options,
-      )}.`;
-    } else if (typeof options.as !== 'string' || !options.as) {
-      encountered += `The \`as\` option encountered was ${getValueDescriptorExpectingObjectForWarning(
-        options.as,
-      )}.`;
-    }
-    if (encountered) {
-      console.error(
-        'ReactDOM.preload(): Expected two arguments, a non-empty `href` string and an `options` object with an `as` property valid for a `<link rel="preload" as="..." />` tag. %s',
-        encountered,
-      );
-    }
-  }
   const ownerDocument = getDocumentForImperativeFloatMethods();
-  if (
-    typeof href === 'string' &&
-    href &&
-    typeof options === 'object' &&
-    options !== null &&
-    typeof options.as === 'string' &&
-    options.as &&
-    ownerDocument
-  ) {
-    const as = options.as;
+  if (href && as && ownerDocument) {
     let preloadSelector = `link[rel="preload"][as="${escapeSelectorAttributeValueInsideDoubleQuotes(
       as,
     )}"]`;
     if (as === 'image') {
-      const {imageSrcSet, imageSizes} = options;
-      if (typeof imageSrcSet === 'string' && imageSrcSet !== '') {
+      if (options && options.imageSrcSet) {
         preloadSelector += `[imagesrcset="${escapeSelectorAttributeValueInsideDoubleQuotes(
-          imageSrcSet,
+          options.imageSrcSet,
         )}"]`;
-        if (typeof imageSizes === 'string') {
+        if (typeof options.imageSizes === 'string') {
           preloadSelector += `[imagesizes="${escapeSelectorAttributeValueInsideDoubleQuotes(
-            imageSizes,
+            options.imageSizes,
           )}"]`;
         }
       } else {
@@ -2238,7 +2185,19 @@ function preload(href: string, options: PreloadOptions) {
         break;
     }
     if (!preloadPropsMap.has(key)) {
-      const preloadProps = preloadPropsFromPreloadOptions(href, as, options);
+      const preloadProps = Object.assign(
+        ({
+          rel: 'preload',
+          // There is a bug in Safari where imageSrcSet is not respected on preload links
+          // so we omit the href here if we have imageSrcSet b/c safari will load the wrong image.
+          // This harms older browers that do not support imageSrcSet by making their preloads not work
+          // but this population is shrinking fast and is already small so we accept this tradeoff.
+          href:
+            as === 'image' && options && options.imageSrcSet ? undefined : href,
+          as,
+        }: PreloadProps),
+        options,
+      );
       preloadPropsMap.set(key, preloadProps);
 
       if (null === ownerDocument.querySelector(preloadSelector)) {
@@ -2264,186 +2223,257 @@ function preload(href: string, options: PreloadOptions) {
   }
 }
 
-function preloadPropsFromPreloadOptions(
-  href: string,
-  as: string,
-  options: PreloadOptions,
-): PreloadProps {
-  return {
-    rel: 'preload',
-    as,
-    // There is a bug in Safari where imageSrcSet is not respected on preload links
-    // so we omit the href here if we have imageSrcSet b/c safari will load the wrong image.
-    // This harms older browers that do not support imageSrcSet by making their preloads not work
-    // but this population is shrinking fast and is already small so we accept this tradeoff.
-    href: as === 'image' && options.imageSrcSet ? undefined : href,
-    crossOrigin: as === 'font' ? '' : options.crossOrigin,
-    integrity: options.integrity,
-    type: options.type,
-    nonce: options.nonce,
-    fetchPriority: options.fetchPriority,
-    imageSrcSet: options.imageSrcSet,
-    imageSizes: options.imageSizes,
-    referrerPolicy: options.referrerPolicy,
-  };
+function preloadModule(href: string, options?: ?PreloadModuleImplOptions) {
+  if (!enableFloat) {
+    return;
+  }
+  const ownerDocument = getDocumentForImperativeFloatMethods();
+  if (href) {
+    const as =
+      options && typeof options.as === 'string' ? options.as : 'script';
+    const preloadSelector = `link[rel="modulepreload"][as="${escapeSelectorAttributeValueInsideDoubleQuotes(
+      as,
+    )}"][href="${escapeSelectorAttributeValueInsideDoubleQuotes(href)}"]`;
+    // Some preloads are keyed under their selector. This happens when the preload is for
+    // an arbitrary type. Other preloads are keyed under the resource key they represent a preload for.
+    // Here we figure out which key to use to determine if we have a preload already.
+    let key = preloadSelector;
+    switch (as) {
+      case 'audioworklet':
+      case 'paintworklet':
+      case 'serviceworker':
+      case 'sharedworker':
+      case 'worker':
+      case 'script': {
+        key = getScriptKey(href);
+        break;
+      }
+    }
+
+    if (!preloadPropsMap.has(key)) {
+      const props: PreloadModuleProps = Object.assign(
+        ({
+          rel: 'modulepreload',
+          href,
+        }: PreloadModuleProps),
+        options,
+      );
+      preloadPropsMap.set(key, props);
+
+      if (null === ownerDocument.querySelector(preloadSelector)) {
+        switch (as) {
+          case 'audioworklet':
+          case 'paintworklet':
+          case 'serviceworker':
+          case 'sharedworker':
+          case 'worker':
+          case 'script': {
+            if (ownerDocument.querySelector(getScriptSelectorFromKey(key))) {
+              return;
+            }
+          }
+        }
+        const instance = ownerDocument.createElement('link');
+        setInitialProperties(instance, 'link', props);
+        markNodeAsHoistable(instance);
+        (ownerDocument.head: any).appendChild(instance);
+      }
+    }
+  }
 }
 
-function preinit(href: string, options: PreinitOptions) {
+function preinitStyle(
+  href: string,
+  precedence: ?string,
+  options?: ?PreinitStyleOptions,
+) {
   if (!enableFloat) {
     return;
   }
-  if (__DEV__) {
-    validatePreinitArguments(href, options);
-  }
   const ownerDocument = getDocumentForImperativeFloatMethods();
 
-  if (
-    typeof href === 'string' &&
-    href &&
-    typeof options === 'object' &&
-    options !== null
-  ) {
-    const as = options.as;
+  if (href) {
+    const styles = getResourcesFromRoot(ownerDocument).hoistableStyles;
 
-    switch (as) {
-      case 'style': {
-        const styles = getResourcesFromRoot(ownerDocument).hoistableStyles;
+    const key = getStyleKey(href);
+    precedence = precedence || 'default';
 
-        const key = getStyleKey(href);
-        const precedence = options.precedence || 'default';
+    // Check if this resource already exists
+    let resource = styles.get(key);
+    if (resource) {
+      // We can early return. The resource exists and there is nothing
+      // more to do
+      return;
+    }
 
-        // Check if this resource already exists
-        let resource = styles.get(key);
-        if (resource) {
-          // We can early return. The resource exists and there is nothing
-          // more to do
-          return;
-        }
+    const state = {
+      loading: NotLoaded,
+      preload: null,
+    };
 
-        const state = {
-          loading: NotLoaded,
-          preload: null,
-        };
+    // Attempt to hydrate instance from DOM
+    let instance: null | Instance = ownerDocument.querySelector(
+      getStylesheetSelectorFromKey(key),
+    );
+    if (instance) {
+      state.loading = Loaded;
+    } else {
+      // Construct a new instance and insert it
+      const stylesheetProps = Object.assign(
+        ({
+          rel: 'stylesheet',
+          href,
+          'data-precedence': precedence,
+        }: StylesheetProps),
+        options,
+      );
+      const preloadProps = preloadPropsMap.get(key);
+      if (preloadProps) {
+        adoptPreloadPropsForStylesheet(stylesheetProps, preloadProps);
+      }
+      const link = (instance = ownerDocument.createElement('link'));
+      markNodeAsHoistable(link);
+      setInitialProperties(link, 'link', stylesheetProps);
 
-        // Attempt to hydrate instance from DOM
-        let instance: null | Instance = ownerDocument.querySelector(
-          getStylesheetSelectorFromKey(key),
-        );
-        if (instance) {
-          state.loading = Loaded;
-        } else {
-          // Construct a new instance and insert it
-          const stylesheetProps = stylesheetPropsFromPreinitOptions(
-            href,
-            precedence,
-            options,
-          );
-          const preloadProps = preloadPropsMap.get(key);
-          if (preloadProps) {
-            adoptPreloadPropsForStylesheet(stylesheetProps, preloadProps);
-          }
-          const link = (instance = ownerDocument.createElement('link'));
-          markNodeAsHoistable(link);
-          setInitialProperties(link, 'link', stylesheetProps);
-
-          (link: any)._p = new Promise((resolve, reject) => {
-            link.onload = resolve;
-            link.onerror = reject;
-          });
-          link.addEventListener('load', () => {
-            state.loading |= Loaded;
-          });
-          link.addEventListener('error', () => {
-            state.loading |= Errored;
-          });
-
-          state.loading |= Inserted;
-          insertStylesheet(instance, precedence, ownerDocument);
-        }
+      (link: any)._p = new Promise((resolve, reject) => {
+        link.onload = resolve;
+        link.onerror = reject;
+      });
+      link.addEventListener('load', () => {
+        state.loading |= Loaded;
+      });
+      link.addEventListener('error', () => {
+        state.loading |= Errored;
+      });
 
-        // Construct a Resource and cache it
-        resource = {
-          type: 'stylesheet',
-          instance,
-          count: 1,
-          state,
-        };
-        styles.set(key, resource);
-        return;
-      }
-      case 'script': {
-        const src = href;
-        const scripts = getResourcesFromRoot(ownerDocument).hoistableScripts;
+      state.loading |= Inserted;
+      insertStylesheet(instance, precedence, ownerDocument);
+    }
 
-        const key = getScriptKey(src);
+    // Construct a Resource and cache it
+    resource = {
+      type: 'stylesheet',
+      instance,
+      count: 1,
+      state,
+    };
+    styles.set(key, resource);
+    return;
+  }
+}
 
-        // Check if this resource already exists
-        let resource = scripts.get(key);
-        if (resource) {
-          // We can early return. The resource exists and there is nothing
-          // more to do
-          return;
-        }
+function preinitScript(src: string, options?: ?PreinitScriptOptions) {
+  if (!enableFloat) {
+    return;
+  }
+  const ownerDocument = getDocumentForImperativeFloatMethods();
 
-        // Attempt to hydrate instance from DOM
-        let instance: null | Instance = ownerDocument.querySelector(
-          getScriptSelectorFromKey(key),
-        );
-        if (!instance) {
-          // Construct a new instance and insert it
-          const scriptProps = scriptPropsFromPreinitOptions(src, options);
-          // Adopt certain preload props
-          const preloadProps = preloadPropsMap.get(key);
-          if (preloadProps) {
-            adoptPreloadPropsForScript(scriptProps, preloadProps);
-          }
-          instance = ownerDocument.createElement('script');
-          markNodeAsHoistable(instance);
-          setInitialProperties(instance, 'link', scriptProps);
-          (ownerDocument.head: any).appendChild(instance);
-        }
+  if (src) {
+    const scripts = getResourcesFromRoot(ownerDocument).hoistableScripts;
 
-        // Construct a Resource and cache it
-        resource = {
-          type: 'script',
-          instance,
-          count: 1,
-          state: null,
-        };
-        scripts.set(key, resource);
-        return;
+    const key = getScriptKey(src);
+
+    // Check if this resource already exists
+    let resource = scripts.get(key);
+    if (resource) {
+      // We can early return. The resource exists and there is nothing
+      // more to do
+      return;
+    }
+
+    // Attempt to hydrate instance from DOM
+    let instance: null | Instance = ownerDocument.querySelector(
+      getScriptSelectorFromKey(key),
+    );
+    if (!instance) {
+      // Construct a new instance and insert it
+      const scriptProps = Object.assign(
+        ({
+          src,
+          async: true,
+        }: ScriptProps),
+        options,
+      );
+      // Adopt certain preload props
+      const preloadProps = preloadPropsMap.get(key);
+      if (preloadProps) {
+        adoptPreloadPropsForScript(scriptProps, preloadProps);
       }
+      instance = ownerDocument.createElement('script');
+      markNodeAsHoistable(instance);
+      setInitialProperties(instance, 'link', scriptProps);
+      (ownerDocument.head: any).appendChild(instance);
     }
-  }
-}
 
-function stylesheetPropsFromPreinitOptions(
-  href: string,
-  precedence: string,
-  options: PreinitOptions,
-): StylesheetProps {
-  return {
-    rel: 'stylesheet',
-    href,
-    'data-precedence': precedence,
-    crossOrigin: options.crossOrigin,
-    integrity: options.integrity,
-    fetchPriority: options.fetchPriority,
-  };
+    // Construct a Resource and cache it
+    resource = {
+      type: 'script',
+      instance,
+      count: 1,
+      state: null,
+    };
+    scripts.set(key, resource);
+    return;
+  }
 }
 
-function scriptPropsFromPreinitOptions(
+function preinitModuleScript(
   src: string,
-  options: PreinitOptions,
-): ScriptProps {
-  return {
-    src,
-    async: true,
-    crossOrigin: options.crossOrigin,
-    integrity: options.integrity,
-    nonce: options.nonce,
-    fetchPriority: options.fetchPriority,
-  };
+  options?: ?PreinitModuleScriptOptions,
+) {
+  if (!enableFloat) {
+    return;
+  }
+  const ownerDocument = getDocumentForImperativeFloatMethods();
+
+  if (src) {
+    const scripts = getResourcesFromRoot(ownerDocument).hoistableScripts;
+
+    const key = getScriptKey(src);
+
+    // Check if this resource already exists
+    let resource = scripts.get(key);
+    if (resource) {
+      // We can early return. The resource exists and there is nothing
+      // more to do
+      return;
+    }
+
+    // Attempt to hydrate instance from DOM
+    let instance: null | Instance = ownerDocument.querySelector(
+      getScriptSelectorFromKey(key),
+    );
+    if (!instance) {
+      // Construct a new instance and insert it
+      const scriptProps = Object.assign(
+        ({
+          src,
+          async: true,
+          type: 'module',
+        }: ScriptProps),
+        options,
+      );
+      // Adopt certain preload props
+      const preloadProps = preloadPropsMap.get(key);
+      if (preloadProps) {
+        adoptPreloadPropsForScript(scriptProps, preloadProps);
+      }
+      instance = ownerDocument.createElement('script');
+      markNodeAsHoistable(instance);
+      setInitialProperties(instance, 'link', scriptProps);
+      (ownerDocument.head: any).appendChild(instance);
+    }
+
+    // Construct a Resource and cache it
+    resource = {
+      type: 'script',
+      instance,
+      count: 1,
+      state: null,
+    };
+    scripts.set(key, resource);
+    return;
+  }
 }
 
 type StyleTagQualifyingProps = {
@@ -2854,7 +2884,7 @@ function insertStylesheet(
 
 function adoptPreloadPropsForStylesheet(
   stylesheetProps: StylesheetProps,
-  preloadProps: PreloadProps,
+  preloadProps: PreloadProps | PreloadModuleProps,
 ): void {
   if (stylesheetProps.crossOrigin == null)
     stylesheetProps.crossOrigin = preloadProps.crossOrigin;
@@ -2865,14 +2895,14 @@ function adoptPreloadPropsForStylesheet(
 
 function adoptPreloadPropsForScript(
   scriptProps: ScriptProps,
-  preloadProps: PreloadProps,
+  preloadProps: PreloadProps | PreloadModuleProps,
 ): void {
   if (scriptProps.crossOrigin == null)
     scriptProps.crossOrigin = preloadProps.crossOrigin;
   if (scriptProps.referrerPolicy == null)
     scriptProps.referrerPolicy = preloadProps.referrerPolicy;
   if (scriptProps.integrity == null)
-    scriptProps.referrerPolicy = preloadProps.integrity;
+    scriptProps.integrity = preloadProps.integrity;
 }
 
 type KeyedTagCache = Map<string, Array<Element>>;
diff --git a/packages/react-dom-bindings/src/server/ReactDOMFlightServerHostDispatcher.js b/packages/react-dom-bindings/src/server/ReactDOMFlightServerHostDispatcher.js
index 4aa5ea9f5be94..36913899bb030 100644
--- a/packages/react-dom-bindings/src/server/ReactDOMFlightServerHostDispatcher.js
+++ b/packages/react-dom-bindings/src/server/ReactDOMFlightServerHostDispatcher.js
@@ -9,10 +9,12 @@
 
 import type {
   HostDispatcher,
-  PrefetchDNSOptions,
-  PreconnectOptions,
-  PreloadOptions,
-  PreinitOptions,
+  CrossOriginEnum,
+  PreloadImplOptions,
+  PreloadModuleImplOptions,
+  PreinitStyleOptions,
+  PreinitScriptOptions,
+  PreinitModuleScriptOptions,
 } from 'react-dom/src/shared/ReactDOMTypes';
 
 import {enableFloat} from 'shared/ReactFeatureFlags';
@@ -27,92 +29,233 @@ export const ReactDOMFlightServerDispatcher: HostDispatcher = {
   prefetchDNS,
   preconnect,
   preload,
-  preinit,
+  preloadModule,
+  preinitStyle,
+  preinitScript,
+  preinitModuleScript,
 };
 
-function prefetchDNS(href: string, options?: ?PrefetchDNSOptions) {
+function prefetchDNS(href: string) {
+  if (enableFloat) {
+    if (typeof href === 'string' && href) {
+      const request = resolveRequest();
+      if (request) {
+        const hints = getHints(request);
+        const key = 'D|' + href;
+        if (hints.has(key)) {
+          // duplicate hint
+          return;
+        }
+        hints.add(key);
+        emitHint(request, 'D', href);
+      }
+    }
+  }
+}
+
+function preconnect(href: string, crossOrigin?: ?CrossOriginEnum) {
   if (enableFloat) {
     if (typeof href === 'string') {
       const request = resolveRequest();
       if (request) {
         const hints = getHints(request);
-        const key = 'D' + href;
+
+        const key = `C|${crossOrigin == null ? 'null' : crossOrigin}|${href}`;
         if (hints.has(key)) {
           // duplicate hint
           return;
         }
         hints.add(key);
-        if (options) {
-          emitHint(request, 'D', [href, options]);
+        if (typeof crossOrigin === 'string') {
+          emitHint(request, 'C', [href, crossOrigin]);
         } else {
-          emitHint(request, 'D', href);
+          emitHint(request, 'C', href);
         }
       }
     }
   }
 }
 
-function preconnect(href: string, options?: ?PreconnectOptions) {
+function preload(href: string, as: string, options?: ?PreloadImplOptions) {
   if (enableFloat) {
     if (typeof href === 'string') {
       const request = resolveRequest();
       if (request) {
         const hints = getHints(request);
-        const crossOrigin =
-          options == null || typeof options.crossOrigin !== 'string'
-            ? null
-            : options.crossOrigin === 'use-credentials'
-            ? 'use-credentials'
-            : '';
-
-        const key = `C${crossOrigin === null ? 'null' : crossOrigin}|${href}`;
+        let key = 'L';
+        if (as === 'image' && options) {
+          key += getImagePreloadKey(
+            href,
+            options.imageSrcSet,
+            options.imageSizes,
+          );
+        } else {
+          key += `[${as}]${href}`;
+        }
         if (hints.has(key)) {
           // duplicate hint
           return;
         }
         hints.add(key);
-        if (options) {
-          emitHint(request, 'C', [href, options]);
+
+        const trimmed = trimOptions(options);
+        if (trimmed) {
+          emitHint(request, 'L', [href, as, trimmed]);
         } else {
-          emitHint(request, 'C', href);
+          emitHint(request, 'L', [href, as]);
+        }
+      }
+    }
+  }
+}
+
+function preloadModule(href: string, options?: ?PreloadModuleImplOptions) {
+  if (enableFloat) {
+    if (typeof href === 'string') {
+      const request = resolveRequest();
+      if (request) {
+        const hints = getHints(request);
+        const key = 'm|' + href;
+        if (hints.has(key)) {
+          // duplicate hint
+          return;
+        }
+        hints.add(key);
+
+        const trimmed = trimOptions(options);
+        if (trimmed) {
+          return emitHint(request, 'm', [href, trimmed]);
+        } else {
+          return emitHint(request, 'm', href);
         }
       }
     }
   }
 }
 
-function preload(href: string, options: PreloadOptions) {
+function preinitStyle(
+  href: string,
+  precedence: ?string,
+  options?: ?PreinitStyleOptions,
+) {
   if (enableFloat) {
     if (typeof href === 'string') {
       const request = resolveRequest();
       if (request) {
         const hints = getHints(request);
-        const key = 'L' + href;
+        const key = 'S|' + href;
         if (hints.has(key)) {
           // duplicate hint
           return;
         }
         hints.add(key);
-        emitHint(request, 'L', [href, options]);
+
+        const trimmed = trimOptions(options);
+        if (trimmed) {
+          return emitHint(request, 'S', [
+            href,
+            typeof precedence === 'string' ? precedence : 0,
+            trimmed,
+          ]);
+        } else if (typeof precedence === 'string') {
+          return emitHint(request, 'S', [href, precedence]);
+        } else {
+          return emitHint(request, 'S', href);
+        }
       }
     }
   }
 }
 
-function preinit(href: string, options: PreinitOptions) {
+function preinitScript(href: string, options?: ?PreinitScriptOptions) {
   if (enableFloat) {
     if (typeof href === 'string') {
       const request = resolveRequest();
       if (request) {
         const hints = getHints(request);
-        const key = 'I' + href;
+        const key = 'X|' + href;
         if (hints.has(key)) {
           // duplicate hint
           return;
         }
         hints.add(key);
-        emitHint(request, 'I', [href, options]);
+
+        const trimmed = trimOptions(options);
+        if (trimmed) {
+          return emitHint(request, 'X', [href, trimmed]);
+        } else {
+          return emitHint(request, 'X', href);
+        }
       }
     }
   }
 }
+
+function preinitModuleScript(
+  href: string,
+  options?: ?PreinitModuleScriptOptions,
+) {
+  if (enableFloat) {
+    if (typeof href === 'string') {
+      const request = resolveRequest();
+      if (request) {
+        const hints = getHints(request);
+        const key = 'M|' + href;
+        if (hints.has(key)) {
+          // duplicate hint
+          return;
+        }
+        hints.add(key);
+
+        const trimmed = trimOptions(options);
+        if (trimmed) {
+          return emitHint(request, 'M', [href, trimmed]);
+        } else {
+          return emitHint(request, 'M', href);
+        }
+      }
+    }
+  }
+}
+
+// Flight normally encodes undefined as a special character however for directive option
+// arguments we don't want to send unnecessary keys and bloat the payload so we create a
+// trimmed object which omits any keys with null or undefined values.
+// This is only typesafe because these option objects have entirely optional fields where
+// null and undefined represent the same thing as no property.
+function trimOptions<
+  T:
+    | PreloadImplOptions
+    | PreloadModuleImplOptions
+    | PreinitStyleOptions
+    | PreinitScriptOptions
+    | PreinitModuleScriptOptions,
+>(options: ?T): ?T {
+  if (options == null) return null;
+  let hasProperties = false;
+  const trimmed: T = ({}: any);
+  for (const key in options) {
+    if (options[key] != null) {
+      hasProperties = true;
+      (trimmed: any)[key] = options[key];
+    }
+  }
+  return hasProperties ? trimmed : null;
+}
+
+function getImagePreloadKey(
+  href: string,
+  imageSrcSet: ?string,
+  imageSizes: ?string,
+) {
+  let uniquePart = '';
+  if (typeof imageSrcSet === 'string' && imageSrcSet !== '') {
+    uniquePart += '[' + imageSrcSet + ']';
+    if (typeof imageSizes === 'string') {
+      uniquePart += '[' + imageSizes + ']';
+    }
+  } else {
+    uniquePart += '[][]' + href;
+  }
+  return `[image]${uniquePart}`;
+}
diff --git a/packages/react-dom-bindings/src/server/ReactDOMLegacyServerStreamConfig.js b/packages/react-dom-bindings/src/server/ReactDOMLegacyServerStreamConfig.js
index c682865cabafd..0791791a148e0 100644
--- a/packages/react-dom-bindings/src/server/ReactDOMLegacyServerStreamConfig.js
+++ b/packages/react-dom-bindings/src/server/ReactDOMLegacyServerStreamConfig.js
@@ -76,3 +76,5 @@ export function closeWithError(destination: Destination, error: mixed): void {
   // $FlowFixMe[incompatible-call]: This is an Error object or the destination accepts other types.
   destination.destroy(error);
 }
+
+export {createFastHashJS as createFastHash} from 'react-server/src/createFastHashJS';
diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
index ec7d829428731..5dd228795ca87 100644
--- a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
+++ b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
@@ -9,10 +9,13 @@
 
 import type {ReactNodeList, ReactCustomFormAction} from 'shared/ReactTypes';
 import type {
-  PrefetchDNSOptions,
-  PreconnectOptions,
-  PreloadOptions,
-  PreinitOptions,
+  CrossOriginEnum,
+  PreloadImplOptions,
+  PreloadModuleImplOptions,
+  PreinitStyleOptions,
+  PreinitScriptOptions,
+  PreinitModuleScriptOptions,
+  ImportMap,
 } from 'react-dom/src/shared/ReactDOMTypes';
 
 import {
@@ -48,7 +51,8 @@ import {
 } from 'react-server/src/ReactServerStreamConfig';
 import {
   resolveRequest,
-  getResources,
+  getResumableState,
+  getRenderState,
   flushResources,
 } from 'react-server/src/ReactFizzServer';
 
@@ -76,19 +80,7 @@ import {
   formReplaying as formReplayingRuntime,
 } from './fizz-instruction-set/ReactDOMFizzInstructionSetInlineCodeStrings';
 
-import {
-  getValueDescriptorExpectingObjectForWarning,
-  getValueDescriptorExpectingEnumForWarning,
-  describeDifferencesForStylesheets,
-  describeDifferencesForStylesheetOverPreinit,
-  describeDifferencesForScripts,
-  describeDifferencesForScriptOverPreinit,
-  describeDifferencesForPreinits,
-  describeDifferencesForPreinitOverStylesheet,
-  describeDifferencesForPreinitOverScript,
-  describeDifferencesForPreloads,
-  describeDifferencesForPreloadOverImplicitPreload,
-} from '../shared/ReactDOMResourceValidation';
+import {getValueDescriptorExpectingObjectForWarning} from '../shared/ReactDOMResourceValidation';
 
 import {NotPending} from '../shared/ReactDOMFormActions';
 
@@ -99,7 +91,10 @@ const ReactDOMServerDispatcher = {
   prefetchDNS,
   preconnect,
   preload,
-  preinit,
+  preloadModule,
+  preinitStyle,
+  preinitScript,
+  preinitModuleScript,
 };
 
 export function prepareHostDispatcher() {
@@ -122,34 +117,53 @@ const SentClientRenderFunction /*         */ = 0b00100;
 const SentStyleInsertionFunction /*       */ = 0b01000;
 const SentFormReplayingRuntime /*         */ = 0b10000;
 
-// Per response, global state that is not contextual to the rendering subtree.
-export type ResponseState = {
-  bootstrapChunks: Array<Chunk | PrecomputedChunk>,
+// Per request, global state that is not contextual to the rendering subtree.
+// This cannot be resumed and therefore should only contain things that are
+// temporary working state or are never used in the prerender pass.
+export type RenderState = {
+  // These can be recreated from resumable state.
   placeholderPrefix: PrecomputedChunk,
   segmentPrefix: PrecomputedChunk,
-  boundaryPrefix: string,
-  idPrefix: string,
-  nextSuspenseID: number,
-  streamingFormat: StreamingFormat,
+  boundaryPrefix: PrecomputedChunk,
 
-  // state for script streaming format, unused if using external runtime / data
+  // inline script streaming format, unused if using external runtime / data
   startInlineScript: PrecomputedChunk,
-  instructions: InstructionState,
 
-  // state for data streaming format
-  externalRuntimeScript: null | ExternalRuntimeScript,
+  // the preamble must always flush before resuming, so all these chunks must
+  // be null or empty when resuming.
 
-  // preamble and postamble chunks and state
+  // preamble chunks
   htmlChunks: null | Array<Chunk | PrecomputedChunk>,
   headChunks: null | Array<Chunk | PrecomputedChunk>,
-  hasBody: boolean,
+
+  // external runtime script chunks
+  externalRuntimeScript: null | ExternalRuntimeScript,
+  bootstrapChunks: Array<Chunk | PrecomputedChunk>,
 
   // Hoistable chunks
   charsetChunks: Array<Chunk | PrecomputedChunk>,
   preconnectChunks: Array<Chunk | PrecomputedChunk>,
+  importMapChunks: Array<Chunk | PrecomputedChunk>,
   preloadChunks: Array<Chunk | PrecomputedChunk>,
   hoistableChunks: Array<Chunk | PrecomputedChunk>,
 
+  // Flushing queues for Resource dependencies
+  preconnects: Set<PreconnectResource>,
+  fontPreloads: Set<PreloadResource>,
+  highImagePreloads: Set<PreloadResource>,
+  // usedImagePreloads: Set<PreloadResource>,
+  precedences: Map<string, Map<string, StyleResource>>,
+  stylePrecedences: Map<string, StyleTagResource>,
+  bootstrapScripts: Set<PreloadResource>,
+  scripts: Set<ScriptResource>,
+  bulkPreloads: Set<PreloadResource>,
+
+  // Temporarily keeps track of key to preload resources before shell flushes.
+  preloadsMap: Map<string, PreloadResource>,
+
+  // Module-global-like reference for current boundary resources
+  boundaryResources: ?BoundaryResources,
+
   // Module-global-like reference for flushing/hoisting state of style resources
   // We need to track whether the current request has flushed any style resources
   // without sending an instruction to hoist them. we do that here
@@ -160,6 +174,27 @@ export type ResponseState = {
   ...
 };
 
+// Per response, global state that is not contextual to the rendering subtree.
+// This is resumable and therefore should be serializable.
+export type ResumableState = {
+  idPrefix: string,
+  nextFormID: number,
+  streamingFormat: StreamingFormat,
+
+  // state for script streaming format, unused if using external runtime / data
+  instructions: InstructionState,
+
+  // postamble state
+  hasBody: boolean,
+  hasHtml: boolean,
+
+  // Resources - Request local cache
+  preloadsMap: {[key: string]: PreloadProps},
+  preconnectsMap: {[key: string]: null},
+  stylesMap: {[key: string]: null},
+  scriptsMap: {[key: string]: null},
+};
+
 const dataElementQuotedEnd = stringToPrecomputedChunk('"></template>');
 
 const startInlineScript = stringToPrecomputedChunk('<script>');
@@ -173,7 +208,7 @@ const scriptCrossOrigin = stringToPrecomputedChunk('" crossorigin="');
 const endAsyncScript = stringToPrecomputedChunk('" async=""></script>');
 
 /**
- * This escaping function is designed to work with bootstrapScriptContent only.
+ * This escaping function is designed to work with bootstrapScriptContent and importMap only.
  * because we know we are escaping the entire script. We can avoid for instance
  * escaping html comment string sequences that are valid javascript as well because
  * if there are no sebsequent <script sequences the html parser will never enter
@@ -182,7 +217,7 @@ const endAsyncScript = stringToPrecomputedChunk('" async=""></script>');
  * While untrusted script content should be made safe before using this api it will
  * ensure that the script cannot be early terminated or never terminated state
  */
-function escapeBootstrapScriptContent(scriptText: string) {
+function escapeBootstrapAndImportMapScriptContent(scriptText: string) {
   if (__DEV__) {
     checkHtmlStringCoercion(scriptText);
   }
@@ -205,32 +240,40 @@ export type ExternalRuntimeScript = {
   src: string,
   chunks: Array<Chunk | PrecomputedChunk>,
 };
+
+const importMapScriptStart = stringToPrecomputedChunk(
+  '<script type="importmap">',
+);
+const importMapScriptEnd = stringToPrecomputedChunk('</script>');
+
 // Allows us to keep track of what we've already written so we can refer back to it.
 // if passed externalRuntimeConfig and the enableFizzExternalRuntime feature flag
 // is set, the server will send instructions via data attributes (instead of inline scripts)
-export function createResponseState(
-  resources: Resources,
-  identifierPrefix: string | void,
+export function createRenderState(
+  resumableState: ResumableState,
   nonce: string | void,
   bootstrapScriptContent: string | void,
   bootstrapScripts: $ReadOnlyArray<string | BootstrapScriptDescriptor> | void,
   bootstrapModules: $ReadOnlyArray<string | BootstrapScriptDescriptor> | void,
   externalRuntimeConfig: string | BootstrapScriptDescriptor | void,
-): ResponseState {
-  const idPrefix = identifierPrefix === undefined ? '' : identifierPrefix;
+  importMap: ImportMap | void,
+): RenderState {
   const inlineScriptWithNonce =
     nonce === undefined
       ? startInlineScript
       : stringToPrecomputedChunk(
           '<script nonce="' + escapeTextForBrowser(nonce) + '">',
         );
+  const idPrefix = resumableState.idPrefix;
+
   const bootstrapChunks: Array<Chunk | PrecomputedChunk> = [];
   let externalRuntimeScript: null | ExternalRuntimeScript = null;
-  let streamingFormat = ScriptStreamingFormat;
   if (bootstrapScriptContent !== undefined) {
     bootstrapChunks.push(
       inlineScriptWithNonce,
-      stringToChunk(escapeBootstrapScriptContent(bootstrapScriptContent)),
+      stringToChunk(
+        escapeBootstrapAndImportMapScriptContent(bootstrapScriptContent),
+      ),
       endInlineScript,
     );
   }
@@ -241,7 +284,6 @@ export function createResponseState(
       );
     }
     if (externalRuntimeConfig !== undefined) {
-      streamingFormat = DataStreamingFormat;
       if (typeof externalRuntimeConfig === 'string') {
         externalRuntimeScript = {
           src: externalRuntimeConfig,
@@ -267,6 +309,53 @@ export function createResponseState(
       }
     }
   }
+
+  const importMapChunks: Array<Chunk | PrecomputedChunk> = [];
+  if (importMap !== undefined) {
+    const map = importMap;
+    importMapChunks.push(importMapScriptStart);
+    importMapChunks.push(
+      stringToChunk(
+        escapeBootstrapAndImportMapScriptContent(JSON.stringify(map)),
+      ),
+    );
+    importMapChunks.push(importMapScriptEnd);
+  }
+  const renderState: RenderState = {
+    placeholderPrefix: stringToPrecomputedChunk(idPrefix + 'P:'),
+    segmentPrefix: stringToPrecomputedChunk(idPrefix + 'S:'),
+    boundaryPrefix: stringToPrecomputedChunk(idPrefix + 'B:'),
+    startInlineScript: inlineScriptWithNonce,
+    htmlChunks: null,
+    headChunks: null,
+
+    externalRuntimeScript: externalRuntimeScript,
+    bootstrapChunks: bootstrapChunks,
+
+    charsetChunks: [],
+    preconnectChunks: [],
+    importMapChunks,
+    preloadChunks: [],
+    hoistableChunks: [],
+    // cleared on flush
+    preconnects: new Set(),
+    fontPreloads: new Set(),
+    highImagePreloads: new Set(),
+    // usedImagePreloads: new Set(),
+    precedences: new Map(),
+    stylePrecedences: new Map(),
+    bootstrapScripts: new Set(),
+    scripts: new Set(),
+    bulkPreloads: new Set(),
+
+    preloadsMap: new Map(),
+
+    nonce,
+    // like a module global for currently rendering boundary
+    boundaryResources: null,
+    stylesToHoist: false,
+  };
+
   if (bootstrapScripts !== undefined) {
     for (let i = 0; i < bootstrapScripts.length; i++) {
       const scriptConfig = bootstrapScripts[i];
@@ -281,7 +370,14 @@ export function createResponseState(
           ? 'use-credentials'
           : '';
 
-      preloadBootstrapScript(resources, src, nonce, integrity, crossOrigin);
+      preloadBootstrapScript(
+        resumableState,
+        renderState,
+        src,
+        nonce,
+        integrity,
+        crossOrigin,
+      );
 
       bootstrapChunks.push(
         startScriptSrc,
@@ -322,7 +418,14 @@ export function createResponseState(
           ? 'use-credentials'
           : '';
 
-      preloadBootstrapModule(resources, src, nonce, integrity, crossOrigin);
+      preloadBootstrapModule(
+        resumableState,
+        renderState,
+        src,
+        nonce,
+        integrity,
+        crossOrigin,
+      );
 
       bootstrapChunks.push(
         startModuleSrc,
@@ -350,37 +453,64 @@ export function createResponseState(
       bootstrapChunks.push(endAsyncScript);
     }
   }
+
+  return renderState;
+}
+
+export function resumeRenderState(
+  resumableState: ResumableState,
+  nonce: string | void,
+): RenderState {
+  return createRenderState(
+    resumableState,
+    nonce,
+    // These should have already been flushed in the prerender.
+    undefined,
+    undefined,
+    undefined,
+    undefined,
+    undefined,
+  );
+}
+
+export function createResumableState(
+  identifierPrefix: string | void,
+  externalRuntimeConfig: string | BootstrapScriptDescriptor | void,
+): ResumableState {
+  const idPrefix = identifierPrefix === undefined ? '' : identifierPrefix;
+
+  let streamingFormat = ScriptStreamingFormat;
+  if (enableFizzExternalRuntime) {
+    if (externalRuntimeConfig !== undefined) {
+      streamingFormat = DataStreamingFormat;
+    }
+  }
   return {
-    bootstrapChunks: bootstrapChunks,
-    placeholderPrefix: stringToPrecomputedChunk(idPrefix + 'P:'),
-    segmentPrefix: stringToPrecomputedChunk(idPrefix + 'S:'),
-    boundaryPrefix: idPrefix + 'B:',
     idPrefix: idPrefix,
-    nextSuspenseID: 0,
+    nextFormID: 0,
     streamingFormat,
-    startInlineScript: inlineScriptWithNonce,
     instructions: NothingSent,
-    externalRuntimeScript,
-    htmlChunks: null,
-    headChunks: null,
     hasBody: false,
-    charsetChunks: [],
-    preconnectChunks: [],
-    preloadChunks: [],
-    hoistableChunks: [],
-    stylesToHoist: false,
-    nonce,
+    hasHtml: false,
+
+    // @TODO add bootstrap script to implicit preloads
+
+    // persistent
+    preloadsMap: {},
+    preconnectsMap: {},
+    stylesMap: {},
+    scriptsMap: {},
   };
 }
 
 // Constants for the insertion mode we're currently writing in. We don't encode all HTML5 insertion
 // modes. We only include the variants as they matter for the sake of our purposes.
 // We don't actually provide the namespace therefore we use constants instead of the string.
-const ROOT_HTML_MODE = 0; // Used for the root most element tag.
+export const ROOT_HTML_MODE = 0; // Used for the root most element tag.
 // We have a less than HTML_HTML_MODE check elsewhere. If you add more cases here, make sure it
 // still makes sense
 const HTML_HTML_MODE = 1; // Used for the <html> if it is at the top level.
-export const HTML_MODE = 2;
+const HTML_MODE = 2;
 const SVG_MODE = 3;
 const MATHML_MODE = 4;
 const HTML_TABLE_MODE = 5;
@@ -392,22 +522,26 @@ const HTML_COLGROUP_MODE = 8;
 
 type InsertionMode = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
 
+const NO_SCOPE = /*         */ 0b00;
+const NOSCRIPT_SCOPE = /*   */ 0b01;
+const PICTURE_SCOPE = /*    */ 0b10;
+
 // Lets us keep track of contextual state and pick it back up after suspending.
 export type FormatContext = {
   insertionMode: InsertionMode, // root/svg/html/mathml/table
   selectedValue: null | string | Array<string>, // the selected value(s) inside a <select>, or null outside <select>
-  noscriptTagInScope: boolean,
+  tagScope: number,
 };
 
 function createFormatContext(
   insertionMode: InsertionMode,
   selectedValue: null | string,
-  noscriptTagInScope: boolean,
+  tagScope: number,
 ): FormatContext {
   return {
     insertionMode,
     selectedValue,
-    noscriptTagInScope,
+    tagScope,
   };
 }
 
@@ -418,7 +552,7 @@ export function createRootFormatContext(namespaceURI?: string): FormatContext {
       : namespaceURI === 'http://www.w3.org/1998/Math/MathML'
       ? MATHML_MODE
       : ROOT_HTML_MODE;
-  return createFormatContext(insertionMode, null, false);
+  return createFormatContext(insertionMode, null, NO_SCOPE);
 }
 
 export function getChildFormatContext(
@@ -428,103 +562,80 @@ export function getChildFormatContext(
 ): FormatContext {
   switch (type) {
     case 'noscript':
-      return createFormatContext(HTML_MODE, null, true);
+      return createFormatContext(
+        HTML_MODE,
+        null,
+        parentContext.tagScope | NOSCRIPT_SCOPE,
+      );
     case 'select':
       return createFormatContext(
         HTML_MODE,
         props.value != null ? props.value : props.defaultValue,
-        parentContext.noscriptTagInScope,
+        parentContext.tagScope,
       );
     case 'svg':
+      return createFormatContext(SVG_MODE, null, parentContext.tagScope);
+    case 'picture':
       return createFormatContext(
-        SVG_MODE,
+        HTML_MODE,
         null,
-        parentContext.noscriptTagInScope,
+        parentContext.tagScope | PICTURE_SCOPE,
       );
     case 'math':
-      return createFormatContext(
-        MATHML_MODE,
-        null,
-        parentContext.noscriptTagInScope,
-      );
+      return createFormatContext(MATHML_MODE, null, parentContext.tagScope);
     case 'foreignObject':
-      return createFormatContext(
-        HTML_MODE,
-        null,
-        parentContext.noscriptTagInScope,
-      );
+      return createFormatContext(HTML_MODE, null, parentContext.tagScope);
     // Table parents are special in that their children can only be created at all if they're
     // wrapped in a table parent. So we need to encode that we're entering this mode.
     case 'table':
-      return createFormatContext(
-        HTML_TABLE_MODE,
-        null,
-        parentContext.noscriptTagInScope,
-      );
+      return createFormatContext(HTML_TABLE_MODE, null, parentContext.tagScope);
     case 'thead':
     case 'tbody':
     case 'tfoot':
       return createFormatContext(
         HTML_TABLE_BODY_MODE,
         null,
-        parentContext.noscriptTagInScope,
+        parentContext.tagScope,
       );
     case 'colgroup':
       return createFormatContext(
         HTML_COLGROUP_MODE,
         null,
-        parentContext.noscriptTagInScope,
+        parentContext.tagScope,
       );
     case 'tr':
       return createFormatContext(
         HTML_TABLE_ROW_MODE,
         null,
-        parentContext.noscriptTagInScope,
+        parentContext.tagScope,
       );
   }
   if (parentContext.insertionMode >= HTML_TABLE_MODE) {
     // Whatever tag this was, it wasn't a table parent or other special parent, so we must have
     // entered plain HTML again.
-    return createFormatContext(
-      HTML_MODE,
-      null,
-      parentContext.noscriptTagInScope,
-    );
+    return createFormatContext(HTML_MODE, null, parentContext.tagScope);
   }
   if (parentContext.insertionMode === ROOT_HTML_MODE) {
     if (type === 'html') {
       // We've emitted the root and is now in <html> mode.
-      return createFormatContext(HTML_HTML_MODE, null, false);
+      return createFormatContext(HTML_HTML_MODE, null, parentContext.tagScope);
     } else {
       // We've emitted the root and is now in plain HTML mode.
-      return createFormatContext(HTML_MODE, null, false);
+      return createFormatContext(HTML_MODE, null, parentContext.tagScope);
     }
   } else if (parentContext.insertionMode === HTML_HTML_MODE) {
     // We've emitted the document element and is now in plain HTML mode.
-    return createFormatContext(HTML_MODE, null, false);
+    return createFormatContext(HTML_MODE, null, parentContext.tagScope);
   }
   return parentContext;
 }
 
-export type SuspenseBoundaryID = null | PrecomputedChunk;
-
-export const UNINITIALIZED_SUSPENSE_BOUNDARY_ID: SuspenseBoundaryID = null;
-
-export function assignSuspenseBoundaryID(
-  responseState: ResponseState,
-): SuspenseBoundaryID {
-  const generatedID = responseState.nextSuspenseID++;
-  return stringToPrecomputedChunk(
-    responseState.boundaryPrefix + generatedID.toString(16),
-  );
-}
-
 export function makeId(
-  responseState: ResponseState,
+  resumableState: ResumableState,
   treeId: string,
   localId: number,
 ): string {
-  const idPrefix = responseState.idPrefix;
+  const idPrefix = resumableState.idPrefix;
 
   let id = ':' + idPrefix + 'R' + treeId;
 
@@ -547,7 +658,7 @@ const textSeparator = stringToPrecomputedChunk('<!-- -->');
 export function pushTextInstance(
   target: Array<Chunk | PrecomputedChunk>,
   text: string,
-  responseState: ResponseState,
+  renderState: RenderState,
   textEmbedded: boolean,
 ): boolean {
   if (text === '') {
@@ -565,7 +676,7 @@ export function pushTextInstance(
 // emit a text separator when we don't know for sure it is safe to omit
 export function pushSegmentFinale(
   target: Array<Chunk | PrecomputedChunk>,
-  responseState: ResponseState,
+  renderState: RenderState,
   lastPushedText: boolean,
   textEmbedded: boolean,
 ): void {
@@ -705,11 +816,9 @@ function pushStringAttribute(
   }
 }
 
-function makeFormFieldPrefix(responseState: ResponseState): string {
-  // I'm just reusing this counter. It's not really the same namespace as "name".
-  // It could just be its own counter.
-  const id = responseState.nextSuspenseID++;
-  return responseState.idPrefix + id;
+function makeFormFieldPrefix(resumableState: ResumableState): string {
+  const id = resumableState.nextFormID++;
+  return resumableState.idPrefix + id;
 }
 
 // Since this will likely be repeated a lot in the HTML, we use a more concise message
@@ -753,7 +862,8 @@ function pushAdditionalFormFields(
 
 function pushFormActionAttribute(
   target: Array<Chunk | PrecomputedChunk>,
-  responseState: ResponseState,
+  resumableState: ResumableState,
+  renderState: RenderState,
   formAction: any,
   formEncType: any,
   formMethod: any,
@@ -793,7 +903,7 @@ function pushFormActionAttribute(
     if (typeof customAction === 'function') {
       // This action has a custom progressive enhancement form that can submit the form
       // back to the server if it's invoked before hydration. Such as a Server Action.
-      const prefix = makeFormFieldPrefix(responseState);
+      const prefix = makeFormFieldPrefix(resumableState);
       const customFields = formAction.$$FORM_ACTION(prefix);
       name = customFields.name;
       formAction = customFields.action || '';
@@ -819,7 +929,7 @@ function pushFormActionAttribute(
       formEncType = null;
       formMethod = null;
       formTarget = null;
-      injectFormReplayingRuntime(responseState);
+      injectFormReplayingRuntime(resumableState, renderState);
     }
   }
   if (name != null) {
@@ -1168,7 +1278,7 @@ function pushInnerHTML(
   }
 }
 
-// TODO: Move these to ResponseState so that we warn for every request.
+// TODO: Move these to RenderState so that we warn for every request.
 // It would help debugging in stateful servers (e.g. service worker).
 let didWarnDefaultInputValue = false;
 let didWarnDefaultChecked = false;
@@ -1396,27 +1506,46 @@ function pushStartOption(
 const formReplayingRuntimeScript =
   stringToPrecomputedChunk(formReplayingRuntime);
 
-function injectFormReplayingRuntime(responseState: ResponseState): void {
+function injectFormReplayingRuntime(
+  resumableState: ResumableState,
+  renderState: RenderState,
+): void {
   // If we haven't sent it yet, inject the runtime that tracks submitted JS actions
   // for later replaying by Fiber. If we use an external runtime, we don't need
   // to emit anything. It's always used.
   if (
-    (responseState.instructions & SentFormReplayingRuntime) === NothingSent &&
-    (!enableFizzExternalRuntime || !responseState.externalRuntimeScript)
+    (resumableState.instructions & SentFormReplayingRuntime) === NothingSent &&
+    (!enableFizzExternalRuntime || !renderState.externalRuntimeScript)
   ) {
-    responseState.instructions |= SentFormReplayingRuntime;
-    responseState.bootstrapChunks.unshift(
-      responseState.startInlineScript,
+    resumableState.instructions |= SentFormReplayingRuntime;
+    renderState.bootstrapChunks.unshift(
+      renderState.startInlineScript,
       formReplayingRuntimeScript,
       endInlineScript,
     );
   }
 }
 
+const formStateMarkerIsMatching = stringToPrecomputedChunk('<!--F!-->');
+const formStateMarkerIsNotMatching = stringToPrecomputedChunk('<!--F-->');
+
+export function pushFormStateMarkerIsMatching(
+  target: Array<Chunk | PrecomputedChunk>,
+) {
+  target.push(formStateMarkerIsMatching);
+}
+
+export function pushFormStateMarkerIsNotMatching(
+  target: Array<Chunk | PrecomputedChunk>,
+) {
+  target.push(formStateMarkerIsNotMatching);
+}
+
 function pushStartForm(
   target: Array<Chunk | PrecomputedChunk>,
   props: Object,
-  responseState: ResponseState,
+  resumableState: ResumableState,
+  renderState: RenderState,
 ): ReactNodeList {
   target.push(startChunkForTag('form'));
 
@@ -1487,7 +1616,7 @@ function pushStartForm(
     if (typeof customAction === 'function') {
       // This action has a custom progressive enhancement form that can submit the form
       // back to the server if it's invoked before hydration. Such as a Server Action.
-      const prefix = makeFormFieldPrefix(responseState);
+      const prefix = makeFormFieldPrefix(resumableState);
       const customFields = formAction.$$FORM_ACTION(prefix);
       formAction = customFields.action || '';
       formEncType = customFields.encType;
@@ -1512,7 +1641,7 @@ function pushStartForm(
       formEncType = null;
       formMethod = null;
       formTarget = null;
-      injectFormReplayingRuntime(responseState);
+      injectFormReplayingRuntime(resumableState, renderState);
     }
   }
   if (formAction != null) {
@@ -1550,7 +1679,8 @@ function pushStartForm(
 function pushInput(
   target: Array<Chunk | PrecomputedChunk>,
   props: Object,
-  responseState: ResponseState,
+  resumableState: ResumableState,
+  renderState: RenderState,
 ): ReactNodeList {
   if (__DEV__) {
     checkControlledValueProps('input', props);
@@ -1631,7 +1761,8 @@ function pushInput(
 
   const formData = pushFormActionAttribute(
     target,
-    responseState,
+    resumableState,
+    renderState,
     formAction,
     formEncType,
     formMethod,
@@ -1690,7 +1821,8 @@ function pushInput(
 function pushStartButton(
   target: Array<Chunk | PrecomputedChunk>,
   props: Object,
-  responseState: ResponseState,
+  resumableState: ResumableState,
+  renderState: RenderState,
 ): ReactNodeList {
   target.push(startChunkForTag('button'));
 
@@ -1753,7 +1885,8 @@ function pushStartButton(
 
   const formData = pushFormActionAttribute(
     target,
-    responseState,
+    resumableState,
+    renderState,
     formAction,
     formEncType,
     formMethod,
@@ -1899,7 +2032,7 @@ function pushStartTextArea(
 function pushMeta(
   target: Array<Chunk | PrecomputedChunk>,
   props: Object,
-  responseState: ResponseState,
+  renderState: RenderState,
   textEmbedded: boolean,
   insertionMode: InsertionMode,
   noscriptTagInScope: boolean,
@@ -1919,9 +2052,12 @@ function pushMeta(
       }
 
       if (typeof props.charSet === 'string') {
-        return pushSelfClosing(responseState.charsetChunks, props, 'meta');
+        return pushSelfClosing(renderState.charsetChunks, props, 'meta');
+      } else if (props.name === 'viewport') {
+        // "viewport" isn't related to preconnect but it has the right priority
+        return pushSelfClosing(renderState.preconnectChunks, props, 'meta');
       } else {
-        return pushSelfClosing(responseState.hoistableChunks, props, 'meta');
+        return pushSelfClosing(renderState.hoistableChunks, props, 'meta');
       }
     }
   } else {
@@ -1932,8 +2068,8 @@ function pushMeta(
 function pushLink(
   target: Array<Chunk | PrecomputedChunk>,
   props: Object,
-  responseState: ResponseState,
-  resources: Resources,
+  resumableState: ResumableState,
+  renderState: RenderState,
   textEmbedded: boolean,
   insertionMode: InsertionMode,
   noscriptTagInScope: boolean,
@@ -2000,86 +2136,37 @@ function pushLink(
         return pushLinkImpl(target, props);
       } else {
         // This stylesheet refers to a Resource and we create a new one if necessary
-        let resource = resources.stylesMap.get(key);
-        if (__DEV__) {
-          const devResource = getAsResourceDEV(resource);
-          if (devResource) {
-            switch (devResource.__provenance) {
-              case 'rendered': {
-                const differenceDescription = describeDifferencesForStylesheets(
-                  // Diff the props from the JSX element, not the derived resource props
-                  props,
-                  devResource.__originalProps,
-                );
-                if (differenceDescription) {
-                  console.error(
-                    'React encountered a <link rel="stylesheet" href="%s" .../> with a `precedence` prop that has props that conflict' +
-                      ' with another hoistable stylesheet with the same `href`. When using `precedence` with <link rel="stylsheet" .../>' +
-                      ' the props from the first encountered instance will be used and props from later instances will be ignored.' +
-                      ' Update the props on either <link rel="stylesheet" .../> instance so they agree.%s',
-                    href,
-                    differenceDescription,
-                  );
-                }
-                break;
-              }
-              case 'preinit': {
-                const differenceDescription =
-                  describeDifferencesForStylesheetOverPreinit(
-                    // Diff the props from the JSX element, not the derived resource props
-                    props,
-                    devResource.__propsEquivalent,
-                  );
-                if (differenceDescription) {
-                  console.error(
-                    'React encountered a <link rel="stylesheet" precedence="%s" href="%s" .../> with props that conflict' +
-                      ' with the options provided to `ReactDOM.preinit("%s", { as: "style", ... })`. React will use the first props or preinitialization' +
-                      ' options encountered when rendering a hoistable stylesheet with a particular `href` and will ignore any newer props or' +
-                      ' options. The first instance of this stylesheet resource was created using the `ReactDOM.preinit()` function.' +
-                      ' Please note, `ReactDOM.preinit()` is modeled off of module import assertions capabilities and does not support' +
-                      ' arbitrary props. If you need to have props not included with the preinit options you will need to rely on rendering' +
-                      ' <link> tags only.%s',
-                    precedence,
-                    href,
-                    href,
-                    differenceDescription,
-                  );
-                }
-                break;
-              }
-            }
-          }
-        }
-        if (!resource) {
+        let stylesInPrecedence = renderState.precedences.get(precedence);
+        if (!resumableState.stylesMap.hasOwnProperty(key)) {
           const resourceProps = stylesheetPropsFromRawProps(props);
-          const preloadResource = resources.preloadsMap.get(key);
           let state = NoState;
-          if (preloadResource) {
-            // If we already had a preload we don't want that resource to flush directly.
-            // We let the newly created resource govern flushing.
-            preloadResource.state |= Blocked;
-            adoptPreloadPropsForStylesheetProps(
-              resourceProps,
-              preloadResource.props,
-            );
-            if (preloadResource.state & Flushed) {
+          if (resumableState.preloadsMap.hasOwnProperty(key)) {
+            const preloadProps: PreloadProps = resumableState.preloadsMap[key];
+            adoptPreloadPropsForStylesheetProps(resourceProps, preloadProps);
+            const preloadResource = renderState.preloadsMap.get(key);
+            if (preloadResource) {
+              // If we already had a preload we don't want that resource to flush directly.
+              // We let the newly created resource govern flushing.
+              preloadResource.state |= Blocked;
+              if (preloadResource.state & Flushed) {
+                state = PreloadFlushed;
+              }
+            } else {
+              // If we resumed then we assume that this was already flushed
+              // by the shell.
               state = PreloadFlushed;
             }
           }
-          resource = {
+          const resource = {
             type: 'stylesheet',
             chunks: ([]: Array<Chunk | PrecomputedChunk>),
             state,
             props: resourceProps,
           };
-          resources.stylesMap.set(key, resource);
-          if (__DEV__) {
-            markAsRenderedResourceDEV(resource, props);
-          }
-          let precedenceSet = resources.precedences.get(precedence);
-          if (!precedenceSet) {
-            precedenceSet = new Set();
-            resources.precedences.set(precedence, precedenceSet);
+          resumableState.stylesMap[key] = null;
+          if (!stylesInPrecedence) {
+            stylesInPrecedence = new Map();
+            renderState.precedences.set(precedence, stylesInPrecedence);
             const emptyStyleResource = {
               type: 'style',
               chunks: ([]: Array<Chunk | PrecomputedChunk>),
@@ -2089,21 +2176,35 @@ function pushLink(
                 hrefs: ([]: Array<string>),
               },
             };
-            precedenceSet.add(emptyStyleResource);
+            stylesInPrecedence.set('', emptyStyleResource);
             if (__DEV__) {
-              if (resources.stylePrecedences.has(precedence)) {
+              if (renderState.stylePrecedences.has(precedence)) {
                 console.error(
                   'React constructed an empty style resource when a style resource already exists for this precedence: "%s". This is a bug in React.',
                   precedence,
                 );
               }
             }
-            resources.stylePrecedences.set(precedence, emptyStyleResource);
+            renderState.stylePrecedences.set(precedence, emptyStyleResource);
+          }
+          stylesInPrecedence.set(key, resource);
+          if (renderState.boundaryResources) {
+            renderState.boundaryResources.add(resource);
+          }
+        } else {
+          // We need to track whether this boundary should wait on this resource or not.
+          // Typically this resource should always exist since we either had it or just created
+          // it. However, it's possible when you resume that the style has already been emitted
+          // and then it wouldn't be recreated in the RenderState and there's no need to track
+          // it again since we should've hoisted it to the shell already.
+          if (stylesInPrecedence) {
+            const resource = stylesInPrecedence.get(key);
+            if (resource) {
+              if (renderState.boundaryResources) {
+                renderState.boundaryResources.add(resource);
+              }
+            }
           }
-          precedenceSet.add(resource);
-        }
-        if (resources.boundaryResources) {
-          resources.boundaryResources.add(resource);
         }
         if (textEmbedded) {
           // This link follows text but we aren't writing a tag. while not as efficient as possible we need
@@ -2128,11 +2229,11 @@ function pushLink(
       switch (props.rel) {
         case 'preconnect':
         case 'dns-prefetch':
-          return pushLinkImpl(responseState.preconnectChunks, props);
+          return pushLinkImpl(renderState.preconnectChunks, props);
         case 'preload':
-          return pushLinkImpl(responseState.preloadChunks, props);
+          return pushLinkImpl(renderState.preloadChunks, props);
         default:
-          return pushLinkImpl(responseState.hoistableChunks, props);
+          return pushLinkImpl(renderState.hoistableChunks, props);
       }
     }
   } else {
@@ -2173,7 +2274,8 @@ function pushLinkImpl(
 function pushStyle(
   target: Array<Chunk | PrecomputedChunk>,
   props: Object,
-  resources: Resources,
+  resumableState: ResumableState,
+  renderState: RenderState,
   textEmbedded: boolean,
   insertionMode: InsertionMode,
   noscriptTagInScope: boolean,
@@ -2233,9 +2335,8 @@ function pushStyle(
     }
 
     const key = getResourceKey('style', href);
-    let resource = resources.stylesMap.get(key);
-    if (!resource) {
-      resource = resources.stylePrecedences.get(precedence);
+    let resource = renderState.stylePrecedences.get(precedence);
+    if (!resumableState.stylesMap.hasOwnProperty(key)) {
       if (!resource) {
         resource = {
           type: 'style',
@@ -2246,27 +2347,34 @@ function pushStyle(
             hrefs: [href],
           },
         };
-        resources.stylePrecedences.set(precedence, resource);
-        const precedenceSet: Set<StyleResource> = new Set();
-        precedenceSet.add(resource);
+        renderState.stylePrecedences.set(precedence, resource);
+        const stylesInPrecedence: Map<string, StyleResource> = new Map();
+        stylesInPrecedence.set('', resource);
         if (__DEV__) {
-          if (resources.precedences.has(precedence)) {
+          if (renderState.precedences.has(precedence)) {
             console.error(
               'React constructed a new style precedence set when one already exists for this precedence: "%s". This is a bug in React.',
               precedence,
             );
           }
         }
-        resources.precedences.set(precedence, precedenceSet);
+        renderState.precedences.set(precedence, stylesInPrecedence);
       } else {
         resource.props.hrefs.push(href);
       }
-      resources.stylesMap.set(key, resource);
-      if (resources.boundaryResources) {
-        resources.boundaryResources.add(resource);
-      }
+      resumableState.stylesMap[key] = null;
       pushStyleContents(resource.chunks, props);
     }
+    if (resource) {
+      // We need to track whether this boundary should wait on this resource or not.
+      // Typically this resource should always exist since we either had it or just created
+      // it. However, it's possible when you resume that the style has already been emitted
+      // and then it wouldn't be recreated in the RenderState and there's no need to track
+      // it again since we should've hoisted it to the shell already.
+      if (renderState.boundaryResources) {
+        renderState.boundaryResources.add(resource);
+      }
+    }
 
     if (textEmbedded) {
       // This link follows text but we aren't writing a tag. while not as efficient as possible we need
@@ -2367,6 +2475,102 @@ function pushStyleContents(
   return;
 }
 
+function getImagePreloadKey(
+  href: string,
+  imageSrcSet: ?string,
+  imageSizes: ?string,
+) {
+  let uniquePart = '';
+  if (typeof imageSrcSet === 'string' && imageSrcSet !== '') {
+    uniquePart += '[' + imageSrcSet + ']';
+    if (typeof imageSizes === 'string') {
+      uniquePart += '[' + imageSizes + ']';
+    }
+  } else {
+    uniquePart += '[][]' + href;
+  }
+  return getResourceKey('image', uniquePart);
+}
+
+function pushImg(
+  target: Array<Chunk | PrecomputedChunk>,
+  props: Object,
+  resumableState: ResumableState,
+  renderState: RenderState,
+  pictureTagInScope: boolean,
+): null {
+  const {src, srcSet} = props;
+  if (
+    props.loading !== 'lazy' &&
+    (typeof src === 'string' || typeof srcSet === 'string') &&
+    props.fetchPriority !== 'low' &&
+    pictureTagInScope === false &&
+    // We exclude data URIs in src and srcSet since these should not be preloaded
+    !(
+      typeof src === 'string' &&
+      src[4] === ':' &&
+      (src[0] === 'd' || src[0] === 'D') &&
+      (src[1] === 'a' || src[1] === 'A') &&
+      (src[2] === 't' || src[2] === 'T') &&
+      (src[3] === 'a' || src[3] === 'A')
+    ) &&
+    !(
+      typeof srcSet === 'string' &&
+      srcSet[4] === ':' &&
+      (srcSet[0] === 'd' || srcSet[0] === 'D') &&
+      (srcSet[1] === 'a' || srcSet[1] === 'A') &&
+      (srcSet[2] === 't' || srcSet[2] === 'T') &&
+      (srcSet[3] === 'a' || srcSet[3] === 'A')
+    )
+  ) {
+    // We have a suspensey image and ought to preload it to optimize the loading of display blocking
+    // resumableState.
+    const {sizes} = props;
+    const key = getImagePreloadKey(src, srcSet, sizes);
+    let resource: void | PreloadResource;
+    if (!resumableState.preloadsMap.hasOwnProperty(key)) {
+      const preloadProps: PreloadProps = {
+        rel: 'preload',
+        as: 'image',
+        // There is a bug in Safari where imageSrcSet is not respected on preload links
+        // so we omit the href here if we have imageSrcSet b/c safari will load the wrong image.
+        // This harms older browers that do not support imageSrcSet by making their preloads not work
+        // but this population is shrinking fast and is already small so we accept this tradeoff.
+        href: srcSet ? undefined : src,
+        imageSrcSet: srcSet,
+        imageSizes: sizes,
+        crossOrigin: props.crossOrigin,
+        integrity: props.integrity,
+        type: props.type,
+        fetchPriority: props.fetchPriority,
+        referrerPolicy: props.referrerPolicy,
+      };
+      resource = {
+        type: 'preload',
+        chunks: [],
+        state: NoState,
+        props: preloadProps,
+      };
+      resumableState.preloadsMap[key] = preloadProps;
+      renderState.preloadsMap.set(key, resource);
+      pushLinkImpl(resource.chunks, preloadProps);
+    } else {
+      resource = renderState.preloadsMap.get(key);
+    }
+    if (resource) {
+      if (
+        props.fetchPriority === 'high' ||
+        renderState.highImagePreloads.size < 10
+      ) {
+        renderState.highImagePreloads.add(resource);
+      } else {
+        renderState.bulkPreloads.add(resource);
+      }
+    }
+  }
+  return pushSelfClosing(target, props, 'img');
+}
+
 function pushSelfClosing(
   target: Array<Chunk | PrecomputedChunk>,
   props: Object,
@@ -2430,7 +2634,7 @@ function pushStartMenuItem(
 function pushTitle(
   target: Array<Chunk | PrecomputedChunk>,
   props: Object,
-  responseState: ResponseState,
+  renderState: RenderState,
   insertionMode: InsertionMode,
   noscriptTagInScope: boolean,
 ): ReactNodeList {
@@ -2488,7 +2692,7 @@ function pushTitle(
       !noscriptTagInScope &&
       props.itemProp == null
     ) {
-      pushTitleImpl(responseState.hoistableChunks, props);
+      pushTitleImpl(renderState.hoistableChunks, props);
       return null;
     } else {
       return pushTitleImpl(target, props);
@@ -2620,14 +2824,14 @@ function pushStartTitle(
 function pushStartHead(
   target: Array<Chunk | PrecomputedChunk>,
   props: Object,
-  responseState: ResponseState,
+  renderState: RenderState,
   insertionMode: InsertionMode,
 ): ReactNodeList {
   if (enableFloat) {
-    if (insertionMode < HTML_MODE && responseState.headChunks === null) {
+    if (insertionMode < HTML_MODE && renderState.headChunks === null) {
       // This <head> is the Document.head and should be part of the preamble
-      responseState.headChunks = [];
-      return pushStartGenericElement(responseState.headChunks, props, 'head');
+      renderState.headChunks = [];
+      return pushStartGenericElement(renderState.headChunks, props, 'head');
     } else {
       // This <head> is deep and is likely just an error. we emit it inline though.
       // Validation should warn that this tag is the the wrong spot.
@@ -2641,14 +2845,14 @@ function pushStartHead(
 function pushStartHtml(
   target: Array<Chunk | PrecomputedChunk>,
   props: Object,
-  responseState: ResponseState,
+  renderState: RenderState,
   insertionMode: InsertionMode,
 ): ReactNodeList {
   if (enableFloat) {
-    if (insertionMode === ROOT_HTML_MODE && responseState.htmlChunks === null) {
+    if (insertionMode === ROOT_HTML_MODE && renderState.htmlChunks === null) {
       // This <html> is the Document.documentElement and should be part of the preamble
-      responseState.htmlChunks = [DOCTYPE];
-      return pushStartGenericElement(responseState.htmlChunks, props, 'html');
+      renderState.htmlChunks = [DOCTYPE];
+      return pushStartGenericElement(renderState.htmlChunks, props, 'html');
     } else {
       // This <html> is deep and is likely just an error. we emit it inline though.
       // Validation should warn that this tag is the the wrong spot.
@@ -2668,7 +2872,8 @@ function pushStartHtml(
 function pushScript(
   target: Array<Chunk | PrecomputedChunk>,
   props: Object,
-  resources: Resources,
+  resumableState: ResumableState,
+  renderState: RenderState,
   textEmbedded: boolean,
   insertionMode: InsertionMode,
   noscriptTagInScope: boolean,
@@ -2696,77 +2901,28 @@ function pushScript(
     const src = props.src;
     const key = getResourceKey('script', src);
     // We can make this <script> into a ScriptResource
-    let resource = resources.scriptsMap.get(key);
-    if (__DEV__) {
-      const devResource = getAsResourceDEV(resource);
-      if (devResource) {
-        switch (devResource.__provenance) {
-          case 'rendered': {
-            const differenceDescription = describeDifferencesForScripts(
-              // Diff the props from the JSX element, not the derived resource props
-              props,
-              devResource.__originalProps,
-            );
-            if (differenceDescription) {
-              console.error(
-                'React encountered a <script async={true} src="%s" .../> that has props that conflict' +
-                  ' with another hoistable script with the same `src`. When rendering hoistable scripts (async scripts without any loading handlers)' +
-                  ' the props from the first encountered instance will be used and props from later instances will be ignored.' +
-                  ' Update the props on both <script async={true} .../> instance so they agree.%s',
-                src,
-                differenceDescription,
-              );
-            }
-            break;
-          }
-          case 'preinit': {
-            const differenceDescription =
-              describeDifferencesForScriptOverPreinit(
-                // Diff the props from the JSX element, not the derived resource props
-                props,
-                devResource.__propsEquivalent,
-              );
-            if (differenceDescription) {
-              console.error(
-                'React encountered a <script async={true} src="%s" .../> with props that conflict' +
-                  ' with the options provided to `ReactDOM.preinit("%s", { as: "script", ... })`. React will use the first props or preinitialization' +
-                  ' options encountered when rendering a hoistable script with a particular `src` and will ignore any newer props or' +
-                  ' options. The first instance of this script resource was created using the `ReactDOM.preinit()` function.' +
-                  ' Please note, `ReactDOM.preinit()` is modeled off of module import assertions capabilities and does not support' +
-                  ' arbitrary props. If you need to have props not included with the preinit options you will need to rely on rendering' +
-                  ' <script> tags only.%s',
-                src,
-                src,
-                differenceDescription,
-              );
-            }
-            break;
-          }
-        }
-      }
-    }
-    if (!resource) {
-      resource = {
+    if (!resumableState.scriptsMap.hasOwnProperty(key)) {
+      const resource: ScriptResource = {
         type: 'script',
         chunks: [],
         state: NoState,
         props: null,
       };
-      resources.scriptsMap.set(key, resource);
-      if (__DEV__) {
-        markAsRenderedResourceDEV(resource, props);
-      }
+      resumableState.scriptsMap[key] = null;
       // Add to the script flushing queue
-      resources.scripts.add(resource);
+      renderState.scripts.add(resource);
 
       let scriptProps = props;
-      const preloadResource = resources.preloadsMap.get(key);
-      if (preloadResource) {
-        // If we already had a preload we don't want that resource to flush directly.
-        // We let the newly created resource govern flushing.
-        preloadResource.state |= Blocked;
+      if (resumableState.preloadsMap.hasOwnProperty(key)) {
+        const preloadProps: PreloadProps = resumableState.preloadsMap[key];
         scriptProps = {...props};
-        adoptPreloadPropsForScriptProps(scriptProps, preloadResource.props);
+        adoptPreloadPropsForScriptProps(scriptProps, preloadProps);
+        const preloadResource = renderState.preloadsMap.get(key);
+        if (preloadResource) {
+          // If we already had a preload we don't want that resource to flush directly.
+          // We let the newly created resource govern flushing.
+          preloadResource.state |= Blocked;
+        }
       }
       // encode the tag as Chunks
       pushScriptImpl(resource.chunks, scriptProps);
@@ -3045,14 +3201,17 @@ function startChunkForTag(tag: string): PrecomputedChunk {
   return tagStartChunk;
 }
 
-const DOCTYPE: PrecomputedChunk = stringToPrecomputedChunk('<!DOCTYPE html>');
+export const doctypeChunk: PrecomputedChunk =
+  stringToPrecomputedChunk('<!DOCTYPE html>');
+
+import {doctypeChunk as DOCTYPE} from 'react-server/src/ReactFizzConfig';
 
 export function pushStartInstance(
   target: Array<Chunk | PrecomputedChunk>,
   type: string,
   props: Object,
-  resources: Resources,
-  responseState: ResponseState,
+  resumableState: ResumableState,
+  renderState: RenderState,
   formatContext: FormatContext,
   textEmbedded: boolean,
 ): ReactNodeList {
@@ -3108,11 +3267,11 @@ export function pushStartInstance(
     case 'textarea':
       return pushStartTextArea(target, props);
     case 'input':
-      return pushInput(target, props, responseState);
+      return pushInput(target, props, resumableState, renderState);
     case 'button':
-      return pushStartButton(target, props, responseState);
+      return pushStartButton(target, props, resumableState, renderState);
     case 'form':
-      return pushStartForm(target, props, responseState);
+      return pushStartForm(target, props, resumableState, renderState);
     case 'menuitem':
       return pushStartMenuItem(target, props);
     case 'title':
@@ -3120,55 +3279,68 @@ export function pushStartInstance(
         ? pushTitle(
             target,
             props,
-            responseState,
+            renderState,
             formatContext.insertionMode,
-            formatContext.noscriptTagInScope,
+            !!(formatContext.tagScope & NOSCRIPT_SCOPE),
           )
         : pushStartTitle(target, props);
     case 'link':
       return pushLink(
         target,
         props,
-        responseState,
-        resources,
+        resumableState,
+        renderState,
         textEmbedded,
         formatContext.insertionMode,
-        formatContext.noscriptTagInScope,
+        !!(formatContext.tagScope & NOSCRIPT_SCOPE),
       );
     case 'script':
       return enableFloat
         ? pushScript(
             target,
             props,
-            resources,
+            resumableState,
+            renderState,
             textEmbedded,
             formatContext.insertionMode,
-            formatContext.noscriptTagInScope,
+            !!(formatContext.tagScope & NOSCRIPT_SCOPE),
           )
         : pushStartGenericElement(target, props, type);
     case 'style':
       return pushStyle(
         target,
         props,
-        resources,
+        resumableState,
+        renderState,
         textEmbedded,
         formatContext.insertionMode,
-        formatContext.noscriptTagInScope,
+        !!(formatContext.tagScope & NOSCRIPT_SCOPE),
       );
     case 'meta':
       return pushMeta(
         target,
         props,
-        responseState,
+        renderState,
         textEmbedded,
         formatContext.insertionMode,
-        formatContext.noscriptTagInScope,
+        !!(formatContext.tagScope & NOSCRIPT_SCOPE),
       );
     // Newline eating tags
     case 'listing':
     case 'pre': {
       return pushStartPreformattedElement(target, props, type);
     }
+    case 'img': {
+      return enableFloat
+        ? pushImg(
+            target,
+            props,
+            resumableState,
+            renderState,
+            !!(formatContext.tagScope & PICTURE_SCOPE),
+          )
+        : pushSelfClosing(target, props, type);
+    }
     // Omitted close tags
     case 'base':
     case 'area':
@@ -3176,7 +3348,6 @@ export function pushStartInstance(
     case 'col':
     case 'embed':
     case 'hr':
-    case 'img':
     case 'keygen':
     case 'param':
     case 'source':
@@ -3201,14 +3372,14 @@ export function pushStartInstance(
       return pushStartHead(
         target,
         props,
-        responseState,
+        renderState,
         formatContext.insertionMode,
       );
     case 'html': {
       return pushStartHtml(
         target,
         props,
-        responseState,
+        renderState,
         formatContext.insertionMode,
       );
     }
@@ -3230,7 +3401,7 @@ export function pushEndInstance(
   target: Array<Chunk | PrecomputedChunk>,
   type: string,
   props: Object,
-  responseState: ResponseState,
+  resumableState: ResumableState,
   formatContext: FormatContext,
 ): void {
   switch (type) {
@@ -3274,13 +3445,14 @@ export function pushEndInstance(
     // we won't emit any more tags
     case 'body': {
       if (enableFloat && formatContext.insertionMode <= HTML_HTML_MODE) {
-        responseState.hasBody = true;
+        resumableState.hasBody = true;
         return;
       }
       break;
     }
     case 'html':
       if (enableFloat && formatContext.insertionMode === ROOT_HTML_MODE) {
+        resumableState.hasHtml = true;
         return;
       }
       break;
@@ -3290,9 +3462,9 @@ export function pushEndInstance(
 
 function writeBootstrap(
   destination: Destination,
-  responseState: ResponseState,
+  renderState: RenderState,
 ): boolean {
-  const bootstrapChunks = responseState.bootstrapChunks;
+  const bootstrapChunks = renderState.bootstrapChunks;
   let i = 0;
   for (; i < bootstrapChunks.length - 1; i++) {
     writeChunk(destination, bootstrapChunks[i]);
@@ -3307,9 +3479,9 @@ function writeBootstrap(
 
 export function writeCompletedRoot(
   destination: Destination,
-  responseState: ResponseState,
+  renderState: RenderState,
 ): boolean {
-  return writeBootstrap(destination, responseState);
+  return writeBootstrap(destination, renderState);
 }
 
 // Structural Nodes
@@ -3321,11 +3493,11 @@ const placeholder1 = stringToPrecomputedChunk('<template id="');
 const placeholder2 = stringToPrecomputedChunk('"></template>');
 export function writePlaceholder(
   destination: Destination,
-  responseState: ResponseState,
+  renderState: RenderState,
   id: number,
 ): boolean {
   writeChunk(destination, placeholder1);
-  writeChunk(destination, responseState.placeholderPrefix);
+  writeChunk(destination, renderState.placeholderPrefix);
   const formattedID = stringToChunk(id.toString(16));
   writeChunk(destination, formattedID);
   return writeChunkAndReturn(destination, placeholder2);
@@ -3368,14 +3540,14 @@ export function pushEndCompletedSuspenseBoundary(
 
 export function writeStartCompletedSuspenseBoundary(
   destination: Destination,
-  responseState: ResponseState,
+  renderState: RenderState,
 ): boolean {
   return writeChunkAndReturn(destination, startCompletedSuspenseBoundary);
 }
 export function writeStartPendingSuspenseBoundary(
   destination: Destination,
-  responseState: ResponseState,
-  id: SuspenseBoundaryID,
+  renderState: RenderState,
+  id: number,
 ): boolean {
   writeChunk(destination, startPendingSuspenseBoundary1);
 
@@ -3385,12 +3557,13 @@ export function writeStartPendingSuspenseBoundary(
     );
   }
 
-  writeChunk(destination, id);
+  writeChunk(destination, renderState.boundaryPrefix);
+  writeChunk(destination, stringToChunk(id.toString(16)));
   return writeChunkAndReturn(destination, startPendingSuspenseBoundary2);
 }
 export function writeStartClientRenderedSuspenseBoundary(
   destination: Destination,
-  responseState: ResponseState,
+  renderState: RenderState,
   errorDigest: ?string,
   errorMesssage: ?string,
   errorComponentStack: ?string,
@@ -3441,19 +3614,19 @@ export function writeStartClientRenderedSuspenseBoundary(
 }
 export function writeEndCompletedSuspenseBoundary(
   destination: Destination,
-  responseState: ResponseState,
+  renderState: RenderState,
 ): boolean {
   return writeChunkAndReturn(destination, endSuspenseBoundary);
 }
 export function writeEndPendingSuspenseBoundary(
   destination: Destination,
-  responseState: ResponseState,
+  renderState: RenderState,
 ): boolean {
   return writeChunkAndReturn(destination, endSuspenseBoundary);
 }
 export function writeEndClientRenderedSuspenseBoundary(
   destination: Destination,
-  responseState: ResponseState,
+  renderState: RenderState,
 ): boolean {
   return writeChunkAndReturn(destination, endSuspenseBoundary);
 }
@@ -3496,7 +3669,7 @@ const endSegmentColGroup = stringToPrecomputedChunk('</colgroup></table>');
 
 export function writeStartSegment(
   destination: Destination,
-  responseState: ResponseState,
+  renderState: RenderState,
   formatContext: FormatContext,
   id: number,
 ): boolean {
@@ -3505,25 +3678,25 @@ export function writeStartSegment(
     case HTML_HTML_MODE:
     case HTML_MODE: {
       writeChunk(destination, startSegmentHTML);
-      writeChunk(destination, responseState.segmentPrefix);
+      writeChunk(destination, renderState.segmentPrefix);
       writeChunk(destination, stringToChunk(id.toString(16)));
       return writeChunkAndReturn(destination, startSegmentHTML2);
     }
     case SVG_MODE: {
       writeChunk(destination, startSegmentSVG);
-      writeChunk(destination, responseState.segmentPrefix);
+      writeChunk(destination, renderState.segmentPrefix);
       writeChunk(destination, stringToChunk(id.toString(16)));
       return writeChunkAndReturn(destination, startSegmentSVG2);
     }
     case MATHML_MODE: {
       writeChunk(destination, startSegmentMathML);
-      writeChunk(destination, responseState.segmentPrefix);
+      writeChunk(destination, renderState.segmentPrefix);
       writeChunk(destination, stringToChunk(id.toString(16)));
       return writeChunkAndReturn(destination, startSegmentMathML2);
     }
     case HTML_TABLE_MODE: {
       writeChunk(destination, startSegmentTable);
-      writeChunk(destination, responseState.segmentPrefix);
+      writeChunk(destination, renderState.segmentPrefix);
       writeChunk(destination, stringToChunk(id.toString(16)));
       return writeChunkAndReturn(destination, startSegmentTable2);
     }
@@ -3533,19 +3706,19 @@ export function writeStartSegment(
     // and it's kind of an edge case to suspend in a table. Totally supported though.
     case HTML_TABLE_BODY_MODE: {
       writeChunk(destination, startSegmentTableBody);
-      writeChunk(destination, responseState.segmentPrefix);
+      writeChunk(destination, renderState.segmentPrefix);
       writeChunk(destination, stringToChunk(id.toString(16)));
       return writeChunkAndReturn(destination, startSegmentTableBody2);
     }
     case HTML_TABLE_ROW_MODE: {
       writeChunk(destination, startSegmentTableRow);
-      writeChunk(destination, responseState.segmentPrefix);
+      writeChunk(destination, renderState.segmentPrefix);
       writeChunk(destination, stringToChunk(id.toString(16)));
       return writeChunkAndReturn(destination, startSegmentTableRow2);
     }
     case HTML_COLGROUP_MODE: {
       writeChunk(destination, startSegmentColGroup);
-      writeChunk(destination, responseState.segmentPrefix);
+      writeChunk(destination, renderState.segmentPrefix);
       writeChunk(destination, stringToChunk(id.toString(16)));
       return writeChunkAndReturn(destination, startSegmentColGroup2);
     }
@@ -3589,7 +3762,7 @@ export function writeEndSegment(
 }
 
 const completeSegmentScript1Full = stringToPrecomputedChunk(
-  completeSegmentFunction + ';$RS("',
+  completeSegmentFunction + '$RS("',
 );
 const completeSegmentScript1Partial = stringToPrecomputedChunk('$RS("');
 const completeSegmentScript2 = stringToPrecomputedChunk('","');
@@ -3603,20 +3776,21 @@ const completeSegmentDataEnd = dataElementQuotedEnd;
 
 export function writeCompletedSegmentInstruction(
   destination: Destination,
-  responseState: ResponseState,
+  resumableState: ResumableState,
+  renderState: RenderState,
   contentSegmentID: number,
 ): boolean {
   const scriptFormat =
     !enableFizzExternalRuntime ||
-    responseState.streamingFormat === ScriptStreamingFormat;
+    resumableState.streamingFormat === ScriptStreamingFormat;
   if (scriptFormat) {
-    writeChunk(destination, responseState.startInlineScript);
+    writeChunk(destination, renderState.startInlineScript);
     if (
-      (responseState.instructions & SentCompleteSegmentFunction) ===
+      (resumableState.instructions & SentCompleteSegmentFunction) ===
       NothingSent
     ) {
       // The first time we write this, we'll need to include the full implementation.
-      responseState.instructions |= SentCompleteSegmentFunction;
+      resumableState.instructions |= SentCompleteSegmentFunction;
       writeChunk(destination, completeSegmentScript1Full);
     } else {
       // Future calls can just reuse the same function.
@@ -3627,7 +3801,7 @@ export function writeCompletedSegmentInstruction(
   }
 
   // Write function arguments, which are string literals
-  writeChunk(destination, responseState.segmentPrefix);
+  writeChunk(destination, renderState.segmentPrefix);
   const formattedID = stringToChunk(contentSegmentID.toString(16));
   writeChunk(destination, formattedID);
   if (scriptFormat) {
@@ -3635,7 +3809,7 @@ export function writeCompletedSegmentInstruction(
   } else {
     writeChunk(destination, completeSegmentData2);
   }
-  writeChunk(destination, responseState.placeholderPrefix);
+  writeChunk(destination, renderState.placeholderPrefix);
   writeChunk(destination, formattedID);
 
   if (scriptFormat) {
@@ -3676,51 +3850,51 @@ const completeBoundaryDataEnd = dataElementQuotedEnd;
 
 export function writeCompletedBoundaryInstruction(
   destination: Destination,
-  responseState: ResponseState,
-  boundaryID: SuspenseBoundaryID,
-  contentSegmentID: number,
+  resumableState: ResumableState,
+  renderState: RenderState,
+  id: number,
   boundaryResources: BoundaryResources,
 ): boolean {
   let requiresStyleInsertion;
   if (enableFloat) {
-    requiresStyleInsertion = responseState.stylesToHoist;
+    requiresStyleInsertion = renderState.stylesToHoist;
     // If necessary stylesheets will be flushed with this instruction.
     // Any style tags not yet hoisted in the Document will also be hoisted.
     // We reset this state since after this instruction executes all styles
     // up to this point will have been hoisted
-    responseState.stylesToHoist = false;
+    renderState.stylesToHoist = false;
   }
   const scriptFormat =
     !enableFizzExternalRuntime ||
-    responseState.streamingFormat === ScriptStreamingFormat;
+    resumableState.streamingFormat === ScriptStreamingFormat;
   if (scriptFormat) {
-    writeChunk(destination, responseState.startInlineScript);
+    writeChunk(destination, renderState.startInlineScript);
     if (enableFloat && requiresStyleInsertion) {
       if (
-        (responseState.instructions & SentCompleteBoundaryFunction) ===
+        (resumableState.instructions & SentCompleteBoundaryFunction) ===
         NothingSent
       ) {
-        responseState.instructions |=
+        resumableState.instructions |=
           SentStyleInsertionFunction | SentCompleteBoundaryFunction;
         writeChunk(
           destination,
           clonePrecomputedChunk(completeBoundaryWithStylesScript1FullBoth),
         );
       } else if (
-        (responseState.instructions & SentStyleInsertionFunction) ===
+        (resumableState.instructions & SentStyleInsertionFunction) ===
         NothingSent
       ) {
-        responseState.instructions |= SentStyleInsertionFunction;
+        resumableState.instructions |= SentStyleInsertionFunction;
         writeChunk(destination, completeBoundaryWithStylesScript1FullPartial);
       } else {
         writeChunk(destination, completeBoundaryWithStylesScript1Partial);
       }
     } else {
       if (
-        (responseState.instructions & SentCompleteBoundaryFunction) ===
+        (resumableState.instructions & SentCompleteBoundaryFunction) ===
         NothingSent
       ) {
-        responseState.instructions |= SentCompleteBoundaryFunction;
+        resumableState.instructions |= SentCompleteBoundaryFunction;
         writeChunk(destination, completeBoundaryScript1Full);
       } else {
         writeChunk(destination, completeBoundaryScript1Partial);
@@ -3734,22 +3908,19 @@ export function writeCompletedBoundaryInstruction(
     }
   }
 
-  if (boundaryID === null) {
-    throw new Error(
-      'An ID must have been assigned before we can complete the boundary.',
-    );
-  }
+  const idChunk = stringToChunk(id.toString(16));
+
+  writeChunk(destination, renderState.boundaryPrefix);
+  writeChunk(destination, idChunk);
 
   // Write function arguments, which are string and array literals
-  const formattedContentID = stringToChunk(contentSegmentID.toString(16));
-  writeChunk(destination, boundaryID);
   if (scriptFormat) {
     writeChunk(destination, completeBoundaryScript2);
   } else {
     writeChunk(destination, completeBoundaryData2);
   }
-  writeChunk(destination, responseState.segmentPrefix);
-  writeChunk(destination, formattedContentID);
+  writeChunk(destination, renderState.segmentPrefix);
+  writeChunk(destination, idChunk);
   if (enableFloat && requiresStyleInsertion) {
     // Script and data writers must format this differently:
     //  - script writer emits an array literal, whose string elements are
@@ -3775,7 +3946,7 @@ export function writeCompletedBoundaryInstruction(
   } else {
     writeMore = writeChunkAndReturn(destination, completeBoundaryDataEnd);
   }
-  return writeBootstrap(destination, responseState) && writeMore;
+  return writeBootstrap(destination, renderState) && writeMore;
 }
 
 const clientRenderScript1Full = stringToPrecomputedChunk(
@@ -3796,23 +3967,24 @@ const clientRenderDataEnd = dataElementQuotedEnd;
 
 export function writeClientRenderBoundaryInstruction(
   destination: Destination,
-  responseState: ResponseState,
-  boundaryID: SuspenseBoundaryID,
+  resumableState: ResumableState,
+  renderState: RenderState,
+  id: number,
   errorDigest: ?string,
   errorMessage?: string,
   errorComponentStack?: string,
 ): boolean {
   const scriptFormat =
     !enableFizzExternalRuntime ||
-    responseState.streamingFormat === ScriptStreamingFormat;
+    resumableState.streamingFormat === ScriptStreamingFormat;
   if (scriptFormat) {
-    writeChunk(destination, responseState.startInlineScript);
+    writeChunk(destination, renderState.startInlineScript);
     if (
-      (responseState.instructions & SentClientRenderFunction) ===
+      (resumableState.instructions & SentClientRenderFunction) ===
       NothingSent
     ) {
       // The first time we write this, we'll need to include the full implementation.
-      responseState.instructions |= SentClientRenderFunction;
+      resumableState.instructions |= SentClientRenderFunction;
       writeChunk(destination, clientRenderScript1Full);
     } else {
       // Future calls can just reuse the same function.
@@ -3823,13 +3995,8 @@ export function writeClientRenderBoundaryInstruction(
     writeChunk(destination, clientRenderData1);
   }
 
-  if (boundaryID === null) {
-    throw new Error(
-      'An ID must have been assigned before we can complete the boundary.',
-    );
-  }
-
-  writeChunk(destination, boundaryID);
+  writeChunk(destination, renderState.boundaryPrefix);
+  writeChunk(destination, stringToChunk(id.toString(16)));
   if (scriptFormat) {
     // " needs to be inserted for scripts, since ArgInterstitual does not contain
     // leading or trailing quotes
@@ -4013,7 +4180,7 @@ function flushStyleTagsLateForBoundary(
 export function writeResourcesForBoundary(
   destination: Destination,
   boundaryResources: BoundaryResources,
-  responseState: ResponseState,
+  renderState: RenderState,
 ): boolean {
   // Reset these on each invocation, they are only safe to read in this function
   currentlyRenderingBoundaryHasStylesToHoist = false;
@@ -4022,7 +4189,7 @@ export function writeResourcesForBoundary(
   // Flush each Boundary resource
   boundaryResources.forEach(flushStyleTagsLateForBoundary, destination);
   if (currentlyRenderingBoundaryHasStylesToHoist) {
-    responseState.stylesToHoist = true;
+    renderState.stylesToHoist = true;
   }
   return destinationHasCapacity;
 }
@@ -4059,15 +4226,15 @@ let didFlushPrecedence = false;
 function flushStyleInPreamble(
   this: Destination,
   resource: StyleResource,
-  key: mixed,
-  set: Set<StyleResource>,
+  key: string,
+  map: Map<string, StyleResource>,
 ) {
   const chunks = resource.chunks;
   if (resource.state & Flushed) {
     // In theory this should never happen because we clear from the
     // Set on flush but to ensure correct semantics we don't emit
     // anything if we are in this state.
-    set.delete(resource);
+    map.delete(key);
   } else {
     // We can emit this style or stylesheet as is.
     if (resource.type === 'style') {
@@ -4099,12 +4266,12 @@ const styleTagResourceClose = stringToPrecomputedChunk('</style>');
 
 function flushAllStylesInPreamble(
   this: Destination,
-  set: Set<StyleResource>,
+  map: Map<string, StyleResource>,
   precedence: string,
 ) {
   didFlushPrecedence = false;
-  set.forEach(flushStyleInPreamble, this);
-  set.clear();
+  map.forEach(flushStyleInPreamble, this);
+  map.clear();
 
   const chunks = precedenceStyleTagResource.chunks;
   const hrefs = precedenceStyleTagResource.props.hrefs;
@@ -4160,11 +4327,11 @@ function preloadLateStyle(this: Destination, resource: StyleResource) {
 
 function preloadLateStyles(
   this: Destination,
-  set: Set<StyleResource>,
+  map: Map<string, StyleResource>,
   precedence: string,
 ) {
-  set.forEach(preloadLateStyle, this);
-  set.clear();
+  map.forEach(preloadLateStyle, this);
+  map.clear();
 }
 
 // We don't bother reporting backpressure at the moment because we expect to
@@ -4173,27 +4340,27 @@ function preloadLateStyles(
 // of the flushing code in Fizz.
 export function writePreamble(
   destination: Destination,
-  resources: Resources,
-  responseState: ResponseState,
+  resumableState: ResumableState,
+  renderState: RenderState,
   willFlushAllSegments: boolean,
 ): void {
   // This function must be called exactly once on every request
   if (
     enableFizzExternalRuntime &&
     !willFlushAllSegments &&
-    responseState.externalRuntimeScript
+    renderState.externalRuntimeScript
   ) {
     // If the root segment is incomplete due to suspended tasks
     // (e.g. willFlushAllSegments = false) and we are using data
     // streaming format, ensure the external runtime is sent.
     // (User code could choose to send this even earlier by calling
     //  preinit(...), if they know they will suspend).
-    const {src, chunks} = responseState.externalRuntimeScript;
-    internalPreinitScript(resources, src, chunks);
+    const {src, chunks} = renderState.externalRuntimeScript;
+    internalPreinitScript(resumableState, renderState, src, chunks);
   }
 
-  const htmlChunks = responseState.htmlChunks;
-  const headChunks = responseState.headChunks;
+  const htmlChunks = renderState.htmlChunks;
+  const headChunks = renderState.headChunks;
 
   let i = 0;
 
@@ -4220,55 +4387,54 @@ export function writePreamble(
   }
 
   // Emit high priority Hoistables
-  const charsetChunks = responseState.charsetChunks;
+  const charsetChunks = renderState.charsetChunks;
   for (i = 0; i < charsetChunks.length; i++) {
     writeChunk(destination, charsetChunks[i]);
   }
   charsetChunks.length = 0;
 
   // emit preconnect resources
-  resources.preconnects.forEach(flushResourceInPreamble, destination);
-  resources.preconnects.clear();
+  renderState.preconnects.forEach(flushResourceInPreamble, destination);
+  renderState.preconnects.clear();
 
-  const preconnectChunks = responseState.preconnectChunks;
+  const preconnectChunks = renderState.preconnectChunks;
   for (i = 0; i < preconnectChunks.length; i++) {
     writeChunk(destination, preconnectChunks[i]);
   }
   preconnectChunks.length = 0;
 
-  resources.fontPreloads.forEach(flushResourceInPreamble, destination);
-  resources.fontPreloads.clear();
+  renderState.fontPreloads.forEach(flushResourceInPreamble, destination);
+  renderState.fontPreloads.clear();
+
+  renderState.highImagePreloads.forEach(flushResourceInPreamble, destination);
+  renderState.highImagePreloads.clear();
 
   // Flush unblocked stylesheets by precedence
-  resources.precedences.forEach(flushAllStylesInPreamble, destination);
+  renderState.precedences.forEach(flushAllStylesInPreamble, destination);
 
-  resources.scripts.forEach(flushResourceInPreamble, destination);
-  resources.scripts.clear();
+  const importMapChunks = renderState.importMapChunks;
+  for (i = 0; i < importMapChunks.length; i++) {
+    writeChunk(destination, importMapChunks[i]);
+  }
+  importMapChunks.length = 0;
 
-  resources.explicitStylesheetPreloads.forEach(
-    flushResourceInPreamble,
-    destination,
-  );
-  resources.explicitStylesheetPreloads.clear();
+  renderState.bootstrapScripts.forEach(flushResourceInPreamble, destination);
 
-  resources.explicitScriptPreloads.forEach(
-    flushResourceInPreamble,
-    destination,
-  );
-  resources.explicitScriptPreloads.clear();
+  renderState.scripts.forEach(flushResourceInPreamble, destination);
+  renderState.scripts.clear();
 
-  resources.explicitOtherPreloads.forEach(flushResourceInPreamble, destination);
-  resources.explicitOtherPreloads.clear();
+  renderState.bulkPreloads.forEach(flushResourceInPreamble, destination);
+  renderState.bulkPreloads.clear();
 
   // Write embedding preloadChunks
-  const preloadChunks = responseState.preloadChunks;
+  const preloadChunks = renderState.preloadChunks;
   for (i = 0; i < preloadChunks.length; i++) {
     writeChunk(destination, preloadChunks[i]);
   }
   preloadChunks.length = 0;
 
   // Write embedding hoistableChunks
-  const hoistableChunks = responseState.hoistableChunks;
+  const hoistableChunks = renderState.hoistableChunks;
   for (i = 0; i < hoistableChunks.length; i++) {
     writeChunk(destination, hoistableChunks[i]);
   }
@@ -4293,8 +4459,8 @@ export function writePreamble(
 // of the flushing code in Fizz.
 export function writeHoistables(
   destination: Destination,
-  resources: Resources,
-  responseState: ResponseState,
+  resumableState: ResumableState,
+  renderState: RenderState,
 ): void {
   let i = 0;
 
@@ -4303,43 +4469,48 @@ export function writeHoistables(
   // We omit charsetChunks because we have already sent the shell and if it wasn't
   // already sent it is too late now.
 
-  resources.preconnects.forEach(flushResourceLate, destination);
-  resources.preconnects.clear();
+  renderState.preconnects.forEach(flushResourceLate, destination);
+  renderState.preconnects.clear();
 
-  const preconnectChunks = responseState.preconnectChunks;
+  const preconnectChunks = renderState.preconnectChunks;
   for (i = 0; i < preconnectChunks.length; i++) {
     writeChunk(destination, preconnectChunks[i]);
   }
   preconnectChunks.length = 0;
 
-  resources.fontPreloads.forEach(flushResourceLate, destination);
-  resources.fontPreloads.clear();
+  renderState.fontPreloads.forEach(flushResourceLate, destination);
+  renderState.fontPreloads.clear();
+
+  renderState.highImagePreloads.forEach(flushResourceInPreamble, destination);
+  renderState.highImagePreloads.clear();
 
   // Preload any stylesheets. these will emit in a render instruction that follows this
   // but we want to kick off preloading as soon as possible
-  resources.precedences.forEach(preloadLateStyles, destination);
+  renderState.precedences.forEach(preloadLateStyles, destination);
 
-  resources.scripts.forEach(flushResourceLate, destination);
-  resources.scripts.clear();
+  // We only hoist importmaps that are configured through createResponse and that will
+  // always flush in the preamble. Generally we don't expect people to render them as
+  // tags when using React but if you do they are going to be treated like regular inline
+  // scripts and flush after other hoistables which is problematic
 
-  resources.explicitStylesheetPreloads.forEach(flushResourceLate, destination);
-  resources.explicitStylesheetPreloads.clear();
+  // bootstrap scripts should flush above script priority but these can only flush in the preamble
+  // so we elide the code here for performance
 
-  resources.explicitScriptPreloads.forEach(flushResourceLate, destination);
-  resources.explicitScriptPreloads.clear();
+  renderState.scripts.forEach(flushResourceLate, destination);
+  renderState.scripts.clear();
 
-  resources.explicitOtherPreloads.forEach(flushResourceLate, destination);
-  resources.explicitOtherPreloads.clear();
+  renderState.bulkPreloads.forEach(flushResourceLate, destination);
+  renderState.bulkPreloads.clear();
 
   // Write embedding preloadChunks
-  const preloadChunks = responseState.preloadChunks;
+  const preloadChunks = renderState.preloadChunks;
   for (i = 0; i < preloadChunks.length; i++) {
     writeChunk(destination, preloadChunks[i]);
   }
   preloadChunks.length = 0;
 
   // Write embedding hoistableChunks
-  const hoistableChunks = responseState.hoistableChunks;
+  const hoistableChunks = renderState.hoistableChunks;
   for (i = 0; i < hoistableChunks.length; i++) {
     writeChunk(destination, hoistableChunks[i]);
   }
@@ -4348,14 +4519,14 @@ export function writeHoistables(
 
 export function writePostamble(
   destination: Destination,
-  responseState: ResponseState,
+  resumableState: ResumableState,
 ): void {
-  if (responseState.hasBody) {
+  if (resumableState.hasBody) {
     writeChunk(destination, endTag1);
     writeChunk(destination, stringToChunk('body'));
     writeChunk(destination, endTag2);
   }
-  if (responseState.htmlChunks) {
+  if (resumableState.hasHtml) {
     writeChunk(destination, endTag1);
     writeChunk(destination, stringToChunk('html'));
     writeChunk(destination, endTag2);
@@ -4784,30 +4955,6 @@ type TResource<
   state: ResourceStateTag,
   props: P,
 };
-// Dev extensions.
-// Stylesheets and Scripts rendered with jsx
-type RenderedResourceDEV = {
-  __provenance: 'rendered',
-  __originalProps: any,
-};
-// Preloads, Stylesheets, and Scripts from ReactDOM.preload or ReactDOM.preinit
-type ImperativeResourceDEV = {
-  __provenance: 'preload' | 'preinit',
-  __originalHref: string,
-  __originalOptions: any,
-  __propsEquivalent: any,
-};
-// Preloads created for normal components we rendered but know we can preload early such as
-// sync Scripts and stylesheets without precedence or with onLoad/onError handlers
-type ImplicitResourceDEV = {
-  __provenance: 'implicit',
-  __underlyingProps: any,
-  __impliedProps: any,
-};
-type ResourceDEV =
-  | RenderedResourceDEV
-  | ImperativeResourceDEV
-  | ImplicitResourceDEV;
 
 type PreconnectProps = {
   rel: 'preconnect' | 'dns-prefetch',
@@ -4820,12 +4967,12 @@ type PreloadAsProps = {
   rel: 'preload',
   as: string,
   href: ?string,
-  [string]: mixed,
+  [string]: ?string,
 };
 type PreloadModuleProps = {
   rel: 'modulepreload',
   href: ?string,
-  [string]: mixed,
+  [string]: ?string,
 };
 type PreloadProps = PreloadAsProps | PreloadModuleProps;
 type PreloadResource = TResource<'preload', PreloadProps>;
@@ -4851,6 +4998,12 @@ type ScriptProps = {
   src: string,
   [string]: mixed,
 };
+type ModuleProps = {
+  async: true,
+  src: string,
+  type: 'module',
+  [string]: mixed,
+};
 type ScriptResource = TResource<'script', null>;
 
 type Resource =
@@ -4859,74 +5012,24 @@ type Resource =
   | PreloadResource
   | PreconnectResource;
 
-export type Resources = {
-  // Request local cache
-  preloadsMap: Map<string, PreloadResource>,
-  preconnectsMap: Map<string, PreconnectResource>,
-  stylesMap: Map<string, StyleResource>,
-  scriptsMap: Map<string, ScriptResource>,
-
-  // Flushing queues for Resource dependencies
-  preconnects: Set<PreconnectResource>,
-  fontPreloads: Set<PreloadResource>,
-  // usedImagePreloads: Set<PreloadResource>,
-  precedences: Map<string, Set<StyleResource>>,
-  stylePrecedences: Map<string, StyleTagResource>,
-  scripts: Set<ScriptResource>,
-  explicitStylesheetPreloads: Set<PreloadResource>,
-  // explicitImagePreloads: Set<PreloadResource>,
-  explicitScriptPreloads: Set<PreloadResource>,
-  explicitOtherPreloads: Set<PreloadResource>,
-
-  // Module-global-like reference for current boundary resources
-  boundaryResources: ?BoundaryResources,
-  ...
-};
-
-// @TODO add bootstrap script to implicit preloads
-export function createResources(): Resources {
-  return {
-    // persistent
-    preloadsMap: new Map(),
-    preconnectsMap: new Map(),
-    stylesMap: new Map(),
-    scriptsMap: new Map(),
-
-    // cleared on flush
-    preconnects: new Set(),
-    fontPreloads: new Set(),
-    // usedImagePreloads: new Set(),
-    precedences: new Map(),
-    stylePrecedences: new Map(),
-    scripts: new Set(),
-    explicitStylesheetPreloads: new Set(),
-    // explicitImagePreloads: new Set(),
-    explicitScriptPreloads: new Set(),
-    explicitOtherPreloads: new Set(),
-
-    // like a module global for currently rendering boundary
-    boundaryResources: null,
-  };
-}
-
-export type BoundaryResources = Set<StyleResource>;
+export type BoundaryResources = Set<StyleResource>;
 
 export function createBoundaryResources(): BoundaryResources {
   return new Set();
 }
 
 export function setCurrentlyRenderingBoundaryResourcesTarget(
-  resources: Resources,
+  renderState: RenderState,
   boundaryResources: null | BoundaryResources,
 ) {
-  resources.boundaryResources = boundaryResources;
+  renderState.boundaryResources = boundaryResources;
 }
 
 function getResourceKey(as: string, href: string): string {
   return `[${as}]${href}`;
 }
 
-export function prefetchDNS(href: string, options?: ?PrefetchDNSOptions) {
+function prefetchDNS(href: string) {
   if (!enableFloat) {
     return;
   }
@@ -4939,53 +5042,30 @@ export function prefetchDNS(href: string, options?: ?PrefetchDNSOptions) {
     // fetching) and we don't want to warn in those cases.
     return;
   }
-  const resources = getResources(request);
-  if (__DEV__) {
-    if (typeof href !== 'string' || !href) {
-      console.error(
-        'ReactDOM.prefetchDNS(): Expected the `href` argument (first) to be a non-empty string but encountered %s instead.',
-        getValueDescriptorExpectingObjectForWarning(href),
-      );
-    } else if (options != null) {
-      if (
-        typeof options === 'object' &&
-        options.hasOwnProperty('crossOrigin')
-      ) {
-        console.error(
-          'ReactDOM.prefetchDNS(): Expected only one argument, `href`, but encountered %s as a second argument instead. This argument is reserved for future options and is currently disallowed. It looks like the you are attempting to set a crossOrigin property for this DNS lookup hint. Browsers do not perform DNS queries using CORS and setting this attribute on the resource hint has no effect. Try calling ReactDOM.prefetchDNS() with just a single string argument, `href`.',
-          getValueDescriptorExpectingEnumForWarning(options),
-        );
-      } else {
-        console.error(
-          'ReactDOM.prefetchDNS(): Expected only one argument, `href`, but encountered %s as a second argument instead. This argument is reserved for future options and is currently disallowed. Try calling ReactDOM.prefetchDNS() with just a single string argument, `href`.',
-          getValueDescriptorExpectingEnumForWarning(options),
-        );
-      }
-    }
-  }
+  const resumableState = getResumableState(request);
+  const renderState = getRenderState(request);
 
   if (typeof href === 'string' && href) {
     const key = getResourceKey('prefetchDNS', href);
-    let resource = resources.preconnectsMap.get(key);
-    if (!resource) {
-      resource = {
+    if (!resumableState.preconnectsMap.hasOwnProperty(key)) {
+      const resource: PreconnectResource = {
         type: 'preconnect',
         chunks: [],
         state: NoState,
         props: null,
       };
-      resources.preconnectsMap.set(key, resource);
+      resumableState.preconnectsMap[key] = null;
       pushLinkImpl(
         resource.chunks,
         ({href, rel: 'dns-prefetch'}: PreconnectProps),
       );
+      renderState.preconnects.add(resource);
     }
-    resources.preconnects.add(resource);
     flushResources(request);
   }
 }
 
-export function preconnect(href: string, options?: ?PreconnectOptions) {
+function preconnect(href: string, crossOrigin: ?CrossOriginEnum) {
   if (!enableFloat) {
     return;
   }
@@ -4998,57 +5078,32 @@ export function preconnect(href: string, options?: ?PreconnectOptions) {
     // fetching) and we don't want to warn in those cases.
     return;
   }
-  const resources = getResources(request);
-  if (__DEV__) {
-    if (typeof href !== 'string' || !href) {
-      console.error(
-        'ReactDOM.preconnect(): Expected the `href` argument (first) to be a non-empty string but encountered %s instead.',
-        getValueDescriptorExpectingObjectForWarning(href),
-      );
-    } else if (options != null && typeof options !== 'object') {
-      console.error(
-        'ReactDOM.preconnect(): Expected the `options` argument (second) to be an object but encountered %s instead. The only supported option at this time is `crossOrigin` which accepts a string.',
-        getValueDescriptorExpectingEnumForWarning(options),
-      );
-    } else if (options != null && typeof options.crossOrigin !== 'string') {
-      console.error(
-        'ReactDOM.preconnect(): Expected the `crossOrigin` option (second argument) to be a string but encountered %s instead. Try removing this option or passing a string value instead.',
-        getValueDescriptorExpectingObjectForWarning(options.crossOrigin),
-      );
-    }
-  }
+  const resumableState = getResumableState(request);
+  const renderState = getRenderState(request);
 
   if (typeof href === 'string' && href) {
-    const crossOrigin =
-      options == null || typeof options.crossOrigin !== 'string'
-        ? null
-        : options.crossOrigin === 'use-credentials'
-        ? 'use-credentials'
-        : '';
-
     const key = `[preconnect][${
-      crossOrigin === null ? 'null' : crossOrigin
+      typeof crossOrigin === 'string' ? crossOrigin : 'null'
     }]${href}`;
-    let resource = resources.preconnectsMap.get(key);
-    if (!resource) {
-      resource = {
+    if (!resumableState.preconnectsMap.hasOwnProperty(key)) {
+      const resource: PreconnectResource = {
         type: 'preconnect',
         chunks: [],
         state: NoState,
         props: null,
       };
-      resources.preconnectsMap.set(key, resource);
+      resumableState.preconnectsMap[key] = null;
       pushLinkImpl(
         resource.chunks,
         ({rel: 'preconnect', href, crossOrigin}: PreconnectProps),
       );
+      renderState.preconnects.add(resource);
     }
-    resources.preconnects.add(resource);
     flushResources(request);
   }
 }
 
-export function preload(href: string, options: PreloadOptions) {
+function preload(href: string, as: string, options?: ?PreloadImplOptions) {
   if (!enableFloat) {
     return;
   }
@@ -5061,156 +5116,53 @@ export function preload(href: string, options: PreloadOptions) {
     // fetching) and we don't want to warn in those cases.
     return;
   }
-  const resources = getResources(request);
-  if (__DEV__) {
-    let encountered = '';
-    if (typeof href !== 'string' || !href) {
-      encountered += ` The \`href\` argument encountered was ${getValueDescriptorExpectingObjectForWarning(
-        href,
-      )}.`;
-    }
-    if (options == null || typeof options !== 'object') {
-      encountered += ` The \`options\` argument encountered was ${getValueDescriptorExpectingObjectForWarning(
-        options,
-      )}.`;
-    } else if (typeof options.as !== 'string' || !options.as) {
-      encountered += ` The \`as\` option encountered was ${getValueDescriptorExpectingObjectForWarning(
-        options.as,
-      )}.`;
-    }
-    if (encountered) {
-      console.error(
-        'ReactDOM.preload(): Expected two arguments, a non-empty `href` string and an `options` object with an `as` property valid for a `<link rel="preload" as="..." />` tag.%s',
-        encountered,
-      );
-    }
-  }
-  if (
-    typeof href === 'string' &&
-    href &&
-    typeof options === 'object' &&
-    options !== null &&
-    typeof options.as === 'string' &&
-    options.as
-  ) {
-    const as = options.as;
+  const resumableState = getResumableState(request);
+  const renderState = getRenderState(request);
+  if (as && href) {
+    options = options || {};
     let key: string;
     if (as === 'image') {
       // For image preloads the key contains either the imageSrcSet + imageSizes or the href but not
       // both. This is to prevent identical calls with the same srcSet and sizes to be duplicated
       // by varying the href. this is an edge case but it is the most correct behavior.
-      const {imageSrcSet, imageSizes} = options;
-      let uniquePart = '';
-      if (typeof imageSrcSet === 'string' && imageSrcSet !== '') {
-        uniquePart += '[' + imageSrcSet + ']';
-        if (typeof imageSizes === 'string') {
-          uniquePart += '[' + imageSizes + ']';
-        }
-      } else {
-        uniquePart += '[][]' + href;
-      }
-      key = getResourceKey(as, uniquePart);
+      key = getImagePreloadKey(href, options.imageSrcSet, options.imageSizes);
     } else {
       key = getResourceKey(as, href);
     }
-    let resource = resources.preloadsMap.get(key);
-    if (__DEV__) {
-      const devResource = getAsResourceDEV(resource);
-      if (devResource) {
-        switch (devResource.__provenance) {
-          case 'preload': {
-            const differenceDescription = describeDifferencesForPreloads(
-              options,
-              devResource.__originalOptions,
-            );
-            if (differenceDescription) {
-              console.error(
-                'ReactDOM.preload(): The options provided conflict with another call to `ReactDOM.preload("%s", { as: "%s", ...})`.' +
-                  ' React will always use the options it first encounters when preloading a resource for a given `href` and `as` type, and any later options will be ignored if different.' +
-                  ' Try updating all calls to `ReactDOM.preload()` with the same `href` and `as` type to use the same options, or eliminate one of the calls.%s',
-                href,
-                as,
-                differenceDescription,
-              );
-            }
-            break;
-          }
-          case 'implicit': {
-            const differenceDescription =
-              describeDifferencesForPreloadOverImplicitPreload(
-                options,
-                devResource.__impliedProps,
-              );
-            if (differenceDescription) {
-              const elementDescription =
-                as === 'style'
-                  ? '<link rel="stylesheet" ... />'
-                  : as === 'script'
-                  ? '<script ... />'
-                  : null;
-              if (elementDescription) {
-                console.error(
-                  'ReactDOM.preload(): For `href` "%s", The options provided conflict with props on a matching %s element. When the preload' +
-                    ' options disagree with the underlying resource it usually means the browser will not be able to use the preload when the resource' +
-                    ' is fetched, negating any benefit the preload would provide. React will preload the resource using props derived from the resource instead' +
-                    ' and ignore the options provided to the `ReactDOM.preload()` call. In general, preloading is useful when you expect to' +
-                    ' render a resource soon but have not yet done so. In this case since the underlying resource was already rendered the preload call' +
-                    ' may be extraneous. Try removing the call, otherwise try adjusting both the props on the %s and the options' +
-                    ' passed to `ReactDOM.preload()` to agree.%s',
-                  href,
-                  elementDescription,
-                  elementDescription,
-                  differenceDescription,
-                );
-              }
-            }
-            break;
-          }
-        }
-      }
-    }
-    if (!resource) {
-      resource = {
+    if (!resumableState.preloadsMap.hasOwnProperty(key)) {
+      const props = Object.assign(
+        ({
+          rel: 'preload',
+          href: as === 'image' && options.imageSrcSet ? undefined : href,
+          as,
+        }: PreloadProps),
+        options,
+      );
+      const resource: PreloadResource = {
         type: 'preload',
         chunks: [],
         state: NoState,
-        props: preloadPropsFromPreloadOptions(href, as, options),
+        props,
       };
-      resources.preloadsMap.set(key, resource);
-      if (__DEV__) {
-        markAsImperativeResourceDEV(
-          resource,
-          'preload',
-          href,
-          options,
-          resource.props,
-        );
-      }
-
-      pushLinkImpl(resource.chunks, resource.props);
-    }
-    switch (as) {
-      case 'font': {
-        resources.fontPreloads.add(resource);
-        break;
-      }
-      case 'style': {
-        resources.explicitStylesheetPreloads.add(resource);
-        break;
-      }
-      case 'script': {
-        resources.explicitScriptPreloads.add(resource);
-        break;
-      }
-      default: {
-        resources.explicitOtherPreloads.add(resource);
+      resumableState.preloadsMap[key] = props;
+      renderState.preloadsMap.set(key, resource);
+      pushLinkImpl(resource.chunks, props);
+      if (as === 'font') {
+        renderState.fontPreloads.add(resource);
+      } else if (as === 'image' && resource.props.fetchPriority === 'high') {
+        renderState.highImagePreloads.add(resource);
+      } else {
+        renderState.bulkPreloads.add(resource);
       }
     }
     flushResources(request);
   }
 }
 
-function preinit(href: string, options: PreinitOptions): void {
+function preloadModule(
+  href: string,
+  options?: ?PreloadModuleImplOptions,
+): void {
   if (!enableFloat) {
     return;
   }
@@ -5223,220 +5175,195 @@ function preinit(href: string, options: PreinitOptions): void {
     // fetching) and we don't want to warn in those cases.
     return;
   }
-  const resources = getResources(request);
-  if (__DEV__) {
-    if (typeof href !== 'string' || !href) {
-      console.error(
-        'ReactDOM.preinit(): Expected the `href` argument (first) to be a non-empty string but encountered %s instead.',
-        getValueDescriptorExpectingObjectForWarning(href),
-      );
-    } else if (options == null || typeof options !== 'object') {
-      console.error(
-        'ReactDOM.preinit(): Expected the `options` argument (second) to be an object with an `as` property describing the type of resource to be preinitialized but encountered %s instead.',
-        getValueDescriptorExpectingEnumForWarning(options),
-      );
-    } else if (options.as !== 'style' && options.as !== 'script') {
-      console.error(
-        'ReactDOM.preinit(): Expected the `as` property in the `options` argument (second) to contain a valid value describing the type of resource to be preinitialized but encountered %s instead. Valid values for `as` are "style" and "script".',
-        getValueDescriptorExpectingEnumForWarning(options.as),
+  const resumableState = getResumableState(request);
+  const renderState = getRenderState(request);
+  if (href) {
+    const as =
+      options && typeof options.as === 'string' ? options.as : 'script';
+    const key = getResourceKey(as, href);
+    if (!resumableState.preloadsMap.hasOwnProperty(key)) {
+      const props: PreloadModuleProps = Object.assign(
+        ({
+          rel: 'modulepreload',
+          href,
+        }: PreloadModuleProps),
+        options,
       );
+      const resource: PreloadResource = {
+        type: 'preload',
+        chunks: [],
+        state: NoState,
+        props,
+      };
+      resumableState.preloadsMap[key] = props;
+      renderState.preloadsMap.set(key, resource);
+      pushLinkImpl(resource.chunks, resource.props);
+      renderState.bulkPreloads.add(resource);
     }
+    flushResources(request);
   }
-  if (
-    typeof href === 'string' &&
-    href &&
-    typeof options === 'object' &&
-    options !== null
-  ) {
-    const as = options.as;
-    switch (as) {
-      case 'style': {
-        const key = getResourceKey(as, href);
-        let resource = resources.stylesMap.get(key);
-        const precedence = options.precedence || 'default';
+}
+
+function preinitStyle(
+  href: string,
+  precedence: ?string,
+  options?: ?PreinitStyleOptions,
+): void {
+  if (!enableFloat) {
+    return;
+  }
+  const request = resolveRequest();
+  if (!request) {
+    // In async contexts we can sometimes resolve resources from AsyncLocalStorage. If we can't we can also
+    // possibly get them from the stack if we are not in an async context. Since we were not able to resolve
+    // the resources for this call in either case we opt to do nothing. We can consider making this a warning
+    // but there may be times where calling a function outside of render is intentional (i.e. to warm up data
+    // fetching) and we don't want to warn in those cases.
+    return;
+  }
+  const resumableState = getResumableState(request);
+  const renderState = getRenderState(request);
+  if (href) {
+    const as = 'style';
+    const key = getResourceKey(as, href);
+    if (!resumableState.stylesMap.hasOwnProperty(key)) {
+      precedence = precedence || 'default';
+      let state = NoState;
+      const preloadResource = renderState.preloadsMap.get(key);
+      if (preloadResource && preloadResource.state & Flushed) {
+        state = PreloadFlushed;
+      } else if (resumableState.preloadsMap.hasOwnProperty(key)) {
+        // If we resumed then we assume that this was already flushed
+        // by the shell.
+        state = PreloadFlushed;
+      }
+      const props: StylesheetProps = Object.assign(
+        ({
+          rel: 'stylesheet',
+          href,
+          'data-precedence': precedence,
+        }: StylesheetProps),
+        options,
+      );
+      const resource = {
+        type: 'stylesheet',
+        chunks: ([]: Array<Chunk | PrecomputedChunk>),
+        state,
+        props,
+      };
+      resumableState.stylesMap[key] = null;
+      let stylesInPrecedence = renderState.precedences.get(precedence);
+      if (!stylesInPrecedence) {
+        stylesInPrecedence = new Map();
+        renderState.precedences.set(precedence, stylesInPrecedence);
+        const emptyStyleResource = {
+          type: 'style',
+          chunks: ([]: Array<Chunk | PrecomputedChunk>),
+          state: NoState,
+          props: {
+            precedence,
+            hrefs: ([]: Array<string>),
+          },
+        };
+        stylesInPrecedence.set('', emptyStyleResource);
         if (__DEV__) {
-          const devResource = getAsResourceDEV(resource);
-          if (devResource) {
-            const resourceProps = stylesheetPropsFromPreinitOptions(
-              href,
-              precedence,
-              options,
-            );
-            const propsEquivalent = {
-              ...resourceProps,
-              precedence: options.precedence,
-              ['data-precedence']: null,
-            };
-            switch (devResource.__provenance) {
-              case 'rendered': {
-                const differenceDescription =
-                  describeDifferencesForPreinitOverStylesheet(
-                    // Diff the props from the JSX element, not the derived resource props
-                    propsEquivalent,
-                    devResource.__originalProps,
-                  );
-                if (differenceDescription) {
-                  console.error(
-                    'ReactDOM.preinit(): For `href` "%s", the options provided conflict with props found on a <link rel="stylesheet" precedence="%s" href="%s" .../> that was already rendered.' +
-                      ' React will always use the props or options it first encounters for a hoistable stylesheet for a given `href` and any later props or options will be ignored if different.' +
-                      ' Generally, ReactDOM.preinit() is useful when you are not yet rendering a stylesheet but you anticipate it will be used soon.' +
-                      ' In this case the stylesheet was already rendered so preinitializing it does not provide any additional benefit.' +
-                      ' To resolve, try making the props and options agree between the <link rel="stylesheet" .../> and the `ReactDOM.preinit()` call or' +
-                      ' remove the `ReactDOM.preinit()` call.%s',
-                    href,
-                    devResource.__originalProps.precedence,
-                    href,
-                    differenceDescription,
-                  );
-                }
-                break;
-              }
-              case 'preinit': {
-                const differenceDescription = describeDifferencesForPreinits(
-                  // Diff the props from the JSX element, not the derived resource props
-                  propsEquivalent,
-                  devResource.__propsEquivalent,
-                );
-                if (differenceDescription) {
-                  console.error(
-                    'ReactDOM.preinit(): For `href` "%s", the options provided conflict with another call to `ReactDOM.preinit("%s", { as: "style", ... })`.' +
-                      ' React will always use the options it first encounters when preinitializing a hoistable stylesheet for a given `href` and any later options will be ignored if different.' +
-                      ' Try updating all calls to `ReactDOM.preinit()` for a given `href` to use the same options, or only call `ReactDOM.preinit()` once per `href`.%s',
-                    href,
-                    href,
-                    differenceDescription,
-                  );
-                }
-                break;
-              }
-            }
-          }
-        }
-        if (!resource) {
-          let state = NoState;
-          const preloadResource = resources.preloadsMap.get(key);
-          if (preloadResource && preloadResource.state & Flushed) {
-            state = PreloadFlushed;
-          }
-          resource = {
-            type: 'stylesheet',
-            chunks: ([]: Array<Chunk | PrecomputedChunk>),
-            state,
-            props: stylesheetPropsFromPreinitOptions(href, precedence, options),
-          };
-          resources.stylesMap.set(key, resource);
-          if (__DEV__) {
-            markAsImperativeResourceDEV(resource, 'preinit', href, options, {
-              ...resource.props,
+          if (renderState.stylePrecedences.has(precedence)) {
+            console.error(
+              'React constructed an empty style resource when a style resource already exists for this precedence: "%s". This is a bug in React.',
               precedence,
-              ['data-precedence']: undefined,
-            });
-          }
-          let precedenceSet = resources.precedences.get(precedence);
-          if (!precedenceSet) {
-            precedenceSet = new Set();
-            resources.precedences.set(precedence, precedenceSet);
-            const emptyStyleResource = {
-              type: 'style',
-              chunks: ([]: Array<Chunk | PrecomputedChunk>),
-              state: NoState,
-              props: {
-                precedence,
-                hrefs: ([]: Array<string>),
-              },
-            };
-            precedenceSet.add(emptyStyleResource);
-            if (__DEV__) {
-              if (resources.stylePrecedences.has(precedence)) {
-                console.error(
-                  'React constructed an empty style resource when a style resource already exists for this precedence: "%s". This is a bug in React.',
-                  precedence,
-                );
-              }
-            }
-            resources.stylePrecedences.set(precedence, emptyStyleResource);
-          }
-          precedenceSet.add(resource);
-          flushResources(request);
-        }
-        return;
-      }
-      case 'script': {
-        const src = href;
-        const key = getResourceKey(as, src);
-        let resource = resources.scriptsMap.get(key);
-        if (__DEV__) {
-          const devResource = getAsResourceDEV(resource);
-          if (devResource) {
-            const propsEquivalent = scriptPropsFromPreinitOptions(src, options);
-            switch (devResource.__provenance) {
-              case 'rendered': {
-                const differenceDescription =
-                  describeDifferencesForPreinitOverScript(
-                    // Diff the props from the JSX element, not the derived resource props
-                    propsEquivalent,
-                    devResource.__originalProps,
-                  );
-                if (differenceDescription) {
-                  console.error(
-                    'ReactDOM.preinit(): For `href` "%s", the options provided conflict with props found on a <script async={true} src="%s" .../> that was already rendered.' +
-                      ' React will always use the props or options it first encounters for a hoistable script for a given `href` and any later props or options will be ignored if different.' +
-                      ' Generally, ReactDOM.preinit() is useful when you are not yet rendering a script but you anticipate it will be used soon and want to go beyond preloading it and have it' +
-                      ' execute early. In this case the script was already rendered so preinitializing it does not provide any additional benefit.' +
-                      ' To resolve, try making the props and options agree between the <script .../> and the `ReactDOM.preinit()` call or remove the `ReactDOM.preinit()` call.%s',
-                    href,
-                    href,
-                    differenceDescription,
-                  );
-                }
-                break;
-              }
-              case 'preinit': {
-                const differenceDescription = describeDifferencesForPreinits(
-                  // Diff the props from the JSX element, not the derived resource props
-                  propsEquivalent,
-                  devResource.__propsEquivalent,
-                );
-                if (differenceDescription) {
-                  console.error(
-                    'ReactDOM.preinit(): For `href` "%s", the options provided conflict with another call to `ReactDOM.preinit("%s", { as: "script", ... })`.' +
-                      ' React will always use the options it first encounters when preinitializing a hoistable script for a given `href` and any later options will be ignored if different.' +
-                      ' Try updating all calls to `ReactDOM.preinit()` for a given `href` to use the same options, or only call `ReactDOM.preinit()` once per `href`.%s',
-                    href,
-                    href,
-                    differenceDescription,
-                  );
-                }
-                break;
-              }
-            }
-          }
-        }
-        if (!resource) {
-          resource = {
-            type: 'script',
-            chunks: [],
-            state: NoState,
-            props: null,
-          };
-          resources.scriptsMap.set(key, resource);
-          const resourceProps = scriptPropsFromPreinitOptions(src, options);
-          if (__DEV__) {
-            markAsImperativeResourceDEV(
-              resource,
-              'preinit',
-              href,
-              options,
-              resourceProps,
             );
           }
-          resources.scripts.add(resource);
-          pushScriptImpl(resource.chunks, resourceProps);
-          flushResources(request);
         }
-        return;
+        renderState.stylePrecedences.set(precedence, emptyStyleResource);
       }
+      stylesInPrecedence.set(key, resource);
+      flushResources(request);
+    }
+    return;
+  }
+}
+
+function preinitScript(src: string, options?: ?PreinitScriptOptions): void {
+  if (!enableFloat) {
+    return;
+  }
+  const request = resolveRequest();
+  if (!request) {
+    // In async contexts we can sometimes resolve resources from AsyncLocalStorage. If we can't we can also
+    // possibly get them from the stack if we are not in an async context. Since we were not able to resolve
+    // the resources for this call in either case we opt to do nothing. We can consider making this a warning
+    // but there may be times where calling a function outside of render is intentional (i.e. to warm up data
+    // fetching) and we don't want to warn in those cases.
+    return;
+  }
+  const resumableState = getResumableState(request);
+  const renderState = getRenderState(request);
+  if (src) {
+    const key = getResourceKey('script', src);
+    if (!resumableState.scriptsMap.hasOwnProperty(key)) {
+      const resource: ScriptResource = {
+        type: 'script',
+        chunks: [],
+        state: NoState,
+        props: null,
+      };
+      resumableState.scriptsMap[key] = null;
+      const props: ScriptProps = Object.assign(
+        ({
+          src,
+          async: true,
+        }: ScriptProps),
+        options,
+      );
+      renderState.scripts.add(resource);
+      pushScriptImpl(resource.chunks, props);
+      flushResources(request);
     }
+    return;
+  }
+}
+
+function preinitModuleScript(
+  src: string,
+  options?: ?PreinitModuleScriptOptions,
+): void {
+  if (!enableFloat) {
+    return;
+  }
+  const request = resolveRequest();
+  if (!request) {
+    // In async contexts we can sometimes resolve resources from AsyncLocalStorage. If we can't we can also
+    // possibly get them from the stack if we are not in an async context. Since we were not able to resolve
+    // the resources for this call in either case we opt to do nothing. We can consider making this a warning
+    // but there may be times where calling a function outside of render is intentional (i.e. to warm up data
+    // fetching) and we don't want to warn in those cases.
+    return;
+  }
+  const resumableState = getResumableState(request);
+  const renderState = getRenderState(request);
+  if (src) {
+    const key = getResourceKey('script', src);
+    if (!resumableState.scriptsMap.hasOwnProperty(key)) {
+      const resource: ScriptResource = {
+        type: 'script',
+        chunks: [],
+        state: NoState,
+        props: null,
+      };
+      resumableState.scriptsMap[key] = null;
+      const props = Object.assign(
+        ({
+          src,
+          type: 'module',
+          async: true,
+        }: ModuleProps),
+        options,
+      );
+      renderState.scripts.add(resource);
+      pushScriptImpl(resource.chunks, props);
+      flushResources(request);
+    }
+    return;
   }
 }
 
@@ -5445,7 +5372,8 @@ function preinit(href: string, options: PreinitOptions): void {
 // scripts at any other point in time we will need to check whether the preload
 // already exists and not assume it
 function preloadBootstrapScript(
-  resources: Resources,
+  resumableState: ResumableState,
+  renderState: RenderState,
   src: string,
   nonce: ?string,
   integrity: ?string,
@@ -5453,7 +5381,7 @@ function preloadBootstrapScript(
 ): void {
   const key = getResourceKey('script', src);
   if (__DEV__) {
-    if (resources.preloadsMap.has(key)) {
+    if (resumableState.preloadsMap.hasOwnProperty(key)) {
       // This is coded as a React error because it should be impossible for a userspace preload to preempt this call
       // If a userspace preload can preempt it then this assumption is broken and we need to reconsider this strategy
       // rather than instruct the user to not preload their bootstrap scripts themselves
@@ -5467,6 +5395,7 @@ function preloadBootstrapScript(
     rel: 'preload',
     href: src,
     as: 'script',
+    fetchPriority: 'low',
     nonce,
     integrity,
     crossOrigin,
@@ -5477,8 +5406,9 @@ function preloadBootstrapScript(
     state: NoState,
     props,
   };
-  resources.preloadsMap.set(key, resource);
-  resources.explicitScriptPreloads.add(resource);
+  resumableState.preloadsMap[key] = props;
+  renderState.preloadsMap.set(key, resource);
+  renderState.bootstrapScripts.add(resource);
   pushLinkImpl(resource.chunks, props);
 }
 
@@ -5487,7 +5417,8 @@ function preloadBootstrapScript(
 // scripts at any other point in time we will need to check whether the preload
 // already exists and not assume it
 function preloadBootstrapModule(
-  resources: Resources,
+  resumableState: ResumableState,
+  renderState: RenderState,
   src: string,
   nonce: ?string,
   integrity: ?string,
@@ -5495,7 +5426,7 @@ function preloadBootstrapModule(
 ): void {
   const key = getResourceKey('script', src);
   if (__DEV__) {
-    if (resources.preloadsMap.has(key)) {
+    if (resumableState.preloadsMap.hasOwnProperty(key)) {
       // This is coded as a React error because it should be impossible for a userspace preload to preempt this call
       // If a userspace preload can preempt it then this assumption is broken and we need to reconsider this strategy
       // rather than instruct the user to not preload their bootstrap scripts themselves
@@ -5508,6 +5439,7 @@ function preloadBootstrapModule(
   const props: PreloadModuleProps = {
     rel: 'modulepreload',
     href: src,
+    fetchPriority: 'low',
     nonce,
     integrity,
     crossOrigin,
@@ -5518,56 +5450,33 @@ function preloadBootstrapModule(
     state: NoState,
     props,
   };
-  resources.preloadsMap.set(key, resource);
-  resources.explicitScriptPreloads.add(resource);
+  resumableState.preloadsMap[key] = props;
+  renderState.preloadsMap.set(key, resource);
+  renderState.bootstrapScripts.add(resource);
   pushLinkImpl(resource.chunks, props);
   return;
 }
 
 function internalPreinitScript(
-  resources: Resources,
+  resumableState: ResumableState,
+  renderState: RenderState,
   src: string,
   chunks: Array<Chunk | PrecomputedChunk>,
 ): void {
   const key = getResourceKey('script', src);
-  let resource = resources.scriptsMap.get(key);
-  if (!resource) {
-    resource = {
+  if (!resumableState.scriptsMap.hasOwnProperty(key)) {
+    const resource: ScriptResource = {
       type: 'script',
       chunks,
       state: NoState,
       props: null,
     };
-    resources.scriptsMap.set(key, resource);
-    resources.scripts.add(resource);
+    resumableState.scriptsMap[key] = null;
+    renderState.scripts.add(resource);
   }
   return;
 }
 
-function preloadPropsFromPreloadOptions(
-  href: string,
-  as: string,
-  options: PreloadOptions,
-): PreloadProps {
-  return {
-    rel: 'preload',
-    as,
-    // There is a bug in Safari where imageSrcSet is not respected on preload links
-    // so we omit the href here if we have imageSrcSet b/c safari will load the wrong image.
-    // This harms older browers that do not support imageSrcSet by making their preloads not work
-    // but this population is shrinking fast and is already small so we accept this tradeoff.
-    href: as === 'image' && options.imageSrcSet ? undefined : href,
-    crossOrigin: as === 'font' ? '' : options.crossOrigin,
-    integrity: options.integrity,
-    type: options.type,
-    nonce: options.nonce,
-    fetchPriority: options.fetchPriority,
-    imageSrcSet: options.imageSrcSet,
-    imageSizes: options.imageSizes,
-    referrerPolicy: options.referrerPolicy,
-  };
-}
-
 function preloadAsStylePropsFromProps(href: string, props: any): PreloadProps {
   return {
     rel: 'preload',
@@ -5582,21 +5491,6 @@ function preloadAsStylePropsFromProps(href: string, props: any): PreloadProps {
   };
 }
 
-function stylesheetPropsFromPreinitOptions(
-  href: string,
-  precedence: string,
-  options: PreinitOptions,
-): StylesheetProps {
-  return {
-    rel: 'stylesheet',
-    href,
-    'data-precedence': precedence,
-    crossOrigin: options.crossOrigin,
-    integrity: options.integrity,
-    fetchPriority: options.fetchPriority,
-  };
-}
-
 function stylesheetPropsFromRawProps(rawProps: any): StylesheetProps {
   return {
     ...rawProps,
@@ -5615,20 +5509,6 @@ function adoptPreloadPropsForStylesheetProps(
     resourceProps.integrity = preloadProps.integrity;
 }
 
-function scriptPropsFromPreinitOptions(
-  src: string,
-  options: PreinitOptions,
-): ScriptProps {
-  return {
-    src,
-    async: true,
-    crossOrigin: options.crossOrigin,
-    integrity: options.integrity,
-    nonce: options.nonce,
-    fetchPriority: options.fetchPriority,
-  };
-}
-
 function adoptPreloadPropsForScriptProps(
   resourceProps: ScriptProps,
   preloadProps: PreloadProps,
@@ -5644,82 +5524,14 @@ function hoistStyleResource(this: BoundaryResources, resource: StyleResource) {
 }
 
 export function hoistResources(
-  resources: Resources,
+  renderState: RenderState,
   source: BoundaryResources,
 ): void {
-  const currentBoundaryResources = resources.boundaryResources;
+  const currentBoundaryResources = renderState.boundaryResources;
   if (currentBoundaryResources) {
     source.forEach(hoistStyleResource, currentBoundaryResources);
   }
 }
 
-function markAsRenderedResourceDEV(
-  resource: Resource,
-  originalProps: any,
-): void {
-  if (__DEV__) {
-    const devResource: RenderedResourceDEV = (resource: any);
-    if (typeof devResource.__provenance === 'string') {
-      console.error(
-        'Resource already marked for DEV type. This is a bug in React.',
-      );
-    }
-    devResource.__provenance = 'rendered';
-    devResource.__originalProps = originalProps;
-  } else {
-    // eslint-disable-next-line react-internal/prod-error-codes
-    throw new Error(
-      'markAsRenderedResourceDEV was included in a production build. This is a bug in React.',
-    );
-  }
-}
-
-function markAsImperativeResourceDEV(
-  resource: Resource,
-  provenance: 'preload' | 'preinit',
-  originalHref: string,
-  originalOptions: any,
-  propsEquivalent: any,
-): void {
-  if (__DEV__) {
-    const devResource: ImperativeResourceDEV = (resource: any);
-    if (typeof devResource.__provenance === 'string') {
-      console.error(
-        'Resource already marked for DEV type. This is a bug in React.',
-      );
-    }
-    devResource.__provenance = provenance;
-    devResource.__originalHref = originalHref;
-    devResource.__originalOptions = originalOptions;
-    devResource.__propsEquivalent = propsEquivalent;
-  } else {
-    // eslint-disable-next-line react-internal/prod-error-codes
-    throw new Error(
-      'markAsImperativeResourceDEV was included in a production build. This is a bug in React.',
-    );
-  }
-}
-
-function getAsResourceDEV(
-  resource: null | void | Resource,
-): null | ResourceDEV {
-  if (__DEV__) {
-    if (resource) {
-      if (typeof (resource: any).__provenance === 'string') {
-        return (resource: any);
-      }
-      console.error(
-        'Resource was not marked for DEV type. This is a bug in React.',
-      );
-    }
-    return null;
-  } else {
-    // eslint-disable-next-line react-internal/prod-error-codes
-    throw new Error(
-      'getAsResourceDEV was included in a production build. This is a bug in React.',
-    );
-  }
-}
-
 export type TransitionStatus = FormStatus;
 export const NotPendingTransition: TransitionStatus = NotPending;
diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOMLegacy.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOMLegacy.js
index d8f7094b50068..d92258936c4a9 100644
--- a/packages/react-dom-bindings/src/server/ReactFizzConfigDOMLegacy.js
+++ b/packages/react-dom-bindings/src/server/ReactFizzConfigDOMLegacy.js
@@ -7,24 +7,16 @@
  * @flow
  */
 
-import type {
-  Resources,
-  BootstrapScriptDescriptor,
-  ExternalRuntimeScript,
-  FormatContext,
-  StreamingFormat,
-  InstructionState,
-} from './ReactFizzConfigDOM';
+import type {ResumableState, BoundaryResources} from './ReactFizzConfigDOM';
 
 import {
-  createResponseState as createResponseStateImpl,
+  createRenderState as createRenderStateImpl,
   pushTextInstance as pushTextInstanceImpl,
   pushSegmentFinale as pushSegmentFinaleImpl,
   writeStartCompletedSuspenseBoundary as writeStartCompletedSuspenseBoundaryImpl,
   writeStartClientRenderedSuspenseBoundary as writeStartClientRenderedSuspenseBoundaryImpl,
   writeEndCompletedSuspenseBoundary as writeEndCompletedSuspenseBoundaryImpl,
   writeEndClientRenderedSuspenseBoundary as writeEndClientRenderedSuspenseBoundaryImpl,
-  HTML_MODE,
 } from './ReactFizzConfigDOM';
 
 import type {
@@ -39,95 +31,106 @@ import {NotPending} from '../shared/ReactDOMFormActions';
 
 export const isPrimaryRenderer = false;
 
-export type ResponseState = {
+export type RenderState = {
   // Keep this in sync with ReactFizzConfigDOM
-  bootstrapChunks: Array<Chunk | PrecomputedChunk>,
   placeholderPrefix: PrecomputedChunk,
   segmentPrefix: PrecomputedChunk,
-  boundaryPrefix: string,
-  idPrefix: string,
-  nextSuspenseID: number,
-  streamingFormat: StreamingFormat,
+  boundaryPrefix: PrecomputedChunk,
   startInlineScript: PrecomputedChunk,
-  instructions: InstructionState,
-  externalRuntimeScript: null | ExternalRuntimeScript,
   htmlChunks: null | Array<Chunk | PrecomputedChunk>,
   headChunks: null | Array<Chunk | PrecomputedChunk>,
-  hasBody: boolean,
+  externalRuntimeScript: null | any,
+  bootstrapChunks: Array<Chunk | PrecomputedChunk>,
   charsetChunks: Array<Chunk | PrecomputedChunk>,
   preconnectChunks: Array<Chunk | PrecomputedChunk>,
+  importMapChunks: Array<Chunk | PrecomputedChunk>,
   preloadChunks: Array<Chunk | PrecomputedChunk>,
   hoistableChunks: Array<Chunk | PrecomputedChunk>,
+  preconnects: Set<any>,
+  fontPreloads: Set<any>,
+  highImagePreloads: Set<any>,
+  // usedImagePreloads: Set<any>,
+  precedences: Map<string, Map<any, any>>,
+  stylePrecedences: Map<string, any>,
+  bootstrapScripts: Set<any>,
+  scripts: Set<any>,
+  bulkPreloads: Set<any>,
+  preloadsMap: Map<string, any>,
+  boundaryResources: ?BoundaryResources,
   stylesToHoist: boolean,
   // This is an extra field for the legacy renderer
   generateStaticMarkup: boolean,
 };
 
-export function createResponseState(
-  resources: Resources,
+export function createRenderState(
+  resumableState: ResumableState,
   generateStaticMarkup: boolean,
-  identifierPrefix: string | void,
-  externalRuntimeConfig: string | BootstrapScriptDescriptor | void,
-): ResponseState {
-  const responseState = createResponseStateImpl(
-    resources,
-    identifierPrefix,
+): RenderState {
+  const renderState = createRenderStateImpl(
+    resumableState,
+    undefined,
+    undefined,
     undefined,
     undefined,
     undefined,
     undefined,
-    externalRuntimeConfig,
   );
   return {
     // Keep this in sync with ReactFizzConfigDOM
-    bootstrapChunks: responseState.bootstrapChunks,
-    placeholderPrefix: responseState.placeholderPrefix,
-    segmentPrefix: responseState.segmentPrefix,
-    boundaryPrefix: responseState.boundaryPrefix,
-    idPrefix: responseState.idPrefix,
-    nextSuspenseID: responseState.nextSuspenseID,
-    streamingFormat: responseState.streamingFormat,
-    startInlineScript: responseState.startInlineScript,
-    instructions: responseState.instructions,
-    externalRuntimeScript: responseState.externalRuntimeScript,
-    htmlChunks: responseState.htmlChunks,
-    headChunks: responseState.headChunks,
-    hasBody: responseState.hasBody,
-    charsetChunks: responseState.charsetChunks,
-    preconnectChunks: responseState.preconnectChunks,
-    preloadChunks: responseState.preloadChunks,
-    hoistableChunks: responseState.hoistableChunks,
-    stylesToHoist: responseState.stylesToHoist,
+    placeholderPrefix: renderState.placeholderPrefix,
+    segmentPrefix: renderState.segmentPrefix,
+    boundaryPrefix: renderState.boundaryPrefix,
+    startInlineScript: renderState.startInlineScript,
+    htmlChunks: renderState.htmlChunks,
+    headChunks: renderState.headChunks,
+    externalRuntimeScript: renderState.externalRuntimeScript,
+    bootstrapChunks: renderState.bootstrapChunks,
+    charsetChunks: renderState.charsetChunks,
+    preconnectChunks: renderState.preconnectChunks,
+    importMapChunks: renderState.importMapChunks,
+    preloadChunks: renderState.preloadChunks,
+    hoistableChunks: renderState.hoistableChunks,
+    preconnects: renderState.preconnects,
+    fontPreloads: renderState.fontPreloads,
+    highImagePreloads: renderState.highImagePreloads,
+    // usedImagePreloads: renderState.usedImagePreloads,
+    precedences: renderState.precedences,
+    stylePrecedences: renderState.stylePrecedences,
+    bootstrapScripts: renderState.bootstrapScripts,
+    scripts: renderState.scripts,
+    bulkPreloads: renderState.bulkPreloads,
+    preloadsMap: renderState.preloadsMap,
+    boundaryResources: renderState.boundaryResources,
+    stylesToHoist: renderState.stylesToHoist,
 
     // This is an extra field for the legacy renderer
     generateStaticMarkup,
   };
 }
 
-export function createRootFormatContext(): FormatContext {
-  return {
-    insertionMode: HTML_MODE, // We skip the root mode because we don't want to emit the DOCTYPE in legacy mode.
-    selectedValue: null,
-    noscriptTagInScope: false,
-  };
-}
+import {
+  stringToChunk,
+  stringToPrecomputedChunk,
+} from 'react-server/src/ReactServerStreamConfig';
+
+// this chunk is empty on purpose because we do not want to emit the DOCTYPE in legacy mode
+export const doctypeChunk: PrecomputedChunk = stringToPrecomputedChunk('');
 
 export type {
-  Resources,
+  ResumableState,
   BoundaryResources,
   FormatContext,
-  SuspenseBoundaryID,
 } from './ReactFizzConfigDOM';
 
 export {
   getChildFormatContext,
-  UNINITIALIZED_SUSPENSE_BOUNDARY_ID,
-  assignSuspenseBoundaryID,
   makeId,
   pushStartInstance,
   pushEndInstance,
   pushStartCompletedSuspenseBoundary,
   pushEndCompletedSuspenseBoundary,
+  pushFormStateMarkerIsMatching,
+  pushFormStateMarkerIsNotMatching,
   writeStartSegment,
   writeEndSegment,
   writeCompletedSegmentInstruction,
@@ -138,7 +141,8 @@ export {
   writeResourcesForBoundary,
   writePlaceholder,
   writeCompletedRoot,
-  createResources,
+  createRootFormatContext,
+  createResumableState,
   createBoundaryResources,
   writePreamble,
   writeHoistables,
@@ -148,36 +152,34 @@ export {
   prepareHostDispatcher,
 } from './ReactFizzConfigDOM';
 
-import {stringToChunk} from 'react-server/src/ReactServerStreamConfig';
-
 import escapeTextForBrowser from './escapeTextForBrowser';
 
 export function pushTextInstance(
   target: Array<Chunk | PrecomputedChunk>,
   text: string,
-  responseState: ResponseState,
+  renderState: RenderState,
   textEmbedded: boolean,
 ): boolean {
-  if (responseState.generateStaticMarkup) {
+  if (renderState.generateStaticMarkup) {
     target.push(stringToChunk(escapeTextForBrowser(text)));
     return false;
   } else {
-    return pushTextInstanceImpl(target, text, responseState, textEmbedded);
+    return pushTextInstanceImpl(target, text, renderState, textEmbedded);
   }
 }
 
 export function pushSegmentFinale(
   target: Array<Chunk | PrecomputedChunk>,
-  responseState: ResponseState,
+  renderState: RenderState,
   lastPushedText: boolean,
   textEmbedded: boolean,
 ): void {
-  if (responseState.generateStaticMarkup) {
+  if (renderState.generateStaticMarkup) {
     return;
   } else {
     return pushSegmentFinaleImpl(
       target,
-      responseState,
+      renderState,
       lastPushedText,
       textEmbedded,
     );
@@ -186,31 +188,31 @@ export function pushSegmentFinale(
 
 export function writeStartCompletedSuspenseBoundary(
   destination: Destination,
-  responseState: ResponseState,
+  renderState: RenderState,
 ): boolean {
-  if (responseState.generateStaticMarkup) {
+  if (renderState.generateStaticMarkup) {
     // A completed boundary is done and doesn't need a representation in the HTML
     // if we're not going to be hydrating it.
     return true;
   }
-  return writeStartCompletedSuspenseBoundaryImpl(destination, responseState);
+  return writeStartCompletedSuspenseBoundaryImpl(destination, renderState);
 }
 export function writeStartClientRenderedSuspenseBoundary(
   destination: Destination,
-  responseState: ResponseState,
+  renderState: RenderState,
   // flushing these error arguments are not currently supported in this legacy streaming format.
   errorDigest: ?string,
   errorMessage: ?string,
   errorComponentStack: ?string,
 ): boolean {
-  if (responseState.generateStaticMarkup) {
+  if (renderState.generateStaticMarkup) {
     // A client rendered boundary is done and doesn't need a representation in the HTML
     // since we'll never hydrate it. This is arguably an error in static generation.
     return true;
   }
   return writeStartClientRenderedSuspenseBoundaryImpl(
     destination,
-    responseState,
+    renderState,
     errorDigest,
     errorMessage,
     errorComponentStack,
@@ -218,21 +220,21 @@ export function writeStartClientRenderedSuspenseBoundary(
 }
 export function writeEndCompletedSuspenseBoundary(
   destination: Destination,
-  responseState: ResponseState,
+  renderState: RenderState,
 ): boolean {
-  if (responseState.generateStaticMarkup) {
+  if (renderState.generateStaticMarkup) {
     return true;
   }
-  return writeEndCompletedSuspenseBoundaryImpl(destination, responseState);
+  return writeEndCompletedSuspenseBoundaryImpl(destination, renderState);
 }
 export function writeEndClientRenderedSuspenseBoundary(
   destination: Destination,
-  responseState: ResponseState,
+  renderState: RenderState,
 ): boolean {
-  if (responseState.generateStaticMarkup) {
+  if (renderState.generateStaticMarkup) {
     return true;
   }
-  return writeEndClientRenderedSuspenseBoundaryImpl(destination, responseState);
+  return writeEndClientRenderedSuspenseBoundaryImpl(destination, renderState);
 }
 
 export type TransitionStatus = FormStatus;
diff --git a/packages/react-dom-bindings/src/server/ReactFlightServerConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFlightServerConfigDOM.js
index ffed50d8580a3..336b1d3ef412b 100644
--- a/packages/react-dom-bindings/src/server/ReactFlightServerConfigDOM.js
+++ b/packages/react-dom-bindings/src/server/ReactFlightServerConfigDOM.js
@@ -8,10 +8,12 @@
  */
 
 import type {
-  PrefetchDNSOptions,
-  PreconnectOptions,
-  PreloadOptions,
-  PreinitOptions,
+  CrossOriginEnum,
+  PreloadImplOptions,
+  PreloadModuleImplOptions,
+  PreinitStyleOptions,
+  PreinitScriptOptions,
+  PreinitModuleScriptOptions,
 } from 'react-dom/src/shared/ReactDOMTypes';
 
 import ReactDOMSharedInternals from 'shared/ReactDOMSharedInternals';
@@ -27,12 +29,41 @@ export function prepareHostDispatcher(): void {
 // E.g. this can be used to distinguish legacy renderers from this modern one.
 export const isPrimaryRenderer = true;
 
-export type HintModel =
-  | string
-  | [
-      string,
-      PrefetchDNSOptions | PreconnectOptions | PreloadOptions | PreinitOptions,
-    ];
+// We use zero to represent the absence of an explicit precedence because it is
+// small, smaller than how we encode undefined, and is unambiguous. We could use
+// a different tuple structure to encode this instead but this makes the runtime
+// cost cheaper by eliminating a type checks in more positions.
+type UnspecifiedPrecedence = 0;
+
+// prettier-ignore
+type TypeMap = {
+  // prefetchDNS(href)
+  'D': /* href */ string,
+  // preconnect(href, options)
+  'C':
+    | /* href */ string
+    | [/* href */ string, CrossOriginEnum],
+  // preconnect(href, options)
+  'L':
+    | [/* href */ string, /* as */ string]
+    | [/* href */ string, /* as */ string, PreloadImplOptions],
+  'm':
+    | /* href */ string
+    | [/* href */ string, PreloadModuleImplOptions],
+  'S':
+    | /* href */ string
+    | [/* href */ string, /* precedence */ string]
+    | [/* href */ string, /* precedence */ string | UnspecifiedPrecedence, PreinitStyleOptions],
+  'X':
+    | /* href */ string
+    | [/* href */ string, PreinitScriptOptions],
+  'M':
+    | /* href */ string
+    | [/* href */ string, PreinitModuleScriptOptions],
+}
+
+export type HintCode = $Keys<TypeMap>;
+export type HintModel<T: HintCode> = TypeMap[T];
 
 export type Hints = Set<string>;
 
diff --git a/packages/react-dom-bindings/src/shared/ReactDOMFormActions.js b/packages/react-dom-bindings/src/shared/ReactDOMFormActions.js
index addb70394b9a0..8c0f764d6cab5 100644
--- a/packages/react-dom-bindings/src/shared/ReactDOMFormActions.js
+++ b/packages/react-dom-bindings/src/shared/ReactDOMFormActions.js
@@ -74,3 +74,17 @@ export function useFormStatus(): FormStatus {
     return dispatcher.useHostTransitionStatus();
   }
 }
+
+export function useFormState<S, P>(
+  action: (S, P) => Promise<S>,
+  initialState: S,
+  permalink?: string,
+): [S, (P) => void] {
+  if (!(enableFormActions && enableAsyncActions)) {
+    throw new Error('Not implemented.');
+  } else {
+    const dispatcher = resolveDispatcher();
+    // $FlowFixMe[not-a-function] This is unstable, thus optional
+    return dispatcher.useFormState(action, initialState, permalink);
+  }
+}
diff --git a/packages/react-dom-bindings/src/shared/ReactDOMResourceValidation.js b/packages/react-dom-bindings/src/shared/ReactDOMResourceValidation.js
index 20367f428355c..6e0b56479dd3e 100644
--- a/packages/react-dom-bindings/src/shared/ReactDOMResourceValidation.js
+++ b/packages/react-dom-bindings/src/shared/ReactDOMResourceValidation.js
@@ -62,46 +62,6 @@ function propNamesListJoin(
   }
 }
 
-export function validatePreinitArguments(href: mixed, options: mixed) {
-  if (__DEV__) {
-    if (!href || typeof href !== 'string') {
-      const typeOfArg = getValueDescriptorExpectingObjectForWarning(href);
-      console.error(
-        'ReactDOM.preinit() expected the first argument to be a string representing an href but found %s instead.',
-        typeOfArg,
-      );
-    } else if (typeof options !== 'object' || options === null) {
-      const typeOfArg = getValueDescriptorExpectingObjectForWarning(options);
-      console.error(
-        'ReactDOM.preinit() expected the second argument to be an options argument containing at least an "as" property' +
-          ' specifying the Resource type. It found %s instead. The href for the preload call where this warning originated is "%s".',
-        typeOfArg,
-        href,
-      );
-    } else {
-      const as = options.as;
-      switch (as) {
-        case 'style':
-        case 'script': {
-          break;
-        }
-
-        // We have an invalid as type and need to warn
-        default: {
-          const typeOfAs = getValueDescriptorExpectingEnumForWarning(as);
-          console.error(
-            'ReactDOM.preinit() expected the second argument to be an options argument containing at least an "as" property' +
-              ' specifying the Resource type. It found %s instead. Currently, valid resource types for for preinit are "style"' +
-              ' and "script". The href for the preinit call where this warning originated is "%s".',
-            typeOfAs,
-            href,
-          );
-        }
-      }
-    }
-  }
-}
-
 export function getValueDescriptorExpectingObjectForWarning(
   thing: any,
 ): string {
@@ -125,406 +85,3 @@ export function getValueDescriptorExpectingEnumForWarning(thing: any): string {
     ? JSON.stringify(thing)
     : `something with type "${typeof thing}"`;
 }
-
-type PropDifferences = {
-  missing: {
-    [string]: any,
-  },
-  extra: {
-    [string]: any,
-  },
-  different: {
-    [string]: {
-      original: any,
-      latest: any,
-    },
-  },
-};
-function compareResourcePropsForWarning(
-  newProps: any,
-  currentProps: any,
-): null | PropDifferences {
-  if (__DEV__) {
-    let propDiffs: null | PropDifferences = null;
-
-    const allProps = Array.from(
-      new Set(Object.keys(currentProps).concat(Object.keys(newProps))),
-    );
-
-    for (let i = 0; i < allProps.length; i++) {
-      const propName = allProps[i];
-      const newValue = newProps[propName];
-      const currentValue = currentProps[propName];
-      if (
-        newValue !== currentValue &&
-        !(newValue == null && currentValue == null)
-      ) {
-        if (newValue == null) {
-          if (propDiffs === null) {
-            propDiffs = ({
-              missing: {},
-              extra: {},
-              different: {},
-            }: PropDifferences);
-          }
-          propDiffs.missing[propName] = currentValue;
-        } else if (currentValue == null) {
-          if (propDiffs === null) {
-            propDiffs = ({
-              missing: {},
-              extra: {},
-              different: {},
-            }: PropDifferences);
-          }
-          propDiffs.extra[propName] = newValue;
-        } else {
-          if (propDiffs === null) {
-            propDiffs = ({
-              missing: {},
-              extra: {},
-              different: {},
-            }: PropDifferences);
-          }
-          propDiffs.different[propName] = {
-            original: currentValue,
-            latest: newValue,
-          };
-        }
-      }
-    }
-
-    return propDiffs;
-  }
-  return null;
-}
-
-export function describeDifferencesForStylesheets(
-  newProps: any,
-  currentProps: any,
-): string {
-  const diff = compareResourcePropsForWarning(newProps, currentProps);
-  if (!diff) return '';
-
-  let description = '';
-
-  for (const propName in diff.missing) {
-    const propValue = diff.missing[propName];
-    if (propName === 'media') {
-      description += `\n  "${propName}" missing for props, original value: ${getValueDescriptorExpectingEnumForWarning(
-        propValue,
-      )}`;
-    }
-  }
-  for (const propName in diff.extra) {
-    const propValue = diff.extra[propName];
-    description += `\n  "${propName}" prop value: ${getValueDescriptorExpectingEnumForWarning(
-      propValue,
-    )}, missing from original props`;
-  }
-  for (const propName in diff.different) {
-    const latestValue = diff.different[propName].latest;
-    const originalValue = diff.different[propName].original;
-    description += `\n  "${propName}" prop value: ${getValueDescriptorExpectingEnumForWarning(
-      latestValue,
-    )}, original value: ${getValueDescriptorExpectingEnumForWarning(
-      originalValue,
-    )}`;
-  }
-  return description;
-}
-
-export function describeDifferencesForStylesheetOverPreinit(
-  newProps: any,
-  currentProps: any,
-): string {
-  const diff = compareResourcePropsForWarning(newProps, currentProps);
-  if (!diff) return '';
-
-  let description = '';
-
-  for (const propName in diff.extra) {
-    const propValue = diff.extra[propName];
-    if (
-      propName === 'precedence' ||
-      propName === 'crossOrigin' ||
-      propName === 'integrity'
-    ) {
-      description += `\n  "${propName}" prop value: ${getValueDescriptorExpectingEnumForWarning(
-        propValue,
-      )}, option missing`;
-    } else {
-      description += `\n  "${propName}" prop value: ${getValueDescriptorExpectingEnumForWarning(
-        propValue,
-      )}, option not available with ReactDOM.preinit()`;
-    }
-  }
-  for (const propName in diff.different) {
-    const latestValue = diff.different[propName].latest;
-    const originalValue = diff.different[propName].original;
-    if (propName === 'precedence' && originalValue === 'default') {
-      description += `\n  "${propName}" prop value: ${getValueDescriptorExpectingEnumForWarning(
-        latestValue,
-      )}, missing from options`;
-    } else {
-      description += `\n  "${propName}" prop value: ${getValueDescriptorExpectingEnumForWarning(
-        latestValue,
-      )}, option value: ${getValueDescriptorExpectingEnumForWarning(
-        originalValue,
-      )}`;
-    }
-  }
-  return description;
-}
-
-export function describeDifferencesForPreinitOverStylesheet(
-  newProps: any,
-  currentProps: any,
-): string {
-  const diff = compareResourcePropsForWarning(newProps, currentProps);
-  if (!diff) return '';
-
-  let description = '';
-  for (const propName in diff.missing) {
-    const propValue = diff.missing[propName];
-    if (propName === 'precedence' && propValue !== 'default') {
-      description += `\n  "${propName}" missing from options, prop value: ${getValueDescriptorExpectingEnumForWarning(
-        propValue,
-      )}`;
-    }
-  }
-  for (const propName in diff.extra) {
-    const propValue = diff.extra[propName];
-    if (
-      propName === 'precedence' ||
-      propName === 'crossOrigin' ||
-      propName === 'integrity'
-    ) {
-      description += `\n  "${propName}" option value: ${getValueDescriptorExpectingEnumForWarning(
-        propValue,
-      )}, missing from props`;
-    }
-  }
-  for (const propName in diff.different) {
-    const latestValue = diff.different[propName].latest;
-    const originalValue = diff.different[propName].original;
-    description += `\n  "${propName}" option value: ${getValueDescriptorExpectingEnumForWarning(
-      latestValue,
-    )}, prop value: ${getValueDescriptorExpectingEnumForWarning(
-      originalValue,
-    )}`;
-  }
-  return description;
-}
-
-export function describeDifferencesForPreinits(
-  newProps: any,
-  currentProps: any,
-): string {
-  const diff = compareResourcePropsForWarning(newProps, currentProps);
-  if (!diff) return '';
-
-  let description = '';
-  for (const propName in diff.missing) {
-    const propValue = diff.missing[propName];
-    if (propName === 'precedence' && propValue !== 'default') {
-      description += `\n  "${propName}" missing from options, original option value: ${getValueDescriptorExpectingEnumForWarning(
-        propValue,
-      )}`;
-    }
-  }
-  for (const propName in diff.extra) {
-    const propValue = diff.extra[propName];
-    if (
-      (propName === 'precedence' && propValue !== 'default') ||
-      propName === 'crossOrigin' ||
-      propName === 'integrity'
-    ) {
-      description += `\n  "${propName}" option value: ${getValueDescriptorExpectingEnumForWarning(
-        propValue,
-      )}, missing from original options`;
-    }
-  }
-  for (const propName in diff.different) {
-    const latestValue = diff.different[propName].latest;
-    const originalValue = diff.different[propName].original;
-    description += `\n  "${propName}" option value: ${getValueDescriptorExpectingEnumForWarning(
-      latestValue,
-    )}, original option value: ${getValueDescriptorExpectingEnumForWarning(
-      originalValue,
-    )}`;
-  }
-  return description;
-}
-
-const preloadOptionsForComparison = ['as', 'crossOrigin', 'integrity', 'media'];
-
-export function describeDifferencesForPreloads(
-  newProps: any,
-  currentProps: any,
-): string {
-  const diff = compareResourcePropsForWarning(newProps, currentProps);
-  if (!diff) return '';
-
-  let description = '';
-  for (const propName in diff.missing) {
-    const propValue = diff.missing[propName];
-    if (preloadOptionsForComparison.includes(propName)) {
-      description += `\n  "${propName}" missing from options, original option value: ${getValueDescriptorExpectingEnumForWarning(
-        propValue,
-      )}`;
-    }
-  }
-  for (const propName in diff.extra) {
-    const propValue = diff.extra[propName];
-    if (preloadOptionsForComparison.includes(propName)) {
-      description += `\n  "${propName}" option value: ${getValueDescriptorExpectingEnumForWarning(
-        propValue,
-      )}, missing from original options`;
-    }
-  }
-  for (const propName in diff.different) {
-    const latestValue = diff.different[propName].latest;
-    const originalValue = diff.different[propName].original;
-    if (preloadOptionsForComparison.includes(propName)) {
-      description += `\n  "${propName}" option value: ${getValueDescriptorExpectingEnumForWarning(
-        latestValue,
-      )}, original option value: ${getValueDescriptorExpectingEnumForWarning(
-        originalValue,
-      )}`;
-    }
-  }
-  return description;
-}
-
-export function describeDifferencesForPreloadOverImplicitPreload(
-  newProps: any,
-  currentProps: any,
-): string {
-  const diff = compareResourcePropsForWarning(newProps, currentProps);
-  if (!diff) return '';
-
-  let description = '';
-  for (const propName in diff.missing) {
-    const propValue = diff.missing[propName];
-    if (preloadOptionsForComparison.includes(propName)) {
-      description += `\n  "${propName}" missing from options, underlying prop value: ${getValueDescriptorExpectingEnumForWarning(
-        propValue,
-      )}`;
-    }
-  }
-  for (const propName in diff.extra) {
-    const propValue = diff.extra[propName];
-    if (preloadOptionsForComparison.includes(propName)) {
-      description += `\n  "${propName}" option value: ${getValueDescriptorExpectingEnumForWarning(
-        propValue,
-      )}, missing from underlying props`;
-    }
-  }
-  for (const propName in diff.different) {
-    const latestValue = diff.different[propName].latest;
-    const originalValue = diff.different[propName].original;
-    if (preloadOptionsForComparison.includes(propName)) {
-      description += `\n  "${propName}" option value: ${getValueDescriptorExpectingEnumForWarning(
-        latestValue,
-      )}, underlying prop value: ${getValueDescriptorExpectingEnumForWarning(
-        originalValue,
-      )}`;
-    }
-  }
-  return description;
-}
-
-export function describeDifferencesForScripts(
-  newProps: any,
-  currentProps: any,
-): string {
-  const diff = compareResourcePropsForWarning(newProps, currentProps);
-  if (!diff) return '';
-
-  let description = '';
-
-  for (const propName in diff.missing) {
-    const propValue = diff.missing[propName];
-    description += `\n  "${propName}" missing for props, original value: ${getValueDescriptorExpectingEnumForWarning(
-      propValue,
-    )}`;
-  }
-  for (const propName in diff.extra) {
-    const propValue = diff.extra[propName];
-    description += `\n  "${propName}" prop value: ${getValueDescriptorExpectingEnumForWarning(
-      propValue,
-    )}, missing from original props`;
-  }
-  for (const propName in diff.different) {
-    const latestValue = diff.different[propName].latest;
-    const originalValue = diff.different[propName].original;
-    description += `\n  "${propName}" prop value: ${getValueDescriptorExpectingEnumForWarning(
-      latestValue,
-    )}, original value: ${getValueDescriptorExpectingEnumForWarning(
-      originalValue,
-    )}`;
-  }
-  return description;
-}
-
-export function describeDifferencesForScriptOverPreinit(
-  newProps: any,
-  currentProps: any,
-): string {
-  const diff = compareResourcePropsForWarning(newProps, currentProps);
-  if (!diff) return '';
-
-  let description = '';
-
-  for (const propName in diff.extra) {
-    const propValue = diff.extra[propName];
-    if (propName === 'crossOrigin' || propName === 'integrity') {
-      description += `\n  "${propName}" prop value: ${getValueDescriptorExpectingEnumForWarning(
-        propValue,
-      )}, option missing`;
-    } else {
-      description += `\n  "${propName}" prop value: ${getValueDescriptorExpectingEnumForWarning(
-        propValue,
-      )}, option not available with ReactDOM.preinit()`;
-    }
-  }
-  for (const propName in diff.different) {
-    const latestValue = diff.different[propName].latest;
-    const originalValue = diff.different[propName].original;
-    description += `\n  "${propName}" prop value: ${getValueDescriptorExpectingEnumForWarning(
-      latestValue,
-    )}, option value: ${getValueDescriptorExpectingEnumForWarning(
-      originalValue,
-    )}`;
-  }
-  return description;
-}
-
-export function describeDifferencesForPreinitOverScript(
-  newProps: any,
-  currentProps: any,
-): string {
-  const diff = compareResourcePropsForWarning(newProps, currentProps);
-  if (!diff) return '';
-
-  let description = '';
-
-  for (const propName in diff.extra) {
-    const propValue = diff.extra[propName];
-    if (propName === 'crossOrigin' || propName === 'integrity') {
-      description += `\n  "${propName}" option value: ${getValueDescriptorExpectingEnumForWarning(
-        propValue,
-      )}, missing from props`;
-    }
-  }
-  for (const propName in diff.different) {
-    const latestValue = diff.different[propName].latest;
-    const originalValue = diff.different[propName].original;
-    description += `\n  "${propName}" option value: ${getValueDescriptorExpectingEnumForWarning(
-      latestValue,
-    )}, prop value: ${getValueDescriptorExpectingEnumForWarning(
-      originalValue,
-    )}`;
-  }
-  return description;
-}
diff --git a/packages/react-dom-bindings/src/shared/ReactFlightClientConfigDOM.js b/packages/react-dom-bindings/src/shared/ReactFlightClientConfigDOM.js
index 3f1e0a1b66f67..150f16f48d56f 100644
--- a/packages/react-dom-bindings/src/shared/ReactFlightClientConfigDOM.js
+++ b/packages/react-dom-bindings/src/shared/ReactFlightClientConfigDOM.js
@@ -10,44 +10,103 @@
 // This client file is in the shared folder because it applies to both SSR and browser contexts.
 // It is the configuraiton of the FlightClient behavior which can run in either environment.
 
-import type {HintModel} from '../server/ReactFlightServerConfigDOM';
+import type {HintCode, HintModel} from '../server/ReactFlightServerConfigDOM';
 
 import ReactDOMSharedInternals from 'shared/ReactDOMSharedInternals';
 const ReactDOMCurrentDispatcher = ReactDOMSharedInternals.Dispatcher;
 
-export function dispatchHint(code: string, model: HintModel): void {
+export function dispatchHint<Code: HintCode>(
+  code: Code,
+  model: HintModel<Code>,
+): void {
   const dispatcher = ReactDOMCurrentDispatcher.current;
   if (dispatcher) {
-    let href, options;
-    if (typeof model === 'string') {
-      href = model;
-    } else {
-      href = model[0];
-      options = model[1];
-    }
     switch (code) {
       case 'D': {
-        // $FlowFixMe[prop-missing] options are not refined to their types by code
-        dispatcher.prefetchDNS(href, options);
+        const refined = refineModel(code, model);
+        const href = refined;
+        dispatcher.prefetchDNS(href);
         return;
       }
       case 'C': {
-        // $FlowFixMe[prop-missing] options are not refined to their types by code
-        dispatcher.preconnect(href, options);
+        const refined = refineModel(code, model);
+        if (typeof refined === 'string') {
+          const href = refined;
+          dispatcher.preconnect(href);
+        } else {
+          const href = refined[0];
+          const crossOrigin = refined[1];
+          dispatcher.preconnect(href, crossOrigin);
+        }
         return;
       }
       case 'L': {
-        // $FlowFixMe[prop-missing] options are not refined to their types by code
-        // $FlowFixMe[incompatible-call] options are not refined to their types by code
-        dispatcher.preload(href, options);
+        const refined = refineModel(code, model);
+        const href = refined[0];
+        const as = refined[1];
+        if (refined.length === 3) {
+          const options = refined[2];
+          dispatcher.preload(href, as, options);
+        } else {
+          dispatcher.preload(href, as);
+        }
+        return;
+      }
+      case 'm': {
+        const refined = refineModel(code, model);
+        if (typeof refined === 'string') {
+          const href = refined;
+          dispatcher.preloadModule(href);
+        } else {
+          const href = refined[0];
+          const options = refined[1];
+          dispatcher.preloadModule(href, options);
+        }
+        return;
+      }
+      case 'S': {
+        const refined = refineModel(code, model);
+        if (typeof refined === 'string') {
+          const href = refined;
+          dispatcher.preinitStyle(href);
+        } else {
+          const href = refined[0];
+          const precedence = refined[1] === 0 ? undefined : refined[1];
+          const options = refined.length === 3 ? refined[2] : undefined;
+          dispatcher.preinitStyle(href, precedence, options);
+        }
         return;
       }
-      case 'I': {
-        // $FlowFixMe[prop-missing] options are not refined to their types by code
-        // $FlowFixMe[incompatible-call] options are not refined to their types by code
-        dispatcher.preinit(href, options);
+      case 'X': {
+        const refined = refineModel(code, model);
+        if (typeof refined === 'string') {
+          const href = refined;
+          dispatcher.preinitScript(href);
+        } else {
+          const href = refined[0];
+          const options = refined[1];
+          dispatcher.preinitScript(href, options);
+        }
+        return;
+      }
+      case 'M': {
+        const refined = refineModel(code, model);
+        if (typeof refined === 'string') {
+          const href = refined;
+          dispatcher.preinitModuleScript(href);
+        } else {
+          const href = refined[0];
+          const options = refined[1];
+          dispatcher.preinitModuleScript(href, options);
+        }
         return;
       }
     }
   }
 }
+
+// Flow is having troulbe refining the HintModels so we help it a bit.
+// This should be compiled out in the production build.
+function refineModel<T>(code: T, model: HintModel<any>): HintModel<T> {
+  return model;
+}
diff --git a/packages/react-dom/index.classic.fb.js b/packages/react-dom/index.classic.fb.js
index e093e3ff08499..4a8521810551b 100644
--- a/packages/react-dom/index.classic.fb.js
+++ b/packages/react-dom/index.classic.fb.js
@@ -32,10 +32,13 @@ export {
   unstable_renderSubtreeIntoContainer,
   unstable_runWithPriority, // DO NOT USE: Temporarily exposed to migrate off of Scheduler.runWithPriority.
   useFormStatus as experimental_useFormStatus,
+  useFormState as experimental_useFormState,
   prefetchDNS,
   preconnect,
   preload,
+  preloadModule,
   preinit,
+  preinitModule,
   version,
 } from './src/client/ReactDOM';
 
diff --git a/packages/react-dom/index.experimental.js b/packages/react-dom/index.experimental.js
index 32d66c66b3626..39151bc1bfcf8 100644
--- a/packages/react-dom/index.experimental.js
+++ b/packages/react-dom/index.experimental.js
@@ -21,9 +21,12 @@ export {
   unstable_renderSubtreeIntoContainer,
   unstable_runWithPriority, // DO NOT USE: Temporarily exposed to migrate off of Scheduler.runWithPriority.
   useFormStatus as experimental_useFormStatus,
+  useFormState as experimental_useFormState,
   prefetchDNS,
   preconnect,
   preload,
+  preloadModule,
   preinit,
+  preinitModule,
   version,
 } from './src/client/ReactDOM';
diff --git a/packages/react-dom/index.js b/packages/react-dom/index.js
index d9290ae6099f2..7d9dff6b469c5 100644
--- a/packages/react-dom/index.js
+++ b/packages/react-dom/index.js
@@ -24,9 +24,12 @@ export {
   unstable_renderSubtreeIntoContainer,
   unstable_runWithPriority, // DO NOT USE: Temporarily exposed to migrate off of Scheduler.runWithPriority.
   useFormStatus as experimental_useFormStatus,
+  useFormState as experimental_useFormState,
   prefetchDNS,
   preconnect,
   preload,
+  preloadModule,
   preinit,
+  preinitModule,
   version,
 } from './src/client/ReactDOM';
diff --git a/packages/react-dom/index.modern.fb.js b/packages/react-dom/index.modern.fb.js
index 6ea394c8179d5..c1548b73036c3 100644
--- a/packages/react-dom/index.modern.fb.js
+++ b/packages/react-dom/index.modern.fb.js
@@ -17,9 +17,12 @@ export {
   unstable_createEventHandle,
   unstable_runWithPriority, // DO NOT USE: Temporarily exposed to migrate off of Scheduler.runWithPriority.
   useFormStatus as experimental_useFormStatus,
+  useFormState as experimental_useFormState,
   prefetchDNS,
   preconnect,
   preload,
+  preloadModule,
   preinit,
+  preinitModule,
   version,
 } from './src/client/ReactDOM';
diff --git a/packages/react-dom/index.stable.js b/packages/react-dom/index.stable.js
index b3b07fe97dc6d..b83cd23d5df87 100644
--- a/packages/react-dom/index.stable.js
+++ b/packages/react-dom/index.stable.js
@@ -22,6 +22,8 @@ export {
   prefetchDNS,
   preconnect,
   preload,
+  preloadModule,
   preinit,
+  preinitModule,
   version,
 } from './src/client/ReactDOM';
diff --git a/packages/react-dom/npm/react-dom.shared-subset.js b/packages/react-dom/npm/react-dom.shared-subset.js
new file mode 100644
index 0000000000000..b74e646f9ca17
--- /dev/null
+++ b/packages/react-dom/npm/react-dom.shared-subset.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-dom.shared-subset.production.min.js');
+} else {
+  module.exports = require('./cjs/react-dom.shared-subset.development.js');
+}
diff --git a/packages/react-dom/npm/server.browser.js b/packages/react-dom/npm/server.browser.js
index 4b7749d4cd9b7..947e981ffd619 100644
--- a/packages/react-dom/npm/server.browser.js
+++ b/packages/react-dom/npm/server.browser.js
@@ -15,3 +15,6 @@ exports.renderToStaticMarkup = l.renderToStaticMarkup;
 exports.renderToNodeStream = l.renderToNodeStream;
 exports.renderToStaticNodeStream = l.renderToStaticNodeStream;
 exports.renderToReadableStream = s.renderToReadableStream;
+if (s.resume) {
+  exports.resume = s.resume;
+}
diff --git a/packages/react-dom/npm/server.bun.js b/packages/react-dom/npm/server.bun.js
index aa27124d58a54..adbc56adec022 100644
--- a/packages/react-dom/npm/server.bun.js
+++ b/packages/react-dom/npm/server.bun.js
@@ -12,6 +12,9 @@ if (process.env.NODE_ENV === 'production') {
 
 exports.version = b.version;
 exports.renderToReadableStream = b.renderToReadableStream;
+if (b.resume) {
+  exports.resume = b.resume;
+}
 exports.renderToNodeStream = b.renderToNodeStream;
 exports.renderToStaticNodeStream = b.renderToStaticNodeStream;
 exports.renderToString = l.renderToString;
diff --git a/packages/react-dom/npm/server.edge.js b/packages/react-dom/npm/server.edge.js
index 9b46751ab208f..ced0fa7a4e553 100644
--- a/packages/react-dom/npm/server.edge.js
+++ b/packages/react-dom/npm/server.edge.js
@@ -16,3 +16,6 @@ exports.renderToNodeStream = b.renderToNodeStream;
 exports.renderToStaticNodeStream = b.renderToStaticNodeStream;
 exports.renderToString = l.renderToString;
 exports.renderToStaticMarkup = l.renderToStaticMarkup;
+if (b.resume) {
+  exports.resume = b.resume;
+}
diff --git a/packages/react-dom/npm/server.node.js b/packages/react-dom/npm/server.node.js
index 2eb97e80354c8..6e48652e4103f 100644
--- a/packages/react-dom/npm/server.node.js
+++ b/packages/react-dom/npm/server.node.js
@@ -15,3 +15,6 @@ exports.renderToStaticMarkup = l.renderToStaticMarkup;
 exports.renderToNodeStream = l.renderToNodeStream;
 exports.renderToStaticNodeStream = l.renderToStaticNodeStream;
 exports.renderToPipeableStream = s.renderToPipeableStream;
+if (s.resumeToPipeableStream) {
+  exports.resumeToPipeableStream = s.resumeToPipeableStream;
+}
diff --git a/packages/react-dom/npm/static.browser.js b/packages/react-dom/npm/static.browser.js
index 7212cd1f6a00c..9ec4543cc6e79 100644
--- a/packages/react-dom/npm/static.browser.js
+++ b/packages/react-dom/npm/static.browser.js
@@ -1,7 +1,11 @@
 'use strict';
 
+var s;
 if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/react-dom-static.browser.production.min.js');
+  s = require('./cjs/react-dom-server.browser.production.min.js');
 } else {
-  module.exports = require('./cjs/react-dom-static.browser.development.js');
+  s = require('./cjs/react-dom-server.browser.development.js');
 }
+
+exports.version = s.version;
+exports.prerender = s.prerender;
diff --git a/packages/react-dom/npm/static.edge.js b/packages/react-dom/npm/static.edge.js
index 9202efd20cf3f..4593f91d2936a 100644
--- a/packages/react-dom/npm/static.edge.js
+++ b/packages/react-dom/npm/static.edge.js
@@ -1,7 +1,11 @@
 'use strict';
 
+var s;
 if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/react-dom-static.edge.production.min.js');
+  s = require('./cjs/react-dom-server.edge.production.min.js');
 } else {
-  module.exports = require('./cjs/react-dom-static.edge.development.js');
+  s = require('./cjs/react-dom-server.edge.development.js');
 }
+
+exports.version = s.version;
+exports.prerender = s.prerender;
diff --git a/packages/react-dom/npm/static.node.js b/packages/react-dom/npm/static.node.js
index 266e8c9116707..c86dc54e027d3 100644
--- a/packages/react-dom/npm/static.node.js
+++ b/packages/react-dom/npm/static.node.js
@@ -1,7 +1,11 @@
 'use strict';
 
+var s;
 if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/react-dom-static.node.production.min.js');
+  s = require('./cjs/react-dom-server.node.production.min.js');
 } else {
-  module.exports = require('./cjs/react-dom-static.node.development.js');
+  s = require('./cjs/react-dom-server.node.development.js');
 }
+
+exports.version = s.version;
+exports.prerenderToNodeStream = s.prerenderToNodeStream;
diff --git a/packages/react-dom/package.json b/packages/react-dom/package.json
index 7d95df5734bac..fbe4d1c51ee27 100644
--- a/packages/react-dom/package.json
+++ b/packages/react-dom/package.json
@@ -46,7 +46,10 @@
     "umd/"
   ],
   "exports": {
-    ".": "./index.js",
+    ".": {
+      "react-server": "./react-dom.shared-subset.js",
+      "default": "./index.js"
+    },
     "./client": "./client.js",
     "./server": {
       "workerd": "./server.edge.js",
diff --git a/packages/react-dom/server-rendering-stub.js b/packages/react-dom/server-rendering-stub.js
index cda0c95579ed9..ef9f14d78230e 100644
--- a/packages/react-dom/server-rendering-stub.js
+++ b/packages/react-dom/server-rendering-stub.js
@@ -21,7 +21,10 @@ export {
   prefetchDNS,
   preconnect,
   preload,
+  preloadModule,
   preinit,
+  preinitModule,
   experimental_useFormStatus,
+  experimental_useFormState,
   unstable_batchedUpdates,
 } from './src/server/ReactDOMServerRenderingStub';
diff --git a/packages/react-dom/server.browser.js b/packages/react-dom/server.browser.js
index b17e136e5f22a..f617e7ec7e382 100644
--- a/packages/react-dom/server.browser.js
+++ b/packages/react-dom/server.browser.js
@@ -37,7 +37,14 @@ export function renderToStaticNodeStream() {
 }
 
 export function renderToReadableStream() {
-  return require('./src/server/ReactDOMFizzServerBrowser').renderToReadableStream.apply(
+  return require('./src/server/react-dom-server.browser').renderToReadableStream.apply(
+    this,
+    arguments,
+  );
+}
+
+export function resume() {
+  return require('./src/server/react-dom-server.browser').resume.apply(
     this,
     arguments,
   );
diff --git a/packages/react-dom/server.bun.js b/packages/react-dom/server.bun.js
index 0ac32351ec46d..0776c4a85b0b2 100644
--- a/packages/react-dom/server.bun.js
+++ b/packages/react-dom/server.bun.js
@@ -12,21 +12,21 @@ import ReactVersion from 'shared/ReactVersion';
 export {ReactVersion as version};
 
 export function renderToReadableStream() {
-  return require('./src/server/ReactDOMFizzServerBun').renderToReadableStream.apply(
+  return require('./src/server/react-dom-server.bun').renderToReadableStream.apply(
     this,
     arguments,
   );
 }
 
 export function renderToNodeStream() {
-  return require('./src/server/ReactDOMFizzServerBun').renderToNodeStream.apply(
+  return require('./src/server/react-dom-server.bun').renderToNodeStream.apply(
     this,
     arguments,
   );
 }
 
 export function renderToStaticNodeStream() {
-  return require('./src/server/ReactDOMFizzServerBun').renderToStaticNodeStream.apply(
+  return require('./src/server/react-dom-server.bun').renderToStaticNodeStream.apply(
     this,
     arguments,
   );
@@ -45,3 +45,10 @@ export function renderToStaticMarkup() {
     arguments,
   );
 }
+
+export function resume() {
+  return require('./src/server/react-dom-server.bun').resume.apply(
+    this,
+    arguments,
+  );
+}
diff --git a/packages/react-dom/server.edge.js b/packages/react-dom/server.edge.js
index f45eae21e7d49..a48e6c7e0a459 100644
--- a/packages/react-dom/server.edge.js
+++ b/packages/react-dom/server.edge.js
@@ -12,21 +12,21 @@ import ReactVersion from 'shared/ReactVersion';
 export {ReactVersion as version};
 
 export function renderToReadableStream() {
-  return require('./src/server/ReactDOMFizzServerEdge').renderToReadableStream.apply(
+  return require('./src/server/react-dom-server.edge').renderToReadableStream.apply(
     this,
     arguments,
   );
 }
 
 export function renderToNodeStream() {
-  return require('./src/server/ReactDOMFizzServerEdge').renderToNodeStream.apply(
+  return require('./src/server/react-dom-server.edge').renderToNodeStream.apply(
     this,
     arguments,
   );
 }
 
 export function renderToStaticNodeStream() {
-  return require('./src/server/ReactDOMFizzServerEdge').renderToStaticNodeStream.apply(
+  return require('./src/server/react-dom-server.edge').renderToStaticNodeStream.apply(
     this,
     arguments,
   );
@@ -45,3 +45,10 @@ export function renderToStaticMarkup() {
     arguments,
   );
 }
+
+export function resume() {
+  return require('./src/server/react-dom-server.edge').resume.apply(
+    this,
+    arguments,
+  );
+}
diff --git a/packages/react-dom/server.node.js b/packages/react-dom/server.node.js
index 3ef13b8540ada..d0e403eaf89b6 100644
--- a/packages/react-dom/server.node.js
+++ b/packages/react-dom/server.node.js
@@ -37,7 +37,14 @@ export function renderToStaticNodeStream() {
 }
 
 export function renderToPipeableStream() {
-  return require('./src/server/ReactDOMFizzServerNode').renderToPipeableStream.apply(
+  return require('./src/server/react-dom-server.node').renderToPipeableStream.apply(
+    this,
+    arguments,
+  );
+}
+
+export function resumeToPipeableStream() {
+  return require('./src/server/react-dom-server.node').resumeToPipeableStream.apply(
     this,
     arguments,
   );
diff --git a/packages/react-dom/src/ReactDOMSharedSubset.js b/packages/react-dom/src/ReactDOMSharedSubset.js
new file mode 100644
index 0000000000000..9322ed3c1ba23
--- /dev/null
+++ b/packages/react-dom/src/ReactDOMSharedSubset.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// This is the subset of APIs that can be accessed from Server Component modules
+export {default as __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED} from './ReactDOMSharedInternals';
+export {
+  prefetchDNS,
+  preconnect,
+  preload,
+  preloadModule,
+  preinit,
+  preinitModule,
+} from './shared/ReactDOMFloat';
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzForm-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzForm-test.js
index b13eb90304a34..b9ffe6520c82a 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzForm-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzForm-test.js
@@ -23,6 +23,7 @@ let ReactDOMServer;
 let ReactDOMClient;
 let useFormStatus;
 let useOptimistic;
+let useFormState;
 
 describe('ReactDOMFizzForm', () => {
   beforeEach(() => {
@@ -31,6 +32,7 @@ describe('ReactDOMFizzForm', () => {
     ReactDOMServer = require('react-dom/server.browser');
     ReactDOMClient = require('react-dom/client');
     useFormStatus = require('react-dom').experimental_useFormStatus;
+    useFormState = require('react-dom').experimental_useFormState;
     useOptimistic = require('react').experimental_useOptimistic;
     act = require('internal-test-utils').act;
     container = document.createElement('div');
@@ -470,6 +472,28 @@ describe('ReactDOMFizzForm', () => {
     expect(container.textContent).toBe('hi');
   });
 
+  // @gate enableFormActions
+  // @gate enableAsyncActions
+  it('useFormState returns initial state', async () => {
+    async function action(state) {
+      return state;
+    }
+
+    function App() {
+      const [state] = useFormState(action, 0);
+      return state;
+    }
+
+    const stream = await ReactDOMServer.renderToReadableStream(<App />);
+    await readIntoContainer(stream);
+    expect(container.textContent).toBe('0');
+
+    await act(async () => {
+      ReactDOMClient.hydrateRoot(container, <App />);
+    });
+    expect(container.textContent).toBe('0');
+  });
+
   // @gate enableFormActions
   it('can provide a custom action on the server for actions', async () => {
     const ref = React.createRef();
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 42ed4c986ab69..27c3dcaf61126 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -14,6 +14,7 @@ import {
   mergeOptions,
   stripExternalRuntimeInNodes,
   withLoadingReadyState,
+  getVisibleChildren,
 } from '../test-utils/FizzTestUtils';
 
 let JSDOM;
@@ -23,11 +24,13 @@ let React;
 let ReactDOM;
 let ReactDOMClient;
 let ReactDOMFizzServer;
+let ReactDOMFizzStatic;
 let Suspense;
 let SuspenseList;
 let useSyncExternalStore;
 let useSyncExternalStoreWithSelector;
 let use;
+let useFormState;
 let PropTypes;
 let textCache;
 let writable;
@@ -77,12 +80,16 @@ describe('ReactDOMFizzServer', () => {
     ReactDOM = require('react-dom');
     ReactDOMClient = require('react-dom/client');
     ReactDOMFizzServer = require('react-dom/server');
+    if (__EXPERIMENTAL__) {
+      ReactDOMFizzStatic = require('react-dom/static');
+    }
     Stream = require('stream');
     Suspense = React.Suspense;
     use = React.use;
     if (gate(flags => flags.enableSuspenseList)) {
       SuspenseList = React.unstable_SuspenseList;
     }
+    useFormState = ReactDOM.experimental_useFormState;
 
     PropTypes = require('prop-types');
 
@@ -289,46 +296,6 @@ describe('ReactDOMFizzServer', () => {
     }, document);
   }
 
-  function getVisibleChildren(element) {
-    const children = [];
-    let node = element.firstChild;
-    while (node) {
-      if (node.nodeType === 1) {
-        if (
-          node.tagName !== 'SCRIPT' &&
-          node.tagName !== 'script' &&
-          node.tagName !== 'TEMPLATE' &&
-          node.tagName !== 'template' &&
-          !node.hasAttribute('hidden') &&
-          !node.hasAttribute('aria-hidden')
-        ) {
-          const props = {};
-          const attributes = node.attributes;
-          for (let i = 0; i < attributes.length; i++) {
-            if (
-              attributes[i].name === 'id' &&
-              attributes[i].value.includes(':')
-            ) {
-              // We assume this is a React added ID that's a non-visual implementation detail.
-              continue;
-            }
-            props[attributes[i].name] = attributes[i].value;
-          }
-          props.children = getVisibleChildren(node);
-          children.push(React.createElement(node.tagName.toLowerCase(), props));
-        }
-      } else if (node.nodeType === 3) {
-        children.push(node.data);
-      }
-      node = node.nextSibling;
-    }
-    return children.length === 0
-      ? undefined
-      : children.length === 1
-      ? children[0]
-      : children;
-  }
-
   function resolveText(text) {
     const record = textCache.get(text);
     if (record === undefined) {
@@ -610,17 +577,30 @@ describe('ReactDOMFizzServer', () => {
       });
 
       expect(getVisibleChildren(container)).toEqual([
-        <link rel="preload" href="init.js" as="script" nonce={CSPnonce} />,
         <link
           rel="preload"
+          fetchpriority="low"
+          href="init.js"
+          as="script"
+          nonce={CSPnonce}
+        />,
+        <link
+          rel="preload"
+          fetchpriority="low"
           href="init2.js"
           as="script"
           nonce={CSPnonce}
           integrity="init2hash"
         />,
-        <link rel="modulepreload" href="init.mjs" nonce={CSPnonce} />,
         <link
           rel="modulepreload"
+          fetchpriority="low"
+          href="init.mjs"
+          nonce={CSPnonce}
+        />,
+        <link
+          rel="modulepreload"
+          fetchpriority="low"
           href="init2.mjs"
           nonce={CSPnonce}
           integrity="init2hash"
@@ -640,17 +620,30 @@ describe('ReactDOMFizzServer', () => {
         resolve({default: Text});
       });
       expect(getVisibleChildren(container)).toEqual([
-        <link rel="preload" href="init.js" as="script" nonce={CSPnonce} />,
         <link
           rel="preload"
+          fetchpriority="low"
+          href="init.js"
+          as="script"
+          nonce={CSPnonce}
+        />,
+        <link
+          rel="preload"
+          fetchpriority="low"
           href="init2.js"
           as="script"
           nonce={CSPnonce}
           integrity="init2hash"
         />,
-        <link rel="modulepreload" href="init.mjs" nonce={CSPnonce} />,
         <link
           rel="modulepreload"
+          fetchpriority="low"
+          href="init.mjs"
+          nonce={CSPnonce}
+        />,
+        <link
+          rel="modulepreload"
+          fetchpriority="low"
           href="init2.mjs"
           nonce={CSPnonce}
           integrity="init2hash"
@@ -3597,6 +3590,33 @@ describe('ReactDOMFizzServer', () => {
     await waitForAll([]);
   });
 
+  it('takes an importMap option which emits an "importmap" script in the head', async () => {
+    const importMap = {
+      foo: './path/to/foo.js',
+    };
+    await act(() => {
+      renderToPipeableStream(
+        <html>
+          <head>
+            <script async={true} src="foo" />
+          </head>
+          <body>
+            <div>hello world</div>
+          </body>
+        </html>,
+        {
+          importMap,
+        },
+      ).pipe(writable);
+    });
+
+    expect(document.head.innerHTML).toBe(
+      '<script type="importmap">' +
+        JSON.stringify(importMap) +
+        '</script><script async="" src="foo"></script>',
+    );
+  });
+
   describe('error escaping', () => {
     it('escapes error hash, message, and component stack values in directly flushed errors (html escaping)', async () => {
       window.__outlet = {};
@@ -3797,12 +3817,23 @@ describe('ReactDOMFizzServer', () => {
     expect(getVisibleChildren(document)).toEqual(
       <html>
         <head>
-          <link rel="preload" href="foo" as="script" />
-          <link rel="preload" href="bar" as="script" />
-          <link rel="preload" href="baz" as="script" integrity="qux" />
-          <link rel="modulepreload" href="quux" />
-          <link rel="modulepreload" href="corge" />
-          <link rel="modulepreload" href="grault" integrity="garply" />
+          <link rel="preload" fetchpriority="low" href="foo" as="script" />
+          <link rel="preload" fetchpriority="low" href="bar" as="script" />
+          <link
+            rel="preload"
+            fetchpriority="low"
+            href="baz"
+            as="script"
+            integrity="qux"
+          />
+          <link rel="modulepreload" fetchpriority="low" href="quux" />
+          <link rel="modulepreload" fetchpriority="low" href="corge" />
+          <link
+            rel="modulepreload"
+            fetchpriority="low"
+            href="grault"
+            integrity="garply"
+          />
         </head>
         <body>
           <div>hello world</div>
@@ -3866,14 +3897,27 @@ describe('ReactDOMFizzServer', () => {
     expect(getVisibleChildren(document)).toEqual(
       <html>
         <head>
-          <link rel="preload" href="foo" as="script" />
-          <link rel="preload" href="bar" as="script" />
-          <link rel="preload" href="baz" as="script" crossorigin="" />
-          <link rel="preload" href="qux" as="script" crossorigin="" />
-          <link rel="modulepreload" href="quux" />
-          <link rel="modulepreload" href="corge" />
+          <link rel="preload" fetchpriority="low" href="foo" as="script" />
+          <link rel="preload" fetchpriority="low" href="bar" as="script" />
+          <link
+            rel="preload"
+            fetchpriority="low"
+            href="baz"
+            as="script"
+            crossorigin=""
+          />
+          <link
+            rel="preload"
+            fetchpriority="low"
+            href="qux"
+            as="script"
+            crossorigin=""
+          />
+          <link rel="modulepreload" fetchpriority="low" href="quux" />
+          <link rel="modulepreload" fetchpriority="low" href="corge" />
           <link
             rel="modulepreload"
+            fetchpriority="low"
             href="grault"
             crossorigin="use-credentials"
           />
@@ -3899,7 +3943,7 @@ describe('ReactDOMFizzServer', () => {
     ]);
   });
 
-  describe('bootstrapScriptContent escaping', () => {
+  describe('bootstrapScriptContent and importMap escaping', () => {
     it('the "S" in "</?[Ss]cript" strings are replaced with unicode escaped lowercase s or S depending on case, preserving case sensitivity of nearby characters', async () => {
       window.__test_outlet = '';
       const stringWithScriptsInIt =
@@ -3955,6 +3999,24 @@ describe('ReactDOMFizzServer', () => {
       });
       expect(window.__test_outlet).toBe(1);
     });
+
+    it('escapes </[sS]cirpt> in importMaps', async () => {
+      window.__test_outlet_key = '';
+      window.__test_outlet_value = '';
+      const jsonWithScriptsInIt = {
+        "keypos</script><script>window.__test_outlet_key = 'pwned'</script><script>":
+          'value',
+        key: "valuepos</script><script>window.__test_outlet_value = 'pwned'</script><script>",
+      };
+      await act(() => {
+        const {pipe} = renderToPipeableStream(<div />, {
+          importMap: jsonWithScriptsInIt,
+        });
+        pipe(writable);
+      });
+      expect(window.__test_outlet_key).toBe('');
+      expect(window.__test_outlet_value).toBe('');
+    });
   });
 
   // @gate enableFizzExternalRuntime
@@ -5816,6 +5878,123 @@ describe('ReactDOMFizzServer', () => {
     expect(getVisibleChildren(container)).toEqual('Hi');
   });
 
+  // @gate enableFormActions
+  // @gate enableAsyncActions
+  it('useFormState hydrates without a mismatch', async () => {
+    // This is testing an implementation detail: useFormState emits comment
+    // nodes into the SSR stream, so this checks that they are handled correctly
+    // during hydration.
+
+    async function action(state) {
+      return state;
+    }
+
+    const childRef = React.createRef(null);
+    function Form() {
+      const [state] = useFormState(action, 0);
+      const text = `Child: ${state}`;
+      return (
+        <div id="child" ref={childRef}>
+          {text}
+        </div>
+      );
+    }
+
+    function App() {
+      return (
+        <div>
+          <div>
+            <Form />
+          </div>
+          <span>Sibling</span>
+        </div>
+      );
+    }
+
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <div>
+          <div id="child">Child: 0</div>
+        </div>
+        <span>Sibling</span>
+      </div>,
+    );
+    const child = document.getElementById('child');
+
+    // Confirm that it hydrates correctly
+    await clientAct(() => {
+      ReactDOMClient.hydrateRoot(container, <App />);
+    });
+    expect(childRef.current).toBe(child);
+  });
+
+  // @gate enableFormActions
+  // @gate enableAsyncActions
+  it("useFormState hydrates without a mismatch if there's a render phase update", async () => {
+    async function action(state) {
+      return state;
+    }
+
+    const childRef = React.createRef(null);
+    function Form() {
+      const [localState, setLocalState] = React.useState(0);
+      if (localState < 3) {
+        setLocalState(localState + 1);
+      }
+
+      // Because of the render phase update above, this component is evaluated
+      // multiple times (even during SSR), but it should only emit a single
+      // marker per useFormState instance.
+      const [formState] = useFormState(action, 0);
+      const text = `${readText('Child')}:${formState}:${localState}`;
+      return (
+        <div id="child" ref={childRef}>
+          {text}
+        </div>
+      );
+    }
+
+    function App() {
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            <Form />
+          </Suspense>
+          <span>Sibling</span>
+        </div>
+      );
+    }
+
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        Loading...<span>Sibling</span>
+      </div>,
+    );
+
+    await act(() => resolveText('Child'));
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <div id="child">Child:0:3</div>
+        <span>Sibling</span>
+      </div>,
+    );
+    const child = document.getElementById('child');
+
+    // Confirm that it hydrates correctly
+    await clientAct(() => {
+      ReactDOMClient.hydrateRoot(container, <App />);
+    });
+    expect(childRef.current).toBe(child);
+  });
+
   describe('useEffectEvent', () => {
     // @gate enableUseEffectEventHook
     it('can server render a component with useEffectEvent', async () => {
@@ -5990,4 +6169,665 @@ describe('ReactDOMFizzServer', () => {
       console.error = originalConsoleError;
     }
   });
+
+  // @gate enablePostpone
+  it('client renders postponed boundaries without erroring', async () => {
+    function Postponed({isClient}) {
+      if (!isClient) {
+        React.unstable_postpone('testing postpone');
+      }
+      return 'client only';
+    }
+
+    function App({isClient}) {
+      return (
+        <div>
+          <Suspense fallback={'loading...'}>
+            <Postponed isClient={isClient} />
+          </Suspense>
+        </div>
+      );
+    }
+
+    const errors = [];
+
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<App isClient={false} />, {
+        onError(error) {
+          errors.push(error.message);
+        },
+      });
+      pipe(writable);
+    });
+
+    expect(getVisibleChildren(container)).toEqual(<div>loading...</div>);
+
+    ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
+      onRecoverableError(error) {
+        errors.push(error.message);
+      },
+    });
+    await waitForAll([]);
+    // Postponing should not be logged as a recoverable error since it's intentional.
+    expect(errors).toEqual([]);
+    expect(getVisibleChildren(container)).toEqual(<div>client only</div>);
+  });
+
+  // @gate enablePostpone
+  it('errors if trying to postpone outside a Suspense boundary', async () => {
+    function Postponed() {
+      React.unstable_postpone('testing postpone');
+      return 'client only';
+    }
+
+    function App() {
+      return (
+        <div>
+          <Postponed />
+        </div>
+      );
+    }
+
+    const errors = [];
+    const fatalErrors = [];
+    const postponed = [];
+    let written = false;
+
+    const testWritable = new Stream.Writable();
+    testWritable._write = (chunk, encoding, next) => {
+      written = true;
+    };
+
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<App />, {
+        onPostpone(reason) {
+          postponed.push(reason);
+        },
+        onError(error) {
+          errors.push(error.message);
+        },
+        onShellError(error) {
+          fatalErrors.push(error.message);
+        },
+      });
+      pipe(testWritable);
+    });
+
+    expect(written).toBe(false);
+    // Postponing is not logged as an error but as a postponed reason.
+    expect(errors).toEqual([]);
+    expect(postponed).toEqual(['testing postpone']);
+    // However, it does error the shell.
+    expect(fatalErrors).toEqual(['testing postpone']);
+  });
+
+  it(
+    'a transition that flows into a dehydrated boundary should not suspend ' +
+      'if the boundary is showing a fallback',
+    async () => {
+      let setSearch;
+      function App() {
+        const [search, _setSearch] = React.useState('initial query');
+        setSearch = _setSearch;
+        return (
+          <div>
+            <div>{search}</div>
+            <div>
+              <Suspense fallback="Loading...">
+                <AsyncText text="Async" />
+              </Suspense>
+            </div>
+          </div>
+        );
+      }
+
+      // Render the initial HTML, which is showing a fallback.
+      await act(() => {
+        const {pipe} = renderToPipeableStream(<App />);
+        pipe(writable);
+      });
+
+      // Start hydrating.
+      await clientAct(() => {
+        ReactDOMClient.hydrateRoot(container, <App />);
+      });
+      expect(getVisibleChildren(container)).toEqual(
+        <div>
+          <div>initial query</div>
+          <div>Loading...</div>
+        </div>,
+      );
+
+      // Before the HTML has streamed in, update the query. The part outside
+      // the fallback should be allowed to finish.
+      await clientAct(() => {
+        React.startTransition(() => setSearch('updated query'));
+      });
+      expect(getVisibleChildren(container)).toEqual(
+        <div>
+          <div>updated query</div>
+          <div>Loading...</div>
+        </div>,
+      );
+    },
+  );
+
+  // @gate enablePostpone
+  it('supports postponing in prerender and resuming later', async () => {
+    let prerendering = true;
+    function Postpone() {
+      if (prerendering) {
+        React.unstable_postpone();
+      }
+      return 'Hello';
+    }
+
+    function App() {
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            <Postpone />
+          </Suspense>
+        </div>
+      );
+    }
+
+    const prerendered = await ReactDOMFizzStatic.prerenderToNodeStream(<App />);
+    expect(prerendered.postponed).not.toBe(null);
+
+    prerendering = false;
+
+    const resumed = ReactDOMFizzServer.resumeToPipeableStream(
+      <App />,
+      JSON.parse(JSON.stringify(prerendered.postponed)),
+    );
+
+    // Create a separate stream so it doesn't close the writable. I.e. simple concat.
+    const preludeWritable = new Stream.PassThrough();
+    preludeWritable.setEncoding('utf8');
+    preludeWritable.on('data', chunk => {
+      writable.write(chunk);
+    });
+
+    await act(() => {
+      prerendered.prelude.pipe(preludeWritable);
+    });
+
+    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
+
+    await act(() => {
+      resumed.pipe(writable);
+    });
+
+    expect(getVisibleChildren(container)).toEqual(<div>Hello</div>);
+  });
+
+  // @gate enablePostpone
+  it('client renders a component if it errors during resuming', async () => {
+    let prerendering = true;
+    let ssr = true;
+    function PostponeAndError() {
+      if (prerendering) {
+        React.unstable_postpone();
+      }
+      if (ssr) {
+        throw new Error('server error');
+      }
+      return 'Hello';
+    }
+
+    function Postpone() {
+      if (prerendering) {
+        React.unstable_postpone();
+      }
+      return 'Hello';
+    }
+
+    const lazyPostponeAndError = React.lazy(async () => {
+      return {default: <PostponeAndError />};
+    });
+
+    function ReplayError() {
+      if (prerendering) {
+        return <Postpone />;
+      }
+      if (ssr) {
+        throw new Error('replay error');
+      }
+      return 'Hello';
+    }
+
+    function App() {
+      return (
+        <div>
+          <Suspense fallback="Loading1">
+            <PostponeAndError />
+          </Suspense>
+          <Suspense fallback="Loading2">
+            <Postpone />
+            <Suspense fallback="Loading3">{lazyPostponeAndError}</Suspense>
+          </Suspense>
+          <Suspense fallback="Loading4">
+            <ReplayError />
+          </Suspense>
+        </div>
+      );
+    }
+
+    const prerenderErrors = [];
+    const prerendered = await ReactDOMFizzStatic.prerenderToNodeStream(
+      <App />,
+      {
+        onError(x) {
+          prerenderErrors.push(x.message);
+        },
+      },
+    );
+    expect(prerendered.postponed).not.toBe(null);
+
+    prerendering = false;
+
+    const ssrErrors = [];
+
+    const resumed = ReactDOMFizzServer.resumeToPipeableStream(
+      <App />,
+      JSON.parse(JSON.stringify(prerendered.postponed)),
+      {
+        onError(x) {
+          ssrErrors.push(x.message);
+        },
+      },
+    );
+
+    // Create a separate stream so it doesn't close the writable. I.e. simple concat.
+    const preludeWritable = new Stream.PassThrough();
+    preludeWritable.setEncoding('utf8');
+    preludeWritable.on('data', chunk => {
+      writable.write(chunk);
+    });
+
+    await act(() => {
+      prerendered.prelude.pipe(preludeWritable);
+    });
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        {'Loading1'}
+        {'Loading2'}
+        {'Loading4'}
+      </div>,
+    );
+
+    await act(() => {
+      resumed.pipe(writable);
+    });
+
+    expect(prerenderErrors).toEqual([]);
+
+    expect(ssrErrors).toEqual(['server error', 'server error', 'replay error']);
+
+    // Still loading...
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        {'Loading1'}
+        {'Hello'}
+        {'Loading3'}
+        {'Loading4'}
+      </div>,
+    );
+
+    const recoverableErrors = [];
+
+    ssr = false;
+
+    await clientAct(() => {
+      ReactDOMClient.hydrateRoot(container, <App />, {
+        onRecoverableError(x) {
+          recoverableErrors.push(x.message);
+        },
+      });
+    });
+
+    expect(recoverableErrors).toEqual(
+      __DEV__
+        ? ['server error', 'replay error', 'server error']
+        : [
+            'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
+            'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
+            'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
+          ],
+    );
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        {'Hello'}
+        {'Hello'}
+        {'Hello'}
+        {'Hello'}
+      </div>,
+    );
+  });
+
+  // @gate enablePostpone
+  it('client renders a component if we abort before resuming', async () => {
+    let prerendering = true;
+    let ssr = true;
+    const promise = new Promise(() => {});
+    function PostponeAndSuspend() {
+      if (prerendering) {
+        React.unstable_postpone();
+      }
+      if (ssr) {
+        React.use(promise);
+      }
+      return 'Hello';
+    }
+
+    function Postpone() {
+      if (prerendering) {
+        React.unstable_postpone();
+      }
+      return 'Hello';
+    }
+
+    function DelayedBoundary() {
+      if (!prerendering && ssr) {
+        // We delay discovery of the boundary so we can abort before finding it.
+        React.use(promise);
+      }
+      return (
+        <Suspense fallback="Loading3">
+          <Postpone />
+        </Suspense>
+      );
+    }
+
+    function App() {
+      return (
+        <div>
+          <Suspense fallback="Loading1">
+            <PostponeAndSuspend />
+          </Suspense>
+          <Suspense fallback="Loading2">
+            <Postpone />
+          </Suspense>
+          <Suspense fallback="Not used">
+            <DelayedBoundary />
+          </Suspense>
+        </div>
+      );
+    }
+
+    const prerenderErrors = [];
+    const prerendered = await ReactDOMFizzStatic.prerenderToNodeStream(
+      <App />,
+      {
+        onError(x) {
+          prerenderErrors.push(x.message);
+        },
+      },
+    );
+    expect(prerendered.postponed).not.toBe(null);
+
+    prerendering = false;
+
+    const ssrErrors = [];
+
+    const resumed = ReactDOMFizzServer.resumeToPipeableStream(
+      <App />,
+      JSON.parse(JSON.stringify(prerendered.postponed)),
+      {
+        onError(x) {
+          ssrErrors.push(x.message);
+        },
+      },
+    );
+
+    // Create a separate stream so it doesn't close the writable. I.e. simple concat.
+    const preludeWritable = new Stream.PassThrough();
+    preludeWritable.setEncoding('utf8');
+    preludeWritable.on('data', chunk => {
+      writable.write(chunk);
+    });
+
+    await act(() => {
+      prerendered.prelude.pipe(preludeWritable);
+    });
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        {'Loading1'}
+        {'Loading2'}
+        {'Loading3'}
+      </div>,
+    );
+
+    await act(() => {
+      resumed.pipe(writable);
+    });
+
+    const recoverableErrors = [];
+
+    ssr = false;
+
+    await clientAct(() => {
+      ReactDOMClient.hydrateRoot(container, <App />, {
+        onRecoverableError(x) {
+          recoverableErrors.push(x.message);
+        },
+      });
+    });
+
+    expect(recoverableErrors).toEqual([]);
+    expect(prerenderErrors).toEqual([]);
+    expect(ssrErrors).toEqual([]);
+
+    // Still loading...
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        {'Loading1'}
+        {'Hello'}
+        {'Loading3'}
+      </div>,
+    );
+
+    await clientAct(async () => {
+      await act(() => {
+        resumed.abort(new Error('aborted'));
+      });
+    });
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        {'Hello'}
+        {'Hello'}
+        {'Hello'}
+      </div>,
+    );
+
+    expect(prerenderErrors).toEqual([]);
+    expect(ssrErrors).toEqual(['aborted', 'aborted']);
+    expect(recoverableErrors).toEqual(
+      __DEV__
+        ? [
+            'The server did not finish this Suspense boundary: aborted',
+            'The server did not finish this Suspense boundary: aborted',
+          ]
+        : [
+            'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
+            'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
+          ],
+    );
+  });
+
+  // @gate enablePostpone
+  it('client renders remaining boundaries below the error in shell', async () => {
+    let prerendering = true;
+    let ssr = true;
+    function Postpone() {
+      if (prerendering) {
+        React.unstable_postpone();
+      }
+      return 'Hello';
+    }
+
+    function ReplayError({children}) {
+      if (!prerendering && ssr) {
+        throw new Error('replay error');
+      }
+      return children;
+    }
+
+    function App() {
+      return (
+        <div>
+          <div>
+            <Suspense fallback="Loading1">
+              <Postpone />
+            </Suspense>
+            <ReplayError>
+              <Suspense fallback="Loading2">
+                <Postpone />
+              </Suspense>
+            </ReplayError>
+            <Suspense fallback="Loading3">
+              <Postpone />
+            </Suspense>
+          </div>
+          <Suspense fallback="Not used">
+            <div>
+              <Suspense fallback="Loading4">
+                <Postpone />
+              </Suspense>
+            </div>
+          </Suspense>
+          <Suspense fallback="Loading5">
+            <Postpone />
+            <ReplayError>
+              <Suspense fallback="Loading6">
+                <Postpone />
+              </Suspense>
+            </ReplayError>
+          </Suspense>
+        </div>
+      );
+    }
+
+    const prerenderErrors = [];
+    const prerendered = await ReactDOMFizzStatic.prerenderToNodeStream(
+      <App />,
+      {
+        onError(x) {
+          prerenderErrors.push(x.message);
+        },
+      },
+    );
+    expect(prerendered.postponed).not.toBe(null);
+
+    prerendering = false;
+
+    const ssrErrors = [];
+
+    const resumed = ReactDOMFizzServer.resumeToPipeableStream(
+      <App />,
+      JSON.parse(JSON.stringify(prerendered.postponed)),
+      {
+        onError(x) {
+          ssrErrors.push(x.message);
+        },
+      },
+    );
+
+    // Create a separate stream so it doesn't close the writable. I.e. simple concat.
+    const preludeWritable = new Stream.PassThrough();
+    preludeWritable.setEncoding('utf8');
+    preludeWritable.on('data', chunk => {
+      writable.write(chunk);
+    });
+
+    await act(() => {
+      prerendered.prelude.pipe(preludeWritable);
+    });
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <div>
+          {'Loading1'}
+          {'Loading2'}
+          {'Loading3'}
+        </div>
+        <div>{'Loading4'}</div>
+        {'Loading5'}
+      </div>,
+    );
+
+    await act(() => {
+      resumed.pipe(writable);
+    });
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <div>
+          {'Hello' /* This was matched and completed before the error */}
+          {
+            'Loading2' /* This will be client rendered because its parent errored during replay */
+          }
+          {
+            'Hello' /* This should be renderable since we matched which previous sibling errored */
+          }
+        </div>
+        <div>
+          {
+            'Hello' /* This should be able to resume because it's in a different parent. */
+          }
+        </div>
+        {'Hello'}
+        {'Loading6' /* The parent could resolve even if the child didn't */}
+      </div>,
+    );
+
+    const recoverableErrors = [];
+
+    ssr = false;
+
+    await clientAct(() => {
+      ReactDOMClient.hydrateRoot(container, <App />, {
+        onRecoverableError(x) {
+          recoverableErrors.push(x.message);
+        },
+      });
+    });
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <div>
+          {'Hello'}
+          {'Hello'}
+          {'Hello'}
+        </div>
+        <div>{'Hello'}</div>
+        {'Hello'}
+        {'Hello'}
+      </div>,
+    );
+
+    // We should've logged once for each boundary that this affected.
+    expect(prerenderErrors).toEqual([]);
+    expect(ssrErrors).toEqual([
+      // This error triggered in two replay components.
+      'replay error',
+      'replay error',
+    ]);
+    expect(recoverableErrors).toEqual(
+      // It surfaced in two different suspense boundaries.
+      __DEV__
+        ? [
+            'The server did not finish this Suspense boundary: replay error',
+            'The server did not finish this Suspense boundary: replay error',
+          ]
+        : [
+            'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
+            'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
+          ],
+    );
+  });
 });
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
index b19ef8d667e2c..f6fa50d2504b5 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
@@ -84,7 +84,7 @@ describe('ReactDOMFizzServerBrowser', () => {
     );
     const result = await readResult(stream);
     expect(result).toMatchInlineSnapshot(
-      `"<link rel="preload" href="init.js" as="script"/><link rel="modulepreload" href="init.mjs"/><div>hello world</div><script>INIT();</script><script src="init.js" async=""></script><script type="module" src="init.mjs" async=""></script>"`,
+      `"<link rel="preload" href="init.js" as="script" fetchPriority="low"/><link rel="modulepreload" href="init.mjs" fetchPriority="low"/><div>hello world</div><script>INIT();</script><script src="init.js" async=""></script><script type="module" src="init.mjs" async=""></script>"`,
     );
   });
 
@@ -342,7 +342,8 @@ describe('ReactDOMFizzServerBrowser', () => {
     expect(isComplete).toBe(false);
 
     const reader = stream.getReader();
-    reader.cancel();
+    await reader.read();
+    await reader.cancel();
 
     expect(errors).toEqual([
       'The render was aborted by the server without a reason.',
@@ -355,6 +356,10 @@ describe('ReactDOMFizzServerBrowser', () => {
 
     expect(rendered).toBe(false);
     expect(isComplete).toBe(true);
+
+    expect(errors).toEqual([
+      'The render was aborted by the server without a reason.',
+    ]);
   });
 
   it('should stream large contents that might overlow individual buffers', async () => {
@@ -500,7 +505,46 @@ describe('ReactDOMFizzServerBrowser', () => {
     );
     const result = await readResult(stream);
     expect(result).toMatchInlineSnapshot(
-      `"<link rel="preload" href="init.js" as="script" nonce="R4nd0m"/><link rel="modulepreload" href="init.mjs" nonce="R4nd0m"/><div>hello world</div><script nonce="${nonce}">INIT();</script><script src="init.js" nonce="${nonce}" async=""></script><script type="module" src="init.mjs" nonce="${nonce}" async=""></script>"`,
+      `"<link rel="preload" href="init.js" as="script" fetchPriority="low" nonce="R4nd0m"/><link rel="modulepreload" href="init.mjs" fetchPriority="low" nonce="R4nd0m"/><div>hello world</div><script nonce="${nonce}">INIT();</script><script src="init.js" nonce="${nonce}" async=""></script><script type="module" src="init.mjs" nonce="${nonce}" async=""></script>"`,
     );
   });
+
+  // @gate enablePostpone
+  it('errors if trying to postpone outside a Suspense boundary', async () => {
+    function Postponed() {
+      React.unstable_postpone('testing postpone');
+      return 'client only';
+    }
+
+    function App() {
+      return (
+        <div>
+          <Postponed />
+        </div>
+      );
+    }
+
+    const errors = [];
+    const postponed = [];
+
+    let caughtError = null;
+    try {
+      await ReactDOMFizzServer.renderToReadableStream(<App />, {
+        onError(error) {
+          errors.push(error.message);
+        },
+        onPostpone(reason) {
+          postponed.push(reason);
+        },
+      });
+    } catch (error) {
+      caughtError = error;
+    }
+
+    // Postponing is not logged as an error but as a postponed reason.
+    expect(errors).toEqual([]);
+    expect(postponed).toEqual(['testing postpone']);
+    // However, it does error the shell.
+    expect(caughtError.message).toEqual('testing postpone');
+  });
 });
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
index 59ae61f1cdcd7..4a20f1be57f77 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
@@ -98,7 +98,7 @@ describe('ReactDOMFizzServerNode', () => {
     pipe(writable);
     jest.runAllTimers();
     expect(output.result).toMatchInlineSnapshot(
-      `"<link rel="preload" href="init.js" as="script"/><link rel="modulepreload" href="init.mjs"/><div>hello world</div><script>INIT();</script><script src="init.js" async=""></script><script type="module" src="init.mjs" async=""></script>"`,
+      `"<link rel="preload" href="init.js" as="script" fetchPriority="low"/><link rel="modulepreload" href="init.mjs" fetchPriority="low"/><div>hello world</div><script>INIT();</script><script src="init.js" async=""></script><script type="module" src="init.mjs" async=""></script>"`,
     );
   });
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzStatic-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzStatic-test.js
index def4261daef32..f71d18e3c94ef 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzStatic-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzStatic-test.js
@@ -84,6 +84,10 @@ describe('ReactDOMFizzStatic', () => {
       if (node.nodeName === 'SCRIPT') {
         const script = document.createElement('script');
         script.textContent = node.textContent;
+        for (let i = 0; i < node.attributes.length; i++) {
+          const attribute = node.attributes[i];
+          script.setAttribute(attribute.name, attribute.value);
+        }
         fakeBody.removeChild(node);
         container.appendChild(script);
       } else {
@@ -98,7 +102,7 @@ describe('ReactDOMFizzStatic', () => {
     while (node) {
       if (node.nodeType === 1) {
         if (
-          node.tagName !== 'SCRIPT' &&
+          (node.tagName !== 'SCRIPT' || node.hasAttribute('type')) &&
           node.tagName !== 'TEMPLATE' &&
           node.tagName !== 'template' &&
           !node.hasAttribute('hidden') &&
@@ -218,12 +222,14 @@ describe('ReactDOMFizzStatic', () => {
       );
     }
 
-    const promise = ReactDOMFizzStatic.prerenderToNodeStreams(<App />);
+    const promise = ReactDOMFizzStatic.prerenderToNodeStream(<App />);
 
     resolveText('Hello');
 
     const result = await promise;
 
+    expect(result.postponed).toBe(null);
+
     await act(async () => {
       result.prelude.pipe(writable);
     });
@@ -235,4 +241,25 @@ describe('ReactDOMFizzStatic', () => {
 
     expect(getVisibleChildren(container)).toEqual(<div>Hello</div>);
   });
+
+  // @gate experimental
+  it('should support importMap option', async () => {
+    const importMap = {
+      foo: 'path/to/foo.js',
+    };
+    const result = await ReactDOMFizzStatic.prerenderToNodeStream(
+      <html>
+        <body>hello world</body>
+      </html>,
+      {importMap},
+    );
+
+    await act(async () => {
+      result.prelude.pipe(writable);
+    });
+    expect(getVisibleChildren(container)).toEqual([
+      <script type="importmap">{JSON.stringify(importMap)}</script>,
+      'hello world',
+    ]);
+  });
 });
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzStaticBrowser-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzStaticBrowser-test.js
index 682bf6dd2a03b..cc1b8c4f7b320 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzStaticBrowser-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzStaticBrowser-test.js
@@ -9,23 +9,39 @@
 
 'use strict';
 
+import {
+  getVisibleChildren,
+  insertNodesAndExecuteScripts,
+} from '../test-utils/FizzTestUtils';
+
 // Polyfills for test environment
 global.ReadableStream =
   require('web-streams-polyfill/ponyfill/es6').ReadableStream;
 global.TextEncoder = require('util').TextEncoder;
 
 let React;
+let ReactDOM;
+let ReactDOMFizzServer;
 let ReactDOMFizzStatic;
 let Suspense;
+let container;
 
 describe('ReactDOMFizzStaticBrowser', () => {
   beforeEach(() => {
     jest.resetModules();
     React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMFizzServer = require('react-dom/server.browser');
     if (__EXPERIMENTAL__) {
       ReactDOMFizzStatic = require('react-dom/static.browser');
     }
     Suspense = React.Suspense;
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
   });
 
   const theError = new Error('This is an error');
@@ -37,6 +53,36 @@ describe('ReactDOMFizzStaticBrowser', () => {
     throw theInfinitePromise;
   }
 
+  function concat(streamA, streamB) {
+    const readerA = streamA.getReader();
+    const readerB = streamB.getReader();
+    return new ReadableStream({
+      start(controller) {
+        function readA() {
+          readerA.read().then(({done, value}) => {
+            if (done) {
+              readB();
+              return;
+            }
+            controller.enqueue(value);
+            readA();
+          });
+        }
+        function readB() {
+          readerB.read().then(({done, value}) => {
+            if (done) {
+              controller.close();
+              return;
+            }
+            controller.enqueue(value);
+            readB();
+          });
+        }
+        readA();
+      },
+    });
+  }
+
   async function readContent(stream) {
     const reader = stream.getReader();
     let content = '';
@@ -49,6 +95,21 @@ describe('ReactDOMFizzStaticBrowser', () => {
     }
   }
 
+  async function readIntoContainer(stream) {
+    const reader = stream.getReader();
+    let result = '';
+    while (true) {
+      const {done, value} = await reader.read();
+      if (done) {
+        break;
+      }
+      result += Buffer.from(value).toString('utf8');
+    }
+    const temp = document.createElement('div');
+    temp.innerHTML = result;
+    await insertNodesAndExecuteScripts(temp, container, null);
+  }
+
   // @gate experimental
   it('should call prerender', async () => {
     const result = await ReactDOMFizzStatic.prerender(<div>hello world</div>);
@@ -84,7 +145,7 @@ describe('ReactDOMFizzStaticBrowser', () => {
     });
     const prelude = await readContent(result.prelude);
     expect(prelude).toMatchInlineSnapshot(
-      `"<link rel="preload" href="init.js" as="script"/><link rel="modulepreload" href="init.mjs"/><div>hello world</div><script>INIT();</script><script src="init.js" async=""></script><script type="module" src="init.mjs" async=""></script>"`,
+      `"<link rel="preload" href="init.js" as="script" fetchPriority="low"/><link rel="modulepreload" href="init.mjs" fetchPriority="low"/><div>hello world</div><script>INIT();</script><script src="init.js" async=""></script><script type="module" src="init.mjs" async=""></script>"`,
     );
   });
 
@@ -394,4 +455,436 @@ describe('ReactDOMFizzStaticBrowser', () => {
 
     expect(errors).toEqual(['uh oh', 'uh oh']);
   });
+
+  // @gate enablePostpone
+  it('supports postponing in prerender and resuming later', async () => {
+    let prerendering = true;
+    function Postpone() {
+      if (prerendering) {
+        React.unstable_postpone();
+      }
+      return ['Hello', 'World'];
+    }
+
+    function App() {
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            <Postpone />
+          </Suspense>
+        </div>
+      );
+    }
+
+    const prerendered = await ReactDOMFizzStatic.prerender(<App />);
+    expect(prerendered.postponed).not.toBe(null);
+
+    prerendering = false;
+
+    const resumed = await ReactDOMFizzServer.resume(
+      <App />,
+      JSON.parse(JSON.stringify(prerendered.postponed)),
+    );
+
+    await readIntoContainer(prerendered.prelude);
+
+    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
+
+    await readIntoContainer(resumed);
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>{['Hello', 'World']}</div>,
+    );
+  });
+
+  // @gate enablePostpone
+  it('supports postponing in prerender and resuming with a prefix', async () => {
+    let prerendering = true;
+    function Postpone() {
+      if (prerendering) {
+        React.unstable_postpone();
+      }
+      return 'World';
+    }
+
+    function App() {
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            Hello
+            <Postpone />
+          </Suspense>
+        </div>
+      );
+    }
+
+    const prerendered = await ReactDOMFizzStatic.prerender(<App />);
+    expect(prerendered.postponed).not.toBe(null);
+
+    prerendering = false;
+
+    const resumed = await ReactDOMFizzServer.resume(
+      <App />,
+      JSON.parse(JSON.stringify(prerendered.postponed)),
+    );
+
+    await readIntoContainer(prerendered.prelude);
+
+    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
+
+    await readIntoContainer(resumed);
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>{['Hello', 'World']}</div>,
+    );
+  });
+
+  // @gate enablePostpone
+  it('supports postponing in lazy in prerender and resuming later', async () => {
+    let prerendering = true;
+    const Hole = React.lazy(async () => {
+      React.unstable_postpone();
+    });
+
+    function App() {
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            Hi
+            {prerendering ? Hole : 'Hello'}
+          </Suspense>
+        </div>
+      );
+    }
+
+    const prerendered = await ReactDOMFizzStatic.prerender(<App />);
+    expect(prerendered.postponed).not.toBe(null);
+
+    prerendering = false;
+
+    const resumed = await ReactDOMFizzServer.resume(
+      <App />,
+      JSON.parse(JSON.stringify(prerendered.postponed)),
+    );
+
+    await readIntoContainer(prerendered.prelude);
+
+    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
+
+    await readIntoContainer(resumed);
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        {'Hi'}
+        {'Hello'}
+      </div>,
+    );
+  });
+
+  // @gate enablePostpone
+  it('supports postponing in a nested array', async () => {
+    let prerendering = true;
+    const Hole = React.lazy(async () => {
+      React.unstable_postpone();
+    });
+    function Postpone() {
+      if (prerendering) {
+        React.unstable_postpone();
+      }
+      return 'Hello';
+    }
+
+    function App() {
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            Hi
+            {[<Postpone key="key" />, prerendering ? Hole : 'World']}
+          </Suspense>
+        </div>
+      );
+    }
+
+    const prerendered = await ReactDOMFizzStatic.prerender(<App />);
+    expect(prerendered.postponed).not.toBe(null);
+
+    prerendering = false;
+
+    const resumed = await ReactDOMFizzServer.resume(
+      <App />,
+      JSON.parse(JSON.stringify(prerendered.postponed)),
+    );
+
+    await readIntoContainer(prerendered.prelude);
+
+    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
+
+    await readIntoContainer(resumed);
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>{['Hi', 'Hello', 'World']}</div>,
+    );
+  });
+
+  // @gate enablePostpone
+  it('supports postponing in lazy as a direct child', async () => {
+    let prerendering = true;
+    const Hole = React.lazy(async () => {
+      React.unstable_postpone();
+    });
+    function Postpone() {
+      return prerendering ? Hole : 'Hello';
+    }
+
+    function App() {
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            <Postpone key="key" />
+          </Suspense>
+        </div>
+      );
+    }
+
+    const prerendered = await ReactDOMFizzStatic.prerender(<App />);
+    expect(prerendered.postponed).not.toBe(null);
+
+    prerendering = false;
+
+    const resumed = await ReactDOMFizzServer.resume(
+      <App />,
+      JSON.parse(JSON.stringify(prerendered.postponed)),
+    );
+
+    await readIntoContainer(prerendered.prelude);
+
+    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
+
+    await readIntoContainer(resumed);
+
+    expect(getVisibleChildren(container)).toEqual(<div>Hello</div>);
+  });
+
+  // @gate enablePostpone
+  it('only emits end tags once when resuming', async () => {
+    let prerendering = true;
+    function Postpone() {
+      if (prerendering) {
+        React.unstable_postpone();
+      }
+      return 'Hello';
+    }
+
+    function App() {
+      return (
+        <html>
+          <body>
+            <Suspense fallback="Loading...">
+              <Postpone />
+            </Suspense>
+          </body>
+        </html>
+      );
+    }
+
+    const prerendered = await ReactDOMFizzStatic.prerender(<App />);
+    expect(prerendered.postponed).not.toBe(null);
+
+    prerendering = false;
+
+    const content = await ReactDOMFizzServer.resume(
+      <App />,
+      JSON.parse(JSON.stringify(prerendered.postponed)),
+    );
+
+    const html = await readContent(concat(prerendered.prelude, content));
+    const htmlEndTags = /<\/html\s*>/gi;
+    const bodyEndTags = /<\/body\s*>/gi;
+    expect(Array.from(html.matchAll(htmlEndTags)).length).toBe(1);
+    expect(Array.from(html.matchAll(bodyEndTags)).length).toBe(1);
+  });
+
+  // @gate enablePostpone
+  it('can prerender various hoistables and deduped resources', async () => {
+    let prerendering = true;
+    function Postpone() {
+      if (prerendering) {
+        React.unstable_postpone();
+      }
+      return (
+        <>
+          <link rel="stylesheet" href="my-style2" precedence="low" />
+          <link rel="stylesheet" href="my-style1" precedence="high" />
+          <style precedence="high" href="my-style3">
+            style
+          </style>
+          <img src="my-img" />
+        </>
+      );
+    }
+
+    function App() {
+      ReactDOM.preconnect('example.com');
+      ReactDOM.preload('my-font', {as: 'font', type: 'font/woff2'});
+      ReactDOM.preload('my-style0', {as: 'style'});
+      // This should transfer the props in to the style that loads later.
+      ReactDOM.preload('my-style2', {
+        as: 'style',
+        crossOrigin: 'use-credentials',
+      });
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            <link rel="stylesheet" href="my-style1" precedence="high" />
+            <img src="my-img" />
+            <Postpone />
+          </Suspense>
+          <title>Hello World</title>
+        </div>
+      );
+    }
+
+    let calledInit = false;
+    jest.mock(
+      'init.js',
+      () => {
+        calledInit = true;
+      },
+      {virtual: true},
+    );
+
+    const prerendered = await ReactDOMFizzStatic.prerender(<App />, {
+      bootstrapScripts: ['init.js'],
+    });
+    expect(prerendered.postponed).not.toBe(null);
+
+    await readIntoContainer(prerendered.prelude);
+
+    expect(getVisibleChildren(container)).toEqual([
+      <link href="example.com" rel="preconnect" />,
+      <link
+        as="font"
+        crossorigin=""
+        href="my-font"
+        rel="preload"
+        type="font/woff2"
+      />,
+      <link as="image" href="my-img" rel="preload" />,
+      <link data-precedence="high" href="my-style1" rel="stylesheet" />,
+      <link as="script" fetchpriority="low" href="init.js" rel="preload" />,
+      <link as="style" href="my-style0" rel="preload" />,
+      <link
+        as="style"
+        crossorigin="use-credentials"
+        href="my-style2"
+        rel="preload"
+      />,
+      <title>Hello World</title>,
+      <div>Loading...</div>,
+    ]);
+
+    prerendering = false;
+    const content = await ReactDOMFizzServer.resume(
+      <App />,
+      JSON.parse(JSON.stringify(prerendered.postponed)),
+    );
+
+    await readIntoContainer(content);
+
+    expect(calledInit).toBe(true);
+
+    // Dispatch load event to injected stylesheet
+    const link = document.querySelector(
+      'link[rel="stylesheet"][href="my-style2"]',
+    );
+    const event = document.createEvent('Events');
+    event.initEvent('load', true, true);
+    link.dispatchEvent(event);
+
+    // Wait for the instruction microtasks to flush.
+    await 0;
+    await 0;
+
+    expect(getVisibleChildren(container)).toEqual([
+      <link href="example.com" rel="preconnect" />,
+      <link
+        as="font"
+        crossorigin=""
+        href="my-font"
+        rel="preload"
+        type="font/woff2"
+      />,
+      <link as="image" href="my-img" rel="preload" />,
+      <link data-precedence="high" href="my-style1" rel="stylesheet" />,
+      <style data-href="my-style3" data-precedence="high">
+        style
+      </style>,
+      <link
+        crossorigin="use-credentials"
+        data-precedence="low"
+        href="my-style2"
+        rel="stylesheet"
+      />,
+      <link as="script" fetchpriority="low" href="init.js" rel="preload" />,
+      <link as="style" href="my-style0" rel="preload" />,
+      <link
+        as="style"
+        crossorigin="use-credentials"
+        href="my-style2"
+        rel="preload"
+      />,
+      <title>Hello World</title>,
+      <div>
+        <img src="my-img" />
+        <img src="my-img" />
+      </div>,
+    ]);
+  });
+
+  // @gate enablePostpone
+  it('can postpone a boundary after it has already been added', async () => {
+    let prerendering = true;
+    function Postpone() {
+      if (prerendering) {
+        React.unstable_postpone();
+      }
+      return 'Hello';
+    }
+
+    function App() {
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            <Suspense fallback="Loading...">
+              <Postpone />
+            </Suspense>
+            <Postpone />
+            <Postpone />
+          </Suspense>
+        </div>
+      );
+    }
+
+    const prerendered = await ReactDOMFizzStatic.prerender(<App />);
+    expect(prerendered.postponed).not.toBe(null);
+
+    prerendering = false;
+
+    console.log(JSON.stringify(prerendered.postponed, null, 2));
+
+    const resumed = await ReactDOMFizzServer.resume(
+      <App />,
+      JSON.parse(JSON.stringify(prerendered.postponed)),
+    );
+
+    await readIntoContainer(prerendered.prelude);
+
+    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
+
+    await readIntoContainer(resumed);
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>{['Hello', 'Hello', 'Hello']}</div>,
+    );
+  });
 });
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzStaticNode-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzStaticNode-test.js
index 911d11b538c2c..01f3bf66bbea0 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzStaticNode-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzStaticNode-test.js
@@ -47,8 +47,8 @@ describe('ReactDOMFizzStaticNode', () => {
   }
 
   // @gate experimental
-  it('should call prerenderToNodeStreams', async () => {
-    const result = await ReactDOMFizzStatic.prerenderToNodeStreams(
+  it('should call prerenderToNodeStream', async () => {
+    const result = await ReactDOMFizzStatic.prerenderToNodeStream(
       <div>hello world</div>,
     );
     const prelude = await readContent(result.prelude);
@@ -57,7 +57,7 @@ describe('ReactDOMFizzStaticNode', () => {
 
   // @gate experimental
   it('should emit DOCTYPE at the root of the document', async () => {
-    const result = await ReactDOMFizzStatic.prerenderToNodeStreams(
+    const result = await ReactDOMFizzStatic.prerenderToNodeStream(
       <html>
         <body>hello world</body>
       </html>,
@@ -76,7 +76,7 @@ describe('ReactDOMFizzStaticNode', () => {
 
   // @gate experimental
   it('should emit bootstrap script src at the end', async () => {
-    const result = await ReactDOMFizzStatic.prerenderToNodeStreams(
+    const result = await ReactDOMFizzStatic.prerenderToNodeStream(
       <div>hello world</div>,
       {
         bootstrapScriptContent: 'INIT();',
@@ -86,7 +86,7 @@ describe('ReactDOMFizzStaticNode', () => {
     );
     const prelude = await readContent(result.prelude);
     expect(prelude).toMatchInlineSnapshot(
-      `"<link rel="preload" href="init.js" as="script"/><link rel="modulepreload" href="init.mjs"/><div>hello world</div><script>INIT();</script><script src="init.js" async=""></script><script type="module" src="init.mjs" async=""></script>"`,
+      `"<link rel="preload" href="init.js" as="script" fetchPriority="low"/><link rel="modulepreload" href="init.mjs" fetchPriority="low"/><div>hello world</div><script>INIT();</script><script src="init.js" async=""></script><script type="module" src="init.mjs" async=""></script>"`,
     );
   });
 
@@ -101,7 +101,7 @@ describe('ReactDOMFizzStaticNode', () => {
       }
       return 'Done';
     }
-    const resultPromise = ReactDOMFizzStatic.prerenderToNodeStreams(
+    const resultPromise = ReactDOMFizzStatic.prerenderToNodeStream(
       <div>
         <Suspense fallback="Loading">
           <Wait />
@@ -127,7 +127,7 @@ describe('ReactDOMFizzStaticNode', () => {
     const reportedErrors = [];
     let caughtError = null;
     try {
-      await ReactDOMFizzStatic.prerenderToNodeStreams(
+      await ReactDOMFizzStatic.prerenderToNodeStream(
         <div>
           <Throw />
         </div>,
@@ -149,7 +149,7 @@ describe('ReactDOMFizzStaticNode', () => {
     const reportedErrors = [];
     let caughtError = null;
     try {
-      await ReactDOMFizzStatic.prerenderToNodeStreams(
+      await ReactDOMFizzStatic.prerenderToNodeStream(
         <div>
           <Suspense fallback={<Throw />}>
             <InfiniteSuspend />
@@ -171,7 +171,7 @@ describe('ReactDOMFizzStaticNode', () => {
   // @gate experimental
   it('should not error the stream when an error is thrown inside suspense boundary', async () => {
     const reportedErrors = [];
-    const result = await ReactDOMFizzStatic.prerenderToNodeStreams(
+    const result = await ReactDOMFizzStatic.prerenderToNodeStream(
       <div>
         <Suspense fallback={<div>Loading</div>}>
           <Throw />
@@ -193,7 +193,7 @@ describe('ReactDOMFizzStaticNode', () => {
   it('should be able to complete by aborting even if the promise never resolves', async () => {
     const errors = [];
     const controller = new AbortController();
-    const resultPromise = ReactDOMFizzStatic.prerenderToNodeStreams(
+    const resultPromise = ReactDOMFizzStatic.prerenderToNodeStream(
       <div>
         <Suspense fallback={<div>Loading</div>}>
           <InfiniteSuspend />
@@ -223,7 +223,7 @@ describe('ReactDOMFizzStaticNode', () => {
   it('should reject if aborting before the shell is complete', async () => {
     const errors = [];
     const controller = new AbortController();
-    const promise = ReactDOMFizzStatic.prerenderToNodeStreams(
+    const promise = ReactDOMFizzStatic.prerenderToNodeStream(
       <div>
         <InfiniteSuspend />
       </div>,
@@ -262,7 +262,7 @@ describe('ReactDOMFizzStaticNode', () => {
         </Suspense>
       );
     }
-    const streamPromise = ReactDOMFizzStatic.prerenderToNodeStreams(
+    const streamPromise = ReactDOMFizzStatic.prerenderToNodeStream(
       <div>
         <App />
       </div>,
@@ -291,7 +291,7 @@ describe('ReactDOMFizzStaticNode', () => {
     const theReason = new Error('aborted for reasons');
     controller.abort(theReason);
 
-    const promise = ReactDOMFizzStatic.prerenderToNodeStreams(
+    const promise = ReactDOMFizzStatic.prerenderToNodeStream(
       <div>
         <Suspense fallback={<div>Loading</div>}>
           <InfiniteSuspend />
@@ -342,7 +342,7 @@ describe('ReactDOMFizzStaticNode', () => {
 
     const errors = [];
     const controller = new AbortController();
-    const resultPromise = ReactDOMFizzStatic.prerenderToNodeStreams(<App />, {
+    const resultPromise = ReactDOMFizzStatic.prerenderToNodeStream(<App />, {
       signal: controller.signal,
       onError(x) {
         errors.push(x);
@@ -384,7 +384,7 @@ describe('ReactDOMFizzStaticNode', () => {
 
     const errors = [];
     const controller = new AbortController();
-    const resultPromise = ReactDOMFizzStatic.prerenderToNodeStreams(<App />, {
+    const resultPromise = ReactDOMFizzStatic.prerenderToNodeStream(<App />, {
       signal: controller.signal,
       onError(x) {
         errors.push(x.message);
diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
index 2ee581f850689..bff5b6b262e87 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
@@ -3385,6 +3385,92 @@ body {
     );
   });
 
+  it('loading a stylesheet as part of an error boundary UI, during initial render', async () => {
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+      static getDerivedStateFromError(error) {
+        return {error};
+      }
+      render() {
+        const error = this.state.error;
+        if (error !== null) {
+          return (
+            <>
+              <link rel="stylesheet" href="A" precedence="default" />
+              {error.message}
+            </>
+          );
+        }
+        return this.props.children;
+      }
+    }
+
+    function Throws() {
+      throw new Error('Oops!');
+    }
+
+    function App() {
+      return (
+        <html>
+          <body>
+            <ErrorBoundary>
+              <Suspense fallback="Loading...">
+                <Throws />
+              </Suspense>
+            </ErrorBoundary>
+          </body>
+        </html>
+      );
+    }
+
+    // Initial server render. Because something threw, a Suspense fallback
+    // is shown.
+    await act(() => {
+      renderToPipeableStream(<App />, {
+        onError(x) {
+          Scheduler.log('Caught server error: ' + x.message);
+        },
+      }).pipe(writable);
+    });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>Loading...</body>
+      </html>,
+    );
+    assertLog(['Caught server error: Oops!']);
+
+    // Hydrate the tree. The error boundary will capture the error and attempt
+    // to show an error screen. However, the error screen includes a stylesheet,
+    // so the commit should suspend until the stylesheet loads.
+    ReactDOMClient.hydrateRoot(document, <App />);
+    await waitForAll([]);
+
+    // A preload for the stylesheet is inserted, but we still haven't committed
+    // the error screen.
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link as="style" href="A" rel="preload" />
+        </head>
+        <body>Loading...</body>
+      </html>,
+    );
+
+    // Finish loading the stylesheets. The commit should be unblocked, and the
+    // error screen should appear.
+    await clientAct(() => loadStylesheets());
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link data-precedence="default" href="A" rel="stylesheet" />
+          <link as="style" href="A" rel="preload" />
+        </head>
+        <body>Oops!</body>
+      </html>,
+    );
+  });
+
   it('will not flush a preload for a new rendered Stylesheet Resource if one was already flushed', async () => {
     function Component() {
       ReactDOM.preload('foo', {as: 'style'});
@@ -3771,6 +3857,268 @@ body {
     );
   });
 
+  it('can emit preloads for non-lazy images that are rendered', async () => {
+    function App() {
+      ReactDOM.preload('script', {as: 'script'});
+      ReactDOM.preload('a', {as: 'image'});
+      ReactDOM.preload('b', {as: 'image'});
+      return (
+        <html>
+          <body>
+            <img src="a" />
+            <img src="b" loading="lazy" />
+            <img src="b2" loading="lazy" />
+            <img src="c" srcSet="srcsetc" />
+            <img src="d" srcSet="srcsetd" sizes="sizesd" />
+            <img src="d" srcSet="srcsetd" sizes="sizesd2" />
+          </body>
+        </html>
+      );
+    }
+
+    await act(() => {
+      renderToPipeableStream(<App />).pipe(writable);
+    });
+
+    // non-lazy images are first, then arbitrary preloads like for the script and lazy images
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="preload" href="a" as="image" />
+          <link rel="preload" as="image" imagesrcset="srcsetc" />
+          <link
+            rel="preload"
+            as="image"
+            imagesrcset="srcsetd"
+            imagesizes="sizesd"
+          />
+          <link
+            rel="preload"
+            as="image"
+            imagesrcset="srcsetd"
+            imagesizes="sizesd2"
+          />
+          <link rel="preload" href="script" as="script" />
+          <link rel="preload" href="b" as="image" />
+        </head>
+        <body>
+          <img src="a" />
+          <img src="b" loading="lazy" />
+          <img src="b2" loading="lazy" />
+          <img src="c" srcset="srcsetc" />
+          <img src="d" srcset="srcsetd" sizes="sizesd" />
+          <img src="d" srcset="srcsetd" sizes="sizesd2" />
+        </body>
+      </html>,
+    );
+  });
+
+  it('Does not preload lazy images', async () => {
+    function App() {
+      ReactDOM.preload('a', {as: 'image'});
+      return (
+        <html>
+          <body>
+            <img src="a" fetchPriority="low" />
+            <img src="b" fetchPriority="low" />
+          </body>
+        </html>
+      );
+    }
+    await act(() => {
+      renderToPipeableStream(<App />).pipe(writable);
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="preload" as="image" href="a" />
+        </head>
+        <body>
+          <img src="a" fetchpriority="low" />
+          <img src="b" fetchpriority="low" />
+        </body>
+      </html>,
+    );
+  });
+
+  it('preloads up to 10 suspensey images as high priority when fetchPriority is not specified', async () => {
+    function App() {
+      ReactDOM.preload('1', {as: 'image', fetchPriority: 'high'});
+      ReactDOM.preload('auto', {as: 'image'});
+      ReactDOM.preload('low', {as: 'image', fetchPriority: 'low'});
+      ReactDOM.preload('9', {as: 'image', fetchPriority: 'high'});
+      ReactDOM.preload('10', {as: 'image', fetchPriority: 'high'});
+      return (
+        <html>
+          <body>
+            {/* skipping 1 */}
+            <img src="2" />
+            <img src="3" fetchPriority="auto" />
+            <img src="4" fetchPriority="high" />
+            <img src="5" />
+            <img src="5low" fetchPriority="low" />
+            <img src="6" />
+            <img src="7" />
+            <img src="8" />
+            <img src="9" />
+            {/* skipping 10 */}
+            <img src="11" />
+            <img src="12" fetchPriority="high" />
+          </body>
+        </html>
+      );
+    }
+    await act(() => {
+      renderToPipeableStream(<App />).pipe(writable);
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          {/* First we see the preloads calls that made it to the high priority image queue */}
+          <link rel="preload" as="image" href="1" fetchpriority="high" />
+          <link rel="preload" as="image" href="9" fetchpriority="high" />
+          <link rel="preload" as="image" href="10" fetchpriority="high" />
+          {/* Next we see up to 7 more images qualify for high priority image queue */}
+          <link rel="preload" as="image" href="2" />
+          <link rel="preload" as="image" href="3" fetchpriority="auto" />
+          <link rel="preload" as="image" href="4" fetchpriority="high" />
+          <link rel="preload" as="image" href="5" />
+          <link rel="preload" as="image" href="6" />
+          <link rel="preload" as="image" href="7" />
+          <link rel="preload" as="image" href="8" />
+          {/* Next we see images that are explicitly high priority and thus make it to the high priority image queue */}
+          <link rel="preload" as="image" href="12" fetchpriority="high" />
+          {/* Next we see the remaining preloads that did not make it to the high priority image queue */}
+          <link rel="preload" as="image" href="auto" />
+          <link rel="preload" as="image" href="low" fetchpriority="low" />
+          <link rel="preload" as="image" href="11" />
+        </head>
+        <body>
+          {/* skipping 1 */}
+          <img src="2" />
+          <img src="3" fetchpriority="auto" />
+          <img src="4" fetchpriority="high" />
+          <img src="5" />
+          <img src="5low" fetchpriority="low" />
+          <img src="6" />
+          <img src="7" />
+          <img src="8" />
+          <img src="9" />
+          {/* skipping 10 */}
+          <img src="11" />
+          <img src="12" fetchpriority="high" />
+        </body>
+      </html>,
+    );
+  });
+
+  it('preloads from rendered images properly use srcSet and sizes', async () => {
+    function App() {
+      ReactDOM.preload('1', {as: 'image', imageSrcSet: 'ss1'});
+      ReactDOM.preload('2', {
+        as: 'image',
+        imageSrcSet: 'ss2',
+        imageSizes: 's2',
+      });
+      return (
+        <html>
+          <body>
+            <img src="1" srcSet="ss1" />
+            <img src="2" srcSet="ss2" sizes="s2" />
+            <img src="3" srcSet="ss3" />
+            <img src="4" srcSet="ss4" sizes="s4" />
+          </body>
+        </html>
+      );
+    }
+    await act(() => {
+      renderToPipeableStream(<App />).pipe(writable);
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="preload" as="image" imagesrcset="ss1" />
+          <link rel="preload" as="image" imagesrcset="ss2" imagesizes="s2" />
+          <link rel="preload" as="image" imagesrcset="ss3" />
+          <link rel="preload" as="image" imagesrcset="ss4" imagesizes="s4" />
+        </head>
+        <body>
+          <img src="1" srcset="ss1" />
+          <img src="2" srcset="ss2" sizes="s2" />
+          <img src="3" srcset="ss3" />
+          <img src="4" srcset="ss4" sizes="s4" />
+        </body>
+      </html>,
+    );
+  });
+
+  it('should not preload images that have a data URIs for src or srcSet', async () => {
+    function App() {
+      return (
+        <html>
+          <body>
+            <img src="data:1" />
+            <img src="data:2" srcSet="ss2" />
+            <img srcSet="data:3a, data:3b 2x" />
+            <img src="4" srcSet="data:4a, data4b 2x" />
+          </body>
+        </html>
+      );
+    }
+    await act(() => {
+      renderToPipeableStream(<App />).pipe(writable);
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>
+          <img src="data:1" />
+          <img src="data:2" srcset="ss2" />
+          <img srcset="data:3a, data:3b 2x" />
+          <img src="4" srcset="data:4a, data4b 2x" />
+        </body>
+      </html>,
+    );
+  });
+
+  // https://github.com/vercel/next.js/discussions/54799
+  it('omits preloads when an <img> is inside a <picture>', async () => {
+    await act(() => {
+      renderToPipeableStream(
+        <html>
+          <body>
+            <picture>
+              <img src="foo" />
+            </picture>
+            <picture>
+              <source type="image/webp" srcSet="webpsrc" />
+              <img src="jpg fallback" />
+            </picture>
+          </body>
+        </html>,
+      ).pipe(writable);
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>
+          <picture>
+            <img src="foo" />
+          </picture>
+          <picture>
+            <source type="image/webp" srcset="webpsrc" />
+            <img src="jpg fallback" />
+          </picture>
+        </body>
+      </html>,
+    );
+  });
+
   describe('ReactDOM.prefetchDNS(href)', () => {
     it('creates a dns-prefetch resource when called', async () => {
       function App({url}) {
@@ -4067,40 +4415,6 @@ body {
       ]);
     });
 
-    // @gate enableFloat
-    it('warns if you pass incompatible options to two `ReactDOM.preload(...)` with the same href', async () => {
-      function Component() {
-        ReactDOM.preload('foo', {
-          as: 'font',
-          crossOrigin: 'use-credentials',
-        });
-        ReactDOM.preload('foo', {
-          as: 'font',
-          integrity: 'some hash',
-          crossOrigin: 'anonymous',
-        });
-        ReactDOM.preload('foo', {
-          as: 'font',
-          extra: 'ignored',
-        });
-      }
-
-      await expect(async () => {
-        await act(() => {
-          renderToPipeableStream(
-            <html>
-              <body>
-                <Component />
-              </body>
-            </html>,
-          );
-        });
-      }).toErrorDev([
-        'Warning: ReactDOM.preload(): The options provided conflict with another call to `ReactDOM.preload("foo", { as: "font", ...})`. React will always use the options it first encounters when preloading a resource for a given `href` and `as` type, and any later options will be ignored if different. Try updating all calls to `ReactDOM.preload()` with the same `href` and `as` type to use the same options, or eliminate one of the calls.\n  "integrity" option value: "some hash", missing from original options\n  "crossOrigin" option value: "anonymous", original option value: "use-credentials"',
-        'Warning: ReactDOM.preload(): The options provided conflict with another call to `ReactDOM.preload("foo", { as: "font", ...})`. React will always use the options it first encounters when preloading a resource for a given `href` and `as` type, and any later options will be ignored if different. Try updating all calls to `ReactDOM.preload()` with the same `href` and `as` type to use the same options, or eliminate one of the calls.\n  "crossOrigin" missing from options, original option value: "use-credentials"',
-      ]);
-    });
-
     it('supports fetchPriority', async () => {
       function Component({isServer}) {
         ReactDOM.preload(isServer ? 'highserver' : 'highclient', {
@@ -4131,6 +4445,12 @@ body {
       expect(getMeaningfulChildren(document)).toEqual(
         <html>
           <head>
+            <link
+              rel="preload"
+              as="script"
+              href="highserver"
+              fetchpriority="high"
+            />
             <link
               rel="preload"
               as="style"
@@ -4143,12 +4463,6 @@ body {
               href="autoserver"
               fetchpriority="auto"
             />
-            <link
-              rel="preload"
-              as="script"
-              href="highserver"
-              fetchpriority="high"
-            />
           </head>
           <body>hello</body>
         </html>,
@@ -4166,6 +4480,12 @@ body {
       expect(getMeaningfulChildren(document)).toEqual(
         <html>
           <head>
+            <link
+              rel="preload"
+              as="script"
+              href="highserver"
+              fetchpriority="high"
+            />
             <link
               rel="preload"
               as="style"
@@ -4178,12 +4498,6 @@ body {
               href="autoserver"
               fetchpriority="auto"
             />
-            <link
-              rel="preload"
-              as="script"
-              href="highserver"
-              fetchpriority="high"
-            />
             <link
               rel="preload"
               as="script"
@@ -4230,21 +4544,153 @@ body {
         </html>,
       );
 
-      ReactDOMClient.hydrateRoot(container, <App url="client" />);
-      await waitForAll([]);
-      expect(getMeaningfulChildren(document)).toEqual(
-        <html>
-          <head>
-            <link rel="preload" as="script" href="client" nonce="abc" />
-          </head>
-          <body>
-            <div id="container">
-              <link rel="preload" as="script" href="server" nonce="abc" />
-              hello
-            </div>
-          </body>
-        </html>,
+      ReactDOMClient.hydrateRoot(container, <App url="client" />);
+      await waitForAll([]);
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="preload" as="script" href="client" nonce="abc" />
+          </head>
+          <body>
+            <div id="container">
+              <link rel="preload" as="script" href="server" nonce="abc" />
+              hello
+            </div>
+          </body>
+        </html>,
+      );
+    });
+  });
+
+  describe('ReactDOM.preloadModule(href, options)', () => {
+    it('preloads scripts as modules', async () => {
+      function App({ssr}) {
+        const prefix = ssr ? 'ssr ' : 'browser ';
+        ReactDOM.preloadModule(prefix + 'plain');
+        ReactDOM.preloadModule(prefix + 'default', {as: 'script'});
+        ReactDOM.preloadModule(prefix + 'cors', {
+          crossOrigin: 'use-credentials',
+        });
+        ReactDOM.preloadModule(prefix + 'integrity', {integrity: 'some hash'});
+        ReactDOM.preloadModule(prefix + 'serviceworker', {as: 'serviceworker'});
+        return <div>hello</div>;
+      }
+      await act(() => {
+        renderToPipeableStream(<App ssr={true} />).pipe(writable);
+      });
+      expect(getMeaningfulChildren(document.body)).toEqual(
+        <div id="container">
+          <link rel="modulepreload" href="ssr plain" />
+          <link rel="modulepreload" href="ssr default" />
+          <link
+            rel="modulepreload"
+            href="ssr cors"
+            crossorigin="use-credentials"
+          />
+          <link
+            rel="modulepreload"
+            href="ssr integrity"
+            integrity="some hash"
+          />
+          <link
+            rel="modulepreload"
+            href="ssr serviceworker"
+            as="serviceworker"
+          />
+          <div>hello</div>
+        </div>,
+      );
+
+      ReactDOMClient.hydrateRoot(container, <App />);
+      await waitForAll([]);
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="modulepreload" href="browser plain" />
+            <link rel="modulepreload" href="browser default" />
+            <link
+              rel="modulepreload"
+              href="browser cors"
+              crossorigin="use-credentials"
+            />
+            <link
+              rel="modulepreload"
+              href="browser integrity"
+              integrity="some hash"
+            />
+            <link
+              rel="modulepreload"
+              href="browser serviceworker"
+              as="serviceworker"
+            />
+          </head>
+          <body>
+            <div id="container">
+              <link rel="modulepreload" href="ssr plain" />
+              <link rel="modulepreload" href="ssr default" />
+              <link
+                rel="modulepreload"
+                href="ssr cors"
+                crossorigin="use-credentials"
+              />
+              <link
+                rel="modulepreload"
+                href="ssr integrity"
+                integrity="some hash"
+              />
+              <link
+                rel="modulepreload"
+                href="ssr serviceworker"
+                as="serviceworker"
+              />
+              <div>hello</div>
+            </div>
+          </body>
+        </html>,
+      );
+    });
+
+    it('warns if you provide invalid arguments', async () => {
+      function App() {
+        ReactDOM.preloadModule();
+        ReactDOM.preloadModule(() => {});
+        ReactDOM.preloadModule('');
+        ReactDOM.preloadModule('1', true);
+        ReactDOM.preloadModule('2', {as: true});
+        return <div>hello</div>;
+      }
+      await expect(async () => {
+        await act(() => {
+          renderToPipeableStream(<App />).pipe(writable);
+        });
+      }).toErrorDev([
+        'ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally, an `options` object with an `as` property valid for a `<link rel="modulepreload" as="..." />` tag. The `href` argument encountered was `undefined`',
+        'ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally, an `options` object with an `as` property valid for a `<link rel="modulepreload" as="..." />` tag. The `href` argument encountered was something with type "function"',
+        'ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally, an `options` object with an `as` property valid for a `<link rel="modulepreload" as="..." />` tag. The `href` argument encountered was an empty string',
+        'ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally, an `options` object with an `as` property valid for a `<link rel="modulepreload" as="..." />` tag. The `options` argument encountered was something with type "boolean"',
+        'ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally, an `options` object with an `as` property valid for a `<link rel="modulepreload" as="..." />` tag. The `as` option encountered was something with type "boolean"',
+      ]);
+      expect(getMeaningfulChildren(document.body)).toEqual(
+        <div id="container">
+          <link rel="modulepreload" href="1" />
+          <link rel="modulepreload" href="2" />
+          <div>hello</div>
+        </div>,
+      );
+
+      const root = ReactDOMClient.createRoot(
+        document.getElementById('container'),
       );
+      root.render(<App />);
+      await expect(async () => {
+        await waitForAll([]);
+      }).toErrorDev([
+        'ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally, an `options` object with an `as` property valid for a `<link rel="modulepreload" as="..." />` tag. The `href` argument encountered was `undefined`',
+        'ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally, an `options` object with an `as` property valid for a `<link rel="modulepreload" as="..." />` tag. The `href` argument encountered was something with type "function"',
+        'ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally, an `options` object with an `as` property valid for a `<link rel="modulepreload" as="..." />` tag. The `href` argument encountered was an empty string',
+        'ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally, an `options` object with an `as` property valid for a `<link rel="modulepreload" as="..." />` tag. The `options` argument encountered was something with type "boolean"',
+        'ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally, an `options` object with an `as` property valid for a `<link rel="modulepreload" as="..." />` tag. The `as` option encountered was something with type "boolean"',
+      ]);
     });
   });
 
@@ -4531,122 +4977,6 @@ body {
       ]);
     });
 
-    // @gate enableFloat
-    it('warns if you pass options to `ReactDOM.preinit(..., { as: "style", ... })` incompatible with props from an existing <link rel="stylesheet" .../>', async () => {
-      function Component() {
-        ReactDOM.preinit('foo', {
-          as: 'style',
-          integrity: 'some hash',
-          crossOrigin: 'use-credentials',
-        });
-      }
-
-      await expect(async () => {
-        await act(() => {
-          renderToPipeableStream(
-            <html>
-              <body>
-                <link
-                  rel="stylesheet"
-                  href="foo"
-                  precedence="foo"
-                  crossOrigin="anonymous"
-                />
-                <Component />
-              </body>
-            </html>,
-          );
-        });
-      }).toErrorDev([
-        'ReactDOM.preinit(): For `href` "foo", the options provided conflict with props found on a <link rel="stylesheet" precedence="foo" href="foo" .../> that was already rendered. React will always use the props or options it first encounters for a hoistable stylesheet for a given `href` and any later props or options will be ignored if different. Generally, ReactDOM.preinit() is useful when you are not yet rendering a stylesheet but you anticipate it will be used soon. In this case the stylesheet was already rendered so preinitializing it does not provide any additional benefit. To resolve, try making the props and options agree between the <link rel="stylesheet" .../> and the `ReactDOM.preinit()` call or remove the `ReactDOM.preinit()` call.\n  "precedence" missing from options, prop value: "foo"\n  "integrity" option value: "some hash", missing from props\n  "crossOrigin" option value: "use-credentials", prop value: "anonymous"',
-      ]);
-    });
-
-    // @gate enableFloat
-    it('warns if you pass incompatible options to two `ReactDOM.preinit(..., { as: "style", ... })` with the same href', async () => {
-      function Component() {
-        ReactDOM.preinit('foo', {
-          as: 'style',
-          precedence: 'foo',
-          crossOrigin: 'use-credentials',
-        });
-        ReactDOM.preinit('foo', {
-          as: 'style',
-          integrity: 'some hash',
-          crossOrigin: 'anonymous',
-        });
-      }
-
-      await expect(async () => {
-        await act(() => {
-          renderToPipeableStream(
-            <html>
-              <body>
-                <Component />
-              </body>
-            </html>,
-          );
-        });
-      }).toErrorDev([
-        'ReactDOM.preinit(): For `href` "foo", the options provided conflict with another call to `ReactDOM.preinit("foo", { as: "style", ... })`. React will always use the options it first encounters when preinitializing a hoistable stylesheet for a given `href` and any later options will be ignored if different. Try updating all calls to `ReactDOM.preinit()` for a given `href` to use the same options, or only call `ReactDOM.preinit()` once per `href`.\n  "precedence" missing from options, original option value: "foo"\n  "integrity" option value: "some hash", missing from original options\n  "crossOrigin" option value: "anonymous", original option value: "use-credentials"',
-      ]);
-    });
-
-    // @gate enableFloat
-    it('warns if you pass options to `ReactDOM.preinit(..., { as: "script", ... })` incompatible with props from an existing <script async={true} .../>', async () => {
-      function Component() {
-        ReactDOM.preinit('foo', {
-          as: 'script',
-          integrity: 'some hash',
-          crossOrigin: 'use-credentials',
-        });
-      }
-
-      await expect(async () => {
-        await act(() => {
-          renderToPipeableStream(
-            <html>
-              <body>
-                <script async={true} src="foo" crossOrigin="anonymous" />
-                <Component />
-              </body>
-            </html>,
-          );
-        });
-      }).toErrorDev([
-        'ReactDOM.preinit(): For `href` "foo", the options provided conflict with props found on a <script async={true} src="foo" .../> that was already rendered. React will always use the props or options it first encounters for a hoistable script for a given `href` and any later props or options will be ignored if different. Generally, ReactDOM.preinit() is useful when you are not yet rendering a script but you anticipate it will be used soon and want to go beyond preloading it and have it execute early. In this case the script was already rendered so preinitializing it does not provide any additional benefit. To resolve, try making the props and options agree between the <script .../> and the `ReactDOM.preinit()` call or remove the `ReactDOM.preinit()` call.\n  "integrity" option value: "some hash", missing from props\n  "crossOrigin" option value: "use-credentials", prop value: "anonymous"',
-      ]);
-    });
-
-    // @gate enableFloat
-    it('warns if you pass incompatible options to two `ReactDOM.preinit(..., { as: "script", ... })` with the same href', async () => {
-      function Component() {
-        ReactDOM.preinit('foo', {
-          as: 'script',
-          crossOrigin: 'use-credentials',
-        });
-        ReactDOM.preinit('foo', {
-          as: 'script',
-          integrity: 'some hash',
-          crossOrigin: 'anonymous',
-        });
-      }
-
-      await expect(async () => {
-        await act(() => {
-          renderToPipeableStream(
-            <html>
-              <body>
-                <Component />
-              </body>
-            </html>,
-          );
-        });
-      }).toErrorDev([
-        'ReactDOM.preinit(): For `href` "foo", the options provided conflict with another call to `ReactDOM.preinit("foo", { as: "script", ... })`. React will always use the options it first encounters when preinitializing a hoistable script for a given `href` and any later options will be ignored if different. Try updating all calls to `ReactDOM.preinit()` for a given `href` to use the same options, or only call `ReactDOM.preinit()` once per `href`.\n  "integrity" option value: "some hash", missing from original options\n  "crossOrigin" option value: "anonymous", original option value: "use-credentials"',
-      ]);
-    });
-
     it('accepts a `nonce` option for `as: "script"`', async () => {
       function Component({src}) {
         ReactDOM.preinit(src, {as: 'script', nonce: 'R4nD0m'});
@@ -4902,6 +5232,135 @@ body {
     });
   });
 
+  describe('ReactDOM.preinitModule(href, options)', () => {
+    it('creates a script module resources', async () => {
+      function App({ssr}) {
+        const prefix = ssr ? 'ssr ' : 'browser ';
+        ReactDOM.preinitModule(prefix + 'plain');
+        ReactDOM.preinitModule(prefix + 'default', {as: 'script'});
+        ReactDOM.preinitModule(prefix + 'cors', {
+          crossOrigin: 'use-credentials',
+        });
+        ReactDOM.preinitModule(prefix + 'integrity', {integrity: 'some hash'});
+        ReactDOM.preinitModule(prefix + 'warning', {as: 'style'});
+        return <div>hello</div>;
+      }
+      await expect(async () => {
+        await act(() => {
+          renderToPipeableStream(<App ssr={true} />).pipe(writable);
+        });
+      }).toErrorDev([
+        'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` string and, optionally, an `options` object with a valid `as` property. The `as` option encountered was "style"',
+      ]);
+      expect(getMeaningfulChildren(document.body)).toEqual(
+        <div id="container">
+          <script type="module" src="ssr plain" async="" />
+          <script type="module" src="ssr default" async="" />
+          <script
+            type="module"
+            src="ssr cors"
+            crossorigin="use-credentials"
+            async=""
+          />
+          <script
+            type="module"
+            src="ssr integrity"
+            integrity="some hash"
+            async=""
+          />
+          <div>hello</div>
+        </div>,
+      );
+
+      ReactDOMClient.hydrateRoot(container, <App />);
+      await expect(async () => {
+        await waitForAll([]);
+      }).toErrorDev([
+        'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` string and, optionally, an `options` object with a valid `as` property. The `as` option encountered was "style"',
+      ]);
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <script type="module" src="browser plain" async="" />
+            <script type="module" src="browser default" async="" />
+            <script
+              type="module"
+              src="browser cors"
+              crossorigin="use-credentials"
+              async=""
+            />
+            <script
+              type="module"
+              src="browser integrity"
+              integrity="some hash"
+              async=""
+            />
+          </head>
+          <body>
+            <div id="container">
+              <script type="module" src="ssr plain" async="" />
+              <script type="module" src="ssr default" async="" />
+              <script
+                type="module"
+                src="ssr cors"
+                crossorigin="use-credentials"
+                async=""
+              />
+              <script
+                type="module"
+                src="ssr integrity"
+                integrity="some hash"
+                async=""
+              />
+              <div>hello</div>
+            </div>
+          </body>
+        </html>,
+      );
+    });
+
+    it('warns if you provide invalid arguments', async () => {
+      function App() {
+        ReactDOM.preinitModule();
+        ReactDOM.preinitModule(() => {});
+        ReactDOM.preinitModule('');
+        ReactDOM.preinitModule('1', true);
+        ReactDOM.preinitModule('2', {as: true});
+        return <div>hello</div>;
+      }
+      await expect(async () => {
+        await act(() => {
+          renderToPipeableStream(<App />).pipe(writable);
+        });
+      }).toErrorDev([
+        'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` string and, optionally, an `options` object with a valid `as` property. The `href` argument encountered was `undefined`',
+        'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` string and, optionally, an `options` object with a valid `as` property. The `href` argument encountered was something with type "function"',
+        'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` string and, optionally, an `options` object with a valid `as` property. The `href` argument encountered was an empty string',
+        'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` string and, optionally, an `options` object with a valid `as` property. The `options` argument encountered was something with type "boolean"',
+        'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` string and, optionally, an `options` object with a valid `as` property. The `as` option encountered was something with type "boolean"',
+      ]);
+      expect(getMeaningfulChildren(document.body)).toEqual(
+        <div id="container">
+          <div>hello</div>
+        </div>,
+      );
+
+      const root = ReactDOMClient.createRoot(
+        document.getElementById('container'),
+      );
+      root.render(<App />);
+      await expect(async () => {
+        await waitForAll([]);
+      }).toErrorDev([
+        'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` string and, optionally, an `options` object with a valid `as` property. The `href` argument encountered was `undefined`',
+        'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` string and, optionally, an `options` object with a valid `as` property. The `href` argument encountered was something with type "function"',
+        'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` string and, optionally, an `options` object with a valid `as` property. The `href` argument encountered was an empty string',
+        'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` string and, optionally, an `options` object with a valid `as` property. The `options` argument encountered was something with type "boolean"',
+        'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` string and, optionally, an `options` object with a valid `as` property. The `as` option encountered was something with type "boolean"',
+      ]);
+    });
+  });
+
   describe('Stylesheet Resources', () => {
     // @gate enableFloat
     it('treats link rel stylesheet elements as a stylesheet resource when it includes a precedence when server rendering', async () => {
@@ -5664,57 +6123,6 @@ body {
       ]);
     });
 
-    // @gate enableFloat
-    it('warns if you provide different props between <link re="stylesheet" .../> and ReactDOM.preinit(..., {as: "style"}) for the same `href`', async () => {
-      function App() {
-        ReactDOM.preinit('foo', {as: 'style'});
-        return (
-          <html>
-            <body>
-              <link rel="stylesheet" href="foo" precedence="foo" media="all" />
-              hello
-            </body>
-          </html>
-        );
-      }
-      await expect(async () => {
-        await act(() => {
-          const {pipe} = renderToPipeableStream(<App />);
-          pipe(writable);
-        });
-      }).toErrorDev([
-        'Warning: React encountered a <link rel="stylesheet" precedence="foo" href="foo" .../> with props that conflict with the options provided to `ReactDOM.preinit("foo", { as: "style", ... })`. React will use the first props or preinitialization options encountered when rendering a hoistable stylesheet with a particular `href` and will ignore any newer props or options. The first instance of this stylesheet resource was created using the `ReactDOM.preinit()` function. Please note, `ReactDOM.preinit()` is modeled off of module import assertions capabilities and does not support arbitrary props. If you need to have props not included with the preinit options you will need to rely on rendering <link> tags only.\n  "media" prop value: "all", option not available with ReactDOM.preinit()\n  "precedence" prop value: "foo", missing from options',
-      ]);
-    });
-
-    // @gate enableFloat
-    it('warns if you provide different props between two <link re="stylesheet" .../> that share the same `href`', async () => {
-      function App() {
-        return (
-          <html>
-            <body>
-              <link rel="stylesheet" href="foo" precedence="foo" media="all" />
-              <link
-                rel="stylesheet"
-                href="foo"
-                precedence="bar"
-                data-extra="foo"
-              />
-              hello
-            </body>
-          </html>
-        );
-      }
-      await expect(async () => {
-        await act(() => {
-          const {pipe} = renderToPipeableStream(<App />);
-          pipe(writable);
-        });
-      }).toErrorDev([
-        'Warning: React encountered a <link rel="stylesheet" href="foo" .../> with a `precedence` prop that has props that conflict with another hoistable stylesheet with the same `href`. When using `precedence` with <link rel="stylsheet" .../> the props from the first encountered instance will be used and props from later instances will be ignored. Update the props on either <link rel="stylesheet" .../> instance so they agree.\n  "media" missing for props, original value: "all"\n  "data-extra" prop value: "foo", missing from original props\n  "precedence" prop value: "bar", original value: "foo"',
-      ]);
-    });
-
     // @gate enableFloat
     it('will not block displaying a Suspense boundary on a stylesheet with media that does not match', async () => {
       await act(() => {
@@ -6492,67 +6900,6 @@ background-color: green;
         </div>,
       );
     });
-
-    // @gate enableFloat
-    it('warns if you provide different props between <script async={true} .../> and ReactDOM.preinit(..., {as: "script"}) for the same `href`', async () => {
-      function App() {
-        ReactDOM.preinit('foo', {as: 'script', integrity: 'some hash'});
-        return (
-          <html>
-            <body>
-              <script
-                async={true}
-                src="foo"
-                integrity="different hash"
-                data-foo=""
-              />
-              hello
-            </body>
-          </html>
-        );
-      }
-      await expect(async () => {
-        await act(() => {
-          const {pipe} = renderToPipeableStream(<App />);
-          pipe(writable);
-        });
-      }).toErrorDev([
-        'Warning: React encountered a <script async={true} src="foo" .../> with props that conflict with the options provided to `ReactDOM.preinit("foo", { as: "script", ... })`. React will use the first props or preinitialization options encountered when rendering a hoistable script with a particular `src` and will ignore any newer props or options. The first instance of this script resource was created using the `ReactDOM.preinit()` function. Please note, `ReactDOM.preinit()` is modeled off of module import assertions capabilities and does not support arbitrary props. If you need to have props not included with the preinit options you will need to rely on rendering <script> tags only.\n  "data-foo" prop value: an empty string, option not available with ReactDOM.preinit()\n  "integrity" prop value: "different hash", option value: "some hash"',
-      ]);
-    });
-
-    // @gate enableFloat
-    it('warns if you provide different props between two <script async={true} .../> that share the same `src`', async () => {
-      function App() {
-        return (
-          <html>
-            <body>
-              <script
-                async={true}
-                src="foo"
-                integrity="some hash"
-                data-foo=""
-              />
-              <script
-                async={true}
-                src="foo"
-                integrity="different hash"
-                data-bar=""
-              />
-              hello
-            </body>
-          </html>
-        );
-      }
-      await expect(async () => {
-        await act(() => {
-          const {pipe} = renderToPipeableStream(<App />);
-          pipe(writable);
-        });
-      }).toErrorDev([
-        'React encountered a <script async={true} src="foo" .../> that has props that conflict with another hoistable script with the same `src`. When rendering hoistable scripts (async scripts without any loading handlers) the props from the first encountered instance will be used and props from later instances will be ignored. Update the props on both <script async={true} .../> instance so they agree.\n  "data-foo" missing for props, original value: an empty string\n  "data-bar" prop value: an empty string, missing from original props\n  "integrity" prop value: "different hash", original value: "some hash"',
-      ]);
-    });
   });
 
   describe('Hoistables', () => {
diff --git a/packages/react-dom/src/__tests__/ReactDOMForm-test.js b/packages/react-dom/src/__tests__/ReactDOMForm-test.js
index 50ef3d0212875..97cbf1aa622ff 100644
--- a/packages/react-dom/src/__tests__/ReactDOMForm-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMForm-test.js
@@ -35,11 +35,13 @@ describe('ReactDOMForm', () => {
   let ReactDOMClient;
   let Scheduler;
   let assertLog;
+  let waitForThrow;
   let useState;
   let Suspense;
   let startTransition;
   let textCache;
   let useFormStatus;
+  let useFormState;
 
   beforeEach(() => {
     jest.resetModules();
@@ -49,10 +51,12 @@ describe('ReactDOMForm', () => {
     Scheduler = require('scheduler');
     act = require('internal-test-utils').act;
     assertLog = require('internal-test-utils').assertLog;
+    waitForThrow = require('internal-test-utils').waitForThrow;
     useState = React.useState;
     Suspense = React.Suspense;
     startTransition = React.startTransition;
     useFormStatus = ReactDOM.experimental_useFormStatus;
+    useFormState = ReactDOM.experimental_useFormState;
     container = document.createElement('div');
     document.body.appendChild(container);
 
@@ -922,4 +926,187 @@ describe('ReactDOMForm', () => {
     await act(() => resolveText('Wait'));
     assertLog(['Async action finished', 'No pending action']);
   });
+
+  // @gate enableFormActions
+  it('should error if submitting a form manually', async () => {
+    const ref = React.createRef();
+
+    let error = null;
+    let result = null;
+
+    function emulateForceSubmit(submitter) {
+      const form = submitter.form || submitter;
+      const action =
+        (submitter && submitter.getAttribute('formaction')) || form.action;
+      try {
+        if (!/\s*javascript:/i.test(action)) {
+          throw new Error('Navigate to: ' + action);
+        } else {
+          // eslint-disable-next-line no-new-func
+          result = Function(action.slice(11))();
+        }
+      } catch (x) {
+        error = x;
+      }
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(
+        <form
+          action={() => {}}
+          ref={ref}
+          onSubmit={e => {
+            e.preventDefault();
+            emulateForceSubmit(e.target);
+          }}>
+          <input type="text" name="foo" defaultValue="bar" />
+        </form>,
+      );
+    });
+
+    // This submits the form, which gets blocked and then resubmitted. It's a somewhat
+    // common idiom but we don't support this pattern unless it uses requestSubmit().
+    await submit(ref.current);
+    expect(result).toBe(null);
+    expect(error.message).toContain(
+      'A React form was unexpectedly submitted. If you called form.submit()',
+    );
+  });
+
+  // @gate enableFormActions
+  // @gate enableAsyncActions
+  test('useFormState updates state asynchronously and queues multiple actions', async () => {
+    let actionCounter = 0;
+    async function action(state, type) {
+      actionCounter++;
+
+      Scheduler.log(`Async action started [${actionCounter}]`);
+      await getText(`Wait [${actionCounter}]`);
+
+      switch (type) {
+        case 'increment':
+          return state + 1;
+        case 'decrement':
+          return state - 1;
+        default:
+          return state;
+      }
+    }
+
+    let dispatch;
+    function App() {
+      const [state, _dispatch] = useFormState(action, 0);
+      dispatch = _dispatch;
+      return <Text text={state} />;
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => root.render(<App />));
+    assertLog([0]);
+    expect(container.textContent).toBe('0');
+
+    await act(() => dispatch('increment'));
+    assertLog(['Async action started [1]']);
+    expect(container.textContent).toBe('0');
+
+    // Dispatch a few more actions. None of these will start until the previous
+    // one finishes.
+    await act(() => dispatch('increment'));
+    await act(() => dispatch('decrement'));
+    await act(() => dispatch('increment'));
+    assertLog([]);
+
+    // Each action starts as soon as the previous one finishes.
+    // NOTE: React does not render in between these actions because they all
+    // update the same queue, which means they get entangled together. This is
+    // intentional behavior.
+    await act(() => resolveText('Wait [1]'));
+    assertLog(['Async action started [2]']);
+    await act(() => resolveText('Wait [2]'));
+    assertLog(['Async action started [3]']);
+    await act(() => resolveText('Wait [3]'));
+    assertLog(['Async action started [4]']);
+    await act(() => resolveText('Wait [4]'));
+
+    // Finally the last action finishes and we can render the result.
+    assertLog([2]);
+    expect(container.textContent).toBe('2');
+  });
+
+  // @gate enableFormActions
+  // @gate enableAsyncActions
+  test('useFormState supports inline actions', async () => {
+    let increment;
+    function App({stepSize}) {
+      const [state, dispatch] = useFormState(async prevState => {
+        return prevState + stepSize;
+      }, 0);
+      increment = dispatch;
+      return <Text text={state} />;
+    }
+
+    // Initial render
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => root.render(<App stepSize={1} />));
+    assertLog([0]);
+
+    // Perform an action. This will increase the state by 1, as defined by the
+    // stepSize prop.
+    await act(() => increment());
+    assertLog([1]);
+
+    // Now increase the stepSize prop to 10. Subsequent steps will increase
+    // by this amount.
+    await act(() => root.render(<App stepSize={10} />));
+    assertLog([1]);
+
+    // Increment again. The state should increase by 10.
+    await act(() => increment());
+    assertLog([11]);
+  });
+
+  // @gate enableFormActions
+  // @gate enableAsyncActions
+  test('useFormState: dispatch throws if called during render', async () => {
+    function App() {
+      const [state, dispatch] = useFormState(async () => {}, 0);
+      dispatch();
+      return <Text text={state} />;
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(<App />);
+      await waitForThrow('Cannot update form state while rendering.');
+    });
+  });
+
+  // @gate enableFormActions
+  // @gate enableAsyncActions
+  test('useFormState: warns if action is not async', async () => {
+    let dispatch;
+    function App() {
+      const [state, _dispatch] = useFormState(() => {}, 0);
+      dispatch = _dispatch;
+      return <Text text={state} />;
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(<App />);
+    });
+    assertLog([0]);
+
+    expect(() => {
+      // This throws because React expects the action to return a promise.
+      expect(() => dispatch()).toThrow('Cannot read properties of undefined');
+    }).toErrorDev(
+      [
+        // In dev we also log a warning.
+        'The action passed to useFormState must be an async function',
+      ],
+      {withoutStack: true},
+    );
+  });
 });
diff --git a/packages/react-dom/src/__tests__/ReactDOMInput-test.js b/packages/react-dom/src/__tests__/ReactDOMInput-test.js
index 0f02d928c770b..3e984b9efc18c 100644
--- a/packages/react-dom/src/__tests__/ReactDOMInput-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMInput-test.js
@@ -36,6 +36,43 @@ describe('ReactDOMInput', () => {
     return copy.value === node.value;
   }
 
+  function isCheckedDirty(node) {
+    // Return the "dirty checked flag" as defined in the HTML spec.
+    if (node.checked !== node.defaultChecked) {
+      return true;
+    }
+    const copy = node.cloneNode();
+    copy.type = 'checkbox';
+    copy.defaultChecked = !copy.defaultChecked;
+    return copy.checked === node.checked;
+  }
+
+  function getTrackedAndCurrentInputValue(elem: HTMLElement): [mixed, mixed] {
+    const tracker = elem._valueTracker;
+    if (!tracker) {
+      throw new Error('No input tracker');
+    }
+    return [
+      tracker.getValue(),
+      elem.nodeName === 'INPUT' &&
+      (elem.type === 'checkbox' || elem.type === 'radio')
+        ? String(elem.checked)
+        : elem.value,
+    ];
+  }
+
+  function assertInputTrackingIsCurrent(parent) {
+    parent.querySelectorAll('input, textarea, select').forEach(input => {
+      const [trackedValue, currentValue] =
+        getTrackedAndCurrentInputValue(input);
+      if (trackedValue !== currentValue) {
+        throw new Error(
+          `Input ${input.outerHTML} is currently ${currentValue} but tracker thinks it's ${trackedValue}`,
+        );
+      }
+    });
+  }
+
   beforeEach(() => {
     jest.resetModules();
 
@@ -1119,6 +1156,7 @@ describe('ReactDOMInput', () => {
               name="fruit"
               checked={true}
               onChange={emptyFunction}
+              data-which="a"
             />
             A
             <input
@@ -1126,6 +1164,7 @@ describe('ReactDOMInput', () => {
               type="radio"
               name="fruit"
               onChange={emptyFunction}
+              data-which="b"
             />
             B
             <form>
@@ -1135,6 +1174,7 @@ describe('ReactDOMInput', () => {
                 name="fruit"
                 defaultChecked={true}
                 onChange={emptyFunction}
+                data-which="c"
               />
             </form>
           </div>
@@ -1162,6 +1202,11 @@ describe('ReactDOMInput', () => {
       expect(cNode.hasAttribute('checked')).toBe(true);
     }
 
+    expect(isCheckedDirty(aNode)).toBe(true);
+    expect(isCheckedDirty(bNode)).toBe(true);
+    expect(isCheckedDirty(cNode)).toBe(true);
+    assertInputTrackingIsCurrent(container);
+
     setUntrackedChecked.call(bNode, true);
     expect(aNode.checked).toBe(false);
     expect(cNode.checked).toBe(true);
@@ -1183,6 +1228,11 @@ describe('ReactDOMInput', () => {
     // The original state should have been restored
     expect(aNode.checked).toBe(true);
     expect(cNode.checked).toBe(true);
+
+    expect(isCheckedDirty(aNode)).toBe(true);
+    expect(isCheckedDirty(bNode)).toBe(true);
+    expect(isCheckedDirty(cNode)).toBe(true);
+    assertInputTrackingIsCurrent(container);
   });
 
   it('should check the correct radio when the selected name moves', () => {
@@ -1219,11 +1269,15 @@ describe('ReactDOMInput', () => {
     const stub = ReactDOM.render(<App />, container);
     const buttonNode = ReactDOM.findDOMNode(stub).childNodes[0];
     const firstRadioNode = ReactDOM.findDOMNode(stub).childNodes[1];
+    expect(isCheckedDirty(firstRadioNode)).toBe(true);
     expect(firstRadioNode.checked).toBe(false);
+    assertInputTrackingIsCurrent(container);
     dispatchEventOnNode(buttonNode, 'click');
     expect(firstRadioNode.checked).toBe(true);
+    assertInputTrackingIsCurrent(container);
     dispatchEventOnNode(buttonNode, 'click');
     expect(firstRadioNode.checked).toBe(false);
+    assertInputTrackingIsCurrent(container);
   });
 
   it("shouldn't get tricked by changing radio names, part 2", () => {
@@ -1246,12 +1300,13 @@ describe('ReactDOMInput', () => {
       </div>,
       container,
     );
-    expect(container.querySelector('input[name="a"][value="1"]').checked).toBe(
-      true,
-    );
-    expect(container.querySelector('input[name="a"][value="2"]').checked).toBe(
-      false,
-    );
+    const one = container.querySelector('input[name="a"][value="1"]');
+    const two = container.querySelector('input[name="a"][value="2"]');
+    expect(one.checked).toBe(true);
+    expect(two.checked).toBe(false);
+    expect(isCheckedDirty(one)).toBe(true);
+    expect(isCheckedDirty(two)).toBe(true);
+    assertInputTrackingIsCurrent(container);
 
     ReactDOM.render(
       <div>
@@ -1272,12 +1327,11 @@ describe('ReactDOMInput', () => {
       </div>,
       container,
     );
-    expect(container.querySelector('input[name="a"][value="1"]').checked).toBe(
-      true,
-    );
-    expect(container.querySelector('input[name="b"][value="2"]').checked).toBe(
-      true,
-    );
+    expect(one.checked).toBe(true);
+    expect(two.checked).toBe(true);
+    expect(isCheckedDirty(one)).toBe(true);
+    expect(isCheckedDirty(two)).toBe(true);
+    assertInputTrackingIsCurrent(container);
   });
 
   it('should control radio buttons if the tree updates during render', () => {
@@ -1339,6 +1393,9 @@ describe('ReactDOMInput', () => {
 
     expect(aNode.checked).toBe(false);
     expect(bNode.checked).toBe(true);
+    expect(isCheckedDirty(aNode)).toBe(true);
+    expect(isCheckedDirty(bNode)).toBe(true);
+    assertInputTrackingIsCurrent(container);
 
     setUntrackedChecked.call(aNode, true);
     // This next line isn't necessary in a proper browser environment, but
@@ -1352,6 +1409,9 @@ describe('ReactDOMInput', () => {
     // The original state should have been restored
     expect(aNode.checked).toBe(false);
     expect(bNode.checked).toBe(true);
+    expect(isCheckedDirty(aNode)).toBe(true);
+    expect(isCheckedDirty(bNode)).toBe(true);
+    assertInputTrackingIsCurrent(container);
   });
 
   it('should warn with value and no onChange handler and readOnly specified', () => {
@@ -1734,6 +1794,8 @@ describe('ReactDOMInput', () => {
       <input type="radio" checked={false} onChange={() => null} />,
       container,
     );
+    const input = container.querySelector('input');
+    expect(isCheckedDirty(input)).toBe(true);
     ReactDOM.render(
       <input
         type="radio"
@@ -1744,6 +1806,8 @@ describe('ReactDOMInput', () => {
       />,
       container,
     );
+    expect(isCheckedDirty(input)).toBe(true);
+    assertInputTrackingIsCurrent(container);
   });
 
   it('should warn if radio checked false changes to become uncontrolled', () => {
diff --git a/packages/react-dom/src/__tests__/ReactDOMLegacyFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMLegacyFloat-test.js
new file mode 100644
index 0000000000000..94876e41641f9
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMLegacyFloat-test.js
@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ * @jest-environment ./scripts/jest/ReactDOMServerIntegrationEnvironment
+ */
+
+'use strict';
+
+let React;
+let ReactDOMFizzServer;
+
+describe('ReactDOMFloat', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactDOMFizzServer = require('react-dom/server');
+  });
+
+  // fixes #27177
+  // @gate enableFloat
+  it('does not hoist above the <html> tag', async () => {
+    const result = ReactDOMFizzServer.renderToString(
+      <html>
+        <head>
+          <script src="foo" />
+          <meta charSet="utf-8" />
+          <title>title</title>
+        </head>
+      </html>,
+    );
+
+    expect(result).toEqual(
+      '<html><head><meta charSet="utf-8"/><title>title</title><script src="foo"></script></head></html>',
+    );
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js b/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
index 8dfe93b9b534a..f574b16040b68 100644
--- a/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
+++ b/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
@@ -732,4 +732,23 @@ describe('ReactDOMServerHydration', () => {
     expect(c.current.name).toBe('c');
     expect(c.current.value).toBe('C');
   });
+
+  // @gate enableFormActions
+  it('allows rendering extra hidden inputs immediately before a text instance', async () => {
+    const element = document.createElement('div');
+    element.innerHTML =
+      '<button><input name="a" value="A" type="hidden" />Click <!-- -->me</button>';
+    const button = element.firstChild;
+    const ref = React.createRef();
+    const extraText = 'me';
+
+    await act(() => {
+      ReactDOMClient.hydrateRoot(
+        element,
+        <button ref={ref}>Click {extraText}</button>,
+      );
+    });
+
+    expect(ref.current).toBe(button);
+  });
 });
diff --git a/packages/react-dom/src/__tests__/react-dom-server-rendering-stub-test.js b/packages/react-dom/src/__tests__/react-dom-server-rendering-stub-test.js
index 4a805d7edb1bc..315d87ed8599f 100644
--- a/packages/react-dom/src/__tests__/react-dom-server-rendering-stub-test.js
+++ b/packages/react-dom/src/__tests__/react-dom-server-rendering-stub-test.js
@@ -39,15 +39,17 @@ describe('react-dom-server-rendering-stub', () => {
   });
 
   // @gate enableFloat
-  it('provides preload and preinit exports', async () => {
+  it('provides preload, preloadModule, preinit, and preinitModule exports', async () => {
     function App() {
       ReactDOM.preload('foo', {as: 'style'});
+      ReactDOM.preloadModule('foomodule');
       ReactDOM.preinit('bar', {as: 'style'});
+      ReactDOM.preinitModule('barmodule');
       return <div>foo</div>;
     }
     const html = ReactDOMFizzServer.renderToString(<App />);
     expect(html).toEqual(
-      '<link rel="stylesheet" href="bar" data-precedence="default"/><link rel="preload" as="style" href="foo"/><div>foo</div>',
+      '<link rel="stylesheet" href="bar" data-precedence="default"/><script src="barmodule" type="module" async=""></script><link rel="preload" href="foo" as="style"/><link rel="modulepreload" href="foomodule"/><div>foo</div>',
     );
   });
 
diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js
index 734dace347a32..f2e4c626070f4 100644
--- a/packages/react-dom/src/client/ReactDOM.js
+++ b/packages/react-dom/src/client/ReactDOM.js
@@ -59,9 +59,14 @@ export {
   prefetchDNS,
   preconnect,
   preload,
+  preloadModule,
   preinit,
+  preinitModule,
 } from '../shared/ReactDOMFloat';
-export {useFormStatus} from 'react-dom-bindings/src/shared/ReactDOMFormActions';
+export {
+  useFormStatus,
+  useFormState,
+} from 'react-dom-bindings/src/shared/ReactDOMFormActions';
 
 if (__DEV__) {
   if (
diff --git a/packages/react-dom/src/client/ReactDOMLegacy.js b/packages/react-dom/src/client/ReactDOMLegacy.js
index b8b1fc43239a9..ce0c9ff609ebd 100644
--- a/packages/react-dom/src/client/ReactDOMLegacy.js
+++ b/packages/react-dom/src/client/ReactDOMLegacy.js
@@ -142,6 +142,7 @@ function legacyCreateRootFromDOMContainer(
       noopOnRecoverableError,
       // TODO(luna) Support hydration later
       null,
+      null,
     );
     container._reactRootContainer = root;
     markContainerAsRoot(root.current, container);
diff --git a/packages/react-dom/src/client/ReactDOMRoot.js b/packages/react-dom/src/client/ReactDOMRoot.js
index b55b09eb2124d..3ce35d4a20e51 100644
--- a/packages/react-dom/src/client/ReactDOMRoot.js
+++ b/packages/react-dom/src/client/ReactDOMRoot.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import type {ReactNodeList} from 'shared/ReactTypes';
+import type {ReactNodeList, ReactFormState} from 'shared/ReactTypes';
 import type {
   FiberRoot,
   TransitionTracingCallbacks,
@@ -21,6 +21,8 @@ import {
   enableHostSingletons,
   allowConcurrentByDefault,
   disableCommentsAsDOMContainers,
+  enableAsyncActions,
+  enableFormActions,
 } from 'shared/ReactFeatureFlags';
 
 import ReactDOMSharedInternals from '../ReactDOMSharedInternals';
@@ -55,6 +57,7 @@ export type HydrateRootOptions = {
   unstable_transitionCallbacks?: TransitionTracingCallbacks,
   identifierPrefix?: string,
   onRecoverableError?: (error: mixed) => void,
+  experimental_formState?: ReactFormState<any, any> | null,
   ...
 };
 
@@ -302,6 +305,7 @@ export function hydrateRoot(
   let identifierPrefix = '';
   let onRecoverableError = defaultOnRecoverableError;
   let transitionCallbacks = null;
+  let formState = null;
   if (options !== null && options !== undefined) {
     if (options.unstable_strictMode === true) {
       isStrictMode = true;
@@ -321,6 +325,11 @@ export function hydrateRoot(
     if (options.unstable_transitionCallbacks !== undefined) {
       transitionCallbacks = options.unstable_transitionCallbacks;
     }
+    if (enableAsyncActions && enableFormActions) {
+      if (options.experimental_formState !== undefined) {
+        formState = options.experimental_formState;
+      }
+    }
   }
 
   const root = createHydrationContainer(
@@ -334,6 +343,7 @@ export function hydrateRoot(
     identifierPrefix,
     onRecoverableError,
     transitionCallbacks,
+    formState,
   );
   markContainerAsRoot(root.current, container);
   Dispatcher.current = ReactDOMClientDispatcher;
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
index 6bda14046fadb..8b0d915fc3272 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
@@ -7,21 +7,26 @@
  * @flow
  */
 
-import type {ReactNodeList} from 'shared/ReactTypes';
+import type {PostponedState} from 'react-server/src/ReactFizzServer';
+import type {ReactNodeList, ReactFormState} from 'shared/ReactTypes';
 import type {BootstrapScriptDescriptor} from 'react-dom-bindings/src/server/ReactFizzConfigDOM';
+import type {ImportMap} from '../shared/ReactDOMTypes';
 
 import ReactVersion from 'shared/ReactVersion';
 
 import {
   createRequest,
+  resumeRequest,
   startWork,
   startFlowing,
+  stopFlowing,
   abort,
 } from 'react-server/src/ReactFizzServer';
 
 import {
-  createResources,
-  createResponseState,
+  createResumableState,
+  createRenderState,
+  resumeRenderState,
   createRootFormatContext,
 } from 'react-dom-bindings/src/server/ReactFizzConfigDOM';
 
@@ -35,6 +40,17 @@ type Options = {
   progressiveChunkSize?: number,
   signal?: AbortSignal,
   onError?: (error: mixed) => ?string,
+  onPostpone?: (reason: string) => void,
+  unstable_externalRuntimeSrc?: string | BootstrapScriptDescriptor,
+  importMap?: ImportMap,
+  experimental_formState?: ReactFormState<any, any> | null,
+};
+
+type ResumeOptions = {
+  nonce?: string,
+  signal?: AbortSignal,
+  onError?: (error: mixed) => ?string,
+  onPostpone?: (reason: string) => void,
   unstable_externalRuntimeSrc?: string | BootstrapScriptDescriptor,
 };
 
@@ -63,6 +79,7 @@ function renderToReadableStream(
             startFlowing(request, controller);
           },
           cancel: (reason): ?Promise<void> => {
+            stopFlowing(request);
             abort(request);
           },
         },
@@ -80,18 +97,21 @@ function renderToReadableStream(
       allReady.catch(() => {});
       reject(error);
     }
-    const resources = createResources();
+    const resumableState = createResumableState(
+      options ? options.identifierPrefix : undefined,
+      options ? options.unstable_externalRuntimeSrc : undefined,
+    );
     const request = createRequest(
       children,
-      resources,
-      createResponseState(
-        resources,
-        options ? options.identifierPrefix : undefined,
+      resumableState,
+      createRenderState(
+        resumableState,
         options ? options.nonce : undefined,
         options ? options.bootstrapScriptContent : undefined,
         options ? options.bootstrapScripts : undefined,
         options ? options.bootstrapModules : undefined,
         options ? options.unstable_externalRuntimeSrc : undefined,
+        options ? options.importMap : undefined,
       ),
       createRootFormatContext(options ? options.namespaceURI : undefined),
       options ? options.progressiveChunkSize : undefined,
@@ -100,6 +120,77 @@ function renderToReadableStream(
       onShellReady,
       onShellError,
       onFatalError,
+      options ? options.onPostpone : undefined,
+      options ? options.experimental_formState : undefined,
+    );
+    if (options && options.signal) {
+      const signal = options.signal;
+      if (signal.aborted) {
+        abort(request, (signal: any).reason);
+      } else {
+        const listener = () => {
+          abort(request, (signal: any).reason);
+          signal.removeEventListener('abort', listener);
+        };
+        signal.addEventListener('abort', listener);
+      }
+    }
+    startWork(request);
+  });
+}
+
+function resume(
+  children: ReactNodeList,
+  postponedState: PostponedState,
+  options?: ResumeOptions,
+): Promise<ReactDOMServerReadableStream> {
+  return new Promise((resolve, reject) => {
+    let onFatalError;
+    let onAllReady;
+    const allReady = new Promise<void>((res, rej) => {
+      onAllReady = res;
+      onFatalError = rej;
+    });
+
+    function onShellReady() {
+      const stream: ReactDOMServerReadableStream = (new ReadableStream(
+        {
+          type: 'bytes',
+          pull: (controller): ?Promise<void> => {
+            startFlowing(request, controller);
+          },
+          cancel: (reason): ?Promise<void> => {
+            stopFlowing(request);
+            abort(request);
+          },
+        },
+        // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
+        {highWaterMark: 0},
+      ): any);
+      // TODO: Move to sub-classing ReadableStream.
+      stream.allReady = allReady;
+      resolve(stream);
+    }
+    function onShellError(error: mixed) {
+      // If the shell errors the caller of `renderToReadableStream` won't have access to `allReady`.
+      // However, `allReady` will be rejected by `onFatalError` as well.
+      // So we need to catch the duplicate, uncatchable fatal error in `allReady` to prevent a `UnhandledPromiseRejection`.
+      allReady.catch(() => {});
+      reject(error);
+    }
+    const request = resumeRequest(
+      children,
+      postponedState,
+      resumeRenderState(
+        postponedState.resumableState,
+        options ? options.nonce : undefined,
+      ),
+      options ? options.onError : undefined,
+      onAllReady,
+      onShellReady,
+      onShellError,
+      onFatalError,
+      options ? options.onPostpone : undefined,
     );
     if (options && options.signal) {
       const signal = options.signal;
@@ -117,4 +208,4 @@ function renderToReadableStream(
   });
 }
 
-export {renderToReadableStream, ReactVersion as version};
+export {renderToReadableStream, resume, ReactVersion as version};
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerBun.js b/packages/react-dom/src/server/ReactDOMFizzServerBun.js
index 73dc8cfc3b0f8..029f4cb42d8bf 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerBun.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerBun.js
@@ -7,8 +7,9 @@
  * @flow
  */
 
-import type {ReactNodeList} from 'shared/ReactTypes';
+import type {ReactNodeList, ReactFormState} from 'shared/ReactTypes';
 import type {BootstrapScriptDescriptor} from 'react-dom-bindings/src/server/ReactFizzConfigDOM';
+import type {ImportMap} from '../shared/ReactDOMTypes';
 
 import ReactVersion from 'shared/ReactVersion';
 
@@ -16,12 +17,13 @@ import {
   createRequest,
   startWork,
   startFlowing,
+  stopFlowing,
   abort,
 } from 'react-server/src/ReactFizzServer';
 
 import {
-  createResources,
-  createResponseState,
+  createResumableState,
+  createRenderState,
   createRootFormatContext,
 } from 'react-dom-bindings/src/server/ReactFizzConfigDOM';
 
@@ -35,7 +37,10 @@ type Options = {
   progressiveChunkSize?: number,
   signal?: AbortSignal,
   onError?: (error: mixed) => ?string,
+  onPostpone?: (reason: string) => void,
   unstable_externalRuntimeSrc?: string | BootstrapScriptDescriptor,
+  importMap?: ImportMap,
+  experimental_formState?: ReactFormState<any, any> | null,
 };
 
 // TODO: Move to sub-classing ReadableStream.
@@ -64,6 +69,7 @@ function renderToReadableStream(
             startFlowing(request, controller);
           },
           cancel: (reason): ?Promise<void> => {
+            stopFlowing(request);
             abort(request);
           },
         },
@@ -81,18 +87,21 @@ function renderToReadableStream(
       allReady.catch(() => {});
       reject(error);
     }
-    const resources = createResources();
+    const resumableState = createResumableState(
+      options ? options.identifierPrefix : undefined,
+      options ? options.unstable_externalRuntimeSrc : undefined,
+    );
     const request = createRequest(
       children,
-      resources,
-      createResponseState(
-        resources,
-        options ? options.identifierPrefix : undefined,
+      resumableState,
+      createRenderState(
+        resumableState,
         options ? options.nonce : undefined,
         options ? options.bootstrapScriptContent : undefined,
         options ? options.bootstrapScripts : undefined,
         options ? options.bootstrapModules : undefined,
         options ? options.unstable_externalRuntimeSrc : undefined,
+        options ? options.importMap : undefined,
       ),
       createRootFormatContext(options ? options.namespaceURI : undefined),
       options ? options.progressiveChunkSize : undefined,
@@ -101,6 +110,8 @@ function renderToReadableStream(
       onShellReady,
       onShellError,
       onFatalError,
+      options ? options.onPostpone : undefined,
+      options ? options.experimental_formState : undefined,
     );
     if (options && options.signal) {
       const signal = options.signal;
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerEdge.js b/packages/react-dom/src/server/ReactDOMFizzServerEdge.js
index 6bda14046fadb..8b0d915fc3272 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerEdge.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerEdge.js
@@ -7,21 +7,26 @@
  * @flow
  */
 
-import type {ReactNodeList} from 'shared/ReactTypes';
+import type {PostponedState} from 'react-server/src/ReactFizzServer';
+import type {ReactNodeList, ReactFormState} from 'shared/ReactTypes';
 import type {BootstrapScriptDescriptor} from 'react-dom-bindings/src/server/ReactFizzConfigDOM';
+import type {ImportMap} from '../shared/ReactDOMTypes';
 
 import ReactVersion from 'shared/ReactVersion';
 
 import {
   createRequest,
+  resumeRequest,
   startWork,
   startFlowing,
+  stopFlowing,
   abort,
 } from 'react-server/src/ReactFizzServer';
 
 import {
-  createResources,
-  createResponseState,
+  createResumableState,
+  createRenderState,
+  resumeRenderState,
   createRootFormatContext,
 } from 'react-dom-bindings/src/server/ReactFizzConfigDOM';
 
@@ -35,6 +40,17 @@ type Options = {
   progressiveChunkSize?: number,
   signal?: AbortSignal,
   onError?: (error: mixed) => ?string,
+  onPostpone?: (reason: string) => void,
+  unstable_externalRuntimeSrc?: string | BootstrapScriptDescriptor,
+  importMap?: ImportMap,
+  experimental_formState?: ReactFormState<any, any> | null,
+};
+
+type ResumeOptions = {
+  nonce?: string,
+  signal?: AbortSignal,
+  onError?: (error: mixed) => ?string,
+  onPostpone?: (reason: string) => void,
   unstable_externalRuntimeSrc?: string | BootstrapScriptDescriptor,
 };
 
@@ -63,6 +79,7 @@ function renderToReadableStream(
             startFlowing(request, controller);
           },
           cancel: (reason): ?Promise<void> => {
+            stopFlowing(request);
             abort(request);
           },
         },
@@ -80,18 +97,21 @@ function renderToReadableStream(
       allReady.catch(() => {});
       reject(error);
     }
-    const resources = createResources();
+    const resumableState = createResumableState(
+      options ? options.identifierPrefix : undefined,
+      options ? options.unstable_externalRuntimeSrc : undefined,
+    );
     const request = createRequest(
       children,
-      resources,
-      createResponseState(
-        resources,
-        options ? options.identifierPrefix : undefined,
+      resumableState,
+      createRenderState(
+        resumableState,
         options ? options.nonce : undefined,
         options ? options.bootstrapScriptContent : undefined,
         options ? options.bootstrapScripts : undefined,
         options ? options.bootstrapModules : undefined,
         options ? options.unstable_externalRuntimeSrc : undefined,
+        options ? options.importMap : undefined,
       ),
       createRootFormatContext(options ? options.namespaceURI : undefined),
       options ? options.progressiveChunkSize : undefined,
@@ -100,6 +120,77 @@ function renderToReadableStream(
       onShellReady,
       onShellError,
       onFatalError,
+      options ? options.onPostpone : undefined,
+      options ? options.experimental_formState : undefined,
+    );
+    if (options && options.signal) {
+      const signal = options.signal;
+      if (signal.aborted) {
+        abort(request, (signal: any).reason);
+      } else {
+        const listener = () => {
+          abort(request, (signal: any).reason);
+          signal.removeEventListener('abort', listener);
+        };
+        signal.addEventListener('abort', listener);
+      }
+    }
+    startWork(request);
+  });
+}
+
+function resume(
+  children: ReactNodeList,
+  postponedState: PostponedState,
+  options?: ResumeOptions,
+): Promise<ReactDOMServerReadableStream> {
+  return new Promise((resolve, reject) => {
+    let onFatalError;
+    let onAllReady;
+    const allReady = new Promise<void>((res, rej) => {
+      onAllReady = res;
+      onFatalError = rej;
+    });
+
+    function onShellReady() {
+      const stream: ReactDOMServerReadableStream = (new ReadableStream(
+        {
+          type: 'bytes',
+          pull: (controller): ?Promise<void> => {
+            startFlowing(request, controller);
+          },
+          cancel: (reason): ?Promise<void> => {
+            stopFlowing(request);
+            abort(request);
+          },
+        },
+        // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
+        {highWaterMark: 0},
+      ): any);
+      // TODO: Move to sub-classing ReadableStream.
+      stream.allReady = allReady;
+      resolve(stream);
+    }
+    function onShellError(error: mixed) {
+      // If the shell errors the caller of `renderToReadableStream` won't have access to `allReady`.
+      // However, `allReady` will be rejected by `onFatalError` as well.
+      // So we need to catch the duplicate, uncatchable fatal error in `allReady` to prevent a `UnhandledPromiseRejection`.
+      allReady.catch(() => {});
+      reject(error);
+    }
+    const request = resumeRequest(
+      children,
+      postponedState,
+      resumeRenderState(
+        postponedState.resumableState,
+        options ? options.nonce : undefined,
+      ),
+      options ? options.onError : undefined,
+      onAllReady,
+      onShellReady,
+      onShellError,
+      onFatalError,
+      options ? options.onPostpone : undefined,
     );
     if (options && options.signal) {
       const signal = options.signal;
@@ -117,4 +208,4 @@ function renderToReadableStream(
   });
 }
 
-export {renderToReadableStream, ReactVersion as version};
+export {renderToReadableStream, resume, ReactVersion as version};
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerNode.js b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
index e1512dea07132..11e3eada2efb5 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerNode.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
@@ -7,24 +7,28 @@
  * @flow
  */
 
-import type {Request} from 'react-server/src/ReactFizzServer';
-import type {ReactNodeList} from 'shared/ReactTypes';
+import type {Request, PostponedState} from 'react-server/src/ReactFizzServer';
+import type {ReactNodeList, ReactFormState} from 'shared/ReactTypes';
 import type {Writable} from 'stream';
 import type {BootstrapScriptDescriptor} from 'react-dom-bindings/src/server/ReactFizzConfigDOM';
 import type {Destination} from 'react-server/src/ReactServerStreamConfigNode';
+import type {ImportMap} from '../shared/ReactDOMTypes';
 
 import ReactVersion from 'shared/ReactVersion';
 
 import {
   createRequest,
+  resumeRequest,
   startWork,
   startFlowing,
+  stopFlowing,
   abort,
 } from 'react-server/src/ReactFizzServer';
 
 import {
-  createResources,
-  createResponseState,
+  createResumableState,
+  createRenderState,
+  resumeRenderState,
   createRootFormatContext,
 } from 'react-dom-bindings/src/server/ReactFizzConfigDOM';
 
@@ -32,9 +36,12 @@ function createDrainHandler(destination: Destination, request: Request) {
   return () => startFlowing(request, destination);
 }
 
-function createAbortHandler(request: Request, reason: string) {
-  // eslint-disable-next-line react-internal/prod-error-codes
-  return () => abort(request, new Error(reason));
+function createCancelHandler(request: Request, reason: string) {
+  return () => {
+    stopFlowing(request);
+    // eslint-disable-next-line react-internal/prod-error-codes
+    abort(request, new Error(reason));
+  };
 }
 
 type Options = {
@@ -49,7 +56,19 @@ type Options = {
   onShellError?: (error: mixed) => void,
   onAllReady?: () => void,
   onError?: (error: mixed) => ?string,
+  onPostpone?: (reason: string) => void,
   unstable_externalRuntimeSrc?: string | BootstrapScriptDescriptor,
+  importMap?: ImportMap,
+  experimental_formState?: ReactFormState<any, any> | null,
+};
+
+type ResumeOptions = {
+  nonce?: string,
+  onShellReady?: () => void,
+  onShellError?: (error: mixed) => void,
+  onAllReady?: () => void,
+  onError?: (error: mixed) => ?string,
+  onPostpone?: (reason: string) => void,
 };
 
 type PipeableStream = {
@@ -60,18 +79,21 @@ type PipeableStream = {
 };
 
 function createRequestImpl(children: ReactNodeList, options: void | Options) {
-  const resources = createResources();
+  const resumableState = createResumableState(
+    options ? options.identifierPrefix : undefined,
+    options ? options.unstable_externalRuntimeSrc : undefined,
+  );
   return createRequest(
     children,
-    resources,
-    createResponseState(
-      resources,
-      options ? options.identifierPrefix : undefined,
+    resumableState,
+    createRenderState(
+      resumableState,
       options ? options.nonce : undefined,
       options ? options.bootstrapScriptContent : undefined,
       options ? options.bootstrapScripts : undefined,
       options ? options.bootstrapModules : undefined,
       options ? options.unstable_externalRuntimeSrc : undefined,
+      options ? options.importMap : undefined,
     ),
     createRootFormatContext(options ? options.namespaceURI : undefined),
     options ? options.progressiveChunkSize : undefined,
@@ -80,6 +102,8 @@ function createRequestImpl(children: ReactNodeList, options: void | Options) {
     options ? options.onShellReady : undefined,
     options ? options.onShellError : undefined,
     undefined,
+    options ? options.onPostpone : undefined,
+    options ? options.experimental_formState : undefined,
   );
 }
 
@@ -102,14 +126,14 @@ function renderToPipeableStream(
       destination.on('drain', createDrainHandler(destination, request));
       destination.on(
         'error',
-        createAbortHandler(
+        createCancelHandler(
           request,
           'The destination stream errored while writing data.',
         ),
       );
       destination.on(
         'close',
-        createAbortHandler(request, 'The destination stream closed early.'),
+        createCancelHandler(request, 'The destination stream closed early.'),
       );
       return destination;
     },
@@ -119,4 +143,66 @@ function renderToPipeableStream(
   };
 }
 
-export {renderToPipeableStream, ReactVersion as version};
+function resumeRequestImpl(
+  children: ReactNodeList,
+  postponedState: PostponedState,
+  options: void | ResumeOptions,
+) {
+  return resumeRequest(
+    children,
+    postponedState,
+    resumeRenderState(
+      postponedState.resumableState,
+      options ? options.nonce : undefined,
+    ),
+    options ? options.onError : undefined,
+    options ? options.onAllReady : undefined,
+    options ? options.onShellReady : undefined,
+    options ? options.onShellError : undefined,
+    undefined,
+    options ? options.onPostpone : undefined,
+  );
+}
+
+function resumeToPipeableStream(
+  children: ReactNodeList,
+  postponedState: PostponedState,
+  options?: ResumeOptions,
+): PipeableStream {
+  const request = resumeRequestImpl(children, postponedState, options);
+  let hasStartedFlowing = false;
+  startWork(request);
+  return {
+    pipe<T: Writable>(destination: T): T {
+      if (hasStartedFlowing) {
+        throw new Error(
+          'React currently only supports piping to one writable stream.',
+        );
+      }
+      hasStartedFlowing = true;
+      startFlowing(request, destination);
+      destination.on('drain', createDrainHandler(destination, request));
+      destination.on(
+        'error',
+        createCancelHandler(
+          request,
+          'The destination stream errored while writing data.',
+        ),
+      );
+      destination.on(
+        'close',
+        createCancelHandler(request, 'The destination stream closed early.'),
+      );
+      return destination;
+    },
+    abort(reason: mixed) {
+      abort(request, reason);
+    },
+  };
+}
+
+export {
+  renderToPipeableStream,
+  resumeToPipeableStream,
+  ReactVersion as version,
+};
diff --git a/packages/react-dom/src/server/ReactDOMFizzStaticBrowser.js b/packages/react-dom/src/server/ReactDOMFizzStaticBrowser.js
index 5c9b637649591..94e7c32d22b8e 100644
--- a/packages/react-dom/src/server/ReactDOMFizzStaticBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMFizzStaticBrowser.js
@@ -9,19 +9,23 @@
 
 import type {ReactNodeList} from 'shared/ReactTypes';
 import type {BootstrapScriptDescriptor} from 'react-dom-bindings/src/server/ReactFizzConfigDOM';
+import type {PostponedState} from 'react-server/src/ReactFizzServer';
+import type {ImportMap} from '../shared/ReactDOMTypes';
 
 import ReactVersion from 'shared/ReactVersion';
 
 import {
-  createRequest,
+  createPrerenderRequest,
   startWork,
   startFlowing,
+  stopFlowing,
   abort,
+  getPostponedState,
 } from 'react-server/src/ReactFizzServer';
 
 import {
-  createResources,
-  createResponseState,
+  createResumableState,
+  createRenderState,
   createRootFormatContext,
 } from 'react-dom-bindings/src/server/ReactFizzConfigDOM';
 
@@ -34,10 +38,13 @@ type Options = {
   progressiveChunkSize?: number,
   signal?: AbortSignal,
   onError?: (error: mixed) => ?string,
+  onPostpone?: (reason: string) => void,
   unstable_externalRuntimeSrc?: string | BootstrapScriptDescriptor,
+  importMap?: ImportMap,
 };
 
 type StaticResult = {
+  postponed: null | PostponedState,
   prelude: ReadableStream,
 };
 
@@ -55,28 +62,36 @@ function prerender(
           pull: (controller): ?Promise<void> => {
             startFlowing(request, controller);
           },
+          cancel: (reason): ?Promise<void> => {
+            stopFlowing(request);
+            abort(request);
+          },
         },
         // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
         {highWaterMark: 0},
       );
 
       const result = {
+        postponed: getPostponedState(request),
         prelude: stream,
       };
       resolve(result);
     }
-    const resources = createResources();
-    const request = createRequest(
+    const resources = createResumableState(
+      options ? options.identifierPrefix : undefined,
+      options ? options.unstable_externalRuntimeSrc : undefined,
+    );
+    const request = createPrerenderRequest(
       children,
       resources,
-      createResponseState(
+      createRenderState(
         resources,
-        options ? options.identifierPrefix : undefined,
-        undefined,
+        undefined, // nonce is not compatible with prerendered bootstrap scripts
         options ? options.bootstrapScriptContent : undefined,
         options ? options.bootstrapScripts : undefined,
         options ? options.bootstrapModules : undefined,
         options ? options.unstable_externalRuntimeSrc : undefined,
+        options ? options.importMap : undefined,
       ),
       createRootFormatContext(options ? options.namespaceURI : undefined),
       options ? options.progressiveChunkSize : undefined,
@@ -85,6 +100,7 @@ function prerender(
       undefined,
       undefined,
       onFatalError,
+      options ? options.onPostpone : undefined,
     );
     if (options && options.signal) {
       const signal = options.signal;
diff --git a/packages/react-dom/src/server/ReactDOMFizzStaticEdge.js b/packages/react-dom/src/server/ReactDOMFizzStaticEdge.js
index 5c9b637649591..94e7c32d22b8e 100644
--- a/packages/react-dom/src/server/ReactDOMFizzStaticEdge.js
+++ b/packages/react-dom/src/server/ReactDOMFizzStaticEdge.js
@@ -9,19 +9,23 @@
 
 import type {ReactNodeList} from 'shared/ReactTypes';
 import type {BootstrapScriptDescriptor} from 'react-dom-bindings/src/server/ReactFizzConfigDOM';
+import type {PostponedState} from 'react-server/src/ReactFizzServer';
+import type {ImportMap} from '../shared/ReactDOMTypes';
 
 import ReactVersion from 'shared/ReactVersion';
 
 import {
-  createRequest,
+  createPrerenderRequest,
   startWork,
   startFlowing,
+  stopFlowing,
   abort,
+  getPostponedState,
 } from 'react-server/src/ReactFizzServer';
 
 import {
-  createResources,
-  createResponseState,
+  createResumableState,
+  createRenderState,
   createRootFormatContext,
 } from 'react-dom-bindings/src/server/ReactFizzConfigDOM';
 
@@ -34,10 +38,13 @@ type Options = {
   progressiveChunkSize?: number,
   signal?: AbortSignal,
   onError?: (error: mixed) => ?string,
+  onPostpone?: (reason: string) => void,
   unstable_externalRuntimeSrc?: string | BootstrapScriptDescriptor,
+  importMap?: ImportMap,
 };
 
 type StaticResult = {
+  postponed: null | PostponedState,
   prelude: ReadableStream,
 };
 
@@ -55,28 +62,36 @@ function prerender(
           pull: (controller): ?Promise<void> => {
             startFlowing(request, controller);
           },
+          cancel: (reason): ?Promise<void> => {
+            stopFlowing(request);
+            abort(request);
+          },
         },
         // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
         {highWaterMark: 0},
       );
 
       const result = {
+        postponed: getPostponedState(request),
         prelude: stream,
       };
       resolve(result);
     }
-    const resources = createResources();
-    const request = createRequest(
+    const resources = createResumableState(
+      options ? options.identifierPrefix : undefined,
+      options ? options.unstable_externalRuntimeSrc : undefined,
+    );
+    const request = createPrerenderRequest(
       children,
       resources,
-      createResponseState(
+      createRenderState(
         resources,
-        options ? options.identifierPrefix : undefined,
-        undefined,
+        undefined, // nonce is not compatible with prerendered bootstrap scripts
         options ? options.bootstrapScriptContent : undefined,
         options ? options.bootstrapScripts : undefined,
         options ? options.bootstrapModules : undefined,
         options ? options.unstable_externalRuntimeSrc : undefined,
+        options ? options.importMap : undefined,
       ),
       createRootFormatContext(options ? options.namespaceURI : undefined),
       options ? options.progressiveChunkSize : undefined,
@@ -85,6 +100,7 @@ function prerender(
       undefined,
       undefined,
       onFatalError,
+      options ? options.onPostpone : undefined,
     );
     if (options && options.signal) {
       const signal = options.signal;
diff --git a/packages/react-dom/src/server/ReactDOMFizzStaticNode.js b/packages/react-dom/src/server/ReactDOMFizzStaticNode.js
index 156b947d8d751..4ac8afd9ce0d7 100644
--- a/packages/react-dom/src/server/ReactDOMFizzStaticNode.js
+++ b/packages/react-dom/src/server/ReactDOMFizzStaticNode.js
@@ -9,21 +9,24 @@
 
 import type {ReactNodeList} from 'shared/ReactTypes';
 import type {BootstrapScriptDescriptor} from 'react-dom-bindings/src/server/ReactFizzConfigDOM';
+import type {PostponedState} from 'react-server/src/ReactFizzServer';
+import type {ImportMap} from '../shared/ReactDOMTypes';
 
 import {Writable, Readable} from 'stream';
 
 import ReactVersion from 'shared/ReactVersion';
 
 import {
-  createRequest,
+  createPrerenderRequest,
   startWork,
   startFlowing,
   abort,
+  getPostponedState,
 } from 'react-server/src/ReactFizzServer';
 
 import {
-  createResources,
-  createResponseState,
+  createResumableState,
+  createRenderState,
   createRootFormatContext,
 } from 'react-dom-bindings/src/server/ReactFizzConfigDOM';
 
@@ -36,10 +39,13 @@ type Options = {
   progressiveChunkSize?: number,
   signal?: AbortSignal,
   onError?: (error: mixed) => ?string,
+  onPostpone?: (reason: string) => void,
   unstable_externalRuntimeSrc?: string | BootstrapScriptDescriptor,
+  importMap?: ImportMap,
 };
 
 type StaticResult = {
+  postponed: null | PostponedState,
   prelude: Readable,
 };
 
@@ -59,7 +65,7 @@ function createFakeWritable(readable: any): Writable {
   }: any);
 }
 
-function prerenderToNodeStreams(
+function prerenderToNodeStream(
   children: ReactNodeList,
   options?: Options,
 ): Promise<StaticResult> {
@@ -75,22 +81,26 @@ function prerenderToNodeStreams(
       const writable = createFakeWritable(readable);
 
       const result = {
+        postponed: getPostponedState(request),
         prelude: readable,
       };
       resolve(result);
     }
-    const resources = createResources();
-    const request = createRequest(
+    const resumableState = createResumableState(
+      options ? options.identifierPrefix : undefined,
+      options ? options.unstable_externalRuntimeSrc : undefined,
+    );
+    const request = createPrerenderRequest(
       children,
-      resources,
-      createResponseState(
-        resources,
-        options ? options.identifierPrefix : undefined,
-        undefined,
+      resumableState,
+      createRenderState(
+        resumableState,
+        undefined, // nonce is not compatible with prerendered bootstrap scripts
         options ? options.bootstrapScriptContent : undefined,
         options ? options.bootstrapScripts : undefined,
         options ? options.bootstrapModules : undefined,
         options ? options.unstable_externalRuntimeSrc : undefined,
+        options ? options.importMap : undefined,
       ),
       createRootFormatContext(options ? options.namespaceURI : undefined),
       options ? options.progressiveChunkSize : undefined,
@@ -99,6 +109,7 @@ function prerenderToNodeStreams(
       undefined,
       undefined,
       onFatalError,
+      options ? options.onPostpone : undefined,
     );
     if (options && options.signal) {
       const signal = options.signal;
@@ -116,4 +127,4 @@ function prerenderToNodeStreams(
   });
 }
 
-export {prerenderToNodeStreams, ReactVersion as version};
+export {prerenderToNodeStream, ReactVersion as version};
diff --git a/packages/react-dom/src/server/ReactDOMLegacyServerImpl.js b/packages/react-dom/src/server/ReactDOMLegacyServerImpl.js
index 719879107be2d..0dfc0f34d6061 100644
--- a/packages/react-dom/src/server/ReactDOMLegacyServerImpl.js
+++ b/packages/react-dom/src/server/ReactDOMLegacyServerImpl.js
@@ -10,7 +10,6 @@
 import ReactVersion from 'shared/ReactVersion';
 
 import type {ReactNodeList} from 'shared/ReactTypes';
-import type {BootstrapScriptDescriptor} from 'react-dom-bindings/src/server/ReactFizzConfigDOM';
 
 import {
   createRequest,
@@ -20,8 +19,8 @@ import {
 } from 'react-server/src/ReactFizzServer';
 
 import {
-  createResources,
-  createResponseState,
+  createResumableState,
+  createRenderState,
   createRootFormatContext,
 } from 'react-dom-bindings/src/server/ReactFizzConfigDOMLegacy';
 
@@ -38,7 +37,6 @@ function renderToStringImpl(
   options: void | ServerOptions,
   generateStaticMarkup: boolean,
   abortReason: string,
-  unstable_externalRuntimeSrc?: string | BootstrapScriptDescriptor,
 ): string {
   let didFatal = false;
   let fatalError = null;
@@ -62,16 +60,14 @@ function renderToStringImpl(
   function onShellReady() {
     readyToStream = true;
   }
-  const resources = createResources();
+  const resumableState = createResumableState(
+    options ? options.identifierPrefix : undefined,
+    undefined,
+  );
   const request = createRequest(
     children,
-    resources,
-    createResponseState(
-      resources,
-      generateStaticMarkup,
-      options ? options.identifierPrefix : undefined,
-      unstable_externalRuntimeSrc,
-    ),
+    resumableState,
+    createRenderState(resumableState, generateStaticMarkup),
     createRootFormatContext(),
     Infinity,
     onError,
@@ -79,6 +75,7 @@ function renderToStringImpl(
     onShellReady,
     undefined,
     undefined,
+    undefined,
   );
   startWork(request);
   // If anything suspended and is still pending, we'll abort it before writing.
diff --git a/packages/react-dom/src/server/ReactDOMLegacyServerNodeStream.js b/packages/react-dom/src/server/ReactDOMLegacyServerNodeStream.js
index 4dc848b2962ab..8df44d8004261 100644
--- a/packages/react-dom/src/server/ReactDOMLegacyServerNodeStream.js
+++ b/packages/react-dom/src/server/ReactDOMLegacyServerNodeStream.js
@@ -19,8 +19,8 @@ import {
 } from 'react-server/src/ReactFizzServer';
 
 import {
-  createResources,
-  createResponseState,
+  createResumableState,
+  createRenderState,
   createRootFormatContext,
 } from 'react-dom-bindings/src/server/ReactFizzConfigDOMLegacy';
 
@@ -71,21 +71,21 @@ function renderToNodeStreamImpl(
     startFlowing(request, destination);
   }
   const destination = new ReactMarkupReadableStream();
-  const resources = createResources();
+  const resumableState = createResumableState(
+    options ? options.identifierPrefix : undefined,
+    undefined,
+  );
   const request = createRequest(
     children,
-    resources,
-    createResponseState(
-      resources,
-      false,
-      options ? options.identifierPrefix : undefined,
-    ),
+    resumableState,
+    createRenderState(resumableState, false),
     createRootFormatContext(),
     Infinity,
     onError,
     onAllReady,
     undefined,
     undefined,
+    undefined,
   );
   destination.request = request;
   startWork(request);
diff --git a/packages/react-dom/src/server/ReactDOMServerRenderingStub.js b/packages/react-dom/src/server/ReactDOMServerRenderingStub.js
index dec67c41058f2..8adc9ade4aeb3 100644
--- a/packages/react-dom/src/server/ReactDOMServerRenderingStub.js
+++ b/packages/react-dom/src/server/ReactDOMServerRenderingStub.js
@@ -9,11 +9,16 @@
 
 export {
   preinit,
+  preinitModule,
   preload,
+  preloadModule,
   preconnect,
   prefetchDNS,
 } from '../shared/ReactDOMFloat';
-export {useFormStatus as experimental_useFormStatus} from 'react-dom-bindings/src/shared/ReactDOMFormActions';
+export {
+  useFormStatus as experimental_useFormStatus,
+  useFormState as experimental_useFormState,
+} from 'react-dom-bindings/src/shared/ReactDOMFormActions';
 
 export function createPortal() {
   throw new Error(
diff --git a/packages/react-dom/src/server/react-dom-server.browser.js b/packages/react-dom/src/server/react-dom-server.browser.js
new file mode 100644
index 0000000000000..c12bb28c19dc4
--- /dev/null
+++ b/packages/react-dom/src/server/react-dom-server.browser.js
@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from './ReactDOMFizzServerBrowser.js';
+export {prerender} from './ReactDOMFizzStaticBrowser.js';
diff --git a/packages/react-reconciler/src/forks/ReactFiberConfig.dom-legacy.js b/packages/react-dom/src/server/react-dom-server.browser.stable.js
similarity index 71%
rename from packages/react-reconciler/src/forks/ReactFiberConfig.dom-legacy.js
rename to packages/react-dom/src/server/react-dom-server.browser.stable.js
index 4932b1a787bb9..3471bba15ac94 100644
--- a/packages/react-reconciler/src/forks/ReactFiberConfig.dom-legacy.js
+++ b/packages/react-dom/src/server/react-dom-server.browser.stable.js
@@ -7,4 +7,4 @@
  * @flow
  */
 
-export * from 'react-dom-bindings/src/client/ReactFiberConfigDOM';
+export {renderToReadableStream, version} from './ReactDOMFizzServerBrowser.js';
diff --git a/packages/react-server/src/forks/ReactServerStreamConfig.dom-node-esm.js b/packages/react-dom/src/server/react-dom-server.bun.js
similarity index 80%
rename from packages/react-server/src/forks/ReactServerStreamConfig.dom-node-esm.js
rename to packages/react-dom/src/server/react-dom-server.bun.js
index 1a3871aef2e8b..5ca420c2305ec 100644
--- a/packages/react-server/src/forks/ReactServerStreamConfig.dom-node-esm.js
+++ b/packages/react-dom/src/server/react-dom-server.bun.js
@@ -7,4 +7,4 @@
  * @flow
  */
 
-export * from '../ReactServerStreamConfigNode';
+export * from './ReactDOMFizzServerBun.js';
diff --git a/packages/react-dom/src/server/react-dom-server.bun.stable.js b/packages/react-dom/src/server/react-dom-server.bun.stable.js
new file mode 100644
index 0000000000000..b5c1fd02d3638
--- /dev/null
+++ b/packages/react-dom/src/server/react-dom-server.bun.stable.js
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export {
+  renderToReadableStream,
+  renderToNodeStream,
+  renderToStaticNodeStream,
+  version,
+} from './ReactDOMFizzServerBun.js';
diff --git a/packages/react-reconciler/src/forks/ReactFiberConfig.dom-bun.js b/packages/react-dom/src/server/react-dom-server.edge.js
similarity index 67%
rename from packages/react-reconciler/src/forks/ReactFiberConfig.dom-bun.js
rename to packages/react-dom/src/server/react-dom-server.edge.js
index 4932b1a787bb9..c3882bed01dc4 100644
--- a/packages/react-reconciler/src/forks/ReactFiberConfig.dom-bun.js
+++ b/packages/react-dom/src/server/react-dom-server.edge.js
@@ -7,4 +7,5 @@
  * @flow
  */
 
-export * from 'react-dom-bindings/src/client/ReactFiberConfigDOM';
+export * from './ReactDOMFizzServerEdge.js';
+export {prerender} from './ReactDOMFizzStaticEdge.js';
diff --git a/packages/react-reconciler/src/forks/ReactFiberConfig.dom-edge-webpack.js b/packages/react-dom/src/server/react-dom-server.edge.stable.js
similarity index 72%
rename from packages/react-reconciler/src/forks/ReactFiberConfig.dom-edge-webpack.js
rename to packages/react-dom/src/server/react-dom-server.edge.stable.js
index 4932b1a787bb9..b2f0278099ce3 100644
--- a/packages/react-reconciler/src/forks/ReactFiberConfig.dom-edge-webpack.js
+++ b/packages/react-dom/src/server/react-dom-server.edge.stable.js
@@ -7,4 +7,4 @@
  * @flow
  */
 
-export * from 'react-dom-bindings/src/client/ReactFiberConfigDOM';
+export {renderToReadableStream, version} from './ReactDOMFizzServerEdge.js';
diff --git a/packages/react-dom/src/server/react-dom-server.node.js b/packages/react-dom/src/server/react-dom-server.node.js
new file mode 100644
index 0000000000000..9ca72308b08e5
--- /dev/null
+++ b/packages/react-dom/src/server/react-dom-server.node.js
@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from './ReactDOMFizzServerNode.js';
+export {prerenderToNodeStream} from './ReactDOMFizzStaticNode.js';
diff --git a/packages/react-reconciler/src/forks/ReactFiberConfig.dom-fb.js b/packages/react-dom/src/server/react-dom-server.node.stable.js
similarity index 72%
rename from packages/react-reconciler/src/forks/ReactFiberConfig.dom-fb.js
rename to packages/react-dom/src/server/react-dom-server.node.stable.js
index 4932b1a787bb9..bd17b91a9602a 100644
--- a/packages/react-reconciler/src/forks/ReactFiberConfig.dom-fb.js
+++ b/packages/react-dom/src/server/react-dom-server.node.stable.js
@@ -7,4 +7,4 @@
  * @flow
  */
 
-export * from 'react-dom-bindings/src/client/ReactFiberConfigDOM';
+export {renderToPipeableStream, version} from './ReactDOMFizzServerNode.js';
diff --git a/packages/react-dom/src/shared/ReactDOMFloat.js b/packages/react-dom/src/shared/ReactDOMFloat.js
index 302f0aa87c8e5..34f36c541b0c9 100644
--- a/packages/react-dom/src/shared/ReactDOMFloat.js
+++ b/packages/react-dom/src/shared/ReactDOMFloat.js
@@ -7,46 +7,76 @@
  * @flow
  */
 import type {
+  CrossOriginEnum,
   PreconnectOptions,
   PreloadOptions,
+  PreloadModuleOptions,
   PreinitOptions,
+  PreinitModuleOptions,
 } from './ReactDOMTypes';
 
 import ReactDOMSharedInternals from 'shared/ReactDOMSharedInternals';
 const Dispatcher = ReactDOMSharedInternals.Dispatcher;
 
 export function prefetchDNS(href: string) {
-  let passedOptionArg: any;
   if (__DEV__) {
-    if (arguments[1] !== undefined) {
-      passedOptionArg = arguments[1];
-    }
-  }
-  const dispatcher = Dispatcher.current;
-  if (dispatcher) {
-    if (__DEV__) {
-      if (passedOptionArg !== undefined) {
-        // prefetchDNS will warn if you pass reserved options arg. We pass it along in Dev only to
-        // elicit the warning. In prod we do not forward since it is not a part of the interface.
-        // @TODO move all arg validation into this file. It needs to be universal anyway so may as well lock down the interace here and
-        // let the rest of the codebase trust the types
-        dispatcher.prefetchDNS(href, passedOptionArg);
+    if (typeof href !== 'string' || !href) {
+      console.error(
+        'ReactDOM.prefetchDNS(): Expected the `href` argument (first) to be a non-empty string but encountered %s instead.',
+        getValueDescriptorExpectingObjectForWarning(href),
+      );
+    } else if (arguments.length > 1) {
+      const options = arguments[1];
+      if (
+        typeof options === 'object' &&
+        options.hasOwnProperty('crossOrigin')
+      ) {
+        console.error(
+          'ReactDOM.prefetchDNS(): Expected only one argument, `href`, but encountered %s as a second argument instead. This argument is reserved for future options and is currently disallowed. It looks like the you are attempting to set a crossOrigin property for this DNS lookup hint. Browsers do not perform DNS queries using CORS and setting this attribute on the resource hint has no effect. Try calling ReactDOM.prefetchDNS() with just a single string argument, `href`.',
+          getValueDescriptorExpectingEnumForWarning(options),
+        );
       } else {
-        dispatcher.prefetchDNS(href);
+        console.error(
+          'ReactDOM.prefetchDNS(): Expected only one argument, `href`, but encountered %s as a second argument instead. This argument is reserved for future options and is currently disallowed. Try calling ReactDOM.prefetchDNS() with just a single string argument, `href`.',
+          getValueDescriptorExpectingEnumForWarning(options),
+        );
       }
-    } else {
-      dispatcher.prefetchDNS(href);
     }
   }
+  const dispatcher = Dispatcher.current;
+  if (dispatcher && typeof href === 'string') {
+    dispatcher.prefetchDNS(href);
+  }
   // We don't error because preconnect needs to be resilient to being called in a variety of scopes
   // and the runtime may not be capable of responding. The function is optimistic and not critical
   // so we favor silent bailout over warning or erroring.
 }
 
 export function preconnect(href: string, options?: ?PreconnectOptions) {
+  if (__DEV__) {
+    if (typeof href !== 'string' || !href) {
+      console.error(
+        'ReactDOM.preconnect(): Expected the `href` argument (first) to be a non-empty string but encountered %s instead.',
+        getValueDescriptorExpectingObjectForWarning(href),
+      );
+    } else if (options != null && typeof options !== 'object') {
+      console.error(
+        'ReactDOM.preconnect(): Expected the `options` argument (second) to be an object but encountered %s instead. The only supported option at this time is `crossOrigin` which accepts a string.',
+        getValueDescriptorExpectingEnumForWarning(options),
+      );
+    } else if (options != null && typeof options.crossOrigin !== 'string') {
+      console.error(
+        'ReactDOM.preconnect(): Expected the `crossOrigin` option (second argument) to be a string but encountered %s instead. Try removing this option or passing a string value instead.',
+        getValueDescriptorExpectingObjectForWarning(options.crossOrigin),
+      );
+    }
+  }
   const dispatcher = Dispatcher.current;
-  if (dispatcher) {
-    dispatcher.preconnect(href, options);
+  if (dispatcher && typeof href === 'string') {
+    const crossOrigin = options
+      ? getCrossOrigin('preconnect', options.crossOrigin)
+      : null;
+    dispatcher.preconnect(href, crossOrigin);
   }
   // We don't error because preconnect needs to be resilient to being called in a variety of scopes
   // and the runtime may not be capable of responding. The function is optimistic and not critical
@@ -54,9 +84,107 @@ export function preconnect(href: string, options?: ?PreconnectOptions) {
 }
 
 export function preload(href: string, options: PreloadOptions) {
+  if (__DEV__) {
+    let encountered = '';
+    if (typeof href !== 'string' || !href) {
+      encountered += ` The \`href\` argument encountered was ${getValueDescriptorExpectingObjectForWarning(
+        href,
+      )}.`;
+    }
+    if (options == null || typeof options !== 'object') {
+      encountered += ` The \`options\` argument encountered was ${getValueDescriptorExpectingObjectForWarning(
+        options,
+      )}.`;
+    } else if (typeof options.as !== 'string' || !options.as) {
+      encountered += ` The \`as\` option encountered was ${getValueDescriptorExpectingObjectForWarning(
+        options.as,
+      )}.`;
+    }
+    if (encountered) {
+      console.error(
+        'ReactDOM.preload(): Expected two arguments, a non-empty `href` string and an `options` object with an `as` property valid for a `<link rel="preload" as="..." />` tag.%s',
+        encountered,
+      );
+    }
+  }
   const dispatcher = Dispatcher.current;
-  if (dispatcher) {
-    dispatcher.preload(href, options);
+  if (
+    dispatcher &&
+    typeof href === 'string' &&
+    // We check existence because we cannot enforce this function is actually called with the stated type
+    typeof options === 'object' &&
+    options !== null &&
+    typeof options.as === 'string'
+  ) {
+    const as = options.as;
+    const crossOrigin = getCrossOrigin(as, options.crossOrigin);
+    dispatcher.preload(href, as, {
+      crossOrigin,
+      integrity:
+        typeof options.integrity === 'string' ? options.integrity : undefined,
+      nonce: typeof options.nonce === 'string' ? options.nonce : undefined,
+      type: typeof options.type === 'string' ? options.type : undefined,
+      fetchPriority:
+        typeof options.fetchPriority === 'string'
+          ? options.fetchPriority
+          : undefined,
+      referrerPolicy:
+        typeof options.referrerPolicy === 'string'
+          ? options.referrerPolicy
+          : undefined,
+      imageSrcSet:
+        typeof options.imageSrcSet === 'string'
+          ? options.imageSrcSet
+          : undefined,
+      imageSizes:
+        typeof options.imageSizes === 'string' ? options.imageSizes : undefined,
+    });
+  }
+  // We don't error because preload needs to be resilient to being called in a variety of scopes
+  // and the runtime may not be capable of responding. The function is optimistic and not critical
+  // so we favor silent bailout over warning or erroring.
+}
+
+export function preloadModule(href: string, options?: ?PreloadModuleOptions) {
+  if (__DEV__) {
+    let encountered = '';
+    if (typeof href !== 'string' || !href) {
+      encountered += ` The \`href\` argument encountered was ${getValueDescriptorExpectingObjectForWarning(
+        href,
+      )}.`;
+    }
+    if (options !== undefined && typeof options !== 'object') {
+      encountered += ` The \`options\` argument encountered was ${getValueDescriptorExpectingObjectForWarning(
+        options,
+      )}.`;
+    } else if (options && 'as' in options && typeof options.as !== 'string') {
+      encountered += ` The \`as\` option encountered was ${getValueDescriptorExpectingObjectForWarning(
+        options.as,
+      )}.`;
+    }
+    if (encountered) {
+      console.error(
+        'ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally, an `options` object with an `as` property valid for a `<link rel="modulepreload" as="..." />` tag.%s',
+        encountered,
+      );
+    }
+  }
+  const dispatcher = Dispatcher.current;
+  if (dispatcher && typeof href === 'string') {
+    if (options) {
+      const crossOrigin = getCrossOrigin(options.as, options.crossOrigin);
+      dispatcher.preloadModule(href, {
+        as:
+          typeof options.as === 'string' && options.as !== 'script'
+            ? options.as
+            : undefined,
+        crossOrigin,
+        integrity:
+          typeof options.integrity === 'string' ? options.integrity : undefined,
+      });
+    } else {
+      dispatcher.preloadModule(href);
+    }
   }
   // We don't error because preload needs to be resilient to being called in a variety of scopes
   // and the runtime may not be capable of responding. The function is optimistic and not critical
@@ -64,11 +192,162 @@ export function preload(href: string, options: PreloadOptions) {
 }
 
 export function preinit(href: string, options: PreinitOptions) {
+  if (__DEV__) {
+    if (typeof href !== 'string' || !href) {
+      console.error(
+        'ReactDOM.preinit(): Expected the `href` argument (first) to be a non-empty string but encountered %s instead.',
+        getValueDescriptorExpectingObjectForWarning(href),
+      );
+    } else if (options == null || typeof options !== 'object') {
+      console.error(
+        'ReactDOM.preinit(): Expected the `options` argument (second) to be an object with an `as` property describing the type of resource to be preinitialized but encountered %s instead.',
+        getValueDescriptorExpectingEnumForWarning(options),
+      );
+    } else if (options.as !== 'style' && options.as !== 'script') {
+      console.error(
+        'ReactDOM.preinit(): Expected the `as` property in the `options` argument (second) to contain a valid value describing the type of resource to be preinitialized but encountered %s instead. Valid values for `as` are "style" and "script".',
+        getValueDescriptorExpectingEnumForWarning(options.as),
+      );
+    }
+  }
   const dispatcher = Dispatcher.current;
-  if (dispatcher) {
-    dispatcher.preinit(href, options);
+  if (
+    dispatcher &&
+    typeof href === 'string' &&
+    options &&
+    typeof options.as === 'string'
+  ) {
+    const as = options.as;
+    const crossOrigin = getCrossOrigin(as, options.crossOrigin);
+    const integrity =
+      typeof options.integrity === 'string' ? options.integrity : undefined;
+    const fetchPriority =
+      typeof options.fetchPriority === 'string'
+        ? options.fetchPriority
+        : undefined;
+    if (as === 'style') {
+      dispatcher.preinitStyle(
+        href,
+        typeof options.precedence === 'string' ? options.precedence : undefined,
+        {
+          crossOrigin,
+          integrity,
+          fetchPriority,
+        },
+      );
+    } else if (as === 'script') {
+      dispatcher.preinitScript(href, {
+        crossOrigin,
+        integrity,
+        fetchPriority,
+        nonce: typeof options.nonce === 'string' ? options.nonce : undefined,
+      });
+    }
   }
   // We don't error because preinit needs to be resilient to being called in a variety of scopes
   // and the runtime may not be capable of responding. The function is optimistic and not critical
   // so we favor silent bailout over warning or erroring.
 }
+
+export function preinitModule(href: string, options?: ?PreinitModuleOptions) {
+  if (__DEV__) {
+    let encountered = '';
+    if (typeof href !== 'string' || !href) {
+      encountered += ` The \`href\` argument encountered was ${getValueDescriptorExpectingObjectForWarning(
+        href,
+      )}.`;
+    }
+    if (options !== undefined && typeof options !== 'object') {
+      encountered += ` The \`options\` argument encountered was ${getValueDescriptorExpectingObjectForWarning(
+        options,
+      )}.`;
+    } else if (options && 'as' in options && options.as !== 'script') {
+      encountered += ` The \`as\` option encountered was ${getValueDescriptorExpectingEnumForWarning(
+        options.as,
+      )}.`;
+    }
+    if (encountered) {
+      console.error(
+        'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` string and, optionally, an `options` object with a valid `as` property.%s',
+        encountered,
+      );
+    } else {
+      const as =
+        options && typeof options.as === 'string' ? options.as : 'script';
+      switch (as) {
+        case 'script': {
+          break;
+        }
+
+        // We have an invalid as type and need to warn
+        default: {
+          const typeOfAs = getValueDescriptorExpectingEnumForWarning(as);
+          console.error(
+            'ReactDOM.preinitModule(): Currently the only supported "as" type for this function is "script"' +
+              ' but received "%s" instead. This warning was generated for `href` "%s". In the future other' +
+              ' module types will be supported, aligning with the import-attributes proposal. Learn more here:' +
+              ' (https://github.com/tc39/proposal-import-attributes)',
+            typeOfAs,
+            href,
+          );
+        }
+      }
+    }
+  }
+  const dispatcher = Dispatcher.current;
+  if (dispatcher && typeof href === 'string') {
+    if (
+      options == null ||
+      (typeof options === 'object' &&
+        (options.as == null || options.as === 'script'))
+    ) {
+      const crossOrigin = options
+        ? getCrossOrigin(undefined, options.crossOrigin)
+        : undefined;
+      dispatcher.preinitModuleScript(href, {
+        crossOrigin,
+        integrity:
+          options && typeof options.integrity === 'string'
+            ? options.integrity
+            : undefined,
+      });
+    }
+  }
+  // We don't error because preinit needs to be resilient to being called in a variety of scopes
+  // and the runtime may not be capable of responding. The function is optimistic and not critical
+  // so we favor silent bailout over warning or erroring.
+}
+
+function getCrossOrigin(as: ?string, crossOrigin: ?string): ?CrossOriginEnum {
+  return as === 'font'
+    ? ''
+    : typeof crossOrigin === 'string'
+    ? crossOrigin === 'use-credentials'
+      ? 'use-credentials'
+      : ''
+    : undefined;
+}
+
+function getValueDescriptorExpectingObjectForWarning(thing: any): string {
+  return thing === null
+    ? '`null`'
+    : thing === undefined
+    ? '`undefined`'
+    : thing === ''
+    ? 'an empty string'
+    : `something with type "${typeof thing}"`;
+}
+
+function getValueDescriptorExpectingEnumForWarning(thing: any): string {
+  return thing === null
+    ? '`null`'
+    : thing === undefined
+    ? '`undefined`'
+    : thing === ''
+    ? 'an empty string'
+    : typeof thing === 'string'
+    ? JSON.stringify(thing)
+    : typeof thing === 'number'
+    ? '`' + thing + '`'
+    : `something with type "${typeof thing}"`;
+}
diff --git a/packages/react-dom/src/shared/ReactDOMTypes.js b/packages/react-dom/src/shared/ReactDOMTypes.js
index 1ff0360617b87..af54a9e27bc65 100644
--- a/packages/react-dom/src/shared/ReactDOMTypes.js
+++ b/packages/react-dom/src/shared/ReactDOMTypes.js
@@ -20,6 +20,11 @@ export type PreloadOptions = {
   imageSizes?: string,
   referrerPolicy?: string,
 };
+export type PreloadModuleOptions = {
+  as?: string,
+  crossOrigin?: string,
+  integrity?: string,
+};
 export type PreinitOptions = {
   as: string,
   precedence?: string,
@@ -28,10 +33,70 @@ export type PreinitOptions = {
   nonce?: string,
   fetchPriority?: 'high' | 'low' | 'auto',
 };
+export type PreinitModuleOptions = {
+  as?: string,
+  crossOrigin?: string,
+  integrity?: string,
+};
+
+export type CrossOriginEnum = '' | 'use-credentials';
+export type FetchPriorityEnum = 'high' | 'low' | 'auto';
+
+export type PreloadImplOptions = {
+  crossOrigin?: ?CrossOriginEnum,
+  integrity?: ?string,
+  nonce?: ?string,
+  type?: ?string,
+  fetchPriority?: ?FetchPriorityEnum,
+  referrerPolicy?: ?string,
+  imageSrcSet?: ?string,
+  imageSizes?: ?string,
+};
+export type PreloadModuleImplOptions = {
+  as?: ?string,
+  crossOrigin?: ?CrossOriginEnum,
+  integrity?: ?string,
+};
+export type PreinitStyleOptions = {
+  crossOrigin?: ?string,
+  integrity?: ?string,
+  fetchPriority?: ?FetchPriorityEnum,
+};
+export type PreinitScriptOptions = {
+  crossOrigin?: ?string,
+  integrity?: ?string,
+  fetchPriority?: ?FetchPriorityEnum,
+  nonce?: ?string,
+};
+export type PreinitModuleScriptOptions = {
+  crossOrigin?: ?CrossOriginEnum,
+  integrity?: string,
+};
 
 export type HostDispatcher = {
-  prefetchDNS: (href: string, options?: ?PrefetchDNSOptions) => void,
-  preconnect: (href: string, options: ?PreconnectOptions) => void,
-  preload: (href: string, options: PreloadOptions) => void,
-  preinit: (href: string, options: PreinitOptions) => void,
+  prefetchDNS: (href: string) => void,
+  preconnect: (href: string, crossOrigin?: ?CrossOriginEnum) => void,
+  preload: (href: string, as: string, options?: ?PreloadImplOptions) => void,
+  preloadModule: (href: string, options?: ?PreloadModuleImplOptions) => void,
+  preinitStyle: (
+    href: string,
+    precedence: ?string,
+    options?: ?PreinitStyleOptions,
+  ) => void,
+  preinitScript: (src: string, options?: PreinitScriptOptions) => void,
+  preinitModuleScript: (
+    src: string,
+    options?: ?PreinitModuleScriptOptions,
+  ) => void,
+};
+
+export type ImportMap = {
+  imports?: {
+    [specifier: string]: string,
+  },
+  scopes?: {
+    [scope: string]: {
+      [specifier: string]: string,
+    },
+  },
 };
diff --git a/packages/react-dom/src/test-utils/FizzTestUtils.js b/packages/react-dom/src/test-utils/FizzTestUtils.js
index a10bec7fa0dee..96654d8ccb21e 100644
--- a/packages/react-dom/src/test-utils/FizzTestUtils.js
+++ b/packages/react-dom/src/test-utils/FizzTestUtils.js
@@ -104,9 +104,9 @@ async function executeScript(script: Element) {
     const newScript = ownerDocument.createElement('script');
     newScript.textContent = script.textContent;
     // make sure to add nonce back to script if it exists
-    const scriptNonce = script.getAttribute('nonce');
-    if (scriptNonce) {
-      newScript.setAttribute('nonce', scriptNonce);
+    for (let i = 0; i < script.attributes.length; i++) {
+      const attribute = script.attributes[i];
+      newScript.setAttribute(attribute.name, attribute.value);
     }
 
     parent.insertBefore(newScript, script);
@@ -171,9 +171,52 @@ async function withLoadingReadyState<T>(
   return result;
 }
 
+function getVisibleChildren(element: Element): React$Node {
+  const children = [];
+  let node: any = element.firstChild;
+  while (node) {
+    if (node.nodeType === 1) {
+      if (
+        node.tagName !== 'SCRIPT' &&
+        node.tagName !== 'script' &&
+        node.tagName !== 'TEMPLATE' &&
+        node.tagName !== 'template' &&
+        !node.hasAttribute('hidden') &&
+        !node.hasAttribute('aria-hidden')
+      ) {
+        const props: any = {};
+        const attributes = node.attributes;
+        for (let i = 0; i < attributes.length; i++) {
+          if (
+            attributes[i].name === 'id' &&
+            attributes[i].value.includes(':')
+          ) {
+            // We assume this is a React added ID that's a non-visual implementation detail.
+            continue;
+          }
+          props[attributes[i].name] = attributes[i].value;
+        }
+        props.children = getVisibleChildren(node);
+        children.push(
+          require('react').createElement(node.tagName.toLowerCase(), props),
+        );
+      }
+    } else if (node.nodeType === 3) {
+      children.push(node.data);
+    }
+    node = node.nextSibling;
+  }
+  return children.length === 0
+    ? undefined
+    : children.length === 1
+    ? children[0]
+    : children;
+}
+
 export {
   insertNodesAndExecuteScripts,
   mergeOptions,
   stripExternalRuntimeInNodes,
   withLoadingReadyState,
+  getVisibleChildren,
 };
diff --git a/packages/react-dom/static.browser.js b/packages/react-dom/static.browser.js
index b197384c28d4c..f5148e087fa85 100644
--- a/packages/react-dom/static.browser.js
+++ b/packages/react-dom/static.browser.js
@@ -7,4 +7,4 @@
  * @flow
  */
 
-export {prerender, version} from './src/server/ReactDOMFizzStaticBrowser';
+export {prerender, version} from './src/server/react-dom-server.browser';
diff --git a/packages/react-dom/static.edge.js b/packages/react-dom/static.edge.js
index 74361b0e6dedf..40bdffd4e4b52 100644
--- a/packages/react-dom/static.edge.js
+++ b/packages/react-dom/static.edge.js
@@ -7,4 +7,4 @@
  * @flow
  */
 
-export {prerender, version} from './src/server/ReactDOMFizzStaticEdge';
+export {prerender, version} from './src/server/react-dom-server.edge';
diff --git a/packages/react-dom/static.node.js b/packages/react-dom/static.node.js
index d23ba6d3626dc..9036370546960 100644
--- a/packages/react-dom/static.node.js
+++ b/packages/react-dom/static.node.js
@@ -8,6 +8,6 @@
  */
 
 export {
-  prerenderToNodeStreams,
+  prerenderToNodeStream,
   version,
-} from './src/server/ReactDOMFizzStaticNode';
+} from './src/server/react-dom-server.node';
diff --git a/packages/react-native-renderer/src/ReactFiberConfigFabric.js b/packages/react-native-renderer/src/ReactFiberConfigFabric.js
index d1d669ee829d4..d08f94d148d87 100644
--- a/packages/react-native-renderer/src/ReactFiberConfigFabric.js
+++ b/packages/react-native-renderer/src/ReactFiberConfigFabric.js
@@ -34,7 +34,6 @@ import {
 
 const {
   createNode,
-  cloneNode,
   cloneNodeWithNewChildren,
   cloneNodeWithNewChildrenAndProps,
   cloneNodeWithNewProps,
@@ -48,8 +47,6 @@ const {
   unstable_getCurrentEventPriority: fabricGetCurrentEventPriority,
 } = nativeFabricUIManager;
 
-import {diffInCommitPhase} from 'shared/ReactFeatureFlags';
-
 const {get: getViewConfigForType} = ReactNativeViewConfigRegistry;
 
 // Counter for uniquely identifying views.
@@ -291,25 +288,6 @@ export function prepareForCommit(containerInfo: Container): null | Object {
   return null;
 }
 
-export function prepareUpdate(
-  instance: Instance,
-  type: string,
-  oldProps: Props,
-  newProps: Props,
-  hostContext: HostContext,
-): null | Object {
-  if (diffInCommitPhase) {
-    return null;
-  }
-  const viewConfig = instance.canonical.viewConfig;
-  const updatePayload = diff(oldProps, newProps, viewConfig.validAttributes);
-  // TODO: If the event handlers have changed, we need to update the current props
-  // in the commit phase but there is no host config hook to do it yet.
-  // So instead we hack it by updating it in the render phase.
-  instance.canonical.currentProps = newProps;
-  return updatePayload;
-}
-
 export function resetAfterCommit(containerInfo: Container): void {
   // Noop
 }
@@ -364,7 +342,6 @@ export const supportsPersistence = true;
 
 export function cloneInstance(
   instance: Instance,
-  updatePayload: null | Object,
   type: string,
   oldProps: Props,
   newProps: Props,
@@ -372,14 +349,12 @@ export function cloneInstance(
   keepChildren: boolean,
   recyclableInstance: null | Instance,
 ): Instance {
-  if (diffInCommitPhase) {
-    const viewConfig = instance.canonical.viewConfig;
-    updatePayload = diff(oldProps, newProps, viewConfig.validAttributes);
-    // TODO: If the event handlers have changed, we need to update the current props
-    // in the commit phase but there is no host config hook to do it yet.
-    // So instead we hack it by updating it in the render phase.
-    instance.canonical.currentProps = newProps;
-  }
+  const viewConfig = instance.canonical.viewConfig;
+  const updatePayload = diff(oldProps, newProps, viewConfig.validAttributes);
+  // TODO: If the event handlers have changed, we need to update the current props
+  // in the commit phase but there is no host config hook to do it yet.
+  // So instead we hack it by updating it in the render phase.
+  instance.canonical.currentProps = newProps;
 
   const node = instance.node;
   let clone;
@@ -387,12 +362,8 @@ export function cloneInstance(
     if (updatePayload !== null) {
       clone = cloneNodeWithNewProps(node, updatePayload);
     } else {
-      if (diffInCommitPhase) {
-        // No changes
-        return instance;
-      } else {
-        clone = cloneNode(node);
-      }
+      // No changes
+      return instance;
     }
   } else {
     if (updatePayload !== null) {
diff --git a/packages/react-native-renderer/src/ReactFiberConfigNative.js b/packages/react-native-renderer/src/ReactFiberConfigNative.js
index 6c14b62fde957..b61c8ef292a40 100644
--- a/packages/react-native-renderer/src/ReactFiberConfigNative.js
+++ b/packages/react-native-renderer/src/ReactFiberConfigNative.js
@@ -61,11 +61,6 @@ export type RendererInspectionConfig = $ReadOnly<{
   ) => void,
 }>;
 
-const UPDATE_SIGNAL = {};
-if (__DEV__) {
-  Object.freeze(UPDATE_SIGNAL);
-}
-
 // Counter for uniquely identifying views.
 // % 10 === 1 means it is a rootTag.
 // % 2 === 0 means it is a Fabric tag.
@@ -237,16 +232,6 @@ export function prepareForCommit(containerInfo: Container): null | Object {
   return null;
 }
 
-export function prepareUpdate(
-  instance: Instance,
-  type: string,
-  oldProps: Props,
-  newProps: Props,
-  hostContext: HostContext,
-): null | Object {
-  return UPDATE_SIGNAL;
-}
-
 export function resetAfterCommit(containerInfo: Container): void {
   // Noop
 }
diff --git a/packages/react-noop-renderer/src/ReactNoopServer.js b/packages/react-noop-renderer/src/ReactNoopServer.js
index c8f4fcd2ca4d7..fb54496911432 100644
--- a/packages/react-noop-renderer/src/ReactNoopServer.js
+++ b/packages/react-noop-renderer/src/ReactNoopServer.js
@@ -51,7 +51,7 @@ type Destination = {
   stack: Array<Segment | Instance | SuspenseInstance>,
 };
 
-type Resources = null;
+type RenderState = null;
 type BoundaryResources = null;
 
 const POP = Buffer.from('/', 'utf8');
@@ -90,13 +90,6 @@ const ReactNoopServer = ReactFizzServer({
   closeWithError(destination: Destination, error: mixed): void {},
   flushBuffered(destination: Destination): void {},
 
-  UNINITIALIZED_SUSPENSE_BOUNDARY_ID: null,
-
-  assignSuspenseBoundaryID(): SuspenseInstance {
-    // The ID is a pointer to the boundary itself.
-    return {state: 'pending', children: []};
-  },
-
   getChildFormatContext(): null {
     return null;
   },
@@ -104,7 +97,7 @@ const ReactNoopServer = ReactFizzServer({
   pushTextInstance(
     target: Array<Uint8Array>,
     text: string,
-    responseState: ResponseState,
+    renderState: RenderState,
     textEmbedded: boolean,
   ): boolean {
     const textInstance: TextInstance = {
@@ -140,21 +133,21 @@ const ReactNoopServer = ReactFizzServer({
   // This is a noop in ReactNoop
   pushSegmentFinale(
     target: Array<Uint8Array>,
-    responseState: ResponseState,
+    renderState: RenderState,
     lastPushedText: boolean,
     textEmbedded: boolean,
   ): void {},
 
   writeCompletedRoot(
     destination: Destination,
-    responseState: ResponseState,
+    renderState: RenderState,
   ): boolean {
     return true;
   },
 
   writePlaceholder(
     destination: Destination,
-    responseState: ResponseState,
+    renderState: RenderState,
     id: number,
   ): boolean {
     const parent = destination.stack[destination.stack.length - 1];
@@ -166,7 +159,7 @@ const ReactNoopServer = ReactFizzServer({
 
   writeStartCompletedSuspenseBoundary(
     destination: Destination,
-    responseState: ResponseState,
+    renderState: RenderState,
     suspenseInstance: SuspenseInstance,
   ): boolean {
     suspenseInstance.state = 'complete';
@@ -176,7 +169,7 @@ const ReactNoopServer = ReactFizzServer({
   },
   writeStartPendingSuspenseBoundary(
     destination: Destination,
-    responseState: ResponseState,
+    renderState: RenderState,
     suspenseInstance: SuspenseInstance,
   ): boolean {
     suspenseInstance.state = 'pending';
@@ -186,7 +179,7 @@ const ReactNoopServer = ReactFizzServer({
   },
   writeStartClientRenderedSuspenseBoundary(
     destination: Destination,
-    responseState: ResponseState,
+    renderState: RenderState,
     suspenseInstance: SuspenseInstance,
   ): boolean {
     suspenseInstance.state = 'client-render';
@@ -206,7 +199,7 @@ const ReactNoopServer = ReactFizzServer({
 
   writeStartSegment(
     destination: Destination,
-    responseState: ResponseState,
+    renderState: RenderState,
     formatContext: null,
     id: number,
   ): boolean {
@@ -225,7 +218,7 @@ const ReactNoopServer = ReactFizzServer({
 
   writeCompletedSegmentInstruction(
     destination: Destination,
-    responseState: ResponseState,
+    renderState: RenderState,
     contentSegmentID: number,
   ): boolean {
     const segment = destination.segments.get(contentSegmentID);
@@ -245,7 +238,7 @@ const ReactNoopServer = ReactFizzServer({
 
   writeCompletedBoundaryInstruction(
     destination: Destination,
-    responseState: ResponseState,
+    renderState: RenderState,
     boundary: SuspenseInstance,
     contentSegmentID: number,
   ): boolean {
@@ -259,7 +252,7 @@ const ReactNoopServer = ReactFizzServer({
 
   writeClientRenderBoundaryInstruction(
     destination: Destination,
-    responseState: ResponseState,
+    renderState: RenderState,
     boundary: SuspenseInstance,
   ): boolean {
     boundary.status = 'client-render';
@@ -269,10 +262,6 @@ const ReactNoopServer = ReactFizzServer({
   writeHoistables() {},
   writePostamble() {},
 
-  createResources(): Resources {
-    return null;
-  },
-
   createBoundaryResources(): BoundaryResources {
     return null;
   },
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index 520b1278c5549..78249d500090f 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -82,10 +82,8 @@ export type TransitionStatus = mixed;
 
 const NO_CONTEXT = {};
 const UPPERCASE_CONTEXT = {};
-const UPDATE_SIGNAL = {};
 if (__DEV__) {
   Object.freeze(NO_CONTEXT);
-  Object.freeze(UPDATE_SIGNAL);
 }
 
 function createReactNoop(reconciler: Function, useMutation: boolean) {
@@ -222,7 +220,6 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
 
   function cloneInstance(
     instance: Instance,
-    updatePayload: null | Object,
     type: string,
     oldProps: Props,
     newProps: Props,
@@ -453,21 +450,6 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       return false;
     },
 
-    prepareUpdate(
-      instance: Instance,
-      type: string,
-      oldProps: Props,
-      newProps: Props,
-    ): null | {...} {
-      if (oldProps === null) {
-        throw new Error('Should have old props');
-      }
-      if (newProps === null) {
-        throw new Error('Should have new props');
-      }
-      return UPDATE_SIGNAL;
-    },
-
     shouldSetTextContent,
 
     createTextInstance(
@@ -764,7 +746,6 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
         ): Instance {
           const clone = cloneInstance(
             instance,
-            null,
             type,
             props,
             props,
diff --git a/packages/react-reconciler/README.md b/packages/react-reconciler/README.md
index 546e44258378f..83520bb208d57 100644
--- a/packages/react-reconciler/README.md
+++ b/packages/react-reconciler/README.md
@@ -129,14 +129,6 @@ There is a second purpose to this method. It lets you specify whether there is s
 
 If you don't want to do anything here, you should return `false`.
 
-#### `prepareUpdate(instance, type, oldProps, newProps, rootContainer, hostContext)`
-
-React calls this method so that you can compare the previous and the next props, and decide whether you need to update the underlying instance or not. If you don't need to update it, return `null`. If you need to update it, you can return an arbitrary object representing the changes that need to happen. Then in `commitUpdate` you would need to apply those changes to the instance.
-
-This method happens **in the render phase**. It should only *calculate* the update — but not apply it! For example, the DOM renderer returns an array that looks like `[prop1, value1, prop2, value2, ...]` for all props that have actually changed. And only in `commitUpdate` it applies those changes. You should calculate as much as you can in `prepareUpdate` so that `commitUpdate` can be very fast and straightforward.
-
-See the meaning of `rootContainer` and `hostContext` in the `createInstance` documentation.
-
 #### `shouldSetTextContent(type, props)`
 
 Some target platforms support setting an instance's text content without manually creating a text node. For example, in the DOM, you can set `node.textContent` instead of creating a text node and appending it.
@@ -300,9 +292,9 @@ The `internalHandle` data structure is meant to be opaque. If you bend the rules
 
 If you never return `true` from `finalizeInitialChildren`, you can leave it empty.
 
-#### `commitUpdate(instance, updatePayload, type, prevProps, nextProps, internalHandle)`
+#### `commitUpdate(instance, type, prevProps, nextProps, internalHandle)`
 
-This method should mutate the `instance` according to the set of changes in `updatePayload`. Here, `updatePayload` is the object that you've returned from `prepareUpdate` and has an arbitrary structure that makes sense for your renderer. For example, the DOM renderer returns an update payload like `[prop1, value1, prop2, value2, ...]` from `prepareUpdate`, and that structure gets passed into `commitUpdate`. Ideally, all the diffing and calculation should happen inside `prepareUpdate` so that `commitUpdate` can be fast and straightforward.
+This method should mutate the `instance` to match `nextProps`.
 
 The `internalHandle` data structure is meant to be opaque. If you bend the rules and rely on its internal fields, be aware that it may change significantly between versions. You're taking on additional maintenance risk by reading from it, and giving up all guarantees if you write something to it.
 
diff --git a/packages/react-reconciler/src/MaxInts.js b/packages/react-reconciler/src/MaxInts.js
deleted file mode 100644
index 0a8d2b7ce4dc1..0000000000000
--- a/packages/react-reconciler/src/MaxInts.js
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-// Max 31 bit integer. The max integer size in V8 for 32-bit systems.
-// Math.pow(2, 30) - 1
-// 0b111111111111111111111111111111
-export const MAX_SIGNED_31_BIT_INT = 1073741823;
diff --git a/packages/react-reconciler/src/ReactFiber.js b/packages/react-reconciler/src/ReactFiber.js
index 1eb339328d940..c9af059d20de6 100644
--- a/packages/react-reconciler/src/ReactFiber.js
+++ b/packages/react-reconciler/src/ReactFiber.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import type {ReactElement} from 'shared/ReactElementType';
+import type {ReactElement, Source} from 'shared/ReactElementType';
 import type {ReactFragment, ReactPortal, ReactScope} from 'shared/ReactTypes';
 import type {Fiber} from './ReactInternalTypes';
 import type {RootTag} from './ReactRootTags';
@@ -490,6 +490,7 @@ export function createFiberFromTypeAndProps(
   type: any, // React$ElementType
   key: null | string,
   pendingProps: any,
+  source: null | Source,
   owner: null | Fiber,
   mode: TypeOfMode,
   lanes: Lanes,
@@ -643,6 +644,7 @@ export function createFiberFromTypeAndProps(
   fiber.lanes = lanes;
 
   if (__DEV__) {
+    fiber._debugSource = source;
     fiber._debugOwner = owner;
   }
 
@@ -654,8 +656,10 @@ export function createFiberFromElement(
   mode: TypeOfMode,
   lanes: Lanes,
 ): Fiber {
+  let source = null;
   let owner = null;
   if (__DEV__) {
+    source = element._source;
     owner = element._owner;
   }
   const type = element.type;
@@ -665,6 +669,7 @@ export function createFiberFromElement(
     type,
     key,
     pendingProps,
+    source,
     owner,
     mode,
     lanes,
diff --git a/packages/react-reconciler/src/ReactFiberAsyncAction.js b/packages/react-reconciler/src/ReactFiberAsyncAction.js
index ef721ca77bae3..910f47c0831c9 100644
--- a/packages/react-reconciler/src/ReactFiberAsyncAction.js
+++ b/packages/react-reconciler/src/ReactFiberAsyncAction.js
@@ -34,97 +34,108 @@ let currentEntangledPendingCount: number = 0;
 let currentEntangledLane: Lane = NoLane;
 
 export function requestAsyncActionContext<S>(
-  actionReturnValue: mixed,
-  finishedState: S,
-): Thenable<S> | S {
-  if (
-    actionReturnValue !== null &&
-    typeof actionReturnValue === 'object' &&
-    typeof actionReturnValue.then === 'function'
-  ) {
-    // This is an async action.
-    //
-    // Return a thenable that resolves once the action scope (i.e. the async
-    // function passed to startTransition) has finished running.
+  actionReturnValue: Thenable<mixed>,
+  // If this is provided, this resulting thenable resolves to this value instead
+  // of the return value of the action. This is a perf trick to avoid composing
+  // an extra async function.
+  overrideReturnValue: S | null,
+): Thenable<S> {
+  // This is an async action.
+  //
+  // Return a thenable that resolves once the action scope (i.e. the async
+  // function passed to startTransition) has finished running.
 
-    const thenable: Thenable<mixed> = (actionReturnValue: any);
-    let entangledListeners;
-    if (currentEntangledListeners === null) {
-      // There's no outer async action scope. Create a new one.
-      entangledListeners = currentEntangledListeners = [];
-      currentEntangledPendingCount = 0;
-      currentEntangledLane = requestTransitionLane();
-    } else {
-      entangledListeners = currentEntangledListeners;
-    }
+  const thenable: Thenable<S> = (actionReturnValue: any);
+  let entangledListeners;
+  if (currentEntangledListeners === null) {
+    // There's no outer async action scope. Create a new one.
+    entangledListeners = currentEntangledListeners = [];
+    currentEntangledPendingCount = 0;
+    currentEntangledLane = requestTransitionLane();
+  } else {
+    entangledListeners = currentEntangledListeners;
+  }
 
-    currentEntangledPendingCount++;
-    let resultStatus = 'pending';
-    let rejectedReason;
-    thenable.then(
-      () => {
-        resultStatus = 'fulfilled';
-        pingEngtangledActionScope();
-      },
-      error => {
-        resultStatus = 'rejected';
-        rejectedReason = error;
-        pingEngtangledActionScope();
-      },
-    );
+  currentEntangledPendingCount++;
 
-    // Create a thenable that represents the result of this action, but doesn't
-    // resolve until the entire entangled scope has finished.
-    //
-    // Expressed using promises:
-    //   const [thisResult] = await Promise.all([thisAction, entangledAction]);
-    //   return thisResult;
-    const resultThenable = createResultThenable<S>(entangledListeners);
+  // Create a thenable that represents the result of this action, but doesn't
+  // resolve until the entire entangled scope has finished.
+  //
+  // Expressed using promises:
+  //   const [thisResult] = await Promise.all([thisAction, entangledAction]);
+  //   return thisResult;
+  const resultThenable = createResultThenable<S>(entangledListeners);
 
-    // Attach a listener to fill in the result.
-    entangledListeners.push(() => {
-      switch (resultStatus) {
-        case 'fulfilled': {
-          const fulfilledThenable: FulfilledThenable<S> = (resultThenable: any);
-          fulfilledThenable.status = 'fulfilled';
-          fulfilledThenable.value = finishedState;
-          break;
-        }
-        case 'rejected': {
-          const rejectedThenable: RejectedThenable<S> = (resultThenable: any);
-          rejectedThenable.status = 'rejected';
-          rejectedThenable.reason = rejectedReason;
-          break;
-        }
-        case 'pending':
-        default: {
-          // The listener above should have been called first, so `resultStatus`
-          // should already be set to the correct value.
-          throw new Error(
-            'Thenable should have already resolved. This ' +
-              'is a bug in React.',
-          );
-        }
-      }
-    });
+  let resultStatus = 'pending';
+  let resultValue;
+  let rejectedReason;
+  thenable.then(
+    (value: S) => {
+      resultStatus = 'fulfilled';
+      resultValue = overrideReturnValue !== null ? overrideReturnValue : value;
+      pingEngtangledActionScope();
+    },
+    error => {
+      resultStatus = 'rejected';
+      rejectedReason = error;
+      pingEngtangledActionScope();
+    },
+  );
 
-    return resultThenable;
-  } else {
-    // This is not an async action, but it may be part of an outer async action.
-    if (currentEntangledListeners === null) {
-      return finishedState;
-    } else {
-      // Return a thenable that does not resolve until the entangled actions
-      // have finished.
-      const entangledListeners = currentEntangledListeners;
-      const resultThenable = createResultThenable<S>(entangledListeners);
-      entangledListeners.push(() => {
+  // Attach a listener to fill in the result.
+  entangledListeners.push(() => {
+    switch (resultStatus) {
+      case 'fulfilled': {
         const fulfilledThenable: FulfilledThenable<S> = (resultThenable: any);
         fulfilledThenable.status = 'fulfilled';
-        fulfilledThenable.value = finishedState;
-      });
-      return resultThenable;
+        fulfilledThenable.value = resultValue;
+        break;
+      }
+      case 'rejected': {
+        const rejectedThenable: RejectedThenable<S> = (resultThenable: any);
+        rejectedThenable.status = 'rejected';
+        rejectedThenable.reason = rejectedReason;
+        break;
+      }
+      case 'pending':
+      default: {
+        // The listener above should have been called first, so `resultStatus`
+        // should already be set to the correct value.
+        throw new Error(
+          'Thenable should have already resolved. This ' + 'is a bug in React.',
+        );
+      }
     }
+  });
+
+  return resultThenable;
+}
+
+export function requestSyncActionContext<S>(
+  actionReturnValue: mixed,
+  // If this is provided, this resulting thenable resolves to this value instead
+  // of the return value of the action. This is a perf trick to avoid composing
+  // an extra async function.
+  overrideReturnValue: S | null,
+): Thenable<S> | S {
+  const resultValue: S =
+    overrideReturnValue !== null
+      ? overrideReturnValue
+      : (actionReturnValue: any);
+  // This is not an async action, but it may be part of an outer async action.
+  if (currentEntangledListeners === null) {
+    return resultValue;
+  } else {
+    // Return a thenable that does not resolve until the entangled actions
+    // have finished.
+    const entangledListeners = currentEntangledListeners;
+    const resultThenable = createResultThenable<S>(entangledListeners);
+    entangledListeners.push(() => {
+      const fulfilledThenable: FulfilledThenable<S> = (resultThenable: any);
+      fulfilledThenable.status = 'fulfilled';
+      fulfilledThenable.value = resultValue;
+    });
+    return resultThenable;
   }
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.js b/packages/react-reconciler/src/ReactFiberBeginWork.js
index f0690a3d8d43c..621df8b78df7d 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.js
@@ -109,6 +109,7 @@ import {
   enableHostSingletons,
   enableFormActions,
   enableAsyncActions,
+  enablePostpone,
 } from 'shared/ReactFeatureFlags';
 import isArray from 'shared/isArray';
 import shallowEqual from 'shared/shallowEqual';
@@ -530,6 +531,7 @@ function updateMemoComponent(
       Component.type,
       null,
       nextProps,
+      null,
       workInProgress,
       workInProgress.mode,
       renderLanes,
@@ -2859,7 +2861,8 @@ function updateDehydratedSuspenseComponent(
       // This boundary is in a permanent fallback state. In this case, we'll never
       // get an update and we'll never be able to hydrate the final content. Let's just try the
       // client side render instead.
-      let digest, message, stack;
+      let digest: ?string;
+      let message, stack;
       if (__DEV__) {
         ({digest, message, stack} =
           getSuspenseInstanceFallbackErrorDetails(suspenseInstance));
@@ -2867,19 +2870,23 @@ function updateDehydratedSuspenseComponent(
         ({digest} = getSuspenseInstanceFallbackErrorDetails(suspenseInstance));
       }
 
-      let error;
-      if (message) {
-        // eslint-disable-next-line react-internal/prod-error-codes
-        error = new Error(message);
-      } else {
-        error = new Error(
-          'The server could not finish this Suspense boundary, likely ' +
-            'due to an error during server rendering. Switched to ' +
-            'client rendering.',
-        );
+      let capturedValue = null;
+      // TODO: Figure out a better signal than encoding a magic digest value.
+      if (!enablePostpone || digest !== 'POSTPONE') {
+        let error;
+        if (message) {
+          // eslint-disable-next-line react-internal/prod-error-codes
+          error = new Error(message);
+        } else {
+          error = new Error(
+            'The server could not finish this Suspense boundary, likely ' +
+              'due to an error during server rendering. Switched to ' +
+              'client rendering.',
+          );
+        }
+        (error: any).digest = digest;
+        capturedValue = createCapturedValue<mixed>(error, digest, stack);
       }
-      (error: any).digest = digest;
-      const capturedValue = createCapturedValue<mixed>(error, digest, stack);
       return retrySuspenseComponentWithoutHydrating(
         current,
         workInProgress,
@@ -2952,7 +2959,15 @@ function updateDehydratedSuspenseComponent(
       // TODO: We should ideally have a sync hydration lane that we can apply to do
       // a pass where we hydrate this subtree in place using the previous Context and then
       // reapply the update afterwards.
-      renderDidSuspendDelayIfPossible();
+      if (isSuspenseInstancePending(suspenseInstance)) {
+        // This is a dehydrated suspense instance. We don't need to suspend
+        // because we're already showing a fallback.
+        // TODO: The Fizz runtime might still stream in completed HTML, out-of-
+        // band. Should we fix this? There's a version of this bug that happens
+        // during client rendering, too. Needs more consideration.
+      } else {
+        renderDidSuspendDelayIfPossible();
+      }
       return retrySuspenseComponentWithoutHydrating(
         current,
         workInProgress,
@@ -3999,6 +4014,7 @@ function beginWork(
           workInProgress.type,
           workInProgress.key,
           workInProgress.pendingProps,
+          workInProgress._debugSource || null,
           workInProgress._debugOwner || null,
           workInProgress.mode,
           workInProgress.lanes,
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.js b/packages/react-reconciler/src/ReactFiberCommitWork.js
index ef1a97815a653..96ba1d5963274 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.js
@@ -54,7 +54,6 @@ import {
   enableFloat,
   enableLegacyHidden,
   enableHostSingletons,
-  diffInCommitPhase,
   alwaysThrottleRetries,
 } from 'shared/ReactFeatureFlags';
 import {
@@ -1697,6 +1696,7 @@ function detachFiberAfterEffects(fiber: Fiber) {
   fiber.stateNode = null;
 
   if (__DEV__) {
+    fiber._debugSource = null;
     fiber._debugOwner = null;
   }
 
@@ -2692,23 +2692,17 @@ function commitMutationEffectsOnFiber(
             const updatePayload: null | UpdatePayload =
               (finishedWork.updateQueue: any);
             finishedWork.updateQueue = null;
-            if (updatePayload !== null || diffInCommitPhase) {
-              try {
-                commitUpdate(
-                  finishedWork.stateNode,
-                  updatePayload,
-                  finishedWork.type,
-                  current.memoizedProps,
-                  finishedWork.memoizedProps,
-                  finishedWork,
-                );
-              } catch (error) {
-                captureCommitPhaseError(
-                  finishedWork,
-                  finishedWork.return,
-                  error,
-                );
-              }
+            try {
+              commitUpdate(
+                finishedWork.stateNode,
+                updatePayload,
+                finishedWork.type,
+                current.memoizedProps,
+                finishedWork.memoizedProps,
+                finishedWork,
+              );
+            } catch (error) {
+              captureCommitPhaseError(finishedWork, finishedWork.return, error);
             }
           }
         }
@@ -2776,23 +2770,17 @@ function commitMutationEffectsOnFiber(
             const updatePayload: null | UpdatePayload =
               (finishedWork.updateQueue: any);
             finishedWork.updateQueue = null;
-            if (updatePayload !== null || diffInCommitPhase) {
-              try {
-                commitUpdate(
-                  instance,
-                  updatePayload,
-                  type,
-                  oldProps,
-                  newProps,
-                  finishedWork,
-                );
-              } catch (error) {
-                captureCommitPhaseError(
-                  finishedWork,
-                  finishedWork.return,
-                  error,
-                );
-              }
+            try {
+              commitUpdate(
+                instance,
+                updatePayload,
+                type,
+                oldProps,
+                newProps,
+                finishedWork,
+              );
+            } catch (error) {
+              captureCommitPhaseError(finishedWork, finishedWork.return, error);
             }
           }
         }
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.js b/packages/react-reconciler/src/ReactFiberCompleteWork.js
index 7071b211fa4e8..ec46a5932f5ca 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.js
@@ -38,7 +38,6 @@ import {
   enableCache,
   enableTransitionTracing,
   enableFloat,
-  diffInCommitPhase,
 } from 'shared/ReactFeatureFlags';
 
 import {now} from './Scheduler';
@@ -97,7 +96,6 @@ import {
   resolveSingletonInstance,
   appendInitialChild,
   finalizeInitialChildren,
-  prepareUpdate,
   supportsMutation,
   supportsPersistence,
   supportsResources,
@@ -431,33 +429,7 @@ function updateHostComponent(
       return;
     }
 
-    if (diffInCommitPhase) {
-      markUpdate(workInProgress);
-    } else {
-      // If we get updated because one of our children updated, we don't
-      // have newProps so we'll have to reuse them.
-      // TODO: Split the update API as separate for the props vs. children.
-      // Even better would be if children weren't special cased at all tho.
-      const instance: Instance = workInProgress.stateNode;
-      // TODO: Experiencing an error where oldProps is null. Suggests a host
-      // component is hitting the resume path. Figure out why. Possibly
-      // related to `hidden`.
-      const currentHostContext = getHostContext();
-      const updatePayload = prepareUpdate(
-        instance,
-        type,
-        oldProps,
-        newProps,
-        currentHostContext,
-      );
-      // TODO: Type this specific to this type of component.
-      workInProgress.updateQueue = (updatePayload: any);
-      // If the update payload indicates that there is a change or if there
-      // is a new ref we mark this as an update. All the work is done in commitWork.
-      if (updatePayload) {
-        markUpdate(workInProgress);
-      }
-    }
+    markUpdate(workInProgress);
   } else if (supportsPersistence) {
     const currentInstance = current.stateNode;
     const oldProps = current.memoizedProps;
@@ -472,27 +444,8 @@ function updateHostComponent(
     }
     const recyclableInstance: Instance = workInProgress.stateNode;
     const currentHostContext = getHostContext();
-    let updatePayload = null;
-    if (!diffInCommitPhase) {
-      if (oldProps !== newProps) {
-        updatePayload = prepareUpdate(
-          recyclableInstance,
-          type,
-          oldProps,
-          newProps,
-          currentHostContext,
-        );
-      }
-      if (childrenUnchanged && updatePayload === null) {
-        // No changes, just reuse the existing instance.
-        // Note that this might release a previous clone.
-        workInProgress.stateNode = currentInstance;
-        return;
-      }
-    }
     const newInstance = cloneInstance(
       currentInstance,
-      updatePayload,
       type,
       oldProps,
       newProps,
@@ -500,7 +453,7 @@ function updateHostComponent(
       childrenUnchanged,
       recyclableInstance,
     );
-    if (diffInCommitPhase && newInstance === currentInstance) {
+    if (newInstance === currentInstance) {
       // No changes, just reuse the existing instance.
       // Note that this might release a previous clone.
       workInProgress.stateNode = currentInstance;
@@ -1158,7 +1111,7 @@ function completeWork(
           } else {
             // This is a Hoistable Instance
             // We may have props to update on the Hoistable instance.
-            if (diffInCommitPhase && supportsMutation) {
+            if (supportsMutation) {
               const oldProps = current.memoizedProps;
               if (oldProps !== newProps) {
                 markUpdate(workInProgress);
@@ -1195,7 +1148,7 @@ function completeWork(
         const rootContainerInstance = getRootHostContainer();
         const type = workInProgress.type;
         if (current !== null && workInProgress.stateNode != null) {
-          if (diffInCommitPhase && supportsMutation) {
+          if (supportsMutation) {
             const oldProps = current.memoizedProps;
             if (oldProps !== newProps) {
               markUpdate(workInProgress);
@@ -1296,13 +1249,7 @@ function completeWork(
         if (wasHydrated) {
           // TODO: Move this and createInstance step into the beginPhase
           // to consolidate.
-          if (
-            prepareToHydrateHostInstance(workInProgress, currentHostContext)
-          ) {
-            // If changes to the hydrated node need to be applied at the
-            // commit-phase we mark this as such.
-            markUpdate(workInProgress);
-          }
+          prepareToHydrateHostInstance(workInProgress, currentHostContext);
         } else {
           const rootContainerInstance = getRootHostContainer();
           const instance = createInstance(
diff --git a/packages/react-reconciler/src/ReactFiberConfigWithNoHydration.js b/packages/react-reconciler/src/ReactFiberConfigWithNoHydration.js
index f467cbb86b733..7e2b181f4a623 100644
--- a/packages/react-reconciler/src/ReactFiberConfigWithNoHydration.js
+++ b/packages/react-reconciler/src/ReactFiberConfigWithNoHydration.js
@@ -26,6 +26,8 @@ export const isSuspenseInstancePending = shim;
 export const isSuspenseInstanceFallback = shim;
 export const getSuspenseInstanceFallbackErrorDetails = shim;
 export const registerSuspenseInstanceRetry = shim;
+export const canHydrateFormStateMarker = shim;
+export const isFormStateMarkerMatching = shim;
 export const getNextHydratableSibling = shim;
 export const getFirstHydratableChild = shim;
 export const getFirstHydratableChildWithinContainer = shim;
diff --git a/packages/react-reconciler/src/ReactFiberHooks.js b/packages/react-reconciler/src/ReactFiberHooks.js
index 77e9edebe7c67..97f50d65f46c8 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.js
@@ -111,7 +111,10 @@ import {
   markWorkInProgressReceivedUpdate,
   checkIfWorkInProgressReceivedUpdate,
 } from './ReactFiberBeginWork';
-import {getIsHydrating} from './ReactFiberHydrationContext';
+import {
+  getIsHydrating,
+  tryToClaimNextHydratableFormMarkerInstance,
+} from './ReactFiberHydrationContext';
 import {logStateUpdateScheduled} from './DebugTracing';
 import {
   markStateUpdateScheduled,
@@ -137,7 +140,10 @@ import {
 } from './ReactFiberThenable';
 import type {ThenableState} from './ReactFiberThenable';
 import type {BatchConfigTransition} from './ReactFiberTracingMarkerComponent';
-import {requestAsyncActionContext} from './ReactFiberAsyncAction';
+import {
+  requestAsyncActionContext,
+  requestSyncActionContext,
+} from './ReactFiberAsyncAction';
 import {HostTransitionContext} from './ReactFiberHostContext';
 import {requestTransitionLane} from './ReactFiberRootScheduler';
 
@@ -1793,7 +1799,20 @@ function updateOptimistic<S, A>(
   reducer: ?(S, A) => S,
 ): [S, (A) => void] {
   const hook = updateWorkInProgressHook();
+  return updateOptimisticImpl(
+    hook,
+    ((currentHook: any): Hook),
+    passthrough,
+    reducer,
+  );
+}
 
+function updateOptimisticImpl<S, A>(
+  hook: Hook,
+  current: Hook | null,
+  passthrough: S,
+  reducer: ?(S, A) => S,
+): [S, (A) => void] {
   // Optimistic updates are always rebased on top of the latest value passed in
   // as an argument. It's called a passthrough because if there are no pending
   // updates, it will be returned as-is.
@@ -1820,14 +1839,20 @@ function rerenderOptimistic<S, A>(
   // So instead of a forked re-render implementation that knows how to handle
   // render phase udpates, we can use the same implementation as during a
   // regular mount or update.
+  const hook = updateWorkInProgressHook();
 
   if (currentHook !== null) {
     // This is an update. Process the update queue.
-    return updateOptimistic(passthrough, reducer);
+    return updateOptimisticImpl(
+      hook,
+      ((currentHook: any): Hook),
+      passthrough,
+      reducer,
+    );
   }
 
   // This is a mount. No updates to process.
-  const hook = updateWorkInProgressHook();
+
   // Reset the base state and memoized state to the passthrough. Future
   // updates will be applied on top of this.
   hook.baseState = hook.memoizedState = passthrough;
@@ -1835,6 +1860,326 @@ function rerenderOptimistic<S, A>(
   return [passthrough, dispatch];
 }
 
+// useFormState actions run sequentially, because each action receives the
+// previous state as an argument. We store pending actions on a queue.
+type FormStateActionQueue<S, P> = {
+  // This is the most recent state returned from an action. It's updated as
+  // soon as the action finishes running.
+  state: S,
+  // A stable dispatch method, passed to the user.
+  dispatch: Dispatch<P>,
+  // This is the most recent action function that was rendered. It's updated
+  // during the commit phase.
+  action: (S, P) => Promise<S>,
+  // This is a circular linked list of pending action payloads. It incudes the
+  // action that is currently running.
+  pending: FormStateActionQueueNode<P> | null,
+};
+
+type FormStateActionQueueNode<P> = {
+  payload: P,
+  // This is never null because it's part of a circular linked list.
+  next: FormStateActionQueueNode<P>,
+};
+
+function dispatchFormState<S, P>(
+  fiber: Fiber,
+  actionQueue: FormStateActionQueue<S, P>,
+  setState: Dispatch<Thenable<S>>,
+  payload: P,
+): void {
+  if (isRenderPhaseUpdate(fiber)) {
+    throw new Error('Cannot update form state while rendering.');
+  }
+  const last = actionQueue.pending;
+  if (last === null) {
+    // There are no pending actions; this is the first one. We can run
+    // it immediately.
+    const newLast: FormStateActionQueueNode<P> = {
+      payload,
+      next: (null: any), // circular
+    };
+    newLast.next = actionQueue.pending = newLast;
+
+    runFormStateAction(actionQueue, setState, payload);
+  } else {
+    // There's already an action running. Add to the queue.
+    const first = last.next;
+    const newLast: FormStateActionQueueNode<P> = {
+      payload,
+      next: first,
+    };
+    last.next = newLast;
+  }
+}
+
+function runFormStateAction<S, P>(
+  actionQueue: FormStateActionQueue<S, P>,
+  setState: Dispatch<Thenable<S>>,
+  payload: P,
+) {
+  const action = actionQueue.action;
+  const prevState = actionQueue.state;
+
+  // This is a fork of startTransition
+  const prevTransition = ReactCurrentBatchConfig.transition;
+  ReactCurrentBatchConfig.transition = ({}: BatchConfigTransition);
+  const currentTransition = ReactCurrentBatchConfig.transition;
+  if (__DEV__) {
+    ReactCurrentBatchConfig.transition._updatedFibers = new Set();
+  }
+  try {
+    const promise = action(prevState, payload);
+
+    if (__DEV__) {
+      if (
+        promise === null ||
+        typeof promise !== 'object' ||
+        typeof (promise: any).then !== 'function'
+      ) {
+        console.error(
+          'The action passed to useFormState must be an async function.',
+        );
+      }
+    }
+
+    // Attach a listener to read the return state of the action. As soon as this
+    // resolves, we can run the next action in the sequence.
+    promise.then(
+      (nextState: S) => {
+        actionQueue.state = nextState;
+        finishRunningFormStateAction(actionQueue, setState);
+      },
+      () => finishRunningFormStateAction(actionQueue, setState),
+    );
+
+    // Create a thenable that resolves once the current async action scope has
+    // finished. Then stash that thenable in state. We'll unwrap it with the
+    // `use` algorithm during render. This is the same logic used
+    // by startTransition.
+    const entangledThenable: Thenable<S> = requestAsyncActionContext(
+      promise,
+      null,
+    );
+    setState(entangledThenable);
+  } finally {
+    ReactCurrentBatchConfig.transition = prevTransition;
+
+    if (__DEV__) {
+      if (prevTransition === null && currentTransition._updatedFibers) {
+        const updatedFibersCount = currentTransition._updatedFibers.size;
+        currentTransition._updatedFibers.clear();
+        if (updatedFibersCount > 10) {
+          console.warn(
+            'Detected a large number of updates inside startTransition. ' +
+              'If this is due to a subscription please re-write it to use React provided hooks. ' +
+              'Otherwise concurrent mode guarantees are off the table.',
+          );
+        }
+      }
+    }
+  }
+}
+
+function finishRunningFormStateAction<S, P>(
+  actionQueue: FormStateActionQueue<S, P>,
+  setState: Dispatch<Thenable<S>>,
+) {
+  // The action finished running. Pop it from the queue and run the next pending
+  // action, if there are any.
+  const last = actionQueue.pending;
+  if (last !== null) {
+    const first = last.next;
+    if (first === last) {
+      // This was the last action in the queue.
+      actionQueue.pending = null;
+    } else {
+      // Remove the first node from the circular queue.
+      const next = first.next;
+      last.next = next;
+
+      // Run the next action.
+      runFormStateAction(actionQueue, setState, next.payload);
+    }
+  }
+}
+
+function formStateReducer<S>(oldState: S, newState: S): S {
+  return newState;
+}
+
+function mountFormState<S, P>(
+  action: (S, P) => Promise<S>,
+  initialStateProp: S,
+  permalink?: string,
+): [S, (P) => void] {
+  let initialState = initialStateProp;
+  if (getIsHydrating()) {
+    const root: FiberRoot = (getWorkInProgressRoot(): any);
+    const ssrFormState = root.formState;
+    // If a formState option was passed to the root, there are form state
+    // markers that we need to hydrate. These indicate whether the form state
+    // matches this hook instance.
+    if (ssrFormState !== null) {
+      const isMatching = tryToClaimNextHydratableFormMarkerInstance(
+        currentlyRenderingFiber,
+      );
+      if (isMatching) {
+        initialState = ssrFormState[0];
+      }
+    }
+  }
+  const initialStateThenable: Thenable<S> = {
+    status: 'fulfilled',
+    value: initialState,
+    then() {},
+  };
+
+  // State hook. The state is stored in a thenable which is then unwrapped by
+  // the `use` algorithm during render.
+  const stateHook = mountWorkInProgressHook();
+  stateHook.memoizedState = stateHook.baseState = initialStateThenable;
+  const stateQueue: UpdateQueue<Thenable<S>, Thenable<S>> = {
+    pending: null,
+    lanes: NoLanes,
+    dispatch: null,
+    lastRenderedReducer: formStateReducer,
+    lastRenderedState: initialStateThenable,
+  };
+  stateHook.queue = stateQueue;
+  const setState: Dispatch<Thenable<S>> = (dispatchSetState.bind(
+    null,
+    currentlyRenderingFiber,
+    stateQueue,
+  ): any);
+  stateQueue.dispatch = setState;
+
+  // Action queue hook. This is used to queue pending actions. The queue is
+  // shared between all instances of the hook. Similar to a regular state queue,
+  // but different because the actions are run sequentially, and they run in
+  // an event instead of during render.
+  const actionQueueHook = mountWorkInProgressHook();
+  const actionQueue: FormStateActionQueue<S, P> = {
+    state: initialState,
+    dispatch: (null: any), // circular
+    action,
+    pending: null,
+  };
+  actionQueueHook.queue = actionQueue;
+  const dispatch = dispatchFormState.bind(
+    null,
+    currentlyRenderingFiber,
+    actionQueue,
+    setState,
+  );
+  actionQueue.dispatch = dispatch;
+
+  // Stash the action function on the memoized state of the hook. We'll use this
+  // to detect when the action function changes so we can update it in
+  // an effect.
+  actionQueueHook.memoizedState = action;
+
+  return [initialState, dispatch];
+}
+
+function updateFormState<S, P>(
+  action: (S, P) => Promise<S>,
+  initialState: S,
+  permalink?: string,
+): [S, (P) => void] {
+  const stateHook = updateWorkInProgressHook();
+  const currentStateHook = ((currentHook: any): Hook);
+  return updateFormStateImpl(
+    stateHook,
+    currentStateHook,
+    action,
+    initialState,
+    permalink,
+  );
+}
+
+function updateFormStateImpl<S, P>(
+  stateHook: Hook,
+  currentStateHook: Hook,
+  action: (S, P) => Promise<S>,
+  initialState: S,
+  permalink?: string,
+): [S, (P) => void] {
+  const [thenable] = updateReducerImpl<Thenable<S>, Thenable<S>>(
+    stateHook,
+    currentStateHook,
+    formStateReducer,
+  );
+
+  // This will suspend until the action finishes.
+  const state = useThenable(thenable);
+
+  const actionQueueHook = updateWorkInProgressHook();
+  const actionQueue = actionQueueHook.queue;
+  const dispatch = actionQueue.dispatch;
+
+  // Check if a new action was passed. If so, update it in an effect.
+  const prevAction = actionQueueHook.memoizedState;
+  if (action !== prevAction) {
+    currentlyRenderingFiber.flags |= PassiveEffect;
+    pushEffect(
+      HookHasEffect | HookPassive,
+      formStateActionEffect.bind(null, actionQueue, action),
+      createEffectInstance(),
+      null,
+    );
+  }
+
+  return [state, dispatch];
+}
+
+function formStateActionEffect<S, P>(
+  actionQueue: FormStateActionQueue<S, P>,
+  action: (S, P) => Promise<S>,
+): void {
+  actionQueue.action = action;
+}
+
+function rerenderFormState<S, P>(
+  action: (S, P) => Promise<S>,
+  initialState: S,
+  permalink?: string,
+): [S, (P) => void] {
+  // Unlike useState, useFormState doesn't support render phase updates.
+  // Also unlike useState, we need to replay all pending updates again in case
+  // the passthrough value changed.
+  //
+  // So instead of a forked re-render implementation that knows how to handle
+  // render phase udpates, we can use the same implementation as during a
+  // regular mount or update.
+  const stateHook = updateWorkInProgressHook();
+  const currentStateHook = currentHook;
+
+  if (currentStateHook !== null) {
+    // This is an update. Process the update queue.
+    return updateFormStateImpl(
+      stateHook,
+      currentStateHook,
+      action,
+      initialState,
+      permalink,
+    );
+  }
+
+  // This is a mount. No updates to process.
+  const thenable: Thenable<S> = stateHook.memoizedState;
+  const state = useThenable(thenable);
+
+  const actionQueueHook = updateWorkInProgressHook();
+  const actionQueue = actionQueueHook.queue;
+  const dispatch = actionQueue.dispatch;
+
+  // This may have changed during the rerender.
+  actionQueueHook.memoizedState = action;
+
+  return [state, dispatch];
+}
+
 function pushEffect(
   tag: HookFlags,
   create: () => (() => void) | void,
@@ -2409,15 +2754,37 @@ function startTransition<S>(
     if (enableAsyncActions) {
       const returnValue = callback();
 
-      // This is either `finishedState` or a thenable that resolves to
-      // `finishedState`, depending on whether the action scope is an async
-      // function. In the async case, the resulting render will suspend until
-      // the async action scope has finished.
-      const maybeThenable = requestAsyncActionContext(
-        returnValue,
-        finishedState,
-      );
-      dispatchSetState(fiber, queue, maybeThenable);
+      // Check if we're inside an async action scope. If so, we'll entangle
+      // this new action with the existing scope.
+      //
+      // If we're not already inside an async action scope, and this action is
+      // async, then we'll create a new async scope.
+      //
+      // In the async case, the resulting render will suspend until the async
+      // action scope has finished.
+      if (
+        returnValue !== null &&
+        typeof returnValue === 'object' &&
+        typeof returnValue.then === 'function'
+      ) {
+        const thenable = ((returnValue: any): Thenable<mixed>);
+        // This is a thenable that resolves to `finishedState` once the async
+        // action scope has finished.
+        const entangledResult = requestAsyncActionContext(
+          thenable,
+          finishedState,
+        );
+        dispatchSetState(fiber, queue, entangledResult);
+      } else {
+        // This is either `finishedState` or a thenable that resolves to
+        // `finishedState`, depending on whether we're inside an async
+        // action scope.
+        const entangledResult = requestSyncActionContext(
+          returnValue,
+          finishedState,
+        );
+        dispatchSetState(fiber, queue, entangledResult);
+      }
     } else {
       // Async actions are not enabled.
       dispatchSetState(fiber, queue, finishedState);
@@ -2981,6 +3348,7 @@ if (enableUseEffectEventHook) {
 if (enableFormActions && enableAsyncActions) {
   (ContextOnlyDispatcher: Dispatcher).useHostTransitionStatus =
     throwInvalidHookError;
+  (ContextOnlyDispatcher: Dispatcher).useFormState = throwInvalidHookError;
 }
 if (enableAsyncActions) {
   (ContextOnlyDispatcher: Dispatcher).useOptimistic = throwInvalidHookError;
@@ -3018,6 +3386,7 @@ if (enableUseEffectEventHook) {
 if (enableFormActions && enableAsyncActions) {
   (HooksDispatcherOnMount: Dispatcher).useHostTransitionStatus =
     useHostTransitionStatus;
+  (HooksDispatcherOnMount: Dispatcher).useFormState = mountFormState;
 }
 if (enableAsyncActions) {
   (HooksDispatcherOnMount: Dispatcher).useOptimistic = mountOptimistic;
@@ -3055,6 +3424,7 @@ if (enableUseEffectEventHook) {
 if (enableFormActions && enableAsyncActions) {
   (HooksDispatcherOnUpdate: Dispatcher).useHostTransitionStatus =
     useHostTransitionStatus;
+  (HooksDispatcherOnUpdate: Dispatcher).useFormState = updateFormState;
 }
 if (enableAsyncActions) {
   (HooksDispatcherOnUpdate: Dispatcher).useOptimistic = updateOptimistic;
@@ -3092,6 +3462,7 @@ if (enableUseEffectEventHook) {
 if (enableFormActions && enableAsyncActions) {
   (HooksDispatcherOnRerender: Dispatcher).useHostTransitionStatus =
     useHostTransitionStatus;
+  (HooksDispatcherOnRerender: Dispatcher).useFormState = rerenderFormState;
 }
 if (enableAsyncActions) {
   (HooksDispatcherOnRerender: Dispatcher).useOptimistic = rerenderOptimistic;
@@ -3276,6 +3647,16 @@ if (__DEV__) {
   if (enableFormActions && enableAsyncActions) {
     (HooksDispatcherOnMountInDEV: Dispatcher).useHostTransitionStatus =
       useHostTransitionStatus;
+    (HooksDispatcherOnMountInDEV: Dispatcher).useFormState =
+      function useFormState<S, P>(
+        action: (S, P) => Promise<S>,
+        initialState: S,
+        permalink?: string,
+      ): [S, (P) => void] {
+        currentHookNameInDev = 'useFormState';
+        mountHookTypesDev();
+        return mountFormState(action, initialState, permalink);
+      };
   }
   if (enableAsyncActions) {
     (HooksDispatcherOnMountInDEV: Dispatcher).useOptimistic =
@@ -3436,6 +3817,16 @@ if (__DEV__) {
   if (enableFormActions && enableAsyncActions) {
     (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).useHostTransitionStatus =
       useHostTransitionStatus;
+    (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).useFormState =
+      function useFormState<S, P>(
+        action: (S, P) => Promise<S>,
+        initialState: S,
+        permalink?: string,
+      ): [S, (P) => void] {
+        currentHookNameInDev = 'useFormState';
+        updateHookTypesDev();
+        return mountFormState(action, initialState, permalink);
+      };
   }
   if (enableAsyncActions) {
     (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).useOptimistic =
@@ -3598,6 +3989,16 @@ if (__DEV__) {
   if (enableFormActions && enableAsyncActions) {
     (HooksDispatcherOnUpdateInDEV: Dispatcher).useHostTransitionStatus =
       useHostTransitionStatus;
+    (HooksDispatcherOnUpdateInDEV: Dispatcher).useFormState =
+      function useFormState<S, P>(
+        action: (S, P) => Promise<S>,
+        initialState: S,
+        permalink?: string,
+      ): [S, (P) => void] {
+        currentHookNameInDev = 'useFormState';
+        updateHookTypesDev();
+        return updateFormState(action, initialState, permalink);
+      };
   }
   if (enableAsyncActions) {
     (HooksDispatcherOnUpdateInDEV: Dispatcher).useOptimistic =
@@ -3760,6 +4161,16 @@ if (__DEV__) {
   if (enableFormActions && enableAsyncActions) {
     (HooksDispatcherOnRerenderInDEV: Dispatcher).useHostTransitionStatus =
       useHostTransitionStatus;
+    (HooksDispatcherOnRerenderInDEV: Dispatcher).useFormState =
+      function useFormState<S, P>(
+        action: (S, P) => Promise<S>,
+        initialState: S,
+        permalink?: string,
+      ): [S, (P) => void] {
+        currentHookNameInDev = 'useFormState';
+        updateHookTypesDev();
+        return rerenderFormState(action, initialState, permalink);
+      };
   }
   if (enableAsyncActions) {
     (HooksDispatcherOnRerenderInDEV: Dispatcher).useOptimistic =
@@ -3943,6 +4354,17 @@ if (__DEV__) {
   if (enableFormActions && enableAsyncActions) {
     (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).useHostTransitionStatus =
       useHostTransitionStatus;
+    (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).useFormState =
+      function useFormState<S, P>(
+        action: (S, P) => Promise<S>,
+        initialState: S,
+        permalink?: string,
+      ): [S, (P) => void] {
+        currentHookNameInDev = 'useFormState';
+        warnInvalidHookAccess();
+        mountHookTypesDev();
+        return mountFormState(action, initialState, permalink);
+      };
   }
   if (enableAsyncActions) {
     (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).useOptimistic =
@@ -4130,6 +4552,17 @@ if (__DEV__) {
   if (enableFormActions && enableAsyncActions) {
     (InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).useHostTransitionStatus =
       useHostTransitionStatus;
+    (InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).useFormState =
+      function useFormState<S, P>(
+        action: (S, P) => Promise<S>,
+        initialState: S,
+        permalink?: string,
+      ): [S, (P) => void] {
+        currentHookNameInDev = 'useFormState';
+        warnInvalidHookAccess();
+        updateHookTypesDev();
+        return updateFormState(action, initialState, permalink);
+      };
   }
   if (enableAsyncActions) {
     (InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).useOptimistic =
@@ -4317,6 +4750,17 @@ if (__DEV__) {
   if (enableFormActions && enableAsyncActions) {
     (InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).useHostTransitionStatus =
       useHostTransitionStatus;
+    (InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).useFormState =
+      function useFormState<S, P>(
+        action: (S, P) => Promise<S>,
+        initialState: S,
+        permalink?: string,
+      ): [S, (P) => void] {
+        currentHookNameInDev = 'useFormState';
+        warnInvalidHookAccess();
+        updateHookTypesDev();
+        return rerenderFormState(action, initialState, permalink);
+      };
   }
   if (enableAsyncActions) {
     (InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).useOptimistic =
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.js b/packages/react-reconciler/src/ReactFiberHydrationContext.js
index 3453fcb451631..c1ee83c2c8e71 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.js
@@ -38,7 +38,6 @@ import {
 import {
   enableHostSingletons,
   enableClientRenderFallbackOnTextMismatch,
-  diffInCommitPhase,
 } from 'shared/ReactFeatureFlags';
 
 import {
@@ -76,6 +75,8 @@ import {
   canHydrateInstance,
   canHydrateTextInstance,
   canHydrateSuspenseInstance,
+  canHydrateFormStateMarker,
+  isFormStateMarkerMatching,
   isHydratableText,
 } from './ReactFiberConfig';
 import {OffscreenLane} from './ReactFiberLane';
@@ -595,10 +596,38 @@ function tryToClaimNextHydratableSuspenseInstance(fiber: Fiber): void {
   }
 }
 
+export function tryToClaimNextHydratableFormMarkerInstance(
+  fiber: Fiber,
+): boolean {
+  if (!isHydrating) {
+    return false;
+  }
+  if (nextHydratableInstance) {
+    const markerInstance = canHydrateFormStateMarker(
+      nextHydratableInstance,
+      rootOrSingletonContext,
+    );
+    if (markerInstance) {
+      // Found the marker instance.
+      nextHydratableInstance = getNextHydratableSibling(markerInstance);
+      // Return true if this marker instance should use the state passed
+      // to hydrateRoot.
+      // TODO: As an optimization, Fizz should only emit these markers if form
+      // state is passed at the root.
+      return isFormStateMarkerMatching(markerInstance);
+    }
+  }
+  // Should have found a marker instance. Throw an error to trigger client
+  // rendering. We don't bother to check if we're in a concurrent root because
+  // useFormState is a new API, so backwards compat is not an issue.
+  throwOnHydrationMismatch(fiber);
+  return false;
+}
+
 function prepareToHydrateHostInstance(
   fiber: Fiber,
   hostContext: HostContext,
-): boolean {
+): void {
   if (!supportsHydration) {
     throw new Error(
       'Expected prepareToHydrateHostInstance() to never be called. ' +
@@ -608,7 +637,7 @@ function prepareToHydrateHostInstance(
 
   const instance: Instance = fiber.stateNode;
   const shouldWarnIfMismatchDev = !didSuspendOrErrorDEV;
-  const updatePayload = hydrateInstance(
+  hydrateInstance(
     instance,
     fiber.type,
     fiber.memoizedProps,
@@ -616,17 +645,6 @@ function prepareToHydrateHostInstance(
     fiber,
     shouldWarnIfMismatchDev,
   );
-
-  // TODO: Type this specific to this type of component.
-  if (!diffInCommitPhase) {
-    fiber.updateQueue = (updatePayload: any);
-    // If the update payload indicates that there is a change or if there
-    // is a new ref we mark this as an update.
-    if (updatePayload !== null) {
-      return true;
-    }
-  }
-  return false;
 }
 
 function prepareToHydrateHostTextInstance(fiber: Fiber): boolean {
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.js b/packages/react-reconciler/src/ReactFiberReconciler.js
index 4b5193585a0b0..43888908328f5 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.js
@@ -21,7 +21,7 @@ import type {
   PublicInstance,
   RendererInspectionConfig,
 } from './ReactFiberConfig';
-import type {ReactNodeList} from 'shared/ReactTypes';
+import type {ReactNodeList, ReactFormState} from 'shared/ReactTypes';
 import type {Lane} from './ReactFiberLane';
 import type {SuspenseState} from './ReactFiberSuspenseComponent';
 
@@ -265,6 +265,7 @@ export function createContainer(
     identifierPrefix,
     onRecoverableError,
     transitionCallbacks,
+    null,
   );
 }
 
@@ -280,6 +281,7 @@ export function createHydrationContainer(
   identifierPrefix: string,
   onRecoverableError: (error: mixed) => void,
   transitionCallbacks: null | TransitionTracingCallbacks,
+  formState: ReactFormState<any, any> | null,
 ): OpaqueRoot {
   const hydrate = true;
   const root = createFiberRoot(
@@ -293,6 +295,7 @@ export function createHydrationContainer(
     identifierPrefix,
     onRecoverableError,
     transitionCallbacks,
+    formState,
   );
 
   // TODO: Move this to FiberRoot constructor
diff --git a/packages/react-reconciler/src/ReactFiberRoot.js b/packages/react-reconciler/src/ReactFiberRoot.js
index e65e25b97df6b..210561595aac4 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import type {ReactNodeList} from 'shared/ReactTypes';
+import type {ReactNodeList, ReactFormState} from 'shared/ReactTypes';
 import type {
   FiberRoot,
   SuspenseHydrationCallbacks,
@@ -52,6 +52,7 @@ function FiberRootNode(
   hydrate: any,
   identifierPrefix: any,
   onRecoverableError: any,
+  formState: ReactFormState<any, any> | null,
 ) {
   this.tag = tag;
   this.containerInfo = containerInfo;
@@ -93,6 +94,8 @@ function FiberRootNode(
     this.hydrationCallbacks = null;
   }
 
+  this.formState = formState;
+
   this.incompleteTransitions = new Map();
   if (enableTransitionTracing) {
     this.transitionCallbacks = null;
@@ -142,6 +145,7 @@ export function createFiberRoot(
   identifierPrefix: string,
   onRecoverableError: null | ((error: mixed) => void),
   transitionCallbacks: null | TransitionTracingCallbacks,
+  formState: ReactFormState<any, any> | null,
 ): FiberRoot {
   // $FlowFixMe[invalid-constructor] Flow no longer supports calling new on functions
   const root: FiberRoot = (new FiberRootNode(
@@ -150,6 +154,7 @@ export function createFiberRoot(
     hydrate,
     identifierPrefix,
     onRecoverableError,
+    formState,
   ): any);
   if (enableSuspenseCallback) {
     root.hydrationCallbacks = hydrationCallbacks;
diff --git a/packages/react-reconciler/src/ReactFiberThenable.js b/packages/react-reconciler/src/ReactFiberThenable.js
index 6d99a07132218..5da965e41c4fb 100644
--- a/packages/react-reconciler/src/ReactFiberThenable.js
+++ b/packages/react-reconciler/src/ReactFiberThenable.js
@@ -42,7 +42,16 @@ export const SuspenseyCommitException: mixed = new Error(
 // TODO: It would be better to refactor throwException into multiple functions
 // so we can trigger a fallback directly without having to check the type. But
 // for now this will do.
-export const noopSuspenseyCommitThenable = {then() {}};
+export const noopSuspenseyCommitThenable = {
+  then() {
+    if (__DEV__) {
+      console.error(
+        'Internal React error: A listener was unexpectedly attached to a ' +
+          '"noop" thenable. This is a bug in React. Please file an issue.',
+      );
+    }
+  },
+};
 
 export function createThenableState(): ThenableState {
   // The ThenableState is created the first time a component suspends. If it
diff --git a/packages/react-reconciler/src/ReactFiberThrow.js b/packages/react-reconciler/src/ReactFiberThrow.js
index d32cb7d5f3a02..b979f194652d1 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.js
@@ -41,6 +41,7 @@ import {
   enableDebugTracing,
   enableLazyContextPropagation,
   enableUpdaterTracking,
+  enablePostpone,
 } from 'shared/ReactFeatureFlags';
 import {createCapturedValueAtFiber} from './ReactCapturedValue';
 import {
@@ -82,6 +83,7 @@ import {
 } from './ReactFiberHydrationContext';
 import {ConcurrentRoot} from './ReactRootTags';
 import {noopSuspenseyCommitThenable} from './ReactFiberThenable';
+import {REACT_POSTPONE_TYPE} from 'shared/ReactSymbols';
 
 function createRootErrorUpdate(
   fiber: Fiber,
@@ -332,210 +334,213 @@ function throwException(
     }
   }
 
-  if (
-    value !== null &&
-    typeof value === 'object' &&
-    typeof value.then === 'function'
-  ) {
-    // This is a wakeable. The component suspended.
-    const wakeable: Wakeable = (value: any);
-    resetSuspendedComponent(sourceFiber, rootRenderLanes);
+  if (value !== null && typeof value === 'object') {
+    if (enablePostpone && value.$$typeof === REACT_POSTPONE_TYPE) {
+      // Act as if this is an infinitely suspending promise.
+      value = {then: function () {}};
+    }
+    if (typeof value.then === 'function') {
+      // This is a wakeable. The component suspended.
+      const wakeable: Wakeable = (value: any);
+      resetSuspendedComponent(sourceFiber, rootRenderLanes);
 
-    if (__DEV__) {
-      if (getIsHydrating() && sourceFiber.mode & ConcurrentMode) {
-        markDidThrowWhileHydratingDEV();
+      if (__DEV__) {
+        if (getIsHydrating() && sourceFiber.mode & ConcurrentMode) {
+          markDidThrowWhileHydratingDEV();
+        }
       }
-    }
 
-    if (__DEV__) {
-      if (enableDebugTracing) {
-        if (sourceFiber.mode & DebugTracingMode) {
-          const name = getComponentNameFromFiber(sourceFiber) || 'Unknown';
-          logComponentSuspended(name, wakeable);
+      if (__DEV__) {
+        if (enableDebugTracing) {
+          if (sourceFiber.mode & DebugTracingMode) {
+            const name = getComponentNameFromFiber(sourceFiber) || 'Unknown';
+            logComponentSuspended(name, wakeable);
+          }
         }
       }
-    }
 
-    // Mark the nearest Suspense boundary to switch to rendering a fallback.
-    const suspenseBoundary = getSuspenseHandler();
-    if (suspenseBoundary !== null) {
-      switch (suspenseBoundary.tag) {
-        case SuspenseComponent: {
-          // If this suspense boundary is not already showing a fallback, mark
-          // the in-progress render as suspended. We try to perform this logic
-          // as soon as soon as possible during the render phase, so the work
-          // loop can know things like whether it's OK to switch to other tasks,
-          // or whether it can wait for data to resolve before continuing.
-          // TODO: Most of these checks are already performed when entering a
-          // Suspense boundary. We should track the information on the stack so
-          // we don't have to recompute it on demand. This would also allow us
-          // to unify with `use` which needs to perform this logic even sooner,
-          // before `throwException` is called.
-          if (sourceFiber.mode & ConcurrentMode) {
-            if (getShellBoundary() === null) {
-              // Suspended in the "shell" of the app. This is an undesirable
-              // loading state. We should avoid committing this tree.
-              renderDidSuspendDelayIfPossible();
-            } else {
-              // If we suspended deeper than the shell, we don't need to delay
-              // the commmit. However, we still call renderDidSuspend if this is
-              // a new boundary, to tell the work loop that a new fallback has
-              // appeared during this render.
-              // TODO: Theoretically we should be able to delete this branch.
-              // It's currently used for two things: 1) to throttle the
-              // appearance of successive loading states, and 2) in
-              // SuspenseList, to determine whether the children include any
-              // pending fallbacks. For 1, we should apply throttling to all
-              // retries, not just ones that render an additional fallback. For
-              // 2, we should check subtreeFlags instead. Then we can delete
-              // this branch.
-              const current = suspenseBoundary.alternate;
-              if (current === null) {
-                renderDidSuspend();
+      // Mark the nearest Suspense boundary to switch to rendering a fallback.
+      const suspenseBoundary = getSuspenseHandler();
+      if (suspenseBoundary !== null) {
+        switch (suspenseBoundary.tag) {
+          case SuspenseComponent: {
+            // If this suspense boundary is not already showing a fallback, mark
+            // the in-progress render as suspended. We try to perform this logic
+            // as soon as soon as possible during the render phase, so the work
+            // loop can know things like whether it's OK to switch to other tasks,
+            // or whether it can wait for data to resolve before continuing.
+            // TODO: Most of these checks are already performed when entering a
+            // Suspense boundary. We should track the information on the stack so
+            // we don't have to recompute it on demand. This would also allow us
+            // to unify with `use` which needs to perform this logic even sooner,
+            // before `throwException` is called.
+            if (sourceFiber.mode & ConcurrentMode) {
+              if (getShellBoundary() === null) {
+                // Suspended in the "shell" of the app. This is an undesirable
+                // loading state. We should avoid committing this tree.
+                renderDidSuspendDelayIfPossible();
+              } else {
+                // If we suspended deeper than the shell, we don't need to delay
+                // the commmit. However, we still call renderDidSuspend if this is
+                // a new boundary, to tell the work loop that a new fallback has
+                // appeared during this render.
+                // TODO: Theoretically we should be able to delete this branch.
+                // It's currently used for two things: 1) to throttle the
+                // appearance of successive loading states, and 2) in
+                // SuspenseList, to determine whether the children include any
+                // pending fallbacks. For 1, we should apply throttling to all
+                // retries, not just ones that render an additional fallback. For
+                // 2, we should check subtreeFlags instead. Then we can delete
+                // this branch.
+                const current = suspenseBoundary.alternate;
+                if (current === null) {
+                  renderDidSuspend();
+                }
               }
             }
-          }
 
-          suspenseBoundary.flags &= ~ForceClientRender;
-          markSuspenseBoundaryShouldCapture(
-            suspenseBoundary,
-            returnFiber,
-            sourceFiber,
-            root,
-            rootRenderLanes,
-          );
-          // Retry listener
-          //
-          // If the fallback does commit, we need to attach a different type of
-          // listener. This one schedules an update on the Suspense boundary to
-          // turn the fallback state off.
-          //
-          // Stash the wakeable on the boundary fiber so we can access it in the
-          // commit phase.
-          //
-          // When the wakeable resolves, we'll attempt to render the boundary
-          // again ("retry").
+            suspenseBoundary.flags &= ~ForceClientRender;
+            markSuspenseBoundaryShouldCapture(
+              suspenseBoundary,
+              returnFiber,
+              sourceFiber,
+              root,
+              rootRenderLanes,
+            );
+            // Retry listener
+            //
+            // If the fallback does commit, we need to attach a different type of
+            // listener. This one schedules an update on the Suspense boundary to
+            // turn the fallback state off.
+            //
+            // Stash the wakeable on the boundary fiber so we can access it in the
+            // commit phase.
+            //
+            // When the wakeable resolves, we'll attempt to render the boundary
+            // again ("retry").
 
-          // Check if this is a Suspensey resource. We do not attach retry
-          // listeners to these, because we don't actually need them for
-          // rendering. Only for committing. Instead, if a fallback commits
-          // and the only thing that suspended was a Suspensey resource, we
-          // retry immediately.
-          // TODO: Refactor throwException so that we don't have to do this type
-          // check. The caller already knows what the cause was.
-          const isSuspenseyResource = wakeable === noopSuspenseyCommitThenable;
-          if (isSuspenseyResource) {
-            suspenseBoundary.flags |= ScheduleRetry;
-          } else {
-            const retryQueue: RetryQueue | null =
-              (suspenseBoundary.updateQueue: any);
-            if (retryQueue === null) {
-              suspenseBoundary.updateQueue = new Set([wakeable]);
-            } else {
-              retryQueue.add(wakeable);
-            }
-          }
-          break;
-        }
-        case OffscreenComponent: {
-          if (suspenseBoundary.mode & ConcurrentMode) {
-            suspenseBoundary.flags |= ShouldCapture;
+            // Check if this is a Suspensey resource. We do not attach retry
+            // listeners to these, because we don't actually need them for
+            // rendering. Only for committing. Instead, if a fallback commits
+            // and the only thing that suspended was a Suspensey resource, we
+            // retry immediately.
+            // TODO: Refactor throwException so that we don't have to do this type
+            // check. The caller already knows what the cause was.
             const isSuspenseyResource =
               wakeable === noopSuspenseyCommitThenable;
             if (isSuspenseyResource) {
               suspenseBoundary.flags |= ScheduleRetry;
             } else {
-              const offscreenQueue: OffscreenQueue | null =
+              const retryQueue: RetryQueue | null =
                 (suspenseBoundary.updateQueue: any);
-              if (offscreenQueue === null) {
-                const newOffscreenQueue: OffscreenQueue = {
-                  transitions: null,
-                  markerInstances: null,
-                  retryQueue: new Set([wakeable]),
-                };
-                suspenseBoundary.updateQueue = newOffscreenQueue;
+              if (retryQueue === null) {
+                suspenseBoundary.updateQueue = new Set([wakeable]);
+              } else {
+                retryQueue.add(wakeable);
+              }
+
+              // We only attach ping listeners in concurrent mode. Legacy
+              // Suspense always commits fallbacks synchronously, so there are
+              // no pings.
+              if (suspenseBoundary.mode & ConcurrentMode) {
+                attachPingListener(root, wakeable, rootRenderLanes);
+              }
+            }
+            return;
+          }
+          case OffscreenComponent: {
+            if (suspenseBoundary.mode & ConcurrentMode) {
+              suspenseBoundary.flags |= ShouldCapture;
+              const isSuspenseyResource =
+                wakeable === noopSuspenseyCommitThenable;
+              if (isSuspenseyResource) {
+                suspenseBoundary.flags |= ScheduleRetry;
               } else {
-                const retryQueue = offscreenQueue.retryQueue;
-                if (retryQueue === null) {
-                  offscreenQueue.retryQueue = new Set([wakeable]);
+                const offscreenQueue: OffscreenQueue | null =
+                  (suspenseBoundary.updateQueue: any);
+                if (offscreenQueue === null) {
+                  const newOffscreenQueue: OffscreenQueue = {
+                    transitions: null,
+                    markerInstances: null,
+                    retryQueue: new Set([wakeable]),
+                  };
+                  suspenseBoundary.updateQueue = newOffscreenQueue;
                 } else {
-                  retryQueue.add(wakeable);
+                  const retryQueue = offscreenQueue.retryQueue;
+                  if (retryQueue === null) {
+                    offscreenQueue.retryQueue = new Set([wakeable]);
+                  } else {
+                    retryQueue.add(wakeable);
+                  }
                 }
+
+                attachPingListener(root, wakeable, rootRenderLanes);
               }
+              return;
             }
-            break;
           }
-          // Fall through
         }
-        default: {
-          throw new Error(
-            `Unexpected Suspense handler tag (${suspenseBoundary.tag}). This ` +
-              'is a bug in React.',
+        throw new Error(
+          `Unexpected Suspense handler tag (${suspenseBoundary.tag}). This ` +
+            'is a bug in React.',
+        );
+      } else {
+        // No boundary was found. Unless this is a sync update, this is OK.
+        // We can suspend and wait for more data to arrive.
+
+        if (root.tag === ConcurrentRoot) {
+          // In a concurrent root, suspending without a Suspense boundary is
+          // allowed. It will suspend indefinitely without committing.
+          //
+          // TODO: Should we have different behavior for discrete updates? What
+          // about flushSync? Maybe it should put the tree into an inert state,
+          // and potentially log a warning. Revisit this for a future release.
+          attachPingListener(root, wakeable, rootRenderLanes);
+          renderDidSuspendDelayIfPossible();
+          return;
+        } else {
+          // In a legacy root, suspending without a boundary is always an error.
+          const uncaughtSuspenseError = new Error(
+            'A component suspended while responding to synchronous input. This ' +
+              'will cause the UI to be replaced with a loading indicator. To ' +
+              'fix, updates that suspend should be wrapped ' +
+              'with startTransition.',
           );
+          value = uncaughtSuspenseError;
         }
       }
-      // We only attach ping listeners in concurrent mode. Legacy Suspense always
-      // commits fallbacks synchronously, so there are no pings.
-      if (suspenseBoundary.mode & ConcurrentMode) {
-        attachPingListener(root, wakeable, rootRenderLanes);
-      }
-      return;
-    } else {
-      // No boundary was found. Unless this is a sync update, this is OK.
-      // We can suspend and wait for more data to arrive.
-
-      if (root.tag === ConcurrentRoot) {
-        // In a concurrent root, suspending without a Suspense boundary is
-        // allowed. It will suspend indefinitely without committing.
-        //
-        // TODO: Should we have different behavior for discrete updates? What
-        // about flushSync? Maybe it should put the tree into an inert state,
-        // and potentially log a warning. Revisit this for a future release.
-        attachPingListener(root, wakeable, rootRenderLanes);
-        renderDidSuspendDelayIfPossible();
-        return;
-      } else {
-        // In a legacy root, suspending without a boundary is always an error.
-        const uncaughtSuspenseError = new Error(
-          'A component suspended while responding to synchronous input. This ' +
-            'will cause the UI to be replaced with a loading indicator. To ' +
-            'fix, updates that suspend should be wrapped ' +
-            'with startTransition.',
-        );
-        value = uncaughtSuspenseError;
-      }
     }
-  } else {
-    // This is a regular error, not a Suspense wakeable.
-    if (getIsHydrating() && sourceFiber.mode & ConcurrentMode) {
-      markDidThrowWhileHydratingDEV();
-      const suspenseBoundary = getSuspenseHandler();
-      // If the error was thrown during hydration, we may be able to recover by
-      // discarding the dehydrated content and switching to a client render.
-      // Instead of surfacing the error, find the nearest Suspense boundary
-      // and render it again without hydration.
-      if (suspenseBoundary !== null) {
-        if ((suspenseBoundary.flags & ShouldCapture) === NoFlags) {
-          // Set a flag to indicate that we should try rendering the normal
-          // children again, not the fallback.
-          suspenseBoundary.flags |= ForceClientRender;
-        }
-        markSuspenseBoundaryShouldCapture(
-          suspenseBoundary,
-          returnFiber,
-          sourceFiber,
-          root,
-          rootRenderLanes,
-        );
+  }
 
-        // Even though the user may not be affected by this error, we should
-        // still log it so it can be fixed.
-        queueHydrationError(createCapturedValueAtFiber(value, sourceFiber));
-        return;
+  // This is a regular error, not a Suspense wakeable.
+  if (getIsHydrating() && sourceFiber.mode & ConcurrentMode) {
+    markDidThrowWhileHydratingDEV();
+    const suspenseBoundary = getSuspenseHandler();
+    // If the error was thrown during hydration, we may be able to recover by
+    // discarding the dehydrated content and switching to a client render.
+    // Instead of surfacing the error, find the nearest Suspense boundary
+    // and render it again without hydration.
+    if (suspenseBoundary !== null) {
+      if ((suspenseBoundary.flags & ShouldCapture) === NoFlags) {
+        // Set a flag to indicate that we should try rendering the normal
+        // children again, not the fallback.
+        suspenseBoundary.flags |= ForceClientRender;
       }
-    } else {
-      // Otherwise, fall through to the error path.
+      markSuspenseBoundaryShouldCapture(
+        suspenseBoundary,
+        returnFiber,
+        sourceFiber,
+        root,
+        rootRenderLanes,
+      );
+
+      // Even though the user may not be affected by this error, we should
+      // still log it so it can be fixed.
+      queueHydrationError(createCapturedValueAtFiber(value, sourceFiber));
+      return;
     }
+  } else {
+    // Otherwise, fall through to the error path.
   }
 
   value = createCapturedValueAtFiber(value, sourceFiber);
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.js b/packages/react-reconciler/src/ReactFiberWorkLoop.js
index 9ff0fbf3b7be8..10c87305ad472 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.js
@@ -892,58 +892,39 @@ export function performConcurrentWorkOnRoot(
   let exitStatus = shouldTimeSlice
     ? renderRootConcurrent(root, lanes)
     : renderRootSync(root, lanes);
-  if (exitStatus !== RootInProgress) {
-    if (exitStatus === RootErrored) {
-      // If something threw an error, try rendering one more time. We'll
-      // render synchronously to block concurrent data mutations, and we'll
-      // includes all pending updates are included. If it still fails after
-      // the second attempt, we'll give up and commit the resulting tree.
-      const originallyAttemptedLanes = lanes;
-      const errorRetryLanes = getLanesToRetrySynchronouslyOnError(
-        root,
-        originallyAttemptedLanes,
-      );
-      if (errorRetryLanes !== NoLanes) {
-        lanes = errorRetryLanes;
-        exitStatus = recoverFromConcurrentError(
-          root,
-          originallyAttemptedLanes,
-          errorRetryLanes,
-        );
-      }
-    }
-    if (exitStatus === RootFatalErrored) {
-      const fatalError = workInProgressRootFatalError;
-      prepareFreshStack(root, NoLanes);
-      markRootSuspended(root, lanes);
-      ensureRootIsScheduled(root);
-      throw fatalError;
-    }
 
-    if (exitStatus === RootDidNotComplete) {
-      // The render unwound without completing the tree. This happens in special
-      // cases where need to exit the current render without producing a
-      // consistent tree or committing.
-      markRootSuspended(root, lanes);
-    } else {
-      // The render completed.
-
-      // Check if this render may have yielded to a concurrent event, and if so,
-      // confirm that any newly rendered stores are consistent.
-      // TODO: It's possible that even a concurrent render may never have yielded
-      // to the main thread, if it was fast enough, or if it expired. We could
-      // skip the consistency check in that case, too.
-      const renderWasConcurrent = !includesBlockingLane(root, lanes);
-      const finishedWork: Fiber = (root.current.alternate: any);
-      if (
-        renderWasConcurrent &&
-        !isRenderConsistentWithExternalStores(finishedWork)
-      ) {
-        // A store was mutated in an interleaved event. Render again,
-        // synchronously, to block further mutations.
-        exitStatus = renderRootSync(root, lanes);
+  if (exitStatus !== RootInProgress) {
+    let renderWasConcurrent = shouldTimeSlice;
+    do {
+      if (exitStatus === RootDidNotComplete) {
+        // The render unwound without completing the tree. This happens in special
+        // cases where need to exit the current render without producing a
+        // consistent tree or committing.
+        markRootSuspended(root, lanes);
+      } else {
+        // The render completed.
+
+        // Check if this render may have yielded to a concurrent event, and if so,
+        // confirm that any newly rendered stores are consistent.
+        // TODO: It's possible that even a concurrent render may never have yielded
+        // to the main thread, if it was fast enough, or if it expired. We could
+        // skip the consistency check in that case, too.
+        const finishedWork: Fiber = (root.current.alternate: any);
+        if (
+          renderWasConcurrent &&
+          !isRenderConsistentWithExternalStores(finishedWork)
+        ) {
+          // A store was mutated in an interleaved event. Render again,
+          // synchronously, to block further mutations.
+          exitStatus = renderRootSync(root, lanes);
+          // We assume the tree is now consistent because we didn't yield to any
+          // concurrent events.
+          renderWasConcurrent = false;
+          // Need to check the exit status again.
+          continue;
+        }
 
-        // We need to check again if something threw
+        // Check if something threw
         if (exitStatus === RootErrored) {
           const originallyAttemptedLanes = lanes;
           const errorRetryLanes = getLanesToRetrySynchronouslyOnError(
@@ -957,8 +938,7 @@ export function performConcurrentWorkOnRoot(
               originallyAttemptedLanes,
               errorRetryLanes,
             );
-            // We assume the tree is now consistent because we didn't yield to any
-            // concurrent events.
+            renderWasConcurrent = false;
           }
         }
         if (exitStatus === RootFatalErrored) {
@@ -969,16 +949,14 @@ export function performConcurrentWorkOnRoot(
           throw fatalError;
         }
 
-        // FIXME: Need to check for RootDidNotComplete again. The factoring here
-        // isn't ideal.
+        // We now have a consistent tree. The next step is either to commit it,
+        // or, if something suspended, wait to commit it after a timeout.
+        root.finishedWork = finishedWork;
+        root.finishedLanes = lanes;
+        finishConcurrentRender(root, exitStatus, finishedWork, lanes);
       }
-
-      // We now have a consistent tree. The next step is either to commit it,
-      // or, if something suspended, wait to commit it after a timeout.
-      root.finishedWork = finishedWork;
-      root.finishedLanes = lanes;
-      finishConcurrentRender(root, exitStatus, finishedWork, lanes);
-    }
+      break;
+    } while (true);
   }
 
   ensureRootIsScheduled(root);
@@ -1709,6 +1687,16 @@ export function shouldRemainOnPreviousScreen(): boolean {
   // takes into account both the priority of render and also whether showing a
   // fallback would produce a desirable user experience.
 
+  const handler = getSuspenseHandler();
+  if (handler === null) {
+    // There's no Suspense boundary that can provide a fallback. We have no
+    // choice but to remain on the previous screen.
+    // NOTE: We do this even for sync updates, for lack of any better option. In
+    // the future, we may change how we handle this, like by putting the whole
+    // root into a "detached" mode.
+    return true;
+  }
+
   // TODO: Once `use` has fully replaced the `throw promise` pattern, we should
   // be able to remove the equivalent check in finishConcurrentRender, and rely
   // just on this one.
@@ -1727,29 +1715,22 @@ export function shouldRemainOnPreviousScreen(): boolean {
     }
   }
 
-  const handler = getSuspenseHandler();
-  if (handler === null) {
-    // TODO: We should support suspending in the case where there's no
-    // parent Suspense boundary, even outside a transition. Somehow. Otherwise,
-    // an uncached promise can fall into an infinite loop.
-  } else {
-    if (
-      includesOnlyRetries(workInProgressRootRenderLanes) ||
-      // In this context, an OffscreenLane counts as a Retry
-      // TODO: It's become increasingly clear that Retries and Offscreen are
-      // deeply connected. They probably can be unified further.
-      includesSomeLane(workInProgressRootRenderLanes, OffscreenLane)
-    ) {
-      // During a retry, we can suspend rendering if the nearest Suspense boundary
-      // is the boundary of the "shell", because we're guaranteed not to block
-      // any new content from appearing.
-      //
-      // The reason we must check if this is a retry is because it guarantees
-      // that suspending the work loop won't block an actual update, because
-      // retries don't "update" anything; they fill in fallbacks that were left
-      // behind by a previous transition.
-      return handler === getShellBoundary();
-    }
+  if (
+    includesOnlyRetries(workInProgressRootRenderLanes) ||
+    // In this context, an OffscreenLane counts as a Retry
+    // TODO: It's become increasingly clear that Retries and Offscreen are
+    // deeply connected. They probably can be unified further.
+    includesSomeLane(workInProgressRootRenderLanes, OffscreenLane)
+  ) {
+    // During a retry, we can suspend rendering if the nearest Suspense boundary
+    // is the boundary of the "shell", because we're guaranteed not to block
+    // any new content from appearing.
+    //
+    // The reason we must check if this is a retry is because it guarantees
+    // that suspending the work loop won't block an actual update, because
+    // retries don't "update" anything; they fill in fallbacks that were left
+    // behind by a previous transition.
+    return handler === getShellBoundary();
   }
 
   // For all other Lanes besides Transitions and Retries, we should not wait
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index 50a0ec85f9f25..b603a9fec3328 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -14,6 +14,7 @@ import type {
   StartTransitionOptions,
   Wakeable,
   Usable,
+  ReactFormState,
 } from 'shared/ReactTypes';
 import type {WorkTag} from './ReactWorkTags';
 import type {TypeOfMode} from './ReactTypeOfMode';
@@ -53,7 +54,8 @@ export type HookType =
   | 'useSyncExternalStore'
   | 'useId'
   | 'useCacheRefresh'
-  | 'useOptimistic';
+  | 'useOptimistic'
+  | 'useFormState';
 
 export type ContextDependency<T> = {
   context: ReactContext<T>,
@@ -269,6 +271,8 @@ type BaseFiberRootProperties = {
     error: mixed,
     errorInfo: {digest?: ?string, componentStack?: ?string},
   ) => void,
+
+  formState: ReactFormState<any, any> | null,
 };
 
 // The following attributes are only used by DevTools and are only present in DEV builds.
@@ -413,6 +417,11 @@ export type Dispatcher = {
     passthrough: S,
     reducer: ?(S, A) => S,
   ) => [S, (A) => void],
+  useFormState?: <S, P>(
+    action: (S, P) => Promise<S>,
+    initialState: S,
+    permalink?: string,
+  ) => [S, (P) => void],
 };
 
 export type CacheDispatcher = {
diff --git a/packages/react-reconciler/src/__tests__/ReactAsyncActions-test.js b/packages/react-reconciler/src/__tests__/ReactAsyncActions-test.js
index 65b14b87f569c..a333c4c486b4a 100644
--- a/packages/react-reconciler/src/__tests__/ReactAsyncActions-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactAsyncActions-test.js
@@ -818,6 +818,44 @@ describe('ReactAsyncActions', () => {
     );
   });
 
+  // @gate enableAsyncActions
+  test('regression: useOptimistic during setState-in-render', async () => {
+    // This is a regression test for a very specific case where useOptimistic is
+    // the first hook in the component, it has a pending update, and a later
+    // hook schedules a local (setState-in-render) update. Don't sweat about
+    // deleting this test if the implementation details change.
+
+    let setOptimisticState;
+    let startTransition;
+    function App() {
+      const [optimisticState, _setOptimisticState] = useOptimistic(0);
+      setOptimisticState = _setOptimisticState;
+      const [, _startTransition] = useTransition();
+      startTransition = _startTransition;
+
+      const [derivedState, setDerivedState] = useState(0);
+      if (derivedState !== optimisticState) {
+        setDerivedState(optimisticState);
+      }
+
+      return <Text text={optimisticState} />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => root.render(<App />));
+    assertLog([0]);
+    expect(root).toMatchRenderedOutput('0');
+
+    await act(() => {
+      startTransition(async () => {
+        setOptimisticState(1);
+        await getText('Wait');
+      });
+    });
+    assertLog([1]);
+    expect(root).toMatchRenderedOutput('1');
+  });
+
   // @gate enableAsyncActions
   test('useOptimistic accepts a custom reducer', async () => {
     let serverCart = ['A'];
diff --git a/packages/react-reconciler/src/__tests__/useSyncExternalStore-test.js b/packages/react-reconciler/src/__tests__/useSyncExternalStore-test.js
index d620cd7ed8b0e..67cefa180aa74 100644
--- a/packages/react-reconciler/src/__tests__/useSyncExternalStore-test.js
+++ b/packages/react-reconciler/src/__tests__/useSyncExternalStore-test.js
@@ -19,6 +19,7 @@ let forwardRef;
 let useImperativeHandle;
 let useRef;
 let useState;
+let use;
 let startTransition;
 let waitFor;
 let waitForAll;
@@ -41,6 +42,7 @@ describe('useSyncExternalStore', () => {
     forwardRef = React.forwardRef;
     useRef = React.useRef;
     useState = React.useState;
+    use = React.use;
     useSyncExternalStore = React.useSyncExternalStore;
     startTransition = React.startTransition;
 
@@ -212,4 +214,84 @@ describe('useSyncExternalStore', () => {
     });
     assertLog(['value:initial']);
   });
+
+  test(
+    'regression: suspending in shell after synchronously patching ' +
+      'up store mutation',
+    async () => {
+      // Tests a case where a store is mutated during a concurrent event, then
+      // during the sync re-render, a synchronous render is triggered.
+
+      const store = createExternalStore('Initial');
+
+      let resolve;
+      const promise = new Promise(r => {
+        resolve = r;
+      });
+
+      function A() {
+        const value = useSyncExternalStore(store.subscribe, store.getState);
+
+        if (value === 'Updated') {
+          try {
+            use(promise);
+          } catch (x) {
+            Scheduler.log('Suspend A');
+            throw x;
+          }
+        }
+
+        return <Text text={'A: ' + value} />;
+      }
+
+      function B() {
+        const value = useSyncExternalStore(store.subscribe, store.getState);
+        return <Text text={'B: ' + value} />;
+      }
+
+      function App() {
+        return (
+          <>
+            <span>
+              <A />
+            </span>
+            <span>
+              <B />
+            </span>
+          </>
+        );
+      }
+
+      const root = ReactNoop.createRoot();
+      await act(async () => {
+        // A and B both read from the same store. Partially render A.
+        startTransition(() => root.render(<App />));
+        // A reads the initial value of the store.
+        await waitFor(['A: Initial']);
+
+        // Before B renders, mutate the store.
+        store.set('Updated');
+      });
+      assertLog([
+        // B reads the updated value of the store.
+        'B: Updated',
+        // This should a synchronous re-render of A using the updated value. In
+        // this test, this causes A to suspend.
+        'Suspend A',
+      ]);
+      // Nothing has committed, because A suspended and no fallback
+      // was provided.
+      expect(root).toMatchRenderedOutput(null);
+
+      // Resolve the data and finish rendering.
+      await act(() => resolve());
+      assertLog(['A: Updated', 'B: Updated']);
+      expect(root).toMatchRenderedOutput(
+        <>
+          <span>A: Updated</span>
+          <span>B: Updated</span>
+        </>,
+      );
+    },
+  );
 });
diff --git a/packages/react-reconciler/src/forks/ReactFiberConfig.custom.js b/packages/react-reconciler/src/forks/ReactFiberConfig.custom.js
index 2fa2f733ead75..dcb402013f796 100644
--- a/packages/react-reconciler/src/forks/ReactFiberConfig.custom.js
+++ b/packages/react-reconciler/src/forks/ReactFiberConfig.custom.js
@@ -49,7 +49,6 @@ export const resetAfterCommit = $$$config.resetAfterCommit;
 export const createInstance = $$$config.createInstance;
 export const appendInitialChild = $$$config.appendInitialChild;
 export const finalizeInitialChildren = $$$config.finalizeInitialChildren;
-export const prepareUpdate = $$$config.prepareUpdate;
 export const shouldSetTextContent = $$$config.shouldSetTextContent;
 export const createTextInstance = $$$config.createTextInstance;
 export const scheduleTimeout = $$$config.scheduleTimeout;
@@ -142,6 +141,8 @@ export const getSuspenseInstanceFallbackErrorDetails =
   $$$config.getSuspenseInstanceFallbackErrorDetails;
 export const registerSuspenseInstanceRetry =
   $$$config.registerSuspenseInstanceRetry;
+export const canHydrateFormStateMarker = $$$config.canHydrateFormStateMarker;
+export const isFormStateMarkerMatching = $$$config.isFormStateMarkerMatching;
 export const getNextHydratableSibling = $$$config.getNextHydratableSibling;
 export const getFirstHydratableChild = $$$config.getFirstHydratableChild;
 export const getFirstHydratableChildWithinContainer =
diff --git a/packages/react-reconciler/src/forks/ReactFiberConfig.dom-node-esm.js b/packages/react-reconciler/src/forks/ReactFiberConfig.dom-node-esm.js
deleted file mode 100644
index 4932b1a787bb9..0000000000000
--- a/packages/react-reconciler/src/forks/ReactFiberConfig.dom-node-esm.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-export * from 'react-dom-bindings/src/client/ReactFiberConfigDOM';
diff --git a/packages/react-reconciler/src/forks/ReactFiberConfig.dom-node-webpack.js b/packages/react-reconciler/src/forks/ReactFiberConfig.dom-node-webpack.js
deleted file mode 100644
index 4932b1a787bb9..0000000000000
--- a/packages/react-reconciler/src/forks/ReactFiberConfig.dom-node-webpack.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-export * from 'react-dom-bindings/src/client/ReactFiberConfigDOM';
diff --git a/packages/react-reconciler/src/forks/ReactFiberConfig.dom-node.js b/packages/react-reconciler/src/forks/ReactFiberConfig.dom-node.js
deleted file mode 100644
index 4932b1a787bb9..0000000000000
--- a/packages/react-reconciler/src/forks/ReactFiberConfig.dom-node.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-export * from 'react-dom-bindings/src/client/ReactFiberConfigDOM';
diff --git a/packages/react-reconciler/src/forks/ReactFiberConfig.dom-browser.js b/packages/react-reconciler/src/forks/ReactFiberConfig.dom.js
similarity index 100%
rename from packages/react-reconciler/src/forks/ReactFiberConfig.dom-browser.js
rename to packages/react-reconciler/src/forks/ReactFiberConfig.dom.js
diff --git a/packages/react-server-dom-esm/src/ReactFlightDOMServerNode.js b/packages/react-server-dom-esm/src/ReactFlightDOMServerNode.js
index 5b9c785a06894..b4934034312e3 100644
--- a/packages/react-server-dom-esm/src/ReactFlightDOMServerNode.js
+++ b/packages/react-server-dom-esm/src/ReactFlightDOMServerNode.js
@@ -22,6 +22,7 @@ import {
   createRequest,
   startWork,
   startFlowing,
+  stopFlowing,
   abort,
 } from 'react-server/src/ReactFlightServer';
 
@@ -36,7 +37,10 @@ import {
   getRoot,
 } from 'react-server/src/ReactFlightReplyServer';
 
-import {decodeAction} from 'react-server/src/ReactFlightActionServer';
+import {
+  decodeAction,
+  decodeFormState,
+} from 'react-server/src/ReactFlightActionServer';
 
 export {
   registerServerReference,
@@ -49,6 +53,7 @@ function createDrainHandler(destination: Destination, request: Request) {
 
 type Options = {
   onError?: (error: mixed) => void,
+  onPostpone?: (reason: string) => void,
   context?: Array<[string, ServerContextJSONValue]>,
   identifierPrefix?: string,
 };
@@ -69,6 +74,7 @@ function renderToPipeableStream(
     options ? options.onError : undefined,
     options ? options.context : undefined,
     options ? options.identifierPrefix : undefined,
+    options ? options.onPostpone : undefined,
   );
   let hasStartedFlowing = false;
   startWork(request);
@@ -85,6 +91,7 @@ function renderToPipeableStream(
       return destination;
     },
     abort(reason: mixed) {
+      stopFlowing(request);
       abort(request, reason);
     },
   };
@@ -164,4 +171,5 @@ export {
   decodeReplyFromBusboy,
   decodeReply,
   decodeAction,
+  decodeFormState,
 };
diff --git a/packages/react-server-dom-fb/src/ReactDOMServerFB.js b/packages/react-server-dom-fb/src/ReactDOMServerFB.js
index bdf4dcedaee0b..8e4fcbfb04a48 100644
--- a/packages/react-server-dom-fb/src/ReactDOMServerFB.js
+++ b/packages/react-server-dom-fb/src/ReactDOMServerFB.js
@@ -23,8 +23,8 @@ import {
 } from 'react-server/src/ReactFizzServer';
 
 import {
-  createResources,
-  createResponseState,
+  createResumableState,
+  createRenderState,
   createRootFormatContext,
 } from 'react-server/src/ReactFizzConfig';
 
@@ -50,13 +50,15 @@ function renderToStream(children: ReactNodeList, options: Options): Stream {
     fatal: false,
     error: null,
   };
-  const resources = createResources();
+  const resumableState = createResumableState(
+    options ? options.identifierPrefix : undefined,
+    options ? options.unstable_externalRuntimeSrc : undefined,
+  );
   const request = createRequest(
     children,
-    resources,
-    createResponseState(
-      resources,
-      options ? options.identifierPrefix : undefined,
+    resumableState,
+    createRenderState(
+      resumableState,
       undefined,
       options ? options.bootstrapScriptContent : undefined,
       options ? options.bootstrapScripts : undefined,
@@ -79,8 +81,8 @@ function renderToStream(children: ReactNodeList, options: Options): Stream {
   };
 }
 
-function abortStream(stream: Stream): void {
-  abort(stream.request);
+function abortStream(stream: Stream, reason: mixed): void {
+  abort(stream.request, reason);
 }
 
 function renderNextChunk(stream: Stream): string {
diff --git a/packages/react-server-dom-fb/src/ReactServerStreamConfigFB.js b/packages/react-server-dom-fb/src/ReactServerStreamConfigFB.js
index 8321bdc62e551..a06b2a73d76d0 100644
--- a/packages/react-server-dom-fb/src/ReactServerStreamConfigFB.js
+++ b/packages/react-server-dom-fb/src/ReactServerStreamConfigFB.js
@@ -83,3 +83,5 @@ export function closeWithError(destination: Destination, error: mixed): void {
   destination.fatal = true;
   destination.error = error;
 }
+
+export {createFastHashJS as createFastHash} from 'react-server/src/createFastHashJS';
diff --git a/packages/react-server-dom-fb/src/__tests__/ReactDOMServerFB-test.internal.js b/packages/react-server-dom-fb/src/__tests__/ReactDOMServerFB-test.internal.js
index 8e6ff121cc952..ddb2efd72e5bb 100644
--- a/packages/react-server-dom-fb/src/__tests__/ReactDOMServerFB-test.internal.js
+++ b/packages/react-server-dom-fb/src/__tests__/ReactDOMServerFB-test.internal.js
@@ -59,7 +59,7 @@ describe('ReactDOMServerFB', () => {
     });
     const result = readResult(stream);
     expect(result).toMatchInlineSnapshot(
-      `"<link rel="preload" href="init.js" as="script"/><link rel="modulepreload" href="init.mjs"/><div>hello world</div><script>INIT();</script><script src="init.js" async=""></script><script type="module" src="init.mjs" async=""></script>"`,
+      `"<link rel="preload" href="init.js" as="script" fetchPriority="low"/><link rel="modulepreload" href="init.mjs" fetchPriority="low"/><div>hello world</div><script>INIT();</script><script src="init.js" async=""></script><script type="module" src="init.mjs" async=""></script>"`,
     );
   });
 
@@ -195,4 +195,22 @@ describe('ReactDOMServerFB', () => {
       'The render was aborted by the server without a reason.',
     ]);
   });
+
+  it('should allow setting an abort reason', () => {
+    const errors = [];
+    const stream = ReactDOMServer.renderToStream(
+      <div>
+        <Suspense fallback={<div>Loading</div>}>
+          <InfiniteSuspend />
+        </Suspense>
+      </div>,
+      {
+        onError(error) {
+          errors.push(error);
+        },
+      },
+    );
+    ReactDOMServer.abortStream(stream, theError);
+    expect(errors).toEqual([theError]);
+  });
 });
diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js b/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js
index 1042ab3f51caa..c18a33aa8d8c7 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js
@@ -16,6 +16,7 @@ import {
   createRequest,
   startWork,
   startFlowing,
+  stopFlowing,
   abort,
 } from 'react-server/src/ReactFlightServer';
 
@@ -25,7 +26,10 @@ import {
   getRoot,
 } from 'react-server/src/ReactFlightReplyServer';
 
-import {decodeAction} from 'react-server/src/ReactFlightActionServer';
+import {
+  decodeAction,
+  decodeFormState,
+} from 'react-server/src/ReactFlightActionServer';
 
 export {
   registerServerReference,
@@ -38,6 +42,7 @@ type Options = {
   signal?: AbortSignal,
   context?: Array<[string, ServerContextJSONValue]>,
   onError?: (error: mixed) => void,
+  onPostpone?: (reason: string) => void,
 };
 
 function renderToReadableStream(
@@ -51,6 +56,7 @@ function renderToReadableStream(
     options ? options.onError : undefined,
     options ? options.context : undefined,
     options ? options.identifierPrefix : undefined,
+    options ? options.onPostpone : undefined,
   );
   if (options && options.signal) {
     const signal = options.signal;
@@ -73,7 +79,10 @@ function renderToReadableStream(
       pull: (controller): ?Promise<void> => {
         startFlowing(request, controller);
       },
-      cancel: (reason): ?Promise<void> => {},
+      cancel: (reason): ?Promise<void> => {
+        stopFlowing(request);
+        abort(request, reason);
+      },
     },
     // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
     {highWaterMark: 0},
@@ -95,4 +104,4 @@ function decodeReply<T>(
   return getRoot(response);
 }
 
-export {renderToReadableStream, decodeReply, decodeAction};
+export {renderToReadableStream, decodeReply, decodeAction, decodeFormState};
diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMServerEdge.js b/packages/react-server-dom-webpack/src/ReactFlightDOMServerEdge.js
index 1042ab3f51caa..c18a33aa8d8c7 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightDOMServerEdge.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightDOMServerEdge.js
@@ -16,6 +16,7 @@ import {
   createRequest,
   startWork,
   startFlowing,
+  stopFlowing,
   abort,
 } from 'react-server/src/ReactFlightServer';
 
@@ -25,7 +26,10 @@ import {
   getRoot,
 } from 'react-server/src/ReactFlightReplyServer';
 
-import {decodeAction} from 'react-server/src/ReactFlightActionServer';
+import {
+  decodeAction,
+  decodeFormState,
+} from 'react-server/src/ReactFlightActionServer';
 
 export {
   registerServerReference,
@@ -38,6 +42,7 @@ type Options = {
   signal?: AbortSignal,
   context?: Array<[string, ServerContextJSONValue]>,
   onError?: (error: mixed) => void,
+  onPostpone?: (reason: string) => void,
 };
 
 function renderToReadableStream(
@@ -51,6 +56,7 @@ function renderToReadableStream(
     options ? options.onError : undefined,
     options ? options.context : undefined,
     options ? options.identifierPrefix : undefined,
+    options ? options.onPostpone : undefined,
   );
   if (options && options.signal) {
     const signal = options.signal;
@@ -73,7 +79,10 @@ function renderToReadableStream(
       pull: (controller): ?Promise<void> => {
         startFlowing(request, controller);
       },
-      cancel: (reason): ?Promise<void> => {},
+      cancel: (reason): ?Promise<void> => {
+        stopFlowing(request);
+        abort(request, reason);
+      },
     },
     // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
     {highWaterMark: 0},
@@ -95,4 +104,4 @@ function decodeReply<T>(
   return getRoot(response);
 }
 
-export {renderToReadableStream, decodeReply, decodeAction};
+export {renderToReadableStream, decodeReply, decodeAction, decodeFormState};
diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js b/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js
index 275312cceaf2b..9462e5e19f667 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js
@@ -22,6 +22,7 @@ import {
   createRequest,
   startWork,
   startFlowing,
+  stopFlowing,
   abort,
 } from 'react-server/src/ReactFlightServer';
 
@@ -36,7 +37,10 @@ import {
   getRoot,
 } from 'react-server/src/ReactFlightReplyServer';
 
-import {decodeAction} from 'react-server/src/ReactFlightActionServer';
+import {
+  decodeAction,
+  decodeFormState,
+} from 'react-server/src/ReactFlightActionServer';
 
 export {
   registerServerReference,
@@ -48,8 +52,17 @@ function createDrainHandler(destination: Destination, request: Request) {
   return () => startFlowing(request, destination);
 }
 
+function createCancelHandler(request: Request, reason: string) {
+  return () => {
+    stopFlowing(request);
+    // eslint-disable-next-line react-internal/prod-error-codes
+    abort(request, new Error(reason));
+  };
+}
+
 type Options = {
   onError?: (error: mixed) => void,
+  onPostpone?: (reason: string) => void,
   context?: Array<[string, ServerContextJSONValue]>,
   identifierPrefix?: string,
 };
@@ -70,6 +83,7 @@ function renderToPipeableStream(
     options ? options.onError : undefined,
     options ? options.context : undefined,
     options ? options.identifierPrefix : undefined,
+    options ? options.onPostpone : undefined,
   );
   let hasStartedFlowing = false;
   startWork(request);
@@ -83,6 +97,17 @@ function renderToPipeableStream(
       hasStartedFlowing = true;
       startFlowing(request, destination);
       destination.on('drain', createDrainHandler(destination, request));
+      destination.on(
+        'error',
+        createCancelHandler(
+          request,
+          'The destination stream errored while writing data.',
+        ),
+      );
+      destination.on(
+        'close',
+        createCancelHandler(request, 'The destination stream closed early.'),
+      );
       return destination;
     },
     abort(reason: mixed) {
@@ -165,4 +190,5 @@ export {
   decodeReplyFromBusboy,
   decodeReply,
   decodeAction,
+  decodeFormState,
 };
diff --git a/packages/react-server-dom-webpack/src/ReactFlightWebpackReferences.js b/packages/react-server-dom-webpack/src/ReactFlightWebpackReferences.js
index 9df0e43bd75e1..6952dad11134a 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightWebpackReferences.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightWebpackReferences.js
@@ -134,105 +134,125 @@ const deepProxyHandlers = {
   },
 };
 
-const proxyHandlers = {
-  get: function (
-    target: Function,
-    name: string,
-    receiver: Proxy<Function>,
-  ): $FlowFixMe {
-    switch (name) {
-      // These names are read by the Flight runtime if you end up using the exports object.
-      case '$$typeof':
-        return target.$$typeof;
-      case '$$id':
-        return target.$$id;
-      case '$$async':
-        return target.$$async;
-      case 'name':
-        return target.name;
-      // We need to special case this because createElement reads it if we pass this
-      // reference.
-      case 'defaultProps':
-        return undefined;
-      // Avoid this attempting to be serialized.
-      case 'toJSON':
-        return undefined;
-      case Symbol.toPrimitive:
-        // $FlowFixMe[prop-missing]
-        return Object.prototype[Symbol.toPrimitive];
-      case '__esModule':
-        // Something is conditionally checking which export to use. We'll pretend to be
-        // an ESM compat module but then we'll check again on the client.
-        const moduleId = target.$$id;
-        target.default = registerClientReferenceImpl(
-          (function () {
-            throw new Error(
-              `Attempted to call the default export of ${moduleId} from the server ` +
-                `but it's on the client. It's not possible to invoke a client function from ` +
-                `the server, it can only be rendered as a Component or passed to props of a ` +
-                `Client Component.`,
-            );
-          }: any),
-          target.$$id + '#',
-          target.$$async,
-        );
-        return true;
-      case 'then':
-        if (target.then) {
-          // Use a cached value
-          return target.then;
-        }
-        if (!target.$$async) {
-          // If this module is expected to return a Promise (such as an AsyncModule) then
-          // we should resolve that with a client reference that unwraps the Promise on
-          // the client.
-
-          const clientReference: ClientReference<any> =
-            registerClientReferenceImpl(({}: any), target.$$id, true);
-          const proxy = new Proxy(clientReference, proxyHandlers);
-
-          // Treat this as a resolved Promise for React's use()
-          target.status = 'fulfilled';
-          target.value = proxy;
-
-          const then = (target.then = registerClientReferenceImpl(
-            (function then(resolve, reject: any) {
-              // Expose to React.
-              return Promise.resolve(resolve(proxy));
-            }: any),
-            // If this is not used as a Promise but is treated as a reference to a `.then`
-            // export then we should treat it as a reference to that name.
-            target.$$id + '#then',
-            false,
-          ));
-          return then;
-        } else {
-          // Since typeof .then === 'function' is a feature test we'd continue recursing
-          // indefinitely if we return a function. Instead, we return an object reference
-          // if we check further.
-          return undefined;
-        }
-    }
-    let cachedReference = target[name];
-    if (!cachedReference) {
-      const reference: ClientReference<any> = registerClientReferenceImpl(
+function getReference(target: Function, name: string): $FlowFixMe {
+  switch (name) {
+    // These names are read by the Flight runtime if you end up using the exports object.
+    case '$$typeof':
+      return target.$$typeof;
+    case '$$id':
+      return target.$$id;
+    case '$$async':
+      return target.$$async;
+    case 'name':
+      return target.name;
+    // We need to special case this because createElement reads it if we pass this
+    // reference.
+    case 'defaultProps':
+      return undefined;
+    // Avoid this attempting to be serialized.
+    case 'toJSON':
+      return undefined;
+    case Symbol.toPrimitive:
+      // $FlowFixMe[prop-missing]
+      return Object.prototype[Symbol.toPrimitive];
+    case '__esModule':
+      // Something is conditionally checking which export to use. We'll pretend to be
+      // an ESM compat module but then we'll check again on the client.
+      const moduleId = target.$$id;
+      target.default = registerClientReferenceImpl(
         (function () {
           throw new Error(
-            // eslint-disable-next-line react-internal/safe-string-coercion
-            `Attempted to call ${String(name)}() from the server but ${String(
-              name,
-            )} is on the client. ` +
-              `It's not possible to invoke a client function from the server, it can ` +
-              `only be rendered as a Component or passed to props of a Client Component.`,
+            `Attempted to call the default export of ${moduleId} from the server ` +
+              `but it's on the client. It's not possible to invoke a client function from ` +
+              `the server, it can only be rendered as a Component or passed to props of a ` +
+              `Client Component.`,
           );
         }: any),
-        target.$$id + '#' + name,
+        target.$$id + '#',
         target.$$async,
       );
-      Object.defineProperty((reference: any), 'name', {value: name});
-      cachedReference = target[name] = new Proxy(reference, deepProxyHandlers);
+      return true;
+    case 'then':
+      if (target.then) {
+        // Use a cached value
+        return target.then;
+      }
+      if (!target.$$async) {
+        // If this module is expected to return a Promise (such as an AsyncModule) then
+        // we should resolve that with a client reference that unwraps the Promise on
+        // the client.
+
+        const clientReference: ClientReference<any> =
+          registerClientReferenceImpl(({}: any), target.$$id, true);
+        const proxy = new Proxy(clientReference, proxyHandlers);
+
+        // Treat this as a resolved Promise for React's use()
+        target.status = 'fulfilled';
+        target.value = proxy;
+
+        const then = (target.then = registerClientReferenceImpl(
+          (function then(resolve, reject: any) {
+            // Expose to React.
+            return Promise.resolve(resolve(proxy));
+          }: any),
+          // If this is not used as a Promise but is treated as a reference to a `.then`
+          // export then we should treat it as a reference to that name.
+          target.$$id + '#then',
+          false,
+        ));
+        return then;
+      } else {
+        // Since typeof .then === 'function' is a feature test we'd continue recursing
+        // indefinitely if we return a function. Instead, we return an object reference
+        // if we check further.
+        return undefined;
+      }
+  }
+  let cachedReference = target[name];
+  if (!cachedReference) {
+    const reference: ClientReference<any> = registerClientReferenceImpl(
+      (function () {
+        throw new Error(
+          // eslint-disable-next-line react-internal/safe-string-coercion
+          `Attempted to call ${String(name)}() from the server but ${String(
+            name,
+          )} is on the client. ` +
+            `It's not possible to invoke a client function from the server, it can ` +
+            `only be rendered as a Component or passed to props of a Client Component.`,
+        );
+      }: any),
+      target.$$id + '#' + name,
+      target.$$async,
+    );
+    Object.defineProperty((reference: any), 'name', {value: name});
+    cachedReference = target[name] = new Proxy(reference, deepProxyHandlers);
+  }
+  return cachedReference;
+}
+
+const proxyHandlers = {
+  get: function (
+    target: Function,
+    name: string,
+    receiver: Proxy<Function>,
+  ): $FlowFixMe {
+    return getReference(target, name);
+  },
+  getOwnPropertyDescriptor: function (
+    target: Function,
+    name: string,
+  ): $FlowFixMe {
+    let descriptor = Object.getOwnPropertyDescriptor(target, name);
+    if (!descriptor) {
+      descriptor = {
+        value: getReference(target, name),
+        writable: false,
+        configurable: false,
+        enumerable: false,
+      };
+      Object.defineProperty(target, name, descriptor);
     }
-    return cachedReference;
+    return descriptor;
   },
   getPrototypeOf(target: Function): Object {
     // Pretend to be a Promise in case anyone asks.
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 899dc639aa76f..f86db1943a3fa 100644
--- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
+++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
@@ -12,6 +12,7 @@
 // Polyfills for test environment
 global.ReadableStream =
   require('web-streams-polyfill/ponyfill/es6').ReadableStream;
+global.TextEncoder = require('util').TextEncoder;
 global.TextDecoder = require('util').TextDecoder;
 
 // Don't wait before processing work on the server.
@@ -32,11 +33,14 @@ let ReactServerDOMClient;
 let ReactDOMFizzServer;
 let Suspense;
 let ErrorBoundary;
+let JSDOM;
 
 describe('ReactFlightDOM', () => {
   beforeEach(() => {
     jest.resetModules();
 
+    JSDOM = require('jsdom').JSDOM;
+
     // Simulate the condition resolution
     jest.mock('react-server-dom-webpack/server', () =>
       require('react-server-dom-webpack/server.node.unbundled'),
@@ -99,6 +103,51 @@ describe('ReactFlightDOM', () => {
     throw theInfinitePromise;
   }
 
+  function getMeaningfulChildren(element) {
+    const children = [];
+    let node = element.firstChild;
+    while (node) {
+      if (node.nodeType === 1) {
+        if (
+          // some tags are ambiguous and might be hidden because they look like non-meaningful children
+          // so we have a global override where if this data attribute is included we also include the node
+          node.hasAttribute('data-meaningful') ||
+          (node.tagName === 'SCRIPT' &&
+            node.hasAttribute('src') &&
+            node.hasAttribute('async')) ||
+          (node.tagName !== 'SCRIPT' &&
+            node.tagName !== 'TEMPLATE' &&
+            node.tagName !== 'template' &&
+            !node.hasAttribute('hidden') &&
+            !node.hasAttribute('aria-hidden'))
+        ) {
+          const props = {};
+          const attributes = node.attributes;
+          for (let i = 0; i < attributes.length; i++) {
+            if (
+              attributes[i].name === 'id' &&
+              attributes[i].value.includes(':')
+            ) {
+              // We assume this is a React added ID that's a non-visual implementation detail.
+              continue;
+            }
+            props[attributes[i].name] = attributes[i].value;
+          }
+          props.children = getMeaningfulChildren(node);
+          children.push(React.createElement(node.tagName.toLowerCase(), props));
+        }
+      } else if (node.nodeType === 3) {
+        children.push(node.data);
+      }
+      node = node.nextSibling;
+    }
+    return children.length === 0
+      ? undefined
+      : children.length === 1
+      ? children[0]
+      : children;
+  }
+
   it('should resolve HTML using Node streams', async () => {
     function Text({children}) {
       return <span>{children}</span>;
@@ -1148,7 +1197,7 @@ describe('ReactFlightDOM', () => {
     expect(reportedErrors).toEqual([theError]);
   });
 
-  it('should support ReactDOM.preload when rendering in Fiber', async () => {
+  it('should support float methods when rendering in Fiber', async () => {
     function Component() {
       return <p>hello world</p>;
     }
@@ -1156,9 +1205,25 @@ describe('ReactFlightDOM', () => {
     const ClientComponent = clientExports(Component);
 
     async function ServerComponent() {
-      ReactDOM.preload('before', {as: 'style'});
+      ReactDOM.prefetchDNS('d before');
+      ReactDOM.preconnect('c before');
+      ReactDOM.preconnect('c2 before', {crossOrigin: 'anonymous'});
+      ReactDOM.preload('l before', {as: 'style'});
+      ReactDOM.preloadModule('lm before');
+      ReactDOM.preloadModule('lm2 before', {crossOrigin: 'anonymous'});
+      ReactDOM.preinit('i before', {as: 'script'});
+      ReactDOM.preinitModule('m before');
+      ReactDOM.preinitModule('m2 before', {crossOrigin: 'anonymous'});
       await 1;
-      ReactDOM.preload('after', {as: 'style'});
+      ReactDOM.prefetchDNS('d after');
+      ReactDOM.preconnect('c after');
+      ReactDOM.preconnect('c2 after', {crossOrigin: 'anonymous'});
+      ReactDOM.preload('l after', {as: 'style'});
+      ReactDOM.preloadModule('lm after');
+      ReactDOM.preloadModule('lm2 after', {crossOrigin: 'anonymous'});
+      ReactDOM.preinit('i after', {as: 'script'});
+      ReactDOM.preinitModule('m after');
+      ReactDOM.preinitModule('m2 after', {crossOrigin: 'anonymous'});
       return <ClientComponent />;
     }
 
@@ -1196,14 +1261,36 @@ describe('ReactFlightDOM', () => {
     await act(() => {
       root.render(<App />);
     });
-    expect(document.head.innerHTML).toBe(
-      '<link rel="preload" as="style" href="before">' +
-        '<link rel="preload" as="style" href="after">',
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="dns-prefetch" href="d before" />
+          <link rel="preconnect" href="c before" />
+          <link rel="preconnect" href="c2 before" crossorigin="" />
+          <link rel="preload" as="style" href="l before" />
+          <link rel="modulepreload" href="lm before" />
+          <link rel="modulepreload" href="lm2 before" crossorigin="" />
+          <script async="" src="i before" />
+          <script type="module" async="" src="m before" />
+          <script type="module" async="" src="m2 before" crossorigin="" />
+          <link rel="dns-prefetch" href="d after" />
+          <link rel="preconnect" href="c after" />
+          <link rel="preconnect" href="c2 after" crossorigin="" />
+          <link rel="preload" as="style" href="l after" />
+          <link rel="modulepreload" href="lm after" />
+          <link rel="modulepreload" href="lm2 after" crossorigin="" />
+          <script async="" src="i after" />
+          <script type="module" async="" src="m after" />
+          <script type="module" async="" src="m2 after" crossorigin="" />
+        </head>
+        <body />
+      </html>,
     );
-    expect(container.innerHTML).toBe('<p>hello world</p>');
+    expect(getMeaningfulChildren(container)).toEqual(<p>hello world</p>);
   });
 
-  it('should support ReactDOM.preload when rendering in Fizz', async () => {
+  it('should support float methods when rendering in Fizz', async () => {
     function Component() {
       return <p>hello world</p>;
     }
@@ -1211,9 +1298,25 @@ describe('ReactFlightDOM', () => {
     const ClientComponent = clientExports(Component);
 
     async function ServerComponent() {
-      ReactDOM.preload('before', {as: 'style'});
+      ReactDOM.prefetchDNS('d before');
+      ReactDOM.preconnect('c before');
+      ReactDOM.preconnect('c2 before', {crossOrigin: 'anonymous'});
+      ReactDOM.preload('l before', {as: 'style'});
+      ReactDOM.preloadModule('lm before');
+      ReactDOM.preloadModule('lm2 before', {crossOrigin: 'anonymous'});
+      ReactDOM.preinit('i before', {as: 'script'});
+      ReactDOM.preinitModule('m before');
+      ReactDOM.preinitModule('m2 before', {crossOrigin: 'anonymous'});
       await 1;
-      ReactDOM.preload('after', {as: 'style'});
+      ReactDOM.prefetchDNS('d after');
+      ReactDOM.preconnect('c after');
+      ReactDOM.preconnect('c2 after', {crossOrigin: 'anonymous'});
+      ReactDOM.preload('l after', {as: 'style'});
+      ReactDOM.preloadModule('lm after');
+      ReactDOM.preloadModule('lm2 after', {crossOrigin: 'anonymous'});
+      ReactDOM.preinit('i after', {as: 'script'});
+      ReactDOM.preinitModule('m after');
+      ReactDOM.preinitModule('m2 after', {crossOrigin: 'anonymous'});
       return <ClientComponent />;
     }
 
@@ -1265,9 +1368,33 @@ describe('ReactFlightDOM', () => {
       content += decoder.decode(value, {stream: true});
     }
 
-    expect(content).toEqual(
-      '<!DOCTYPE html><html><head><link rel="preload" as="style" href="before"/>' +
-        '<link rel="preload" as="style" href="after"/></head><body><p>hello world</p></body></html>',
+    const doc = new JSDOM(content).window.document;
+    expect(getMeaningfulChildren(doc)).toEqual(
+      <html>
+        <head>
+          <link rel="dns-prefetch" href="d before" />
+          <link rel="preconnect" href="c before" />
+          <link rel="preconnect" href="c2 before" crossorigin="" />
+          <link rel="dns-prefetch" href="d after" />
+          <link rel="preconnect" href="c after" />
+          <link rel="preconnect" href="c2 after" crossorigin="" />
+          <script async="" src="i before" />
+          <script type="module" async="" src="m before" />
+          <script type="module" async="" src="m2 before" crossorigin="" />
+          <script async="" src="i after" />
+          <script type="module" async="" src="m after" />
+          <script type="module" async="" src="m2 after" crossorigin="" />
+          <link rel="preload" as="style" href="l before" />
+          <link rel="modulepreload" href="lm before" />
+          <link rel="modulepreload" href="lm2 before" crossorigin="" />
+          <link rel="preload" as="style" href="l after" />
+          <link rel="modulepreload" href="lm after" />
+          <link rel="modulepreload" href="lm2 after" crossorigin="" />
+        </head>
+        <body>
+          <p>hello world</p>
+        </body>
+      </html>,
     );
   });
 
@@ -1362,12 +1489,12 @@ describe('ReactFlightDOM', () => {
     ]);
 
     expect(content1).toEqual(
-      '<!DOCTYPE html><html><head><link rel="preload" as="style" href="before1"/>' +
-        '<link rel="preload" as="style" href="after1"/></head><body><p>hello world</p></body></html>',
+      '<!DOCTYPE html><html><head><link rel="preload" href="before1" as="style"/>' +
+        '<link rel="preload" href="after1" as="style"/></head><body><p>hello world</p></body></html>',
     );
     expect(content2).toEqual(
-      '<!DOCTYPE html><html><head><link rel="preload" as="style" href="before2"/>' +
-        '<link rel="preload" as="style" href="after2"/></head><body><p>hello world</p></body></html>',
+      '<!DOCTYPE html><html><head><link rel="preload" href="before2" as="style"/>' +
+        '<link rel="preload" href="after2" as="style"/></head><body><p>hello world</p></body></html>',
     );
   });
 
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 a1d67eba7d933..9b9697d37eeb2 100644
--- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
+++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
@@ -1107,7 +1107,7 @@ describe('ReactFlightDOMBrowser', () => {
       root.render(<App />);
     });
     expect(document.head.innerHTML).toBe(
-      '<link rel="preload" as="style" href="before">',
+      '<link rel="preload" href="before" as="style">',
     );
     expect(container.innerHTML).toBe('<p>hello world</p>');
   });
@@ -1178,4 +1178,97 @@ describe('ReactFlightDOMBrowser', () => {
         '</head><body><p>hello world</p></body></html>',
     );
   });
+
+  // @gate enablePostpone
+  it('supports postpone in Server Components', async () => {
+    function Server() {
+      React.unstable_postpone('testing postpone');
+      return 'Not shown';
+    }
+
+    let postponed = null;
+
+    const stream = ReactServerDOMServer.renderToReadableStream(
+      <Suspense fallback="Loading...">
+        <Server />
+      </Suspense>,
+      null,
+      {
+        onPostpone(reason) {
+          postponed = reason;
+        },
+      },
+    );
+    const response = ReactServerDOMClient.createFromReadableStream(stream);
+
+    function Client() {
+      return use(response);
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(
+        <div>
+          Shell: <Client />
+        </div>,
+      );
+    });
+    // We should have reserved the shell already. Which means that the Server
+    // Component should've been a lazy component.
+    expect(container.innerHTML).toContain('Shell:');
+    expect(container.innerHTML).toContain('Loading...');
+    expect(container.innerHTML).not.toContain('Not shown');
+
+    expect(postponed).toBe('testing postpone');
+  });
+
+  it('should not continue rendering after the reader cancels', async () => {
+    let hasLoaded = false;
+    let resolve;
+    let rendered = false;
+    const promise = new Promise(r => (resolve = r));
+    function Wait() {
+      if (!hasLoaded) {
+        throw promise;
+      }
+      rendered = true;
+      return 'Done';
+    }
+    const errors = [];
+    const stream = await ReactServerDOMServer.renderToReadableStream(
+      <div>
+        <Suspense fallback={<div>Loading</div>}>
+          <Wait />
+        </Suspense>
+      </div>,
+      null,
+      {
+        onError(x) {
+          errors.push(x.message);
+        },
+      },
+    );
+
+    expect(rendered).toBe(false);
+
+    const reader = stream.getReader();
+    await reader.read();
+    await reader.cancel();
+
+    expect(errors).toEqual([
+      'The render was aborted by the server without a reason.',
+    ]);
+
+    hasLoaded = true;
+    resolve();
+
+    await jest.runAllTimers();
+
+    expect(rendered).toBe(false);
+
+    expect(errors).toEqual([
+      'The render was aborted by the server without a reason.',
+    ]);
+  });
 });
diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMForm-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMForm-test.js
index e863dccee6c7b..7bcd16b3ecfd7 100644
--- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMForm-test.js
+++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMForm-test.js
@@ -22,12 +22,17 @@ global.TextDecoder = require('util').TextDecoder;
 global.setTimeout = cb => cb();
 
 let container;
+let clientExports;
 let serverExports;
+let webpackMap;
 let webpackServerMap;
 let React;
 let ReactDOMServer;
 let ReactServerDOMServer;
 let ReactServerDOMClient;
+let ReactDOMClient;
+let useFormState;
+let act;
 
 describe('ReactFlightDOMForm', () => {
   beforeEach(() => {
@@ -37,12 +42,17 @@ describe('ReactFlightDOMForm', () => {
       require('react-server-dom-webpack/server.edge'),
     );
     const WebpackMock = require('./utils/WebpackMock');
+    clientExports = WebpackMock.clientExports;
     serverExports = WebpackMock.serverExports;
+    webpackMap = WebpackMock.webpackMap;
     webpackServerMap = WebpackMock.webpackServerMap;
     React = require('react');
     ReactServerDOMServer = require('react-server-dom-webpack/server.edge');
     ReactServerDOMClient = require('react-server-dom-webpack/client.edge');
     ReactDOMServer = require('react-dom/server.edge');
+    ReactDOMClient = require('react-dom/client');
+    act = require('react-dom/test-utils').act;
+    useFormState = require('react-dom').experimental_useFormState;
     container = document.createElement('div');
     document.body.appendChild(container);
   });
@@ -56,7 +66,13 @@ describe('ReactFlightDOMForm', () => {
       formData,
       webpackServerMap,
     );
-    return boundAction();
+    const returnValue = boundAction();
+    const formState = await ReactServerDOMServer.decodeFormState(
+      await returnValue,
+      formData,
+      webpackServerMap,
+    );
+    return {returnValue, formState};
   }
 
   function submit(submitter) {
@@ -132,9 +148,9 @@ describe('ReactFlightDOMForm', () => {
 
     expect(foo).toBe(null);
 
-    const result = await submit(form);
+    const {returnValue} = await submit(form);
 
-    expect(result).toBe('hello');
+    expect(returnValue).toBe('hello');
     expect(foo).toBe('bar');
   });
 
@@ -164,9 +180,9 @@ describe('ReactFlightDOMForm', () => {
 
     expect(foo).toBe(null);
 
-    const result = await submit(form);
+    const {returnValue} = await submit(form);
 
-    expect(result).toBe('hi');
+    expect(returnValue).toBe('hi');
 
     expect(foo).toBe('bar');
   });
@@ -195,9 +211,9 @@ describe('ReactFlightDOMForm', () => {
 
     expect(foo).toBe(null);
 
-    const result = await submit(form);
+    const {returnValue} = await submit(form);
 
-    expect(result).toBe('hello');
+    expect(returnValue).toBe('hello');
     expect(foo).toBe('barobject');
   });
 
@@ -231,9 +247,521 @@ describe('ReactFlightDOMForm', () => {
 
     expect(foo).toBe(null);
 
-    const result = await submit(form.getElementsByTagName('button')[1]);
+    const {returnValue} = await submit(form.getElementsByTagName('button')[1]);
 
-    expect(result).toBe('helloc');
+    expect(returnValue).toBe('helloc');
     expect(foo).toBe('barc');
   });
+
+  // @gate enableFormActions
+  it('can bind an imported server action on the client without hydrating it', async () => {
+    let foo = null;
+
+    const ServerModule = serverExports(function action(bound, formData) {
+      foo = formData.get('foo') + bound.complex;
+      return 'hello';
+    });
+    const serverAction = ReactServerDOMClient.createServerReference(
+      ServerModule.$$id,
+    );
+    function Client() {
+      return (
+        <form action={serverAction.bind(null, {complex: 'object'})}>
+          <input type="text" name="foo" defaultValue="bar" />
+        </form>
+      );
+    }
+
+    const ssrStream = await ReactDOMServer.renderToReadableStream(<Client />);
+    await readIntoContainer(ssrStream);
+
+    const form = container.firstChild;
+
+    expect(foo).toBe(null);
+
+    const {returnValue} = await submit(form);
+
+    expect(returnValue).toBe('hello');
+    expect(foo).toBe('barobject');
+  });
+
+  // @gate enableFormActions
+  it('can bind a server action on the client without hydrating it', async () => {
+    let foo = null;
+
+    const serverAction = serverExports(function action(bound, formData) {
+      foo = formData.get('foo') + bound.complex;
+      return 'hello';
+    });
+
+    function Client({action}) {
+      return (
+        <form action={action.bind(null, {complex: 'object'})}>
+          <input type="text" name="foo" defaultValue="bar" />
+        </form>
+      );
+    }
+    const ClientRef = await clientExports(Client);
+
+    const rscStream = ReactServerDOMServer.renderToReadableStream(
+      <ClientRef action={serverAction} />,
+      webpackMap,
+    );
+    const response = ReactServerDOMClient.createFromReadableStream(rscStream);
+    const ssrStream = await ReactDOMServer.renderToReadableStream(response);
+    await readIntoContainer(ssrStream);
+
+    const form = container.firstChild;
+
+    expect(foo).toBe(null);
+
+    const {returnValue} = await submit(form);
+
+    expect(returnValue).toBe('hello');
+    expect(foo).toBe('barobject');
+  });
+
+  // @gate enableFormActions
+  // @gate enableAsyncActions
+  it("useFormState's dispatch binds the initial state to the provided action", async () => {
+    const serverAction = serverExports(async function action(
+      prevState,
+      formData,
+    ) {
+      return {
+        count: prevState.count + parseInt(formData.get('incrementAmount'), 10),
+      };
+    });
+
+    const initialState = {count: 1};
+    function Client({action}) {
+      const [state, dispatch] = useFormState(action, initialState);
+      return (
+        <form action={dispatch}>
+          <span>Count: {state.count}</span>
+          <input type="text" name="incrementAmount" defaultValue="5" />
+        </form>
+      );
+    }
+    const ClientRef = await clientExports(Client);
+
+    const rscStream = ReactServerDOMServer.renderToReadableStream(
+      <ClientRef action={serverAction} />,
+      webpackMap,
+    );
+    const response = ReactServerDOMClient.createFromReadableStream(rscStream);
+    const ssrStream = await ReactDOMServer.renderToReadableStream(response);
+    await readIntoContainer(ssrStream);
+
+    const form = container.getElementsByTagName('form')[0];
+    const span = container.getElementsByTagName('span')[0];
+    expect(span.textContent).toBe('Count: 1');
+
+    const {returnValue} = await submit(form);
+    expect(await returnValue).toEqual({count: 6});
+  });
+
+  // @gate enableFormActions
+  // @gate enableAsyncActions
+  it('useFormState can reuse state during MPA form submission', async () => {
+    const serverAction = serverExports(async function action(
+      prevState,
+      formData,
+    ) {
+      return prevState + 1;
+    });
+
+    function Form({action}) {
+      const [count, dispatch] = useFormState(action, 1);
+      return <form action={dispatch}>{count}</form>;
+    }
+
+    function Client({action}) {
+      return (
+        <div>
+          <Form action={action} />
+          <Form action={action} />
+          <Form action={action} />
+        </div>
+      );
+    }
+
+    const ClientRef = await clientExports(Client);
+
+    const rscStream = ReactServerDOMServer.renderToReadableStream(
+      <ClientRef action={serverAction} />,
+      webpackMap,
+    );
+    const response = ReactServerDOMClient.createFromReadableStream(rscStream);
+    const ssrStream = await ReactDOMServer.renderToReadableStream(response);
+    await readIntoContainer(ssrStream);
+
+    expect(container.textContent).toBe('111');
+
+    // There are three identical forms. We're going to submit the second one.
+    const form = container.getElementsByTagName('form')[1];
+    const {formState} = await submit(form);
+
+    // Simulate an MPA form submission by resetting the container and
+    // rendering again.
+    container.innerHTML = '';
+
+    const postbackRscStream = ReactServerDOMServer.renderToReadableStream(
+      <ClientRef action={serverAction} />,
+      webpackMap,
+    );
+    const postbackResponse =
+      ReactServerDOMClient.createFromReadableStream(postbackRscStream);
+    const postbackSsrStream = await ReactDOMServer.renderToReadableStream(
+      postbackResponse,
+      {experimental_formState: formState},
+    );
+    await readIntoContainer(postbackSsrStream);
+
+    // Only the second form's state should have been updated.
+    expect(container.textContent).toBe('121');
+
+    // Test that it hydrates correctly
+    if (__DEV__) {
+      // TODO: Can't use our internal act() util that works in production
+      // because it works by overriding the timer APIs, which this test module
+      // also does. Remove dev condition once FlightServer.act() is available.
+      await act(() => {
+        ReactDOMClient.hydrateRoot(container, postbackResponse, {
+          experimental_formState: formState,
+        });
+      });
+      expect(container.textContent).toBe('121');
+    }
+  });
+
+  // @gate enableFormActions
+  // @gate enableAsyncActions
+  it(
+    'useFormState preserves state if arity is the same, but different ' +
+      'arguments are bound (i.e. inline closure)',
+    async () => {
+      const serverAction = serverExports(async function action(
+        stepSize,
+        prevState,
+        formData,
+      ) {
+        return prevState + stepSize;
+      });
+
+      function Form({action}) {
+        const [count, dispatch] = useFormState(action, 1);
+        return <form action={dispatch}>{count}</form>;
+      }
+
+      function Client({action}) {
+        return (
+          <div>
+            <Form action={action} />
+            <Form action={action} />
+            <Form action={action} />
+          </div>
+        );
+      }
+
+      const ClientRef = await clientExports(Client);
+
+      const rscStream = ReactServerDOMServer.renderToReadableStream(
+        // Note: `.bind` is the same as an inline closure with 'use server'
+        <ClientRef action={serverAction.bind(null, 1)} />,
+        webpackMap,
+      );
+      const response = ReactServerDOMClient.createFromReadableStream(rscStream);
+      const ssrStream = await ReactDOMServer.renderToReadableStream(response);
+      await readIntoContainer(ssrStream);
+
+      expect(container.textContent).toBe('111');
+
+      // There are three identical forms. We're going to submit the second one.
+      const form = container.getElementsByTagName('form')[1];
+      const {formState} = await submit(form);
+
+      // Simulate an MPA form submission by resetting the container and
+      // rendering again.
+      container.innerHTML = '';
+
+      // On the next page, the same server action is rendered again, but with
+      // a different bound stepSize argument. We should treat this as the same
+      // action signature.
+      const postbackRscStream = ReactServerDOMServer.renderToReadableStream(
+        // Note: `.bind` is the same as an inline closure with 'use server'
+        <ClientRef action={serverAction.bind(null, 5)} />,
+        webpackMap,
+      );
+      const postbackResponse =
+        ReactServerDOMClient.createFromReadableStream(postbackRscStream);
+      const postbackSsrStream = await ReactDOMServer.renderToReadableStream(
+        postbackResponse,
+        {experimental_formState: formState},
+      );
+      await readIntoContainer(postbackSsrStream);
+
+      // The state should have been preserved because the action signatures are
+      // the same. (Note that the amount increased by 1, because that was the
+      // value of stepSize at the time the form was submitted)
+      expect(container.textContent).toBe('121');
+
+      // Now submit the form again. This time, the state should increase by 5
+      // because the stepSize argument has changed.
+      const form2 = container.getElementsByTagName('form')[1];
+      const {formState: formState2} = await submit(form2);
+
+      container.innerHTML = '';
+
+      const postbackRscStream2 = ReactServerDOMServer.renderToReadableStream(
+        // Note: `.bind` is the same as an inline closure with 'use server'
+        <ClientRef action={serverAction.bind(null, 5)} />,
+        webpackMap,
+      );
+      const postbackResponse2 =
+        ReactServerDOMClient.createFromReadableStream(postbackRscStream2);
+      const postbackSsrStream2 = await ReactDOMServer.renderToReadableStream(
+        postbackResponse2,
+        {experimental_formState: formState2},
+      );
+      await readIntoContainer(postbackSsrStream2);
+
+      expect(container.textContent).toBe('171');
+    },
+  );
+
+  // @gate enableFormActions
+  // @gate enableAsyncActions
+  it('useFormState does not reuse state if action signatures are different', async () => {
+    // This is the same as the previous test, except instead of using bind to
+    // configure the server action (i.e. a closure), it swaps the action.
+    const increaseBy1 = serverExports(async function action(
+      prevState,
+      formData,
+    ) {
+      return prevState + 1;
+    });
+
+    const increaseBy5 = serverExports(async function action(
+      prevState,
+      formData,
+    ) {
+      return prevState + 5;
+    });
+
+    function Form({action}) {
+      const [count, dispatch] = useFormState(action, 1);
+      return <form action={dispatch}>{count}</form>;
+    }
+
+    function Client({action}) {
+      return (
+        <div>
+          <Form action={action} />
+          <Form action={action} />
+          <Form action={action} />
+        </div>
+      );
+    }
+
+    const ClientRef = await clientExports(Client);
+
+    const rscStream = ReactServerDOMServer.renderToReadableStream(
+      <ClientRef action={increaseBy1} />,
+      webpackMap,
+    );
+    const response = ReactServerDOMClient.createFromReadableStream(rscStream);
+    const ssrStream = await ReactDOMServer.renderToReadableStream(response);
+    await readIntoContainer(ssrStream);
+
+    expect(container.textContent).toBe('111');
+
+    // There are three identical forms. We're going to submit the second one.
+    const form = container.getElementsByTagName('form')[1];
+    const {formState} = await submit(form);
+
+    // Simulate an MPA form submission by resetting the container and
+    // rendering again.
+    container.innerHTML = '';
+
+    // On the next page, a different server action is rendered. It should not
+    // reuse the state from the previous page.
+    const postbackRscStream = ReactServerDOMServer.renderToReadableStream(
+      <ClientRef action={increaseBy5} />,
+      webpackMap,
+    );
+    const postbackResponse =
+      ReactServerDOMClient.createFromReadableStream(postbackRscStream);
+    const postbackSsrStream = await ReactDOMServer.renderToReadableStream(
+      postbackResponse,
+      {experimental_formState: formState},
+    );
+    await readIntoContainer(postbackSsrStream);
+
+    // The state should not have been preserved because the action signatures
+    // are not the same.
+    expect(container.textContent).toBe('111');
+  });
+
+  // @gate enableFormActions
+  // @gate enableAsyncActions
+  it('when permalink is provided, useFormState compares that instead of the keypath', async () => {
+    const serverAction = serverExports(async function action(
+      prevState,
+      formData,
+    ) {
+      return prevState + 1;
+    });
+
+    function Form({action, permalink}) {
+      const [count, dispatch] = useFormState(action, 1, permalink);
+      return <form action={dispatch}>{count}</form>;
+    }
+
+    function Page1({action, permalink}) {
+      return <Form action={action} permalink={permalink} />;
+    }
+
+    function Page2({action, permalink}) {
+      return <Form action={action} permalink={permalink} />;
+    }
+
+    const Page1Ref = await clientExports(Page1);
+    const Page2Ref = await clientExports(Page2);
+
+    const rscStream = ReactServerDOMServer.renderToReadableStream(
+      <Page1Ref action={serverAction} permalink="/permalink" />,
+      webpackMap,
+    );
+    const response = ReactServerDOMClient.createFromReadableStream(rscStream);
+    const ssrStream = await ReactDOMServer.renderToReadableStream(response);
+    await readIntoContainer(ssrStream);
+
+    expect(container.textContent).toBe('1');
+
+    // Submit the form
+    const form = container.getElementsByTagName('form')[0];
+    const {formState} = await submit(form);
+
+    // Simulate an MPA form submission by resetting the container and
+    // rendering again.
+    container.innerHTML = '';
+
+    // On the next page, the same server action is rendered again, but in
+    // a different component tree. However, because a permalink option was
+    // passed, the state should be preserved.
+    const postbackRscStream = ReactServerDOMServer.renderToReadableStream(
+      <Page2Ref action={serverAction} permalink="/permalink" />,
+      webpackMap,
+    );
+    const postbackResponse =
+      ReactServerDOMClient.createFromReadableStream(postbackRscStream);
+    const postbackSsrStream = await ReactDOMServer.renderToReadableStream(
+      postbackResponse,
+      {experimental_formState: formState},
+    );
+    await readIntoContainer(postbackSsrStream);
+
+    expect(container.textContent).toBe('2');
+
+    // Now submit the form again. This time, the permalink will be different, so
+    // the state is not preserved.
+    const form2 = container.getElementsByTagName('form')[0];
+    const {formState: formState2} = await submit(form2);
+
+    container.innerHTML = '';
+
+    const postbackRscStream2 = ReactServerDOMServer.renderToReadableStream(
+      <Page1Ref action={serverAction} permalink="/some-other-permalink" />,
+      webpackMap,
+    );
+    const postbackResponse2 =
+      ReactServerDOMClient.createFromReadableStream(postbackRscStream2);
+    const postbackSsrStream2 = await ReactDOMServer.renderToReadableStream(
+      postbackResponse2,
+      {experimental_formState: formState2},
+    );
+    await readIntoContainer(postbackSsrStream2);
+
+    // The state was reset because the permalink didn't match
+    expect(container.textContent).toBe('1');
+  });
+
+  // @gate enableFormActions
+  // @gate enableAsyncActions
+  it('useFormState can change the action URL with the `permalink` argument', async () => {
+    const serverAction = serverExports(function action(prevState) {
+      return {state: prevState.count + 1};
+    });
+
+    const initialState = {count: 1};
+    function Client({action}) {
+      const [state, dispatch] = useFormState(
+        action,
+        initialState,
+        '/permalink',
+      );
+      return (
+        <form action={dispatch}>
+          <span>Count: {state.count}</span>
+        </form>
+      );
+    }
+    const ClientRef = await clientExports(Client);
+
+    const rscStream = ReactServerDOMServer.renderToReadableStream(
+      <ClientRef action={serverAction} />,
+      webpackMap,
+    );
+    const response = ReactServerDOMClient.createFromReadableStream(rscStream);
+    const ssrStream = await ReactDOMServer.renderToReadableStream(response);
+    await readIntoContainer(ssrStream);
+
+    const form = container.getElementsByTagName('form')[0];
+    const span = container.getElementsByTagName('span')[0];
+    expect(span.textContent).toBe('Count: 1');
+
+    expect(form.action).toBe('http://localhost/permalink');
+  });
+
+  // @gate enableFormActions
+  // @gate enableAsyncActions
+  it('useFormState `permalink` is coerced to string', async () => {
+    const serverAction = serverExports(function action(prevState) {
+      return {state: prevState.count + 1};
+    });
+
+    class Permalink {
+      toString() {
+        return '/permalink';
+      }
+    }
+
+    const permalink = new Permalink();
+
+    const initialState = {count: 1};
+    function Client({action}) {
+      const [state, dispatch] = useFormState(action, initialState, permalink);
+      return (
+        <form action={dispatch}>
+          <span>Count: {state.count}</span>
+        </form>
+      );
+    }
+    const ClientRef = await clientExports(Client);
+
+    const rscStream = ReactServerDOMServer.renderToReadableStream(
+      <ClientRef action={serverAction} />,
+      webpackMap,
+    );
+    const response = ReactServerDOMClient.createFromReadableStream(rscStream);
+    const ssrStream = await ReactDOMServer.renderToReadableStream(response);
+    await readIntoContainer(ssrStream);
+
+    const form = container.getElementsByTagName('form')[0];
+    const span = container.getElementsByTagName('span')[0];
+    expect(span.textContent).toBe('Count: 1');
+
+    expect(form.action).toBe('http://localhost/permalink');
+  });
 });
diff --git a/packages/react-server/src/ReactFizzHooks.js b/packages/react-server/src/ReactFizzHooks.js
index f832aeb578fcb..c80ac1e3b621a 100644
--- a/packages/react-server/src/ReactFizzHooks.js
+++ b/packages/react-server/src/ReactFizzHooks.js
@@ -14,10 +14,11 @@ import type {
   StartTransitionOptions,
   Thenable,
   Usable,
+  ReactCustomFormAction,
 } from 'shared/ReactTypes';
 
-import type {ResponseState} from './ReactFizzConfig';
-import type {Task} from './ReactFizzServer';
+import type {ResumableState} from './ReactFizzConfig';
+import type {Request, Task, KeyNode} from './ReactFizzServer';
 import type {ThenableState} from './ReactFizzThenable';
 import type {TransitionStatus} from './ReactFizzConfig';
 
@@ -26,6 +27,7 @@ import {getTreeId} from './ReactFizzTreeContext';
 import {createThenableState, trackUsedThenable} from './ReactFizzThenable';
 
 import {makeId, NotPendingTransition} from './ReactFizzConfig';
+import {createFastHash} from './ReactServerStreamConfig';
 
 import {
   enableCache,
@@ -40,6 +42,8 @@ import {
   REACT_CONTEXT_TYPE,
   REACT_MEMO_CACHE_SENTINEL,
 } from 'shared/ReactSymbols';
+import {checkAttributeStringCoercion} from 'shared/CheckStringCoercion';
+import {getFormState} from './ReactFizzServer';
 
 type BasicStateAction<S> = (S => S) | S;
 type Dispatch<A> = A => void;
@@ -62,6 +66,8 @@ type Hook = {
 
 let currentlyRenderingComponent: Object | null = null;
 let currentlyRenderingTask: Task | null = null;
+let currentlyRenderingRequest: Request | null = null;
+let currentlyRenderingKeyPath: KeyNode | null = null;
 let firstWorkInProgressHook: Hook | null = null;
 let workInProgressHook: Hook | null = null;
 // Whether the work-in-progress hook is a re-rendered hook
@@ -70,6 +76,13 @@ let isReRender: boolean = false;
 let didScheduleRenderPhaseUpdate: boolean = false;
 // Counts the number of useId hooks in this component
 let localIdCounter: number = 0;
+// Chunks that should be pushed to the stream once the component
+// finishes rendering.
+// Counts the number of useFormState calls in this component
+let formStateCounter: number = 0;
+// The index of the useFormState hook that matches the one passed in at the
+// root during an MPA navigation, if any.
+let formStateMatchingIndex: number = -1;
 // Counts the number of use(thenable) calls in this component
 let thenableIndexCounter: number = 0;
 let thenableState: ThenableState | null = null;
@@ -188,12 +201,16 @@ function createWorkInProgressHook(): Hook {
 }
 
 export function prepareToUseHooks(
+  request: Request,
   task: Task,
+  keyPath: KeyNode | null,
   componentIdentity: Object,
   prevThenableState: ThenableState | null,
 ): void {
   currentlyRenderingComponent = componentIdentity;
   currentlyRenderingTask = task;
+  currentlyRenderingRequest = request;
+  currentlyRenderingKeyPath = keyPath;
   if (__DEV__) {
     isInHookUserCodeInDev = false;
   }
@@ -206,6 +223,8 @@ export function prepareToUseHooks(
   // workInProgressHook = null;
 
   localIdCounter = 0;
+  formStateCounter = 0;
+  formStateMatchingIndex = -1;
   thenableIndexCounter = 0;
   thenableState = prevThenableState;
 }
@@ -226,6 +245,8 @@ export function finishHooks(
     // restarting until no more updates are scheduled.
     didScheduleRenderPhaseUpdate = false;
     localIdCounter = 0;
+    formStateCounter = 0;
+    formStateMatchingIndex = -1;
     thenableIndexCounter = 0;
     numberOfReRenders += 1;
 
@@ -234,6 +255,7 @@ export function finishHooks(
 
     children = Component(props, refOrContext);
   }
+
   resetHooksState();
   return children;
 }
@@ -252,6 +274,19 @@ export function checkDidRenderIdHook(): boolean {
   return didRenderIdHook;
 }
 
+export function getFormStateCount(): number {
+  // This should be called immediately after every finishHooks call.
+  // Conceptually, it's part of the return value of finishHooks; it's only a
+  // separate function to avoid using an array tuple.
+  return formStateCounter;
+}
+export function getFormStateMatchingIndex(): number {
+  // This should be called immediately after every finishHooks call.
+  // Conceptually, it's part of the return value of finishHooks; it's only a
+  // separate function to avoid using an array tuple.
+  return formStateMatchingIndex;
+}
+
 // Reset the internal hooks state if an error occurs while rendering a component
 export function resetHooksState(): void {
   if (__DEV__) {
@@ -260,6 +295,8 @@ export function resetHooksState(): void {
 
   currentlyRenderingComponent = null;
   currentlyRenderingTask = null;
+  currentlyRenderingRequest = null;
+  currentlyRenderingKeyPath = null;
   didScheduleRenderPhaseUpdate = false;
   firstWorkInProgressHook = null;
   numberOfReRenders = 0;
@@ -550,19 +587,149 @@ function useOptimistic<S, A>(
   return [passthrough, unsupportedSetOptimisticState];
 }
 
+function createPostbackFormStateKey(
+  permalink: string | void,
+  componentKeyPath: KeyNode | null,
+  hookIndex: number,
+): string {
+  if (permalink !== undefined) {
+    // Don't bother to hash a permalink-based key since it's already short.
+    return 'p' + permalink;
+  } else {
+    // Append a node to the key path that represents the form state hook.
+    const keyPath: KeyNode = [componentKeyPath, null, hookIndex];
+    // Key paths are hashed to reduce the size. It does not need to be secure,
+    // and it's more important that it's fast than that it's completely
+    // collision-free.
+    const keyPathHash = createFastHash(JSON.stringify(keyPath));
+    return 'k' + keyPathHash;
+  }
+}
+
+function useFormState<S, P>(
+  action: (S, P) => Promise<S>,
+  initialState: S,
+  permalink?: string,
+): [S, (P) => void] {
+  resolveCurrentlyRenderingComponent();
+
+  // Count the number of useFormState hooks per component. We also use this to
+  // track the position of this useFormState hook relative to the other ones in
+  // this component, so we can generate a unique key for each one.
+  const formStateHookIndex = formStateCounter++;
+  const request: Request = (currentlyRenderingRequest: any);
+
+  // $FlowIgnore[prop-missing]
+  const formAction = action.$$FORM_ACTION;
+  if (typeof formAction === 'function') {
+    // This is a server action. These have additional features to enable
+    // MPA-style form submissions with progressive enhancement.
+
+    // TODO: If the same permalink is passed to multiple useFormStates, and
+    // they all have the same action signature, Fizz will pass the postback
+    // state to all of them. We should probably only pass it to the first one,
+    // and/or warn.
+
+    // The key is lazily generated and deduped so the that the keypath doesn't
+    // get JSON.stringify-ed unnecessarily, and at most once.
+    let nextPostbackStateKey = null;
+
+    // Determine the current form state. If we received state during an MPA form
+    // submission, then we will reuse that, if the action identity matches.
+    // Otherwise we'll use the initial state argument. We will emit a comment
+    // marker into the stream that indicates whether the state was reused.
+    let state = initialState;
+    const componentKeyPath = (currentlyRenderingKeyPath: any);
+    const postbackFormState = getFormState(request);
+    // $FlowIgnore[prop-missing]
+    const isSignatureEqual = action.$$IS_SIGNATURE_EQUAL;
+    if (postbackFormState !== null && typeof isSignatureEqual === 'function') {
+      const postbackKey = postbackFormState[1];
+      const postbackReferenceId = postbackFormState[2];
+      const postbackBoundArity = postbackFormState[3];
+      if (
+        isSignatureEqual.call(action, postbackReferenceId, postbackBoundArity)
+      ) {
+        nextPostbackStateKey = createPostbackFormStateKey(
+          permalink,
+          componentKeyPath,
+          formStateHookIndex,
+        );
+        if (postbackKey === nextPostbackStateKey) {
+          // This was a match
+          formStateMatchingIndex = formStateHookIndex;
+          // Reuse the state that was submitted by the form.
+          state = postbackFormState[0];
+        }
+      }
+    }
+
+    // Bind the state to the first argument of the action.
+    const boundAction = action.bind(null, state);
+
+    // Wrap the action so the return value is void.
+    const dispatch = (payload: P): void => {
+      boundAction(payload);
+    };
+
+    // $FlowIgnore[prop-missing]
+    if (typeof boundAction.$$FORM_ACTION === 'function') {
+      // $FlowIgnore[prop-missing]
+      dispatch.$$FORM_ACTION = (prefix: string) => {
+        const metadata: ReactCustomFormAction =
+          boundAction.$$FORM_ACTION(prefix);
+
+        // Override the action URL
+        if (permalink !== undefined) {
+          if (__DEV__) {
+            checkAttributeStringCoercion(permalink, 'target');
+          }
+          permalink += '';
+          metadata.action = permalink;
+        }
+
+        const formData = metadata.data;
+        if (formData) {
+          if (nextPostbackStateKey === null) {
+            nextPostbackStateKey = createPostbackFormStateKey(
+              permalink,
+              componentKeyPath,
+              formStateHookIndex,
+            );
+          }
+          formData.append('$ACTION_KEY', nextPostbackStateKey);
+        }
+        return metadata;
+      };
+    }
+
+    return [state, dispatch];
+  } else {
+    // This is not a server action, so the implementation is much simpler.
+
+    // Bind the state to the first argument of the action.
+    const boundAction = action.bind(null, initialState);
+    // Wrap the action so the return value is void.
+    const dispatch = (payload: P): void => {
+      boundAction(payload);
+    };
+    return [initialState, dispatch];
+  }
+}
+
 function useId(): string {
   const task: Task = (currentlyRenderingTask: any);
   const treeId = getTreeId(task.treeContext);
 
-  const responseState = currentResponseState;
-  if (responseState === null) {
+  const resumableState = currentResumableState;
+  if (resumableState === null) {
     throw new Error(
       'Invalid hook call. Hooks can only be called inside of the body of a function component.',
     );
   }
 
   const localId = localIdCounter++;
-  return makeId(responseState, treeId, localId);
+  return makeId(resumableState, treeId, localId);
 }
 
 function use<T>(usable: Usable<T>): T {
@@ -650,11 +817,12 @@ if (enableFormActions && enableAsyncActions) {
 }
 if (enableAsyncActions) {
   HooksDispatcher.useOptimistic = useOptimistic;
+  HooksDispatcher.useFormState = useFormState;
 }
 
-export let currentResponseState: null | ResponseState = (null: any);
-export function setCurrentResponseState(
-  responseState: null | ResponseState,
+export let currentResumableState: null | ResumableState = (null: any);
+export function setCurrentResumableState(
+  resumableState: null | ResumableState,
 ): void {
-  currentResponseState = responseState;
+  currentResumableState = resumableState;
 }
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index 68dbe68f88c90..82d713bb2a415 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -19,13 +19,13 @@ import type {
   OffscreenMode,
   Wakeable,
   Thenable,
+  ReactFormState,
 } from 'shared/ReactTypes';
 import type {LazyComponent as LazyComponentType} from 'react/src/ReactLazy';
 import type {
-  SuspenseBoundaryID,
-  ResponseState,
+  RenderState,
+  ResumableState,
   FormatContext,
-  Resources,
   BoundaryResources,
 } from './ReactFizzConfig';
 import type {ContextSnapshot} from './ReactFizzNewContext';
@@ -63,8 +63,6 @@ import {
   pushStartCompletedSuspenseBoundary,
   pushEndCompletedSuspenseBoundary,
   pushSegmentFinale,
-  UNINITIALIZED_SUSPENSE_BOUNDARY_ID,
-  assignSuspenseBoundaryID,
   getChildFormatContext,
   writeResourcesForBoundary,
   writePreamble,
@@ -76,6 +74,8 @@ import {
   prepareHostDispatcher,
   supportsRequestStorage,
   requestStorage,
+  pushFormStateMarkerIsMatching,
+  pushFormStateMarkerIsNotMatching,
 } from './ReactFizzConfig';
 import {
   constructClassInstance,
@@ -100,10 +100,12 @@ import {
   checkDidRenderIdHook,
   resetHooksState,
   HooksDispatcher,
-  currentResponseState,
-  setCurrentResponseState,
+  currentResumableState,
+  setCurrentResumableState,
   getThenableStateAfterSuspending,
   unwrapThenable,
+  getFormStateCount,
+  getFormStateMatchingIndex,
 } from './ReactFizzHooks';
 import {DefaultCacheDispatcher} from './ReactFizzCache';
 import {getStackByComponentStackNode} from './ReactFizzComponentStack';
@@ -128,6 +130,7 @@ import {
   REACT_SERVER_CONTEXT_TYPE,
   REACT_SCOPE_TYPE,
   REACT_OFFSCREEN_TYPE,
+  REACT_POSTPONE_TYPE,
 } from 'shared/ReactSymbols';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {
@@ -137,42 +140,112 @@ import {
   enableSuspenseAvoidThisFallbackFizz,
   enableFloat,
   enableCache,
+  enablePostpone,
 } from 'shared/ReactFeatureFlags';
 
 import assign from 'shared/assign';
 import getComponentNameFromType from 'shared/getComponentNameFromType';
 import isArray from 'shared/isArray';
 import {SuspenseException, getSuspendedThenable} from './ReactFizzThenable';
+import type {Postpone} from 'react/src/ReactPostpone';
 
 const ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
 const ReactCurrentCache = ReactSharedInternals.ReactCurrentCache;
 const ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
 
+// Linked list representing the identity of a component given the component/tag name and key.
+// The name might be minified but we assume that it's going to be the same generated name. Typically
+// because it's just the same compiled output in practice.
+export type KeyNode = [
+  Root | KeyNode /* parent */,
+  string | null /* name */,
+  string | number /* key */,
+];
+
+type ResumeSlots =
+  | null // nothing to resume
+  | number // resume with segment ID at the root position
+  | {[index: number]: number}; // resume with segmentID at the index
+
+type ReplaySuspenseBoundary = [
+  string | null /* name */,
+  string | number /* key */,
+  Array<ReplayNode> /* keyed children */,
+  ResumeSlots /* resumable slots */,
+  number /* rootSegmentID */,
+];
+
+type ReplayNode =
+  | [
+      string | null /* name */,
+      string | number /* key */,
+      Array<ReplayNode> /* keyed children */,
+      ResumeSlots /* resumable slots */,
+    ]
+  | ReplaySuspenseBoundary;
+
+type PostponedHoles = {
+  workingMap: Map<KeyNode, ReplayNode>,
+  rootNodes: Array<ReplayNode>,
+  rootSlots: ResumeSlots,
+};
+
 type LegacyContext = {
   [key: string]: any,
 };
 
+const CLIENT_RENDERED = 4; // if it errors or infinitely suspends
+
 type SuspenseBoundary = {
-  id: SuspenseBoundaryID,
+  status: 0 | 1 | 4 | 5,
   rootSegmentID: number,
   errorDigest: ?string, // the error hash if it errors
   errorMessage?: string, // the error string if it errors
   errorComponentStack?: string, // the error component stack if it errors
-  forceClientRender: boolean, // if it errors or infinitely suspends
   parentFlushed: boolean,
   pendingTasks: number, // when it reaches zero we can show this boundary's content
   completedSegments: Array<Segment>, // completed but not yet flushed segments.
   byteSize: number, // used to determine whether to inline children boundaries.
   fallbackAbortableTasks: Set<Task>, // used to cancel task on the fallback if the boundary completes or gets canceled.
   resources: BoundaryResources,
+  keyPath: Root | KeyNode,
 };
 
-export type Task = {
+type RenderTask = {
+  replay: null,
   node: ReactNodeList,
+  childIndex: number,
   ping: () => void,
   blockedBoundary: Root | SuspenseBoundary,
   blockedSegment: Segment, // the segment we'll write to
   abortSet: Set<Task>, // the abortable set that this task belongs to
+  keyPath: Root | KeyNode, // the path of all parent keys currently rendering
+  formatContext: FormatContext, // the format's specific context (e.g. HTML/SVG/MathML)
+  legacyContext: LegacyContext, // the current legacy context that this task is executing in
+  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,
+};
+
+type ReplaySet = {
+  nodes: Array<ReplayNode>, // the possible paths to follow down the replaying
+  slots: ResumeSlots, // slots to resume
+  pendingTasks: number, // tracks the number of tasks currently tracking this set of nodes
+  // if pending tasks reach zero but there are still nodes left, it means we couldn't find
+  // them all in the tree, so we need to abort and client render the boundary.
+};
+
+type ReplayTask = {
+  replay: ReplaySet,
+  node: ReactNodeList,
+  childIndex: number,
+  ping: () => void,
+  blockedBoundary: Root | SuspenseBoundary,
+  blockedSegment: null, // we don't write to anything when we replay
+  abortSet: Set<Task>, // the abortable set that this task belongs to
+  keyPath: Root | KeyNode, // the path of all parent keys currently rendering
+  formatContext: FormatContext, // the format's specific context (e.g. HTML/SVG/MathML)
   legacyContext: LegacyContext, // the current legacy context that this task is executing in
   context: ContextSnapshot, // the current new context that this task is executing in
   treeContext: TreeContext, // the current tree context that this task is executing in
@@ -180,23 +253,26 @@ export type Task = {
   thenableState: null | ThenableState,
 };
 
+export type Task = RenderTask | ReplayTask;
+
 const PENDING = 0;
 const COMPLETED = 1;
 const FLUSHED = 2;
 const ABORTED = 3;
 const ERRORED = 4;
+const POSTPONED = 5;
 
 type Root = null;
 
 type Segment = {
-  status: 0 | 1 | 2 | 3 | 4,
+  status: 0 | 1 | 2 | 3 | 4 | 5,
   parentFlushed: boolean, // typically a segment will be flushed by its parent, except if its parent was already flushed
   id: number, // starts as 0 and is lazily assigned if the parent flushes early
   +index: number, // the index within the parent's chunks or 0 at the root
   +chunks: Array<Chunk | PrecomputedChunk>,
   +children: Array<Segment>,
   // The context that this segment was created in.
-  formatContext: FormatContext,
+  parentFormatContext: FormatContext,
   // If this segment represents a fallback, this is the content that will replace that fallback.
   +boundary: null | SuspenseBoundary,
   // used to discern when text separator boundaries are needed
@@ -211,14 +287,15 @@ const CLOSED = 2;
 export opaque type Request = {
   destination: null | Destination,
   flushScheduled: boolean,
-  +responseState: ResponseState,
+  +resumableState: ResumableState,
+  +renderState: RenderState,
+  +rootFormatContext: FormatContext,
   +progressiveChunkSize: number,
   status: 0 | 1 | 2,
   fatalError: mixed,
   nextSegmentId: number,
   allPendingTasks: number, // when it reaches zero, we can close the connection.
   pendingRootTasks: number, // when this reaches zero, we've finished at least the root boundary.
-  resources: Resources,
   completedRootSegment: null | Segment, // Completed but not yet flushed root segments.
   abortableTasks: Set<Task>,
   pingedTasks: Array<Task>, // High priority tasks that should be worked on first.
@@ -226,6 +303,7 @@ export opaque type Request = {
   clientRenderedBoundaries: Array<SuspenseBoundary>, // Errored or client rendered but not yet flushed.
   completedBoundaries: Array<SuspenseBoundary>, // Completed but not yet fully flushed boundaries to show.
   partialBoundaries: Array<SuspenseBoundary>, // Partially completed boundaries that can flush its segments early.
+  trackedPostpones: null | PostponedHoles, // Gets set to non-null while we want to track postponed holes. I.e. during a prerender.
   // onError is called when an error happens anywhere in the tree. It might recover.
   // The return string is used in production  primarily to avoid leaking internals, secondarily to save bytes.
   // Returning null/undefined will cause a defualt error message in production
@@ -241,6 +319,11 @@ export opaque type Request = {
   // emit a different response to the stream instead.
   onShellError: (error: mixed) => void,
   onFatalError: (error: mixed) => void,
+  // onPostpone is called when postpone() is called anywhere in the tree, which will defer
+  // rendering - e.g. to the client. This is considered intentional and not an error.
+  onPostpone: (reason: string) => void,
+  // Form state that was the result of an MPA submission, if it was provided.
+  formState: null | ReactFormState<any, any>,
 };
 
 // This is a default heuristic for how to split up the HTML content into progressive
@@ -269,8 +352,8 @@ function noop(): void {}
 
 export function createRequest(
   children: ReactNodeList,
-  resources: Resources,
-  responseState: ResponseState,
+  resumableState: ResumableState,
+  renderState: RenderState,
   rootFormatContext: FormatContext,
   progressiveChunkSize: void | number,
   onError: void | ((error: mixed) => ?string),
@@ -278,6 +361,8 @@ export function createRequest(
   onShellReady: void | (() => void),
   onShellError: void | ((error: mixed) => void),
   onFatalError: void | ((error: mixed) => void),
+  onPostpone: void | ((reason: string) => void),
+  formState: void | null | ReactFormState<any, any>,
 ): Request {
   prepareHostDispatcher();
   const pingedTasks: Array<Task> = [];
@@ -285,7 +370,9 @@ export function createRequest(
   const request: Request = {
     destination: null,
     flushScheduled: false,
-    responseState,
+    resumableState,
+    renderState,
+    rootFormatContext,
     progressiveChunkSize:
       progressiveChunkSize === undefined
         ? DEFAULT_PROGRESSIVE_CHUNK_SIZE
@@ -295,18 +382,20 @@ export function createRequest(
     nextSegmentId: 0,
     allPendingTasks: 0,
     pendingRootTasks: 0,
-    resources,
     completedRootSegment: null,
     abortableTasks: abortSet,
     pingedTasks: pingedTasks,
     clientRenderedBoundaries: ([]: Array<SuspenseBoundary>),
     completedBoundaries: ([]: Array<SuspenseBoundary>),
     partialBoundaries: ([]: Array<SuspenseBoundary>),
+    trackedPostpones: null,
     onError: onError === undefined ? defaultErrorHandler : onError,
+    onPostpone: onPostpone === undefined ? noop : onPostpone,
     onAllReady: onAllReady === undefined ? noop : onAllReady,
     onShellReady: onShellReady === undefined ? noop : onShellReady,
     onShellError: onShellError === undefined ? noop : onShellError,
     onFatalError: onFatalError === undefined ? noop : onFatalError,
+    formState: formState === undefined ? null : formState,
   };
   // This segment represents the root fallback.
   const rootSegment = createPendingSegment(
@@ -320,13 +409,115 @@ export function createRequest(
   );
   // There is no parent so conceptually, we're unblocked to flush this segment.
   rootSegment.parentFlushed = true;
-  const rootTask = createTask(
+  const rootTask = createRenderTask(
     request,
     null,
     children,
+    -1,
     null,
     rootSegment,
     abortSet,
+    null,
+    rootFormatContext,
+    emptyContextObject,
+    rootContextSnapshot,
+    emptyTreeContext,
+  );
+  pingedTasks.push(rootTask);
+  return request;
+}
+
+export function createPrerenderRequest(
+  children: ReactNodeList,
+  resumableState: ResumableState,
+  renderState: RenderState,
+  rootFormatContext: FormatContext,
+  progressiveChunkSize: void | number,
+  onError: void | ((error: mixed) => ?string),
+  onAllReady: void | (() => void),
+  onShellReady: void | (() => void),
+  onShellError: void | ((error: mixed) => void),
+  onFatalError: void | ((error: mixed) => void),
+  onPostpone: void | ((reason: string) => void),
+): Request {
+  const request = createRequest(
+    children,
+    resumableState,
+    renderState,
+    rootFormatContext,
+    progressiveChunkSize,
+    onError,
+    onAllReady,
+    onShellReady,
+    onShellError,
+    onFatalError,
+    onPostpone,
+  );
+  // Start tracking postponed holes during this render.
+  request.trackedPostpones = {
+    workingMap: new Map(),
+    rootNodes: [],
+    rootSlots: null,
+  };
+  return request;
+}
+
+export function resumeRequest(
+  children: ReactNodeList,
+  postponedState: PostponedState,
+  renderState: RenderState,
+  onError: void | ((error: mixed) => ?string),
+  onAllReady: void | (() => void),
+  onShellReady: void | (() => void),
+  onShellError: void | ((error: mixed) => void),
+  onFatalError: void | ((error: mixed) => void),
+  onPostpone: void | ((reason: string) => void),
+): Request {
+  prepareHostDispatcher();
+  const pingedTasks: Array<Task> = [];
+  const abortSet: Set<Task> = new Set();
+  const request: Request = {
+    destination: null,
+    flushScheduled: false,
+    resumableState: postponedState.resumableState,
+    renderState,
+    rootFormatContext: postponedState.rootFormatContext,
+    progressiveChunkSize: postponedState.progressiveChunkSize,
+    status: OPEN,
+    fatalError: null,
+    nextSegmentId: 0,
+    allPendingTasks: 0,
+    pendingRootTasks: 0,
+    completedRootSegment: null,
+    abortableTasks: abortSet,
+    pingedTasks: pingedTasks,
+    clientRenderedBoundaries: ([]: Array<SuspenseBoundary>),
+    completedBoundaries: ([]: Array<SuspenseBoundary>),
+    partialBoundaries: ([]: Array<SuspenseBoundary>),
+    trackedPostpones: null,
+    onError: onError === undefined ? defaultErrorHandler : onError,
+    onPostpone: onPostpone === undefined ? noop : onPostpone,
+    onAllReady: onAllReady === undefined ? noop : onAllReady,
+    onShellReady: onShellReady === undefined ? noop : onShellReady,
+    onShellError: onShellError === undefined ? noop : onShellError,
+    onFatalError: onFatalError === undefined ? noop : onFatalError,
+    formState: null,
+  };
+  const replay: ReplaySet = {
+    nodes: postponedState.replayNodes,
+    slots: postponedState.replaySlots,
+    pendingTasks: 0,
+  };
+  const rootTask = createReplayTask(
+    request,
+    null,
+    replay,
+    children,
+    -1,
+    null,
+    abortSet,
+    null,
+    postponedState.rootFormatContext,
     emptyContextObject,
     rootContextSnapshot,
     emptyTreeContext,
@@ -358,44 +549,95 @@ function pingTask(request: Request, task: Task): void {
 function createSuspenseBoundary(
   request: Request,
   fallbackAbortableTasks: Set<Task>,
+  keyPath: Root | KeyNode,
 ): SuspenseBoundary {
   return {
-    id: UNINITIALIZED_SUSPENSE_BOUNDARY_ID,
+    status: PENDING,
     rootSegmentID: -1,
     parentFlushed: false,
     pendingTasks: 0,
-    forceClientRender: false,
     completedSegments: [],
     byteSize: 0,
     fallbackAbortableTasks,
     errorDigest: null,
     resources: createBoundaryResources(),
+    keyPath,
   };
 }
 
-function createTask(
+function createRenderTask(
   request: Request,
   thenableState: ThenableState | null,
   node: ReactNodeList,
+  childIndex: number,
   blockedBoundary: Root | SuspenseBoundary,
   blockedSegment: Segment,
   abortSet: Set<Task>,
+  keyPath: Root | KeyNode,
+  formatContext: FormatContext,
   legacyContext: LegacyContext,
   context: ContextSnapshot,
   treeContext: TreeContext,
-): Task {
+): RenderTask {
   request.allPendingTasks++;
   if (blockedBoundary === null) {
     request.pendingRootTasks++;
   } else {
     blockedBoundary.pendingTasks++;
   }
-  const task: Task = ({
+  const task: RenderTask = ({
+    replay: null,
     node,
+    childIndex,
     ping: () => pingTask(request, task),
     blockedBoundary,
     blockedSegment,
     abortSet,
+    keyPath,
+    formatContext,
+    legacyContext,
+    context,
+    treeContext,
+    thenableState,
+  }: any);
+  if (__DEV__) {
+    task.componentStack = null;
+  }
+  abortSet.add(task);
+  return task;
+}
+
+function createReplayTask(
+  request: Request,
+  thenableState: ThenableState | null,
+  replay: ReplaySet,
+  node: ReactNodeList,
+  childIndex: number,
+  blockedBoundary: Root | SuspenseBoundary,
+  abortSet: Set<Task>,
+  keyPath: Root | KeyNode,
+  formatContext: FormatContext,
+  legacyContext: LegacyContext,
+  context: ContextSnapshot,
+  treeContext: TreeContext,
+): ReplayTask {
+  request.allPendingTasks++;
+  if (blockedBoundary === null) {
+    request.pendingRootTasks++;
+  } else {
+    blockedBoundary.pendingTasks++;
+  }
+  replay.pendingTasks++;
+  const task: ReplayTask = ({
+    replay,
+    node,
+    childIndex,
+    ping: () => pingTask(request, task),
+    blockedBoundary,
+    blockedSegment: null,
+    abortSet,
+    keyPath,
+    formatContext,
     legacyContext,
     context,
     treeContext,
@@ -412,7 +654,7 @@ function createPendingSegment(
   request: Request,
   index: number,
   boundary: null | SuspenseBoundary,
-  formatContext: FormatContext,
+  parentFormatContext: FormatContext,
   lastPushedText: boolean,
   textEmbedded: boolean,
 ): Segment {
@@ -423,7 +665,7 @@ function createPendingSegment(
     parentFlushed: false,
     chunks: [],
     children: [],
-    formatContext,
+    parentFormatContext,
     boundary,
     lastPushedText,
     textEmbedded,
@@ -508,6 +750,12 @@ function captureBoundaryErrorDetailsDev(
   }
 }
 
+function logPostpone(request: Request, reason: string): void {
+  // If this callback errors, we intentionally let that error bubble up to become a fatal error
+  // so that someone fixes the error reporting instead of hiding it.
+  request.onPostpone(reason);
+}
+
 function logRecoverableError(request: Request, error: any): ?string {
   // If this callback errors, we intentionally let that error bubble up to become a fatal error
   // so that someone fixes the error reporting instead of hiding it.
@@ -540,10 +788,30 @@ function fatalError(request: Request, error: mixed): void {
 
 function renderSuspenseBoundary(
   request: Request,
-  task: Task,
+  someTask: Task,
+  keyPath: KeyNode,
   props: Object,
 ): void {
+  if (someTask.replay !== null) {
+    // If we're replaying through this pass, it means we're replaying through
+    // an already completed Suspense boundary. It's too late to do anything about it
+    // so we can just render through it.
+    const prevKeyPath = someTask.keyPath;
+    someTask.keyPath = keyPath;
+    const content: ReactNodeList = props.children;
+    try {
+      renderNode(request, someTask, content, -1);
+    } finally {
+      someTask.keyPath = prevKeyPath;
+    }
+    return;
+  }
+  // $FlowFixMe: Refined.
+  const task: RenderTask = someTask;
+
   pushBuiltInComponentStackInDEV(task, 'Suspense');
+
+  const prevKeyPath = task.keyPath;
   const parentBoundary = task.blockedBoundary;
   const parentSegment = task.blockedSegment;
 
@@ -555,14 +823,18 @@ function renderSuspenseBoundary(
   const content: ReactNodeList = props.children;
 
   const fallbackAbortSet: Set<Task> = new Set();
-  const newBoundary = createSuspenseBoundary(request, fallbackAbortSet);
+  const newBoundary = createSuspenseBoundary(
+    request,
+    fallbackAbortSet,
+    keyPath,
+  );
   const insertionIndex = parentSegment.chunks.length;
   // The children of the boundary segment is actually the fallback.
   const boundarySegment = createPendingSegment(
     request,
     insertionIndex,
     newBoundary,
-    parentSegment.formatContext,
+    task.formatContext,
     // boundaries never require text embedding at their edges because comment nodes bound them
     false,
     false,
@@ -576,7 +848,7 @@ function renderSuspenseBoundary(
     request,
     0,
     null,
-    parentSegment.formatContext,
+    task.formatContext,
     // boundaries never require text embedding at their edges because comment nodes bound them
     false,
     false,
@@ -597,22 +869,24 @@ function renderSuspenseBoundary(
   task.blockedSegment = contentRootSegment;
   if (enableFloat) {
     setCurrentlyRenderingBoundaryResourcesTarget(
-      request.resources,
+      request.renderState,
       newBoundary.resources,
     );
   }
+  task.keyPath = keyPath;
   try {
     // We use the safe form because we don't handle suspending here. Only error handling.
-    renderNode(request, task, content);
+    renderNode(request, task, content, -1);
     pushSegmentFinale(
       contentRootSegment.chunks,
-      request.responseState,
+      request.renderState,
       contentRootSegment.lastPushedText,
       contentRootSegment.textEmbedded,
     );
     contentRootSegment.status = COMPLETED;
     queueCompletedSegment(newBoundary, contentRootSegment);
-    if (newBoundary.pendingTasks === 0) {
+    if (newBoundary.pendingTasks === 0 && newBoundary.status === PENDING) {
+      newBoundary.status = COMPLETED;
       // This must have been the last segment we were waiting on. This boundary is now complete.
       // Therefore we won't need the fallback. We early return so that we don't have to create
       // the fallback.
@@ -621,8 +895,22 @@ function renderSuspenseBoundary(
     }
   } catch (error) {
     contentRootSegment.status = ERRORED;
-    newBoundary.forceClientRender = true;
-    newBoundary.errorDigest = logRecoverableError(request, error);
+    newBoundary.status = CLIENT_RENDERED;
+    let errorDigest;
+    if (
+      enablePostpone &&
+      typeof error === 'object' &&
+      error !== null &&
+      error.$$typeof === REACT_POSTPONE_TYPE
+    ) {
+      const postponeInstance: Postpone = (error: any);
+      logPostpone(request, postponeInstance.message);
+      // TODO: Figure out a better signal than a magic digest value.
+      errorDigest = 'POSTPONE';
+    } else {
+      errorDigest = logRecoverableError(request, error);
+    }
+    newBoundary.errorDigest = errorDigest;
     if (__DEV__) {
       captureBoundaryErrorDetailsDev(newBoundary, error);
     }
@@ -633,23 +921,28 @@ function renderSuspenseBoundary(
   } finally {
     if (enableFloat) {
       setCurrentlyRenderingBoundaryResourcesTarget(
-        request.resources,
+        request.renderState,
         parentBoundary ? parentBoundary.resources : null,
       );
     }
     task.blockedBoundary = parentBoundary;
     task.blockedSegment = parentSegment;
+    task.keyPath = prevKeyPath;
   }
 
   // We create suspended task for the fallback because we don't want to actually work
   // on it yet in case we finish the main content, so we queue for later.
-  const suspendedFallbackTask = createTask(
+  const suspendedFallbackTask = createRenderTask(
     request,
     null,
     fallback,
+    -1,
     parentBoundary,
     boundarySegment,
     fallbackAbortSet,
+    // TODO: Should distinguish key path of fallback and primary tasks
+    keyPath,
+    task.formatContext,
     task.legacyContext,
     task.context,
     task.treeContext,
@@ -664,19 +957,132 @@ function renderSuspenseBoundary(
   popComponentStackInDEV(task);
 }
 
+function replaySuspenseBoundary(
+  request: Request,
+  task: ReplayTask,
+  keyPath: KeyNode,
+  props: Object,
+  id: number,
+  childNodes: Array<ReplayNode>,
+  childSlots: ResumeSlots,
+): void {
+  pushBuiltInComponentStackInDEV(task, 'Suspense');
+
+  const prevKeyPath = task.keyPath;
+  const previousReplaySet: ReplaySet = task.replay;
+
+  const parentBoundary = task.blockedBoundary;
+
+  const content: ReactNodeList = props.children;
+
+  const fallbackAbortSet: Set<Task> = new Set();
+  const resumedBoundary = createSuspenseBoundary(
+    request,
+    fallbackAbortSet,
+    task.keyPath,
+  );
+  resumedBoundary.parentFlushed = true;
+  // We restore the same id of this boundary as was used during prerender.
+  resumedBoundary.rootSegmentID = id;
+
+  // We can reuse the current context and task to render the content immediately without
+  // context switching. We just need to temporarily switch which boundary and replay node
+  // we're writing to. If something suspends, it'll spawn new suspended task with that context.
+  task.blockedBoundary = resumedBoundary;
+  task.replay = {nodes: childNodes, slots: childSlots, pendingTasks: 1};
+  if (enableFloat) {
+    setCurrentlyRenderingBoundaryResourcesTarget(
+      request.renderState,
+      resumedBoundary.resources,
+    );
+  }
+  try {
+    // We use the safe form because we don't handle suspending here. Only error handling.
+    if (typeof childSlots === 'number') {
+      resumeNode(request, task, childSlots, content, -1);
+    } else {
+      renderNode(request, task, content, -1);
+    }
+    if (
+      resumedBoundary.pendingTasks === 0 &&
+      resumedBoundary.status === PENDING
+    ) {
+      resumedBoundary.status = COMPLETED;
+      request.completedBoundaries.push(resumedBoundary);
+    }
+    if (task.replay.pendingTasks === 1 && task.replay.nodes.length > 0) {
+      throw new Error(
+        "Couldn't find all resumable slots by key/index during replaying. " +
+          "The tree doesn't match so React will fallback to client rendering.",
+      );
+    }
+    task.replay.pendingTasks--;
+  } catch (error) {
+    resumedBoundary.status = CLIENT_RENDERED;
+    let errorDigest;
+    if (
+      enablePostpone &&
+      typeof error === 'object' &&
+      error !== null &&
+      error.$$typeof === REACT_POSTPONE_TYPE
+    ) {
+      const postponeInstance: Postpone = (error: any);
+      logPostpone(request, postponeInstance.message);
+      // TODO: Figure out a better signal than a magic digest value.
+      errorDigest = 'POSTPONE';
+    } else {
+      errorDigest = logRecoverableError(request, error);
+    }
+    resumedBoundary.errorDigest = errorDigest;
+    if (__DEV__) {
+      captureBoundaryErrorDetailsDev(resumedBoundary, error);
+    }
+
+    task.replay.pendingTasks--;
+
+    // The parent already flushed in the prerender so we need to schedule this to be emitted.
+    request.clientRenderedBoundaries.push(resumedBoundary);
+
+    // We don't need to decrement any task numbers because we didn't spawn any new task.
+    // We don't need to schedule any task because we know the parent has written yet.
+    // We do need to fallthrough to create the fallback though.
+  } finally {
+    if (enableFloat) {
+      setCurrentlyRenderingBoundaryResourcesTarget(
+        request.renderState,
+        parentBoundary ? parentBoundary.resources : null,
+      );
+    }
+    task.blockedBoundary = parentBoundary;
+    task.replay = previousReplaySet;
+    task.keyPath = prevKeyPath;
+  }
+  // TODO: Should this be in the finally?
+  popComponentStackInDEV(task);
+}
+
 function renderBackupSuspenseBoundary(
   request: Request,
   task: Task,
+  keyPath: KeyNode,
   props: Object,
 ) {
   pushBuiltInComponentStackInDEV(task, 'Suspense');
 
   const content = props.children;
   const segment = task.blockedSegment;
-
-  pushStartCompletedSuspenseBoundary(segment.chunks);
-  renderNode(request, task, content);
-  pushEndCompletedSuspenseBoundary(segment.chunks);
+  const prevKeyPath = task.keyPath;
+  task.keyPath = keyPath;
+  if (segment === null) {
+    // Replay
+    renderNode(request, task, content, -1);
+  } else {
+    // Render
+    pushStartCompletedSuspenseBoundary(segment.chunks);
+    renderNode(request, task, content, -1);
+    pushEndCompletedSuspenseBoundary(segment.chunks);
+  }
+  task.keyPath = prevKeyPath;
 
   popComponentStackInDEV(task);
 }
@@ -684,40 +1090,62 @@ function renderBackupSuspenseBoundary(
 function renderHostElement(
   request: Request,
   task: Task,
+  keyPath: KeyNode,
   type: string,
   props: Object,
 ): void {
   pushBuiltInComponentStackInDEV(task, type);
   const segment = task.blockedSegment;
-
-  const children = pushStartInstance(
-    segment.chunks,
-    type,
-    props,
-    request.resources,
-    request.responseState,
-    segment.formatContext,
-    segment.lastPushedText,
-  );
-  segment.lastPushedText = false;
-  const prevContext = segment.formatContext;
-  segment.formatContext = getChildFormatContext(prevContext, type, props);
-
-  // We use the non-destructive form because if something suspends, we still
-  // need to pop back up and finish this subtree of HTML.
-  renderNode(request, task, children);
-
-  // We expect that errors will fatal the whole task and that we don't need
-  // the correct context. Therefore this is not in a finally.
-  segment.formatContext = prevContext;
-  pushEndInstance(
-    segment.chunks,
-    type,
-    props,
-    request.responseState,
-    prevContext,
-  );
-  segment.lastPushedText = false;
+  if (segment === null) {
+    // Replay
+    const children = props.children; // TODO: Make this a Config for replaying.
+    const prevContext = task.formatContext;
+    const prevKeyPath = task.keyPath;
+    task.formatContext = getChildFormatContext(prevContext, type, props);
+    task.keyPath = keyPath;
+
+    // We use the non-destructive form because if something suspends, we still
+    // need to pop back up and finish this subtree of HTML.
+    renderNode(request, task, children, -1);
+
+    // We expect that errors will fatal the whole task and that we don't need
+    // the correct context. Therefore this is not in a finally.
+    task.formatContext = prevContext;
+    task.keyPath = prevKeyPath;
+  } else {
+    // Render
+    const children = pushStartInstance(
+      segment.chunks,
+      type,
+      props,
+      request.resumableState,
+      request.renderState,
+      task.formatContext,
+      segment.lastPushedText,
+    );
+    segment.lastPushedText = false;
+    const prevContext = task.formatContext;
+    const prevKeyPath = task.keyPath;
+    task.formatContext = getChildFormatContext(prevContext, type, props);
+    task.keyPath = keyPath;
+
+    // We use the non-destructive form because if something suspends, we still
+    // need to pop back up and finish this subtree of HTML.
+    renderNode(request, task, children, -1);
+
+    // We expect that errors will fatal the whole task and that we don't need
+    // the correct context. Therefore this is not in a finally.
+    task.formatContext = prevContext;
+    task.keyPath = prevKeyPath;
+    pushEndInstance(
+      segment.chunks,
+      type,
+      props,
+      request.resumableState,
+      prevContext,
+    );
+    segment.lastPushedText = false;
+  }
   popComponentStackInDEV(task);
 }
 
@@ -728,13 +1156,20 @@ function shouldConstruct(Component: any) {
 function renderWithHooks<Props, SecondArg>(
   request: Request,
   task: Task,
+  keyPath: KeyNode,
   prevThenableState: ThenableState | null,
   Component: (p: Props, arg: SecondArg) => any,
   props: Props,
   secondArg: SecondArg,
 ): any {
   const componentIdentity = {};
-  prepareToUseHooks(task, componentIdentity, prevThenableState);
+  prepareToUseHooks(
+    request,
+    task,
+    keyPath,
+    componentIdentity,
+    prevThenableState,
+  );
   const result = Component(props, secondArg);
   return finishHooks(Component, props, result, secondArg);
 }
@@ -742,6 +1177,7 @@ function renderWithHooks<Props, SecondArg>(
 function finishClassComponent(
   request: Request,
   task: Task,
+  keyPath: KeyNode,
   instance: any,
   Component: any,
   props: any,
@@ -772,18 +1208,22 @@ function finishClassComponent(
         childContextTypes,
       );
       task.legacyContext = mergedContext;
-      renderNodeDestructive(request, task, null, nextChildren);
+      renderNodeDestructive(request, task, null, nextChildren, -1);
       task.legacyContext = previousContext;
       return;
     }
   }
 
-  renderNodeDestructive(request, task, null, nextChildren);
+  const prevKeyPath = task.keyPath;
+  task.keyPath = keyPath;
+  renderNodeDestructive(request, task, null, nextChildren, -1);
+  task.keyPath = prevKeyPath;
 }
 
 function renderClassComponent(
   request: Request,
   task: Task,
+  keyPath: KeyNode,
   Component: any,
   props: any,
 ): void {
@@ -793,7 +1233,7 @@ function renderClassComponent(
     : undefined;
   const instance = constructClassInstance(Component, props, maskedContext);
   mountClassInstance(instance, Component, props, maskedContext);
-  finishClassComponent(request, task, instance, Component, props);
+  finishClassComponent(request, task, keyPath, instance, Component, props);
   popComponentStackInDEV(task);
 }
 
@@ -812,6 +1252,7 @@ let hasWarnedAboutUsingContextAsConsumer = false;
 function renderIndeterminateComponent(
   request: Request,
   task: Task,
+  keyPath: KeyNode,
   prevThenableState: ThenableState | null,
   Component: any,
   props: any,
@@ -844,12 +1285,15 @@ function renderIndeterminateComponent(
   const value = renderWithHooks(
     request,
     task,
+    keyPath,
     prevThenableState,
     Component,
     props,
     legacyContext,
   );
   const hasId = checkDidRenderIdHook();
+  const formStateCount = getFormStateCount();
+  const formStateMatchingIndex = getFormStateMatchingIndex();
 
   if (__DEV__) {
     // Support for module components is deprecated and is removed behind a flag.
@@ -904,7 +1348,7 @@ function renderIndeterminateComponent(
     }
 
     mountClassInstance(value, Component, props, legacyContext);
-    finishClassComponent(request, task, value, Component, props);
+    finishClassComponent(request, task, keyPath, value, Component, props);
   } else {
     // Proceed under the assumption that this is a function component
     if (__DEV__) {
@@ -919,25 +1363,76 @@ function renderIndeterminateComponent(
     if (__DEV__) {
       validateFunctionComponentInDev(Component);
     }
-    // We're now successfully past this task, and we don't have to pop back to
-    // the previous task every again, so we can use the destructive recursive form.
-    if (hasId) {
-      // This component materialized an id. We treat this as its own level, with
-      // a single "child" slot.
-      const prevTreeContext = task.treeContext;
-      const totalChildren = 1;
-      const index = 0;
-      task.treeContext = pushTreeContext(prevTreeContext, totalChildren, index);
-      try {
-        renderNodeDestructive(request, task, null, value);
-      } finally {
-        task.treeContext = prevTreeContext;
-      }
+    finishFunctionComponent(
+      request,
+      task,
+      keyPath,
+      value,
+      hasId,
+      formStateCount,
+      formStateMatchingIndex,
+    );
+  }
+  popComponentStackInDEV(task);
+}
+
+function finishFunctionComponent(
+  request: Request,
+  task: Task,
+  keyPath: KeyNode,
+  children: ReactNodeList,
+  hasId: boolean,
+  formStateCount: number,
+  formStateMatchingIndex: number,
+) {
+  let didEmitFormStateMarkers = false;
+  if (formStateCount !== 0 && request.formState !== null) {
+    // For each useFormState hook, emit a marker that indicates whether we
+    // rendered using the form state passed at the root. We only emit these
+    // markers if form state is passed at the root.
+    const segment = task.blockedSegment;
+    if (segment === null) {
+      // Implies we're in reumable mode.
     } else {
-      renderNodeDestructive(request, task, null, value);
+      didEmitFormStateMarkers = true;
+      const target = segment.chunks;
+      for (let i = 0; i < formStateCount; i++) {
+        if (i === formStateMatchingIndex) {
+          pushFormStateMarkerIsMatching(target);
+        } else {
+          pushFormStateMarkerIsNotMatching(target);
+        }
+      }
     }
   }
-  popComponentStackInDEV(task);
+
+  const prevKeyPath = task.keyPath;
+  task.keyPath = keyPath;
+  if (hasId) {
+    // This component materialized an id. We treat this as its own level, with
+    // a single "child" slot.
+    const prevTreeContext = task.treeContext;
+    const totalChildren = 1;
+    const index = 0;
+    // Modify the id context. Because we'll need to reset this if something
+    // suspends or errors, we'll use the non-destructive render path.
+    task.treeContext = pushTreeContext(prevTreeContext, totalChildren, index);
+    renderNode(request, task, children, -1);
+    // Like the other contexts, this does not need to be in a finally block
+    // because renderNode takes care of unwinding the stack.
+    task.treeContext = prevTreeContext;
+  } else if (didEmitFormStateMarkers) {
+    // If there were formState hooks, we must use the non-destructive path
+    // because this component is not a pure indirection; we emitted markers
+    // to the stream.
+    renderNode(request, task, children, -1);
+  } else {
+    // We're now successfully past this task, and we haven't modified the
+    // context stack. We don't have to pop back to the previous task every
+    // again, so we can use the destructive recursive form.
+    renderNodeDestructive(request, task, null, children, -1);
+  }
+  task.keyPath = prevKeyPath;
 }
 
 function validateFunctionComponentInDev(Component: any): void {
@@ -1011,6 +1506,7 @@ function resolveDefaultProps(Component: any, baseProps: Object): Object {
 function renderForwardRef(
   request: Request,
   task: Task,
+  keyPath: KeyNode,
   prevThenableState: null | ThenableState,
   type: any,
   props: Object,
@@ -1020,33 +1516,31 @@ function renderForwardRef(
   const children = renderWithHooks(
     request,
     task,
+    keyPath,
     prevThenableState,
     type.render,
     props,
     ref,
   );
   const hasId = checkDidRenderIdHook();
-  if (hasId) {
-    // This component materialized an id. We treat this as its own level, with
-    // a single "child" slot.
-    const prevTreeContext = task.treeContext;
-    const totalChildren = 1;
-    const index = 0;
-    task.treeContext = pushTreeContext(prevTreeContext, totalChildren, index);
-    try {
-      renderNodeDestructive(request, task, null, children);
-    } finally {
-      task.treeContext = prevTreeContext;
-    }
-  } else {
-    renderNodeDestructive(request, task, null, children);
-  }
+  const formStateCount = getFormStateCount();
+  const formStateMatchingIndex = getFormStateMatchingIndex();
+  finishFunctionComponent(
+    request,
+    task,
+    keyPath,
+    children,
+    hasId,
+    formStateCount,
+    formStateMatchingIndex,
+  );
   popComponentStackInDEV(task);
 }
 
 function renderMemo(
   request: Request,
   task: Task,
+  keyPath: KeyNode,
   prevThenableState: ThenableState | null,
   type: any,
   props: Object,
@@ -1057,6 +1551,7 @@ function renderMemo(
   renderElement(
     request,
     task,
+    keyPath,
     prevThenableState,
     innerType,
     resolvedProps,
@@ -1067,6 +1562,7 @@ function renderMemo(
 function renderContextConsumer(
   request: Request,
   task: Task,
+  keyPath: KeyNode,
   context: ReactContext<any>,
   props: Object,
 ): void {
@@ -1111,12 +1607,16 @@ function renderContextConsumer(
   const newValue = readContext(context);
   const newChildren = render(newValue);
 
-  renderNodeDestructive(request, task, null, newChildren);
+  const prevKeyPath = task.keyPath;
+  task.keyPath = keyPath;
+  renderNodeDestructive(request, task, null, newChildren, -1);
+  task.keyPath = prevKeyPath;
 }
 
 function renderContextProvider(
   request: Request,
   task: Task,
+  keyPath: KeyNode,
   type: ReactProviderType<any>,
   props: Object,
 ): void {
@@ -1127,9 +1627,12 @@ function renderContextProvider(
   if (__DEV__) {
     prevSnapshot = task.context;
   }
+  const prevKeyPath = task.keyPath;
   task.context = pushProvider(context, value);
-  renderNodeDestructive(request, task, null, children);
+  task.keyPath = keyPath;
+  renderNodeDestructive(request, task, null, children, -1);
   task.context = popProvider(context);
+  task.keyPath = prevKeyPath;
   if (__DEV__) {
     if (prevSnapshot !== task.context) {
       console.error(
@@ -1142,6 +1645,7 @@ function renderContextProvider(
 function renderLazyComponent(
   request: Request,
   task: Task,
+  keyPath: KeyNode,
   prevThenableState: ThenableState | null,
   lazyComponent: LazyComponentType<any, any>,
   props: Object,
@@ -1155,6 +1659,7 @@ function renderLazyComponent(
   renderElement(
     request,
     task,
+    keyPath,
     prevThenableState,
     Component,
     resolvedProps,
@@ -1163,7 +1668,12 @@ function renderLazyComponent(
   popComponentStackInDEV(task);
 }
 
-function renderOffscreen(request: Request, task: Task, props: Object): void {
+function renderOffscreen(
+  request: Request,
+  task: Task,
+  keyPath: KeyNode,
+  props: Object,
+): void {
   const mode: ?OffscreenMode = (props.mode: any);
   if (mode === 'hidden') {
     // A hidden Offscreen boundary is not server rendered. Prerendering happens
@@ -1171,13 +1681,17 @@ 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, null, props.children);
+    const prevKeyPath = task.keyPath;
+    task.keyPath = keyPath;
+    renderNodeDestructive(request, task, null, props.children, -1);
+    task.keyPath = prevKeyPath;
   }
 }
 
 function renderElement(
   request: Request,
   task: Task,
+  keyPath: KeyNode,
   prevThenableState: ThenableState | null,
   type: any,
   props: Object,
@@ -1185,12 +1699,13 @@ function renderElement(
 ): void {
   if (typeof type === 'function') {
     if (shouldConstruct(type)) {
-      renderClassComponent(request, task, type, props);
+      renderClassComponent(request, task, keyPath, type, props);
       return;
     } else {
       renderIndeterminateComponent(
         request,
         task,
+        keyPath,
         prevThenableState,
         type,
         props,
@@ -1199,7 +1714,7 @@ function renderElement(
     }
   }
   if (typeof type === 'string') {
-    renderHostElement(request, task, type, props);
+    renderHostElement(request, task, keyPath, type, props);
     return;
   }
 
@@ -1218,23 +1733,32 @@ function renderElement(
     case REACT_STRICT_MODE_TYPE:
     case REACT_PROFILER_TYPE:
     case REACT_FRAGMENT_TYPE: {
-      renderNodeDestructive(request, task, null, props.children);
+      const prevKeyPath = task.keyPath;
+      task.keyPath = keyPath;
+      renderNodeDestructive(request, task, null, props.children, -1);
+      task.keyPath = prevKeyPath;
       return;
     }
     case REACT_OFFSCREEN_TYPE: {
-      renderOffscreen(request, task, props);
+      renderOffscreen(request, task, keyPath, props);
       return;
     }
     case REACT_SUSPENSE_LIST_TYPE: {
       pushBuiltInComponentStackInDEV(task, 'SuspenseList');
       // TODO: SuspenseList should control the boundaries.
-      renderNodeDestructive(request, task, null, props.children);
+      const prevKeyPath = task.keyPath;
+      task.keyPath = keyPath;
+      renderNodeDestructive(request, task, null, props.children, -1);
+      task.keyPath = prevKeyPath;
       popComponentStackInDEV(task);
       return;
     }
     case REACT_SCOPE_TYPE: {
       if (enableScopeAPI) {
-        renderNodeDestructive(request, task, null, props.children);
+        const prevKeyPath = task.keyPath;
+        task.keyPath = keyPath;
+        renderNodeDestructive(request, task, null, props.children, -1);
+        task.keyPath = prevKeyPath;
         return;
       }
       throw new Error('ReactDOMServer does not yet support scope components.');
@@ -1244,9 +1768,9 @@ function renderElement(
         enableSuspenseAvoidThisFallbackFizz &&
         props.unstable_avoidThisFallback === true
       ) {
-        renderBackupSuspenseBoundary(request, task, props);
+        renderBackupSuspenseBoundary(request, task, keyPath, props);
       } else {
-        renderSuspenseBoundary(request, task, props);
+        renderSuspenseBoundary(request, task, keyPath, props);
       }
       return;
     }
@@ -1255,23 +1779,38 @@ function renderElement(
   if (typeof type === 'object' && type !== null) {
     switch (type.$$typeof) {
       case REACT_FORWARD_REF_TYPE: {
-        renderForwardRef(request, task, prevThenableState, type, props, ref);
+        renderForwardRef(
+          request,
+          task,
+          keyPath,
+          prevThenableState,
+          type,
+          props,
+          ref,
+        );
         return;
       }
       case REACT_MEMO_TYPE: {
-        renderMemo(request, task, prevThenableState, type, props, ref);
+        renderMemo(request, task, keyPath, prevThenableState, type, props, ref);
         return;
       }
       case REACT_PROVIDER_TYPE: {
-        renderContextProvider(request, task, type, props);
+        renderContextProvider(request, task, keyPath, type, props);
         return;
       }
       case REACT_CONTEXT_TYPE: {
-        renderContextConsumer(request, task, type, props);
+        renderContextConsumer(request, task, keyPath, type, props);
         return;
       }
       case REACT_LAZY_TYPE: {
-        renderLazyComponent(request, task, prevThenableState, type, props);
+        renderLazyComponent(
+          request,
+          task,
+          keyPath,
+          prevThenableState,
+          type,
+          props,
+        );
         return;
       }
     }
@@ -1299,6 +1838,207 @@ function renderElement(
   );
 }
 
+function resumeNode(
+  request: Request,
+  task: ReplayTask,
+  segmentId: number,
+  node: ReactNodeList,
+  childIndex: number,
+): void {
+  const prevReplay = task.replay;
+  const blockedBoundary = task.blockedBoundary;
+  const resumedSegment = createPendingSegment(
+    request,
+    0,
+    null,
+    task.formatContext,
+    false,
+    false,
+  );
+  resumedSegment.id = segmentId;
+  resumedSegment.parentFlushed = true;
+  try {
+    // Convert the current ReplayTask to a RenderTask.
+    const renderTask: RenderTask = (task: any);
+    renderTask.replay = null;
+    renderTask.blockedSegment = resumedSegment;
+    renderNode(request, task, node, childIndex);
+    resumedSegment.status = COMPLETED;
+    if (blockedBoundary === null) {
+      request.completedRootSegment = resumedSegment;
+    } else {
+      queueCompletedSegment(blockedBoundary, resumedSegment);
+      if (blockedBoundary.parentFlushed) {
+        request.partialBoundaries.push(blockedBoundary);
+      }
+    }
+  } finally {
+    // Restore to a ReplayTask.
+    task.replay = prevReplay;
+    task.blockedSegment = null;
+  }
+}
+
+function resumeElement(
+  request: Request,
+  task: ReplayTask,
+  keyPath: KeyNode,
+  segmentId: number,
+  prevThenableState: ThenableState | null,
+  type: any,
+  props: Object,
+  ref: any,
+): void {
+  const prevReplay = task.replay;
+  const blockedBoundary = task.blockedBoundary;
+  const resumedSegment = createPendingSegment(
+    request,
+    0,
+    null,
+    task.formatContext,
+    false,
+    false,
+  );
+  resumedSegment.id = segmentId;
+  resumedSegment.parentFlushed = true;
+  try {
+    // Convert the current ReplayTask to a RenderTask.
+    const renderTask: RenderTask = (task: any);
+    renderTask.replay = null;
+    renderTask.blockedSegment = resumedSegment;
+    renderElement(request, task, keyPath, prevThenableState, type, props, ref);
+    resumedSegment.status = COMPLETED;
+    if (blockedBoundary === null) {
+      request.completedRootSegment = resumedSegment;
+    } else {
+      queueCompletedSegment(blockedBoundary, resumedSegment);
+      if (blockedBoundary.parentFlushed) {
+        request.partialBoundaries.push(blockedBoundary);
+      }
+    }
+  } finally {
+    // Restore to a ReplayTask.
+    task.replay = prevReplay;
+    task.blockedSegment = null;
+  }
+}
+
+function replayElement(
+  request: Request,
+  task: ReplayTask,
+  keyPath: KeyNode,
+  prevThenableState: ThenableState | null,
+  name: null | string,
+  keyOrIndex: number | string,
+  childIndex: number,
+  type: any,
+  props: Object,
+  ref: any,
+  replay: ReplaySet,
+): void {
+  // We're replaying. Find the path to follow.
+  const replayNodes = replay.nodes;
+  for (let i = 0; i < replayNodes.length; i++) {
+    // Flow doesn't support refinement on tuples so we do it manually here.
+    const node = replayNodes[i];
+    if (keyOrIndex !== node[1]) {
+      continue;
+    }
+    // Let's double check that the component name matches as a precaution.
+    if (name !== null && name !== node[0]) {
+      throw new Error(
+        'Expected to see a component of type "' +
+          name +
+          '" in this slot. ' +
+          "The tree doesn't match so React will fallback to client rendering.",
+      );
+    }
+    if (node.length === 4) {
+      // Matched a replayable path.
+      const childNodes = node[2];
+      const childSlots = node[3];
+      task.replay = {nodes: childNodes, slots: childSlots, pendingTasks: 1};
+      try {
+        if (typeof childSlots === 'number') {
+          // Matched a resumable element.
+          resumeElement(
+            request,
+            task,
+            keyPath,
+            childSlots,
+            prevThenableState,
+            type,
+            props,
+            ref,
+          );
+        } else {
+          renderElement(
+            request,
+            task,
+            keyPath,
+            prevThenableState,
+            type,
+            props,
+            ref,
+          );
+        }
+        if (
+          task.replay.pendingTasks === 1 &&
+          task.replay.nodes.length > 0
+          // TODO check remaining slots
+        ) {
+          throw new Error(
+            "Couldn't find all resumable slots by key/index during replaying. " +
+              "The tree doesn't match so React will fallback to client rendering.",
+          );
+        }
+      } catch (x) {
+        if (
+          typeof x === 'object' &&
+          x !== null &&
+          (x === SuspenseException || typeof x.then === 'function')
+        ) {
+          // Suspend
+          throw x;
+        }
+        // Unlike regular render, we don't terminate the siblings if we error
+        // during a replay. That's because this component didn't actually error
+        // in the original prerender. What's unable to complete is the child
+        // replay nodes which might be Suspense boundaries which are able to
+        // absorb the error and we can still continue with siblings.
+        erroredReplay(request, task.blockedBoundary, x, childNodes, childSlots);
+      } finally {
+        task.replay.pendingTasks--;
+        task.replay = replay;
+      }
+    } else {
+      // Let's double check that the component type matches.
+      if (type !== REACT_SUSPENSE_TYPE) {
+        throw new Error(
+          'Expected to see a Suspense boundary in this slot. ' +
+            "The tree doesn't match so React will fallback to client rendering.",
+        );
+      }
+      // Matched a replayable path.
+      replaySuspenseBoundary(
+        request,
+        task,
+        keyPath,
+        props,
+        node[4],
+        node[2],
+        node[3],
+      );
+    }
+    // We finished rendering this node, so now we can consume this
+    // slot. This must happen after in case we rerender this task.
+    replayNodes.splice(i, 1);
+    return;
+  }
+  // We didn't find any matching nodes. We assume that this element was already
+  // rendered in the prelude and skip it.
+}
+
 // $FlowFixMe[missing-local-annot]
 function validateIterable(iterable, iteratorFn: Function): void {
   if (__DEV__) {
@@ -1340,13 +2080,20 @@ function renderNodeDestructive(
   // always null, except when called by retryTask.
   prevThenableState: ThenableState | null,
   node: ReactNodeList,
+  childIndex: number,
 ): void {
   if (__DEV__) {
     // In Dev we wrap renderNodeDestructiveImpl in a try / catch so we can capture
     // 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, prevThenableState, node);
+      return renderNodeDestructiveImpl(
+        request,
+        task,
+        prevThenableState,
+        node,
+        childIndex,
+      );
     } catch (x) {
       if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
         // This is a Wakable, noop
@@ -1361,7 +2108,13 @@ function renderNodeDestructive(
       throw x;
     }
   } else {
-    return renderNodeDestructiveImpl(request, task, prevThenableState, node);
+    return renderNodeDestructiveImpl(
+      request,
+      task,
+      prevThenableState,
+      node,
+      childIndex,
+    );
   }
 }
 
@@ -1372,10 +2125,12 @@ function renderNodeDestructiveImpl(
   task: Task,
   prevThenableState: ThenableState | null,
   node: ReactNodeList,
+  childIndex: number,
 ): void {
   // Stash the node we're working on. We'll pick up from this task in case
   // something suspends.
   task.node = node;
+  task.childIndex = childIndex;
 
   // Handle object types
   if (typeof node === 'object' && node !== null) {
@@ -1383,9 +2138,41 @@ function renderNodeDestructiveImpl(
       case REACT_ELEMENT_TYPE: {
         const element: React$Element<any> = (node: any);
         const type = element.type;
+        const key = element.key;
         const props = element.props;
         const ref = element.ref;
-        renderElement(request, task, prevThenableState, type, props, ref);
+        const name = getComponentNameFromType(type);
+        const keyOrIndex =
+          key == null ? (childIndex === -1 ? 0 : childIndex) : key;
+        const keyPath = [task.keyPath, name, keyOrIndex];
+        if (task.replay !== null) {
+          replayElement(
+            request,
+            task,
+            keyPath,
+            prevThenableState,
+            name,
+            keyOrIndex,
+            childIndex,
+            type,
+            props,
+            ref,
+            task.replay,
+          );
+          // No matches found for this node. We assume it's already emitted in the
+          // prelude and skip it during the replay.
+        } else {
+          // We're doing a plain render.
+          renderElement(
+            request,
+            task,
+            keyPath,
+            prevThenableState,
+            type,
+            props,
+            ref,
+          );
+        }
         return;
       }
       case REACT_PORTAL_TYPE:
@@ -1418,13 +2205,13 @@ function renderNodeDestructiveImpl(
         } else {
           resolvedNode = init(payload);
         }
-        renderNodeDestructive(request, task, null, resolvedNode);
+        renderNodeDestructive(request, task, null, resolvedNode, childIndex);
         return;
       }
     }
 
     if (isArray(node)) {
-      renderChildrenArray(request, task, node);
+      renderChildrenArray(request, task, node, childIndex);
       return;
     }
 
@@ -1448,7 +2235,7 @@ function renderNodeDestructiveImpl(
             children.push(step.value);
             step = iterator.next();
           } while (!step.done);
-          renderChildrenArray(request, task, children);
+          renderChildrenArray(request, task, children, childIndex);
           return;
         }
         return;
@@ -1472,6 +2259,7 @@ function renderNodeDestructiveImpl(
         task,
         null,
         unwrapThenable(thenable),
+        childIndex,
       );
     }
 
@@ -1485,6 +2273,7 @@ function renderNodeDestructiveImpl(
         task,
         null,
         readContext(context),
+        childIndex,
       );
     }
 
@@ -1504,23 +2293,33 @@ function renderNodeDestructiveImpl(
 
   if (typeof node === 'string') {
     const segment = task.blockedSegment;
-    segment.lastPushedText = pushTextInstance(
-      task.blockedSegment.chunks,
-      node,
-      request.responseState,
-      segment.lastPushedText,
-    );
+    if (segment === null) {
+      // We assume a text node doesn't have a representation in the replay set,
+      // since it can't postpone. If it does, it'll be left unmatched and error.
+    } else {
+      segment.lastPushedText = pushTextInstance(
+        segment.chunks,
+        node,
+        request.renderState,
+        segment.lastPushedText,
+      );
+    }
     return;
   }
 
   if (typeof node === 'number') {
     const segment = task.blockedSegment;
-    segment.lastPushedText = pushTextInstance(
-      task.blockedSegment.chunks,
-      '' + node,
-      request.responseState,
-      segment.lastPushedText,
-    );
+    if (segment === null) {
+      // We assume a text node doesn't have a representation in the replay set,
+      // since it can't postpone. If it does, it'll be left unmatched and error.
+    } else {
+      segment.lastPushedText = pushTextInstance(
+        segment.chunks,
+        '' + node,
+        request.renderState,
+        segment.lastPushedText,
+      );
+    }
     return;
   }
 
@@ -1535,28 +2334,309 @@ function renderNodeDestructiveImpl(
   }
 }
 
+function replayFragment(
+  request: Request,
+  task: ReplayTask,
+  children: Array<any>,
+  childIndex: number,
+): void {
+  // If we're supposed follow this array, we'd expect to see a ReplayNode matching
+  // this fragment.
+  const replay = task.replay;
+  const replayNodes = replay.nodes;
+  for (let j = 0; j < replayNodes.length; j++) {
+    const node = replayNodes[j];
+    if (node[1] !== childIndex) {
+      continue;
+    }
+    // Matched a replayable path.
+    const childNodes = node[2];
+    const childSlots = node[3];
+    task.replay = {nodes: childNodes, slots: childSlots, pendingTasks: 1};
+    try {
+      renderChildrenArray(request, task, children, -1);
+      if (task.replay.pendingTasks === 1 && task.replay.nodes.length > 0) {
+        throw new Error(
+          "Couldn't find all resumable slots by key/index during replaying. " +
+            "The tree doesn't match so React will fallback to client rendering.",
+        );
+      }
+    } catch (x) {
+      if (
+        typeof x === 'object' &&
+        x !== null &&
+        (x === SuspenseException || typeof x.then === 'function')
+      ) {
+        // Suspend
+        throw x;
+      }
+      // Unlike regular render, we don't terminate the siblings if we error
+      // during a replay. That's because this component didn't actually error
+      // in the original prerender. What's unable to complete is the child
+      // replay nodes which might be Suspense boundaries which are able to
+      // absorb the error and we can still continue with siblings.
+      erroredReplay(request, task.blockedBoundary, x, childNodes, childSlots);
+    } finally {
+      task.replay.pendingTasks--;
+      task.replay = replay;
+    }
+    // We finished rendering this node, so now we can consume this
+    // slot. This must happen after in case we rerender this task.
+    replayNodes.splice(j, 1);
+    break;
+  }
+}
+
 function renderChildrenArray(
   request: Request,
   task: Task,
   children: Array<any>,
-) {
+  childIndex: number,
+): void {
+  const prevKeyPath = task.keyPath;
+  if (childIndex !== -1) {
+    task.keyPath = [task.keyPath, 'Fragment', childIndex];
+    if (task.replay !== null) {
+      replayFragment(
+        request,
+        // $FlowFixMe: Refined.
+        task,
+        children,
+        childIndex,
+      );
+      task.keyPath = prevKeyPath;
+      return;
+    }
+  }
+  const prevTreeContext = task.treeContext;
   const totalChildren = children.length;
+
+  if (task.replay !== null) {
+    // Replay
+    // First we need to check if we have any resume slots at this level.
+    const resumeSlots = task.replay.slots;
+    if (resumeSlots !== null && typeof resumeSlots === 'object') {
+      for (let i = 0; i < totalChildren; i++) {
+        const node = children[i];
+        task.treeContext = pushTreeContext(prevTreeContext, totalChildren, i);
+        // We need to use the non-destructive form so that we can safely pop back
+        // up and render the sibling if something suspends.
+        const resumeSegmentID = resumeSlots[i];
+        if (typeof resumeSegmentID === 'number') {
+          resumeNode(request, task, resumeSegmentID, node, i);
+          // We finished rendering this node, so now we can consume this
+          // slot. This must happen after in case we rerender this task.
+          delete resumeSlots[i];
+        } else {
+          renderNode(request, task, node, i);
+        }
+      }
+      task.treeContext = prevTreeContext;
+      task.keyPath = prevKeyPath;
+      return;
+    }
+  }
+
   for (let i = 0; i < totalChildren; i++) {
-    const prevTreeContext = task.treeContext;
+    const node = children[i];
     task.treeContext = pushTreeContext(prevTreeContext, totalChildren, i);
-    try {
-      // We need to use the non-destructive form so that we can safely pop back
-      // up and render the sibling if something suspends.
-      renderNode(request, task, children[i]);
-    } finally {
-      task.treeContext = prevTreeContext;
+    // We need to use the non-destructive form so that we can safely pop back
+    // up and render the sibling if something suspends.
+    renderNode(request, task, node, i);
+  }
+
+  // Because this context is always set right before rendering every child, we
+  // only need to reset it to the previous value at the very end.
+  task.treeContext = prevTreeContext;
+  task.keyPath = prevKeyPath;
+}
+
+function trackPostpone(
+  request: Request,
+  trackedPostpones: PostponedHoles,
+  task: Task,
+  segment: Segment,
+): void {
+  segment.status = POSTPONED;
+
+  const keyPath = task.keyPath;
+  const boundary = task.blockedBoundary;
+  if (boundary !== null && boundary.status === PENDING) {
+    boundary.status = POSTPONED;
+    // We need to eagerly assign it an ID because we'll need to refer to
+    // it before flushing and we know that we can't inline it.
+    boundary.rootSegmentID = request.nextSegmentId++;
+
+    const boundaryKeyPath = boundary.keyPath;
+    if (boundaryKeyPath === null) {
+      throw new Error(
+        'It should not be possible to postpone at the root. This is a bug in React.',
+      );
+    }
+
+    const children: Array<ReplayNode> = [];
+    if (boundaryKeyPath === keyPath && task.childIndex === -1) {
+      // Since we postponed directly in the Suspense boundary we can't have written anything
+      // to its segment. Therefore this will end up becoming the root segment.
+      segment.id = boundary.rootSegmentID;
+      // We postponed directly inside the Suspense boundary so we mark this for resuming.
+      const boundaryNode: ReplaySuspenseBoundary = [
+        boundaryKeyPath[1],
+        boundaryKeyPath[2],
+        children,
+        boundary.rootSegmentID,
+        boundary.rootSegmentID,
+      ];
+      addToReplayParent(boundaryNode, boundaryKeyPath[0], trackedPostpones);
+      return;
+    } else {
+      let boundaryNode: void | ReplayNode =
+        trackedPostpones.workingMap.get(boundaryKeyPath);
+      if (boundaryNode === undefined) {
+        boundaryNode = [
+          boundaryKeyPath[1],
+          boundaryKeyPath[2],
+          children,
+          null,
+          boundary.rootSegmentID,
+        ];
+        trackedPostpones.workingMap.set(boundaryKeyPath, boundaryNode);
+        addToReplayParent(boundaryNode, boundaryKeyPath[0], trackedPostpones);
+      } else {
+        // Upgrade to ReplaySuspenseBoundary.
+        ((boundaryNode: any): ReplaySuspenseBoundary)[4] =
+          boundary.rootSegmentID;
+      }
+      // Fall through to add the child node.
+    }
+  }
+
+  // We know that this will leave a hole so we might as well assign an ID now.
+  // We might have one already if we had a parent that gave us its ID.
+  if (segment.id === -1) {
+    if (segment.parentFlushed && boundary !== null) {
+      // If this segment's parent was already flushed, it means we really just
+      // skipped the parent and this segment is now the root.
+      segment.id = boundary.rootSegmentID;
+    } else {
+      segment.id = request.nextSegmentId++;
+    }
+  }
+
+  if (task.childIndex === -1) {
+    // Resume starting from directly inside the previous parent element.
+    if (keyPath === null) {
+      trackedPostpones.rootSlots = segment.id;
+    } else {
+      const resumableElement: ReplayNode = [
+        keyPath[1],
+        keyPath[2],
+        ([]: Array<ReplayNode>),
+        segment.id,
+      ];
+      addToReplayParent(resumableElement, keyPath[0], trackedPostpones);
+    }
+  } else {
+    let slots;
+    if (keyPath === null) {
+      slots = trackedPostpones.rootSlots;
+      if (slots === null) {
+        slots = trackedPostpones.rootSlots = ({}: {[index: number]: number});
+      } else if (typeof slots === 'number') {
+        throw new Error(
+          'It should not be possible to postpone both at the root of an element ' +
+            'as well as a slot below. This is a bug in React.',
+        );
+      }
+    } else {
+      const workingMap = trackedPostpones.workingMap;
+      let resumableNode = workingMap.get(keyPath);
+      if (resumableNode === undefined) {
+        slots = ({}: {[index: number]: number});
+        resumableNode = ([
+          keyPath[1],
+          keyPath[2],
+          ([]: Array<ReplayNode>),
+          slots,
+        ]: ReplayNode);
+        workingMap.set(keyPath, resumableNode);
+        addToReplayParent(resumableNode, keyPath[0], trackedPostpones);
+      } else {
+        slots = resumableNode[3];
+        if (slots === null) {
+          slots = resumableNode[3] = ({}: {[index: number]: number});
+        } else if (typeof slots === 'number') {
+          throw new Error(
+            'It should not be possible to postpone both at the root of an element ' +
+              'as well as a slot below. This is a bug in React.',
+          );
+        }
+      }
+    }
+    slots[task.childIndex] = segment.id;
+  }
+}
+
+function injectPostponedHole(
+  request: Request,
+  task: RenderTask,
+  reason: string,
+): Segment {
+  logPostpone(request, reason);
+  // Something suspended, we'll need to create a new segment and resolve it later.
+  const segment = task.blockedSegment;
+  const insertionIndex = segment.chunks.length;
+  const newSegment = createPendingSegment(
+    request,
+    insertionIndex,
+    null,
+    task.formatContext,
+    // Adopt the parent segment's leading text embed
+    segment.lastPushedText,
+    // Assume we are text embedded at the trailing edge
+    true,
+  );
+  segment.children.push(newSegment);
+  // Reset lastPushedText for current Segment since the new Segment "consumed" it
+  segment.lastPushedText = false;
+  return newSegment;
+}
+
+function spawnNewSuspendedReplayTask(
+  request: Request,
+  task: ReplayTask,
+  thenableState: ThenableState | null,
+  x: Wakeable,
+): void {
+  const newTask = createReplayTask(
+    request,
+    thenableState,
+    task.replay,
+    task.node,
+    task.childIndex,
+    task.blockedBoundary,
+    task.abortSet,
+    task.keyPath,
+    task.formatContext,
+    task.legacyContext,
+    task.context,
+    task.treeContext,
+  );
+
+  if (__DEV__) {
+    if (task.componentStack !== null) {
+      // We pop one task off the stack because the node that suspended will be tried again,
+      // which will add it back onto the stack.
+      newTask.componentStack = task.componentStack.parent;
     }
   }
+  const ping = newTask.ping;
+  x.then(ping, ping);
 }
 
-function spawnNewSuspendedTask(
+function spawnNewSuspendedRenderTask(
   request: Request,
-  task: Task,
+  task: RenderTask,
   thenableState: ThenableState | null,
   x: Wakeable,
 ): void {
@@ -1567,7 +2647,7 @@ function spawnNewSuspendedTask(
     request,
     insertionIndex,
     null,
-    segment.formatContext,
+    task.formatContext,
     // Adopt the parent segment's leading text embed
     segment.lastPushedText,
     // Assume we are text embedded at the trailing edge
@@ -1576,13 +2656,16 @@ function spawnNewSuspendedTask(
   segment.children.push(newSegment);
   // Reset lastPushedText for current Segment since the new Segment "consumed" it
   segment.lastPushedText = false;
-  const newTask = createTask(
+  const newTask = createRenderTask(
     request,
     thenableState,
     task.node,
+    task.childIndex,
     task.blockedBoundary,
     newSegment,
     task.abortSet,
+    task.keyPath,
+    task.formatContext,
     task.legacyContext,
     task.context,
     task.treeContext,
@@ -1601,90 +2684,242 @@ function spawnNewSuspendedTask(
 
 // This is a non-destructive form of rendering a node. If it suspends it spawns
 // a new task and restores the context of this task to what it was before.
-function renderNode(request: Request, task: Task, node: ReactNodeList): void {
-  // Store how much we've pushed at this point so we can reset it in case something
-  // suspended partially through writing something.
-  const segment = task.blockedSegment;
-  const childrenLength = segment.children.length;
-  const chunkLength = segment.chunks.length;
-
+function renderNode(
+  request: Request,
+  task: Task,
+  node: ReactNodeList,
+  childIndex: number,
+): void {
   // Snapshot the current context in case something throws to interrupt the
   // process.
-  const previousFormatContext = task.blockedSegment.formatContext;
+  const previousFormatContext = task.formatContext;
   const previousLegacyContext = task.legacyContext;
   const previousContext = task.context;
+  const previousKeyPath = task.keyPath;
+  const previousTreeContext = task.treeContext;
   let previousComponentStack = null;
   if (__DEV__) {
     previousComponentStack = task.componentStack;
   }
-  try {
-    return renderNodeDestructive(request, task, null, node);
-  } catch (thrownValue) {
-    resetHooksState();
+  let x;
+  // Store how much we've pushed at this point so we can reset it in case something
+  // suspended partially through writing something.
+  const segment = task.blockedSegment;
+  if (segment === null) {
+    // Replay
+    try {
+      return renderNodeDestructive(request, task, null, node, childIndex);
+    } catch (thrownValue) {
+      resetHooksState();
+
+      x =
+        thrownValue === SuspenseException
+          ? // This is a special type of exception used for Suspense. For historical
+            // reasons, the rest of the Suspense implementation expects the thrown
+            // value to be a thenable, because before `use` existed that was the
+            // (unstable) API for suspending. This implementation detail can change
+            // later, once we deprecate the old API in favor of `use`.
+            getSuspendedThenable()
+          : thrownValue;
+
+      if (typeof x === 'object' && x !== null) {
+        // $FlowFixMe[method-unbinding]
+        if (typeof x.then === 'function') {
+          const wakeable: Wakeable = (x: any);
+          const thenableState = getThenableStateAfterSuspending();
+          spawnNewSuspendedReplayTask(
+            request,
+            // $FlowFixMe: Refined.
+            task,
+            thenableState,
+            wakeable,
+          );
 
-    // Reset the write pointers to where we started.
-    segment.children.length = childrenLength;
-    segment.chunks.length = chunkLength;
+          // 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.formatContext = previousFormatContext;
+          task.legacyContext = previousLegacyContext;
+          task.context = previousContext;
+          task.keyPath = previousKeyPath;
+          task.treeContext = previousTreeContext;
+          // Restore all active ReactContexts to what they were before.
+          switchContext(previousContext);
+          if (__DEV__) {
+            task.componentStack = previousComponentStack;
+          }
+          return;
+        }
+      }
 
-    const x =
-      thrownValue === SuspenseException
-        ? // This is a special type of exception used for Suspense. For historical
-          // reasons, the rest of the Suspense implementation expects the thrown
-          // value to be a thenable, because before `use` existed that was the
-          // (unstable) API for suspending. This implementation detail can change
-          // later, once we deprecate the old API in favor of `use`.
-          getSuspendedThenable()
-        : thrownValue;
+      // TODO: Abort any undiscovered Suspense boundaries in the ReplayNode.
+    }
+  } else {
+    // Render
+    const childrenLength = segment.children.length;
+    const chunkLength = segment.chunks.length;
+    try {
+      return renderNodeDestructive(request, task, null, node, childIndex);
+    } catch (thrownValue) {
+      resetHooksState();
+
+      // Reset the write pointers to where we started.
+      segment.children.length = childrenLength;
+      segment.chunks.length = chunkLength;
+
+      x =
+        thrownValue === SuspenseException
+          ? // This is a special type of exception used for Suspense. For historical
+            // reasons, the rest of the Suspense implementation expects the thrown
+            // value to be a thenable, because before `use` existed that was the
+            // (unstable) API for suspending. This implementation detail can change
+            // later, once we deprecate the old API in favor of `use`.
+            getSuspendedThenable()
+          : thrownValue;
+
+      if (typeof x === 'object' && x !== null) {
+        // $FlowFixMe[method-unbinding]
+        if (typeof x.then === 'function') {
+          const wakeable: Wakeable = (x: any);
+          const thenableState = getThenableStateAfterSuspending();
+          spawnNewSuspendedRenderTask(
+            request,
+            // $FlowFixMe: Refined.
+            task,
+            thenableState,
+            wakeable,
+          );
 
-    // $FlowFixMe[method-unbinding]
-    if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
-      const wakeable: Wakeable = (x: any);
-      const thenableState = getThenableStateAfterSuspending();
-      spawnNewSuspendedTask(request, task, thenableState, wakeable);
-
-      // 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;
-      task.legacyContext = previousLegacyContext;
-      task.context = previousContext;
-      // Restore all active ReactContexts to what they were before.
-      switchContext(previousContext);
-      if (__DEV__) {
-        task.componentStack = previousComponentStack;
-      }
-      return;
-    } else {
-      // 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;
-      task.legacyContext = previousLegacyContext;
-      task.context = previousContext;
-      // Restore all active ReactContexts to what they were before.
-      switchContext(previousContext);
-      if (__DEV__) {
-        task.componentStack = previousComponentStack;
+          // 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.formatContext = previousFormatContext;
+          task.legacyContext = previousLegacyContext;
+          task.context = previousContext;
+          task.keyPath = previousKeyPath;
+          task.treeContext = previousTreeContext;
+          // Restore all active ReactContexts to what they were before.
+          switchContext(previousContext);
+          if (__DEV__) {
+            task.componentStack = previousComponentStack;
+          }
+          return;
+        }
+        if (
+          enablePostpone &&
+          request.trackedPostpones !== null &&
+          x.$$typeof === REACT_POSTPONE_TYPE &&
+          task.blockedBoundary !== null // TODO: Support holes in the shell
+        ) {
+          // If we're tracking postpones, we inject a hole here and continue rendering
+          // sibling. Similar to suspending. If we're not tracking, we treat it more like
+          // an error. Notably this doesn't spawn a new task since nothing will fill it
+          // in during this prerender.
+          const postponeInstance: Postpone = (x: any);
+          const trackedPostpones = request.trackedPostpones;
+          const postponedSegment = injectPostponedHole(
+            request,
+            ((task: any): RenderTask), // We don't use ReplayTasks in prerenders.
+            postponeInstance.message,
+          );
+          trackPostpone(request, trackedPostpones, task, postponedSegment);
+
+          // 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.formatContext = previousFormatContext;
+          task.legacyContext = previousLegacyContext;
+          task.context = previousContext;
+          task.keyPath = previousKeyPath;
+          task.treeContext = previousTreeContext;
+          // Restore all active ReactContexts to what they were before.
+          switchContext(previousContext);
+          if (__DEV__) {
+            task.componentStack = previousComponentStack;
+          }
+          return;
+        }
       }
-      // We assume that we don't need the correct context.
-      // Let's terminate the rest of the tree and don't render any siblings.
-      throw 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.formatContext = previousFormatContext;
+  task.legacyContext = previousLegacyContext;
+  task.context = previousContext;
+  task.keyPath = previousKeyPath;
+  task.treeContext = previousTreeContext;
+  // Restore all active ReactContexts to what they were before.
+  switchContext(previousContext);
+  if (__DEV__) {
+    task.componentStack = previousComponentStack;
+  }
+  // We assume that we don't need the correct context.
+  // Let's terminate the rest of the tree and don't render any siblings.
+  throw x;
+}
+
+function erroredReplay(
+  request: Request,
+  boundary: Root | SuspenseBoundary,
+  error: mixed,
+  replayNodes: ReplayNode[],
+  resumeSlots: ResumeSlots,
+): void {
+  // Erroring during a replay doesn't actually cause an error by itself because
+  // that component has already rendered. What causes the error is the resumable
+  // points that we did not yet finish which will be below the point of the reset.
+  // For example, if we're replaying a path to a Suspense boundary that is not done
+  // that doesn't error the parent Suspense boundary.
+  // This might be a bit strange that the error in a parent gets thrown at a child.
+  // We log it only once and reuse the digest.
+  let errorDigest;
+  if (
+    enablePostpone &&
+    typeof error === 'object' &&
+    error !== null &&
+    error.$$typeof === REACT_POSTPONE_TYPE
+  ) {
+    const postponeInstance: Postpone = (error: any);
+    logPostpone(request, postponeInstance.message);
+    // TODO: Figure out a better signal than a magic digest value.
+    errorDigest = 'POSTPONE';
+  } else {
+    errorDigest = logRecoverableError(request, error);
+  }
+  abortRemainingReplayNodes(
+    request,
+    boundary,
+    replayNodes,
+    resumeSlots,
+    error,
+    errorDigest,
+  );
 }
 
 function erroredTask(
   request: Request,
   boundary: Root | SuspenseBoundary,
-  segment: Segment,
   error: mixed,
 ) {
   // Report the error to a global handler.
-  const errorDigest = logRecoverableError(request, error);
+  let errorDigest;
+  if (
+    enablePostpone &&
+    typeof error === 'object' &&
+    error !== null &&
+    error.$$typeof === REACT_POSTPONE_TYPE
+  ) {
+    const postponeInstance: Postpone = (error: any);
+    logPostpone(request, postponeInstance.message);
+    // TODO: Figure out a better signal than a magic digest value.
+    errorDigest = 'POSTPONE';
+  } else {
+    errorDigest = logRecoverableError(request, error);
+  }
   if (boundary === null) {
     fatalError(request, error);
   } else {
     boundary.pendingTasks--;
-    if (!boundary.forceClientRender) {
-      boundary.forceClientRender = true;
+    if (boundary.status !== CLIENT_RENDERED) {
+      boundary.status = CLIENT_RENDERED;
       boundary.errorDigest = errorDigest;
       if (__DEV__) {
         captureBoundaryErrorDetailsDev(boundary, error);
@@ -1716,8 +2951,109 @@ function abortTaskSoft(this: Request, task: Task): void {
   const request: Request = this;
   const boundary = task.blockedBoundary;
   const segment = task.blockedSegment;
-  segment.status = ABORTED;
-  finishedTask(request, boundary, segment);
+  if (segment !== null) {
+    segment.status = ABORTED;
+    finishedTask(request, boundary, segment);
+  }
+}
+
+function abortRemainingSuspenseBoundary(
+  request: Request,
+  rootSegmentID: number,
+  error: mixed,
+  errorDigest: ?string,
+): void {
+  const resumedBoundary = createSuspenseBoundary(
+    request,
+    new Set(),
+    null, // The keyPath doesn't matter at this point so we don't bother rebuilding it.
+  );
+  resumedBoundary.parentFlushed = true;
+  // We restore the same id of this boundary as was used during prerender.
+  resumedBoundary.rootSegmentID = rootSegmentID;
+
+  resumedBoundary.status = CLIENT_RENDERED;
+  resumedBoundary.errorDigest = errorDigest;
+  if (__DEV__) {
+    const errorPrefix = 'The server did not finish this Suspense boundary: ';
+    let errorMessage;
+    if (error && typeof error.message === 'string') {
+      errorMessage = errorPrefix + error.message;
+    } else {
+      // eslint-disable-next-line react-internal/safe-string-coercion
+      errorMessage = errorPrefix + String(error);
+    }
+    const previousTaskInDev = currentTaskInDEV;
+    currentTaskInDEV = null;
+    try {
+      captureBoundaryErrorDetailsDev(resumedBoundary, errorMessage);
+    } finally {
+      currentTaskInDEV = previousTaskInDev;
+    }
+  }
+  if (resumedBoundary.parentFlushed) {
+    request.clientRenderedBoundaries.push(resumedBoundary);
+  }
+}
+
+function abortRemainingReplayNodes(
+  request: Request,
+  boundary: Root | SuspenseBoundary,
+  nodes: Array<ReplayNode>,
+  slots: ResumeSlots,
+  error: mixed,
+  errorDigest: ?string,
+): void {
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i];
+    if (node.length === 4) {
+      abortRemainingReplayNodes(
+        request,
+        boundary,
+        node[2],
+        node[3],
+        error,
+        errorDigest,
+      );
+    } else {
+      const boundaryNode: ReplaySuspenseBoundary = node;
+      const rootSegmentID = boundaryNode[4];
+      abortRemainingSuspenseBoundary(
+        request,
+        rootSegmentID,
+        error,
+        errorDigest,
+      );
+    }
+  }
+  // Empty the set, since we've cleared it now.
+  nodes.length = 0;
+
+  if (slots !== null) {
+    // We had something still to resume in the parent boundary. We must trigger
+    // the error on the parent boundary since it's not able to complete.
+    if (boundary === null) {
+      throw new Error(
+        'We should not have any resumable nodes in the shell. ' +
+          'This is a bug in React.',
+      );
+    } else if (boundary.status !== CLIENT_RENDERED) {
+      boundary.status = CLIENT_RENDERED;
+      boundary.errorDigest = errorDigest;
+      if (__DEV__) {
+        captureBoundaryErrorDetailsDev(boundary, error);
+      }
+      if (boundary.parentFlushed) {
+        request.clientRenderedBoundaries.push(boundary);
+      }
+    }
+    // Empty the set
+    if (typeof slots === 'object') {
+      for (const index in slots) {
+        delete slots[(index: any)];
+      }
+    }
+  }
 }
 
 function abortTask(task: Task, request: Request, error: mixed): void {
@@ -1725,22 +3061,42 @@ function abortTask(task: Task, request: Request, error: mixed): void {
   // client rendered mode.
   const boundary = task.blockedBoundary;
   const segment = task.blockedSegment;
-  segment.status = ABORTED;
+  if (segment !== null) {
+    segment.status = ABORTED;
+  }
 
   if (boundary === null) {
     request.allPendingTasks--;
-    // We didn't complete the root so we have nothing to show. We can close
-    // the request;
     if (request.status !== CLOSING && request.status !== CLOSED) {
-      logRecoverableError(request, error);
-      fatalError(request, error);
+      const replay: null | ReplaySet = task.replay;
+      if (replay === null) {
+        // We didn't complete the root so we have nothing to show. We can close
+        // the request;
+        logRecoverableError(request, error);
+        fatalError(request, error);
+      } else {
+        // If the shell aborts during a replay, that's not a fatal error. Instead
+        // we should be able to recover by client rendering all the root boundaries in
+        // the ReplaySet.
+        replay.pendingTasks--;
+        if (replay.pendingTasks === 0 && replay.nodes.length > 0) {
+          const errorDigest = logRecoverableError(request, error);
+          abortRemainingReplayNodes(
+            request,
+            null,
+            replay.nodes,
+            replay.slots,
+            error,
+            errorDigest,
+          );
+        }
+      }
     }
   } else {
     boundary.pendingTasks--;
-
-    if (!boundary.forceClientRender) {
-      boundary.forceClientRender = true;
-      boundary.errorDigest = request.onError(error);
+    if (boundary.status !== CLIENT_RENDERED) {
+      boundary.status = CLIENT_RENDERED;
+      boundary.errorDigest = logRecoverableError(request, error);
       if (__DEV__) {
         const errorPrefix =
           'The server did not finish this Suspense boundary: ';
@@ -1805,10 +3161,10 @@ function queueCompletedSegment(
 function finishedTask(
   request: Request,
   boundary: Root | SuspenseBoundary,
-  segment: Segment,
+  segment: null | Segment,
 ) {
   if (boundary === null) {
-    if (segment.parentFlushed) {
+    if (segment !== null && segment.parentFlushed) {
       if (request.completedRootSegment !== null) {
         throw new Error(
           'There can only be one root segment. This is a bug in React.',
@@ -1826,11 +3182,14 @@ function finishedTask(
     }
   } else {
     boundary.pendingTasks--;
-    if (boundary.forceClientRender) {
+    if (boundary.status === CLIENT_RENDERED) {
       // This already errored.
     } else if (boundary.pendingTasks === 0) {
+      if (boundary.status === PENDING) {
+        boundary.status = COMPLETED;
+      }
       // This must have been the last segment we were waiting on. This boundary is now complete.
-      if (segment.parentFlushed) {
+      if (segment !== null && segment.parentFlushed) {
         // Our parent segment already flushed, so we need to schedule this segment to be emitted.
         // If it is a segment that was aborted, we'll write other content instead so we don't need
         // to emit it.
@@ -1847,10 +3206,13 @@ function finishedTask(
       // We can now cancel any pending task on the fallback since we won't need to show it anymore.
       // This needs to happen after we read the parentFlushed flags because aborting can finish
       // work which can trigger user code, which can start flushing, which can change those flags.
-      boundary.fallbackAbortableTasks.forEach(abortTaskSoft, request);
-      boundary.fallbackAbortableTasks.clear();
+      // If the boundary was POSTPONED, we still need to finish the fallback first.
+      if (boundary.status === COMPLETED) {
+        boundary.fallbackAbortableTasks.forEach(abortTaskSoft, request);
+        boundary.fallbackAbortableTasks.clear();
+      }
     } else {
-      if (segment.parentFlushed) {
+      if (segment !== null && segment.parentFlushed) {
         // Our parent already flushed, so we need to schedule this segment to be emitted.
         // If it is a segment that was aborted, we'll write other content instead so we don't need
         // to emit it.
@@ -1883,11 +3245,32 @@ function retryTask(request: Request, task: Task): void {
   if (enableFloat) {
     const blockedBoundary = task.blockedBoundary;
     setCurrentlyRenderingBoundaryResourcesTarget(
-      request.resources,
+      request.renderState,
       blockedBoundary ? blockedBoundary.resources : null,
     );
   }
   const segment = task.blockedSegment;
+  if (segment === null) {
+    retryReplayTask(
+      request,
+      // $FlowFixMe: Refined.
+      task,
+    );
+  } else {
+    retryRenderTask(
+      request,
+      // $FlowFixMe: Refined.
+      task,
+      segment,
+    );
+  }
+}
+
+function retryRenderTask(
+  request: Request,
+  task: RenderTask,
+  segment: Segment,
+): void {
   if (segment.status !== PENDING) {
     // We completed this by other means before we had a chance to retry it.
     return;
@@ -1914,10 +3297,16 @@ function retryTask(request: Request, task: Task): void {
     const prevThenableState = task.thenableState;
     task.thenableState = null;
 
-    renderNodeDestructive(request, task, prevThenableState, task.node);
+    renderNodeDestructive(
+      request,
+      task,
+      prevThenableState,
+      task.node,
+      task.childIndex,
+    );
     pushSegmentFinale(
       segment.chunks,
-      request.responseState,
+      request.renderState,
       segment.lastPushedText,
       segment.textEmbedded,
     );
@@ -1942,20 +3331,125 @@ function retryTask(request: Request, task: Task): void {
           getSuspendedThenable()
         : thrownValue;
 
-    // $FlowFixMe[method-unbinding]
-    if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
-      // Something suspended again, let's pick it back up later.
-      const ping = task.ping;
-      x.then(ping, ping);
-      task.thenableState = getThenableStateAfterSuspending();
-    } else {
-      task.abortSet.delete(task);
-      segment.status = ERRORED;
-      erroredTask(request, task.blockedBoundary, segment, x);
+    if (typeof x === 'object' && x !== null) {
+      // $FlowFixMe[method-unbinding]
+      if (typeof x.then === 'function') {
+        // Something suspended again, let's pick it back up later.
+        const ping = task.ping;
+        x.then(ping, ping);
+        task.thenableState = getThenableStateAfterSuspending();
+        return;
+      } else if (
+        enablePostpone &&
+        request.trackedPostpones !== null &&
+        x.$$typeof === REACT_POSTPONE_TYPE &&
+        task.blockedBoundary !== null // TODO: Support holes in the shell
+      ) {
+        // If we're tracking postpones, we mark this segment as postponed and finish
+        // the task without filling it in. If we're not tracking, we treat it more like
+        // an error.
+        const trackedPostpones = request.trackedPostpones;
+        task.abortSet.delete(task);
+        const postponeInstance: Postpone = (x: any);
+        logPostpone(request, postponeInstance.message);
+        trackPostpone(request, trackedPostpones, task, segment);
+        finishedTask(request, task.blockedBoundary, segment);
+        return;
+      }
+    }
+    task.abortSet.delete(task);
+    segment.status = ERRORED;
+    erroredTask(request, task.blockedBoundary, x);
+    return;
+  } finally {
+    if (enableFloat) {
+      setCurrentlyRenderingBoundaryResourcesTarget(request.renderState, null);
+    }
+    if (__DEV__) {
+      currentTaskInDEV = prevTaskInDEV;
+    }
+  }
+}
+
+function retryReplayTask(request: Request, task: ReplayTask): void {
+  if (task.replay.pendingTasks === 0) {
+    // There are no pending tasks working on this set, so we must have aborted.
+    return;
+  }
+
+  // We restore the context to what it was when we suspended.
+  // We don't restore it after we leave because it's likely that we'll end up
+  // needing a very similar context soon again.
+  switchContext(task.context);
+  let prevTaskInDEV = null;
+  if (__DEV__) {
+    prevTaskInDEV = currentTaskInDEV;
+    currentTaskInDEV = task;
+  }
+
+  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.
+
+    // 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, -1);
+
+    if (task.replay.pendingTasks === 1 && task.replay.nodes.length > 0) {
+      throw new Error(
+        "Couldn't find all resumable slots by key/index during replaying. " +
+          "The tree doesn't match so React will fallback to client rendering.",
+      );
     }
+    task.replay.pendingTasks--;
+
+    task.abortSet.delete(task);
+    finishedTask(request, task.blockedBoundary, null);
+  } catch (thrownValue) {
+    resetHooksState();
+
+    const x =
+      thrownValue === SuspenseException
+        ? // This is a special type of exception used for Suspense. For historical
+          // reasons, the rest of the Suspense implementation expects the thrown
+          // value to be a thenable, because before `use` existed that was the
+          // (unstable) API for suspending. This implementation detail can change
+          // later, once we deprecate the old API in favor of `use`.
+          getSuspendedThenable()
+        : thrownValue;
+
+    if (typeof x === 'object' && x !== null) {
+      // $FlowFixMe[method-unbinding]
+      if (typeof x.then === 'function') {
+        // Something suspended again, let's pick it back up later.
+        const ping = task.ping;
+        x.then(ping, ping);
+        task.thenableState = getThenableStateAfterSuspending();
+        return;
+      }
+    }
+    task.replay.pendingTasks--;
+    task.abortSet.delete(task);
+    erroredReplay(
+      request,
+      task.blockedBoundary,
+      x,
+      task.replay.nodes,
+      task.replay.slots,
+    );
+    request.allPendingTasks--;
+    if (request.allPendingTasks === 0) {
+      const onAllReady = request.onAllReady;
+      onAllReady();
+    }
+    return;
   } finally {
     if (enableFloat) {
-      setCurrentlyRenderingBoundaryResourcesTarget(request.resources, null);
+      setCurrentlyRenderingBoundaryResourcesTarget(request.renderState, null);
     }
     if (__DEV__) {
       currentTaskInDEV = prevTaskInDEV;
@@ -1984,8 +3478,8 @@ export function performWork(request: Request): void {
     prevGetCurrentStackImpl = ReactDebugCurrentFrame.getCurrentStack;
     ReactDebugCurrentFrame.getCurrentStack = getCurrentStackInDEV;
   }
-  const prevResponseState = currentResponseState;
-  setCurrentResponseState(request.responseState);
+  const prevResumableState = currentResumableState;
+  setCurrentResumableState(request.resumableState);
   try {
     const pingedTasks = request.pingedTasks;
     let i;
@@ -2001,7 +3495,7 @@ export function performWork(request: Request): void {
     logRecoverableError(request, error);
     fatalError(request, error);
   } finally {
-    setCurrentResponseState(prevResponseState);
+    setCurrentResumableState(prevResumableState);
     ReactCurrentDispatcher.current = prevDispatcher;
     if (enableCache) {
       ReactCurrentCache.current = prevCacheDispatcher;
@@ -2034,11 +3528,15 @@ function flushSubtree(
     case PENDING: {
       // We're emitting a placeholder for this segment to be filled in later.
       // Therefore we'll need to assign it an ID - to refer to it by.
-      const segmentID = (segment.id = request.nextSegmentId++);
+      segment.id = request.nextSegmentId++;
+      // Fallthrough
+    }
+    case POSTPONED: {
+      const segmentID = segment.id;
       // When this segment finally completes it won't be embedded in text since it will flush separately
       segment.lastPushedText = false;
       segment.textEmbedded = false;
-      return writePlaceholder(destination, request.responseState, segmentID);
+      return writePlaceholder(destination, request.renderState, segmentID);
     }
     case COMPLETED: {
       segment.status = FLUSHED;
@@ -2082,16 +3580,17 @@ function flushSegment(
     // Not a suspense boundary.
     return flushSubtree(request, destination, segment);
   }
+
   boundary.parentFlushed = true;
   // This segment is a Suspense boundary. We need to decide whether to
   // emit the content or the fallback now.
-  if (boundary.forceClientRender) {
+  if (boundary.status === CLIENT_RENDERED) {
     // Emit a client rendered suspense boundary wrapper.
     // We never queue the inner boundary so we'll never emit its content or partial segments.
 
     writeStartClientRenderedSuspenseBoundary(
       destination,
-      request.responseState,
+      request.renderState,
       boundary.errorDigest,
       boundary.errorMessage,
       boundary.errorComponentStack,
@@ -2101,27 +3600,29 @@ function flushSegment(
 
     return writeEndClientRenderedSuspenseBoundary(
       destination,
-      request.responseState,
+      request.renderState,
     );
-  } else if (boundary.pendingTasks > 0) {
-    // This boundary is still loading. Emit a pending suspense boundary wrapper.
+  } else if (boundary.status !== COMPLETED) {
+    if (boundary.status === PENDING) {
+      // For pending boundaries we lazily assign an ID to the boundary
+      // and root segment.
+      boundary.rootSegmentID = request.nextSegmentId++;
+    }
 
-    // Assign an ID to refer to the future content by.
-    boundary.rootSegmentID = request.nextSegmentId++;
     if (boundary.completedSegments.length > 0) {
       // If this is at least partially complete, we can queue it to be partially emitted early.
       request.partialBoundaries.push(boundary);
     }
 
-    /// This is the first time we should have referenced this ID.
-    const id = (boundary.id = assignSuspenseBoundaryID(request.responseState));
+    // This boundary is still loading. Emit a pending suspense boundary wrapper.
 
-    writeStartPendingSuspenseBoundary(destination, request.responseState, id);
+    const id = boundary.rootSegmentID;
+    writeStartPendingSuspenseBoundary(destination, request.renderState, id);
 
     // Flush the fallback.
     flushSubtree(request, destination, segment);
 
-    return writeEndPendingSuspenseBoundary(destination, request.responseState);
+    return writeEndPendingSuspenseBoundary(destination, request.renderState);
   } else if (boundary.byteSize > request.progressiveChunkSize) {
     // This boundary is large and will be emitted separately so that we can progressively show
     // other content. We add it to the queue during the flush because we have to ensure that
@@ -2136,20 +3637,20 @@ function flushSegment(
     // Emit a pending rendered suspense boundary wrapper.
     writeStartPendingSuspenseBoundary(
       destination,
-      request.responseState,
-      boundary.id,
+      request.renderState,
+      boundary.rootSegmentID,
     );
 
     // Flush the fallback.
     flushSubtree(request, destination, segment);
 
-    return writeEndPendingSuspenseBoundary(destination, request.responseState);
+    return writeEndPendingSuspenseBoundary(destination, request.renderState);
   } else {
     if (enableFloat) {
-      hoistResources(request.resources, boundary.resources);
+      hoistResources(request.renderState, boundary.resources);
     }
     // We can inline this boundary's content as a complete boundary.
-    writeStartCompletedSuspenseBoundary(destination, request.responseState);
+    writeStartCompletedSuspenseBoundary(destination, request.renderState);
 
     const completedSegments = boundary.completedSegments;
 
@@ -2162,10 +3663,7 @@ function flushSegment(
     const contentSegment = completedSegments[0];
     flushSegment(request, destination, contentSegment);
 
-    return writeEndCompletedSuspenseBoundary(
-      destination,
-      request.responseState,
-    );
+    return writeEndCompletedSuspenseBoundary(destination, request.renderState);
   }
 }
 
@@ -2176,8 +3674,9 @@ function flushClientRenderedBoundary(
 ): boolean {
   return writeClientRenderBoundaryInstruction(
     destination,
-    request.responseState,
-    boundary.id,
+    request.resumableState,
+    request.renderState,
+    boundary.rootSegmentID,
     boundary.errorDigest,
     boundary.errorMessage,
     boundary.errorComponentStack,
@@ -2191,12 +3690,12 @@ function flushSegmentContainer(
 ): boolean {
   writeStartSegment(
     destination,
-    request.responseState,
-    segment.formatContext,
+    request.renderState,
+    segment.parentFormatContext,
     segment.id,
   );
   flushSegment(request, destination, segment);
-  return writeEndSegment(destination, segment.formatContext);
+  return writeEndSegment(destination, segment.parentFormatContext);
 }
 
 function flushCompletedBoundary(
@@ -2206,7 +3705,7 @@ function flushCompletedBoundary(
 ): boolean {
   if (enableFloat) {
     setCurrentlyRenderingBoundaryResourcesTarget(
-      request.resources,
+      request.renderState,
       boundary.resources,
     );
   }
@@ -2222,14 +3721,14 @@ function flushCompletedBoundary(
     writeResourcesForBoundary(
       destination,
       boundary.resources,
-      request.responseState,
+      request.renderState,
     );
   }
 
   return writeCompletedBoundaryInstruction(
     destination,
-    request.responseState,
-    boundary.id,
+    request.resumableState,
+    request.renderState,
     boundary.rootSegmentID,
     boundary.resources,
   );
@@ -2242,7 +3741,7 @@ function flushPartialBoundary(
 ): boolean {
   if (enableFloat) {
     setCurrentlyRenderingBoundaryResourcesTarget(
-      request.resources,
+      request.renderState,
       boundary.resources,
     );
   }
@@ -2270,7 +3769,7 @@ function flushPartialBoundary(
     return writeResourcesForBoundary(
       destination,
       boundary.resources,
-      request.responseState,
+      request.renderState,
     );
   } else {
     return true;
@@ -2300,12 +3799,17 @@ function flushPartiallyCompletedSegment(
       );
     }
 
+    return flushSegmentContainer(request, destination, segment);
+  } else if (segmentID === boundary.rootSegmentID) {
+    // When we emit postponed boundaries, we might have assigned the ID already
+    // but it's still the root segment so we can't inject it into the parent yet.
     return flushSegmentContainer(request, destination, segment);
   } else {
     flushSegmentContainer(request, destination, segment);
     return writeCompletedSegmentInstruction(
       destination,
-      request.responseState,
+      request.resumableState,
+      request.renderState,
       segmentID,
     );
   }
@@ -2329,26 +3833,25 @@ function flushCompletedQueues(
         if (enableFloat) {
           writePreamble(
             destination,
-            request.resources,
-            request.responseState,
-            request.allPendingTasks === 0,
+            request.resumableState,
+            request.renderState,
+            request.allPendingTasks === 0 &&
+              (request.trackedPostpones === null ||
+                request.trackedPostpones.workingMap.size === 0),
           );
         }
 
         flushSegment(request, destination, completedRootSegment);
         request.completedRootSegment = null;
-        writeCompletedRoot(destination, request.responseState);
+        writeCompletedRoot(destination, request.renderState);
       } else {
         // We haven't flushed the root yet so we don't need to check any other branches further down
         return;
       }
-    } else if (request.pendingRootTasks > 0) {
-      // We have not yet flushed the root segment so we early return
-      return;
     }
 
     if (enableFloat) {
-      writeHoistables(destination, request.resources, request.responseState);
+      writeHoistables(destination, request.resumableState, request.renderState);
     }
 
     // We emit client rendering instructions for already emitted boundaries first.
@@ -2427,7 +3930,17 @@ function flushCompletedQueues(
     ) {
       request.flushScheduled = false;
       if (enableFloat) {
-        writePostamble(destination, request.responseState);
+        // We write the trailing tags but only if don't have any data to resume.
+        // If we need to resume we'll write the postamble in the resume instead.
+        if (
+          !enablePostpone ||
+          request.trackedPostpones === null ||
+          // We check the working map instead of the root because the root could've
+          // been mutated at this point if it was passed straight through to resume().
+          request.trackedPostpones.workingMap.size === 0
+        ) {
+          writePostamble(destination, request.resumableState);
+        }
       }
       completeWriting(destination);
       flushBuffered(destination);
@@ -2493,6 +4006,10 @@ export function startFlowing(request: Request, destination: Destination): void {
   }
 }
 
+export function stopFlowing(request: Request): void {
+  request.destination = null;
+}
+
 // This is called to early terminate a request. It puts all pending boundaries in client rendered state.
 export function abort(request: Request, reason: mixed): void {
   try {
@@ -2518,6 +4035,69 @@ export function flushResources(request: Request): void {
   enqueueFlush(request);
 }
 
-export function getResources(request: Request): Resources {
-  return request.resources;
+export function getFormState(
+  request: Request,
+): ReactFormState<any, any> | null {
+  return request.formState;
+}
+
+export function getResumableState(request: Request): ResumableState {
+  return request.resumableState;
+}
+
+export function getRenderState(request: Request): RenderState {
+  return request.renderState;
+}
+
+function addToReplayParent(
+  node: ReplayNode,
+  parentKeyPath: Root | KeyNode,
+  trackedPostpones: PostponedHoles,
+): void {
+  if (parentKeyPath === null) {
+    trackedPostpones.rootNodes.push(node);
+  } else {
+    const workingMap = trackedPostpones.workingMap;
+    let parentNode = workingMap.get(parentKeyPath);
+    if (parentNode === undefined) {
+      parentNode = ([
+        parentKeyPath[1],
+        parentKeyPath[2],
+        ([]: Array<ReplayNode>),
+        null,
+      ]: ReplayNode);
+      workingMap.set(parentKeyPath, parentNode);
+      addToReplayParent(parentNode, parentKeyPath[0], trackedPostpones);
+    }
+    parentNode[2].push(node);
+  }
+}
+
+export type PostponedState = {
+  nextSegmentId: number,
+  rootFormatContext: FormatContext,
+  progressiveChunkSize: number,
+  resumableState: ResumableState,
+  replayNodes: Array<ReplayNode>,
+  replaySlots: ResumeSlots,
+};
+
+// Returns the state of a postponed request or null if nothing was postponed.
+export function getPostponedState(request: Request): null | PostponedState {
+  const trackedPostpones = request.trackedPostpones;
+  if (
+    trackedPostpones === null ||
+    (trackedPostpones.rootNodes.length === 0 &&
+      trackedPostpones.rootSlots === null)
+  ) {
+    return null;
+  }
+  return {
+    nextSegmentId: request.nextSegmentId,
+    rootFormatContext: request.rootFormatContext,
+    progressiveChunkSize: request.progressiveChunkSize,
+    resumableState: request.resumableState,
+    replayNodes: trackedPostpones.rootNodes,
+    replaySlots: trackedPostpones.rootSlots,
+  };
 }
diff --git a/packages/react-server/src/ReactFlightActionServer.js b/packages/react-server/src/ReactFlightActionServer.js
index ee735c2e8f9a2..54b5bef03726c 100644
--- a/packages/react-server/src/ReactFlightActionServer.js
+++ b/packages/react-server/src/ReactFlightActionServer.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import type {Thenable} from 'shared/ReactTypes';
+import type {Thenable, ReactFormState} from 'shared/ReactTypes';
 
 import type {
   ServerManifest,
@@ -53,6 +53,28 @@ function loadServerReference<T>(
   }
 }
 
+function decodeBoundActionMetaData(
+  body: FormData,
+  serverManifest: ServerManifest,
+  formFieldPrefix: string,
+): {id: ServerReferenceId, bound: null | Promise<Array<any>>} {
+  // The data for this reference is encoded in multiple fields under this prefix.
+  const actionResponse = createResponse(serverManifest, formFieldPrefix, body);
+  close(actionResponse);
+  const refPromise = getRoot<{
+    id: ServerReferenceId,
+    bound: null | Promise<Array<any>>,
+  }>(actionResponse);
+  // Force it to initialize
+  // $FlowFixMe
+  refPromise.then(() => {});
+  if (refPromise.status !== 'fulfilled') {
+    // $FlowFixMe
+    throw refPromise.reason;
+  }
+  return refPromise.value;
+}
+
 export function decodeAction<T>(
   body: FormData,
   serverManifest: ServerManifest,
@@ -73,25 +95,11 @@ export function decodeAction<T>(
     // form action.
     if (key.startsWith('$ACTION_REF_')) {
       const formFieldPrefix = '$ACTION_' + key.slice(12) + ':';
-      // The data for this reference is encoded in multiple fields under this prefix.
-      const actionResponse = createResponse(
+      const metaData = decodeBoundActionMetaData(
+        body,
         serverManifest,
         formFieldPrefix,
-        body,
       );
-      close(actionResponse);
-      const refPromise = getRoot<{
-        id: ServerReferenceId,
-        bound: null | Promise<Array<any>>,
-      }>(actionResponse);
-      // Force it to initialize
-      // $FlowFixMe
-      refPromise.then(() => {});
-      if (refPromise.status !== 'fulfilled') {
-        // $FlowFixMe
-        throw refPromise.reason;
-      }
-      const metaData = refPromise.value;
       action = loadServerReference(serverManifest, metaData.id, metaData.bound);
       return;
     }
@@ -108,3 +116,48 @@ export function decodeAction<T>(
   // Return the action with the remaining FormData bound to the first argument.
   return action.then(fn => fn.bind(null, formData));
 }
+
+export function decodeFormState<S>(
+  actionResult: S,
+  body: FormData,
+  serverManifest: ServerManifest,
+): Promise<ReactFormState<S, ServerReferenceId> | null> {
+  const keyPath = body.get('$ACTION_KEY');
+  if (typeof keyPath !== 'string') {
+    // This form submission did not include any form state.
+    return Promise.resolve(null);
+  }
+  // Search through the form data object to get the reference id and the number
+  // of bound arguments. This repeats some of the work done in decodeAction.
+  let metaData = null;
+  // $FlowFixMe[prop-missing]
+  body.forEach((value: string | File, key: string) => {
+    if (key.startsWith('$ACTION_REF_')) {
+      const formFieldPrefix = '$ACTION_' + key.slice(12) + ':';
+      metaData = decodeBoundActionMetaData(
+        body,
+        serverManifest,
+        formFieldPrefix,
+      );
+    }
+    // We don't check for the simple $ACTION_ID_ case because form state actions
+    // are always bound to the state argument.
+  });
+  if (metaData === null) {
+    // Should be unreachable.
+    return Promise.resolve(null);
+  }
+  const referenceId = metaData.id;
+  return Promise.resolve(metaData.bound).then(bound => {
+    if (bound === null) {
+      // Should be unreachable because form state actions are always bound to the
+      // state argument.
+      return null;
+    }
+    // The form action dispatch method is always bound to the initial state.
+    // But when comparing signatures, we compare to the original unbound action.
+    // Subtract one from the arity to account for this.
+    const boundArity = bound.length - 1;
+    return [actionResult, keyPath, referenceId, boundArity];
+  });
+}
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index e8e18d758dd3d..3e73253e26ab0 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -9,7 +9,9 @@
 
 import type {Chunk, BinaryChunk, Destination} from './ReactServerStreamConfig';
 
-import {enableBinaryFlight} from 'shared/ReactFeatureFlags';
+import type {Postpone} from 'react/src/ReactPostpone';
+
+import {enableBinaryFlight, enablePostpone} from 'shared/ReactFeatureFlags';
 
 import {
   scheduleWork,
@@ -35,6 +37,7 @@ import type {
   ServerReference,
   ServerReferenceId,
   Hints,
+  HintCode,
   HintModel,
 } from './ReactFlightServerConfig';
 import type {ContextSnapshot} from './ReactFlightNewContext';
@@ -87,6 +90,7 @@ import {
   REACT_FRAGMENT_TYPE,
   REACT_LAZY_TYPE,
   REACT_MEMO_TYPE,
+  REACT_POSTPONE_TYPE,
   REACT_PROVIDER_TYPE,
 } from 'shared/ReactSymbols';
 
@@ -189,6 +193,7 @@ export type Request = {
   identifierPrefix: string,
   identifierCount: number,
   onError: (error: mixed) => ?string,
+  onPostpone: (reason: string) => void,
   toJSON: (key: string, value: ReactClientValue) => ReactJSONValue,
 };
 
@@ -200,6 +205,10 @@ function defaultErrorHandler(error: mixed) {
   // Don't transform to our wrapper
 }
 
+function defaultPostponeHandler(reason: string) {
+  // Noop
+}
+
 const OPEN = 0;
 const CLOSING = 1;
 const CLOSED = 2;
@@ -210,6 +219,7 @@ export function createRequest(
   onError: void | ((error: mixed) => ?string),
   context?: Array<[string, ServerContextJSONValue]>,
   identifierPrefix?: string,
+  onPostpone: void | ((reason: string) => void),
 ): Request {
   if (
     ReactCurrentCache.current !== null &&
@@ -248,6 +258,7 @@ export function createRequest(
     identifierPrefix: identifierPrefix || '',
     identifierCount: 1,
     onError: onError === undefined ? defaultErrorHandler : onError,
+    onPostpone: onPostpone === undefined ? defaultPostponeHandler : onPostpone,
     // $FlowFixMe[missing-this-annot]
     toJSON: function (key: string, value: ReactClientValue): ReactJSONValue {
       return resolveModelToJSON(request, this, key, value);
@@ -297,12 +308,18 @@ function serializeThenable(request: Request, thenable: Thenable<any>): number {
     }
     case 'rejected': {
       const x = thenable.reason;
-      const digest = logRecoverableError(request, x);
-      if (__DEV__) {
-        const {message, stack} = getErrorMessageAndStackDev(x);
-        emitErrorChunkDev(request, newTask.id, digest, message, stack);
+      if (
+        enablePostpone &&
+        typeof x === 'object' &&
+        x !== null &&
+        (x: any).$$typeof === REACT_POSTPONE_TYPE
+      ) {
+        const postponeInstance: Postpone = (x: any);
+        logPostpone(request, postponeInstance.message);
+        emitPostponeChunk(request, newTask.id, postponeInstance);
       } else {
-        emitErrorChunkProd(request, newTask.id, digest);
+        const digest = logRecoverableError(request, x);
+        emitErrorChunk(request, newTask.id, digest, x);
       }
       return newTask.id;
     }
@@ -342,14 +359,10 @@ function serializeThenable(request: Request, thenable: Thenable<any>): number {
     },
     reason => {
       newTask.status = ERRORED;
+      request.abortableTasks.delete(newTask);
       // TODO: We should ideally do this inside performWork so it's scheduled
       const digest = logRecoverableError(request, reason);
-      if (__DEV__) {
-        const {message, stack} = getErrorMessageAndStackDev(reason);
-        emitErrorChunkDev(request, newTask.id, digest, message, stack);
-      } else {
-        emitErrorChunkProd(request, newTask.id, digest);
-      }
+      emitErrorChunk(request, newTask.id, digest, reason);
       if (request.destination !== null) {
         flushCompletedChunks(request, request.destination);
       }
@@ -359,10 +372,10 @@ function serializeThenable(request: Request, thenable: Thenable<any>): number {
   return newTask.id;
 }
 
-export function emitHint(
+export function emitHint<Code: HintCode>(
   request: Request,
-  code: string,
-  model: HintModel,
+  code: Code,
+  model: HintModel<Code>,
 ): void {
   emitHintChunk(request, code, model);
   enqueueFlush(request);
@@ -638,6 +651,20 @@ function serializeBigInt(n: bigint): string {
   return '$n' + n.toString(10);
 }
 
+function serializeRowHeader(tag: string, id: number) {
+  return id.toString(16) + ':' + tag;
+}
+
+function encodeReferenceChunk(
+  request: Request,
+  id: number,
+  reference: string,
+): Chunk {
+  const json = stringify(reference);
+  const row = id.toString(16) + ':' + json + '\n';
+  return stringToChunk(row);
+}
+
 function serializeClientReference(
   request: Request,
   parent:
@@ -681,12 +708,7 @@ function serializeClientReference(
     request.pendingChunks++;
     const errorId = request.nextChunkId++;
     const digest = logRecoverableError(request, x);
-    if (__DEV__) {
-      const {message, stack} = getErrorMessageAndStackDev(x);
-      emitErrorChunkDev(request, errorId, digest, message, stack);
-    } else {
-      emitErrorChunkProd(request, errorId, digest);
-    }
+    emitErrorChunk(request, errorId, digest, x);
     return serializeByValueID(errorId);
   }
 }
@@ -695,8 +717,7 @@ function outlineModel(request: Request, value: any): number {
   request.pendingChunks++;
   const outlinedId = request.nextChunkId++;
   // We assume that this object doesn't suspend, but a child might.
-  const processedChunk = processModelChunk(request, outlinedId, value);
-  request.completedRegularChunks.push(processedChunk);
+  emitModelChunk(request, outlinedId, value);
   return outlinedId;
 }
 
@@ -734,11 +755,9 @@ function serializeLargeTextString(request: Request, text: string): string {
   request.pendingChunks += 2;
   const textId = request.nextChunkId++;
   const textChunk = stringToChunk(text);
-  const headerChunk = processTextHeader(
-    request,
-    textId,
-    byteLengthOfChunk(textChunk),
-  );
+  const binaryLength = byteLengthOfChunk(textChunk);
+  const row = textId.toString(16) + ':T' + binaryLength.toString(16) + ',';
+  const headerChunk = stringToChunk(row);
   request.completedRegularChunks.push(headerChunk, textChunk);
   return serializeByValueID(textId);
 }
@@ -765,12 +784,10 @@ function serializeTypedArray(
   const bufferId = request.nextChunkId++;
   // TODO: Convert to little endian if that's not the server default.
   const binaryChunk = typedArrayToBinaryChunk(typedArray);
-  const headerChunk = processBufferHeader(
-    request,
-    tag,
-    bufferId,
-    byteLengthOfBinaryChunk(binaryChunk),
-  );
+  const binaryLength = byteLengthOfBinaryChunk(binaryChunk);
+  const row =
+    bufferId.toString(16) + ':' + tag + binaryLength.toString(16) + ',';
+  const headerChunk = stringToChunk(row);
   request.completedRegularChunks.push(headerChunk, binaryChunk);
   return serializeByValueID(bufferId);
 }
@@ -899,35 +916,40 @@ function resolveModelToJSON(
             // later, once we deprecate the old API in favor of `use`.
             getSuspendedThenable()
           : thrownValue;
-      // $FlowFixMe[method-unbinding]
-      if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
-        // Something suspended, we'll need to create a new task and resolve it later.
-        request.pendingChunks++;
-        const newTask = createTask(
-          request,
-          value,
-          getActiveContext(),
-          request.abortableTasks,
-        );
-        const ping = newTask.ping;
-        x.then(ping, ping);
-        newTask.thenableState = getThenableStateAfterSuspending();
-        return serializeLazyID(newTask.id);
-      } else {
-        // Something errored. We'll still send everything we have up until this point.
-        // We'll replace this element with a lazy reference that throws on the client
-        // once it gets rendered.
-        request.pendingChunks++;
-        const errorId = request.nextChunkId++;
-        const digest = logRecoverableError(request, x);
-        if (__DEV__) {
-          const {message, stack} = getErrorMessageAndStackDev(x);
-          emitErrorChunkDev(request, errorId, digest, message, stack);
-        } else {
-          emitErrorChunkProd(request, errorId, digest);
+      if (typeof x === 'object' && x !== null) {
+        // $FlowFixMe[method-unbinding]
+        if (typeof x.then === 'function') {
+          // Something suspended, we'll need to create a new task and resolve it later.
+          request.pendingChunks++;
+          const newTask = createTask(
+            request,
+            value,
+            getActiveContext(),
+            request.abortableTasks,
+          );
+          const ping = newTask.ping;
+          x.then(ping, ping);
+          newTask.thenableState = getThenableStateAfterSuspending();
+          return serializeLazyID(newTask.id);
+        } else if (enablePostpone && x.$$typeof === REACT_POSTPONE_TYPE) {
+          // Something postponed. We'll still send everything we have up until this point.
+          // We'll replace this element with a lazy reference that postpones on the client.
+          const postponeInstance: Postpone = (x: any);
+          request.pendingChunks++;
+          const postponeId = request.nextChunkId++;
+          logPostpone(request, postponeInstance.message);
+          emitPostponeChunk(request, postponeId, postponeInstance);
+          return serializeLazyID(postponeId);
         }
-        return serializeLazyID(errorId);
       }
+      // Something errored. We'll still send everything we have up until this point.
+      // We'll replace this element with a lazy reference that throws on the client
+      // once it gets rendered.
+      request.pendingChunks++;
+      const errorId = request.nextChunkId++;
+      const digest = logRecoverableError(request, x);
+      emitErrorChunk(request, errorId, digest, x);
+      return serializeLazyID(errorId);
     }
   }
 
@@ -1157,6 +1179,11 @@ function resolveModelToJSON(
   );
 }
 
+function logPostpone(request: Request, reason: string): void {
+  const onPostpone = request.onPostpone;
+  onPostpone(reason);
+}
+
 function logRecoverableError(request: Request, error: mixed): string {
   const onError = request.onError;
   const errorDigest = onError(error);
@@ -1169,38 +1196,6 @@ function logRecoverableError(request: Request, error: mixed): string {
   return errorDigest || '';
 }
 
-function getErrorMessageAndStackDev(error: mixed): {
-  message: string,
-  stack: string,
-} {
-  if (__DEV__) {
-    let message;
-    let stack = '';
-    try {
-      if (error instanceof Error) {
-        // eslint-disable-next-line react-internal/safe-string-coercion
-        message = String(error.message);
-        // eslint-disable-next-line react-internal/safe-string-coercion
-        stack = String(error.stack);
-      } else {
-        message = 'Error: ' + (error: any);
-      }
-    } catch (x) {
-      message = 'An error occurred but serializing the error message failed.';
-    }
-    return {
-      message,
-      stack,
-    };
-  } else {
-    // These errors should never make it into a build so we don't need to encode them in codes.json
-    // eslint-disable-next-line react-internal/prod-error-codes
-    throw new Error(
-      'getErrorMessageAndStackDev should never be called from production mode. This is a bug in React.',
-    );
-  }
-}
-
 function fatalError(request: Request, error: mixed): void {
   // This is called outside error handling code such as if an error happens in React internals.
   if (request.destination !== null) {
@@ -1212,29 +1207,58 @@ function fatalError(request: Request, error: mixed): void {
   }
 }
 
-function emitErrorChunkProd(
+function emitPostponeChunk(
   request: Request,
   id: number,
-  digest: string,
+  postponeInstance: Postpone,
 ): void {
-  const processedChunk = processErrorChunkProd(request, id, digest);
+  let row;
+  if (__DEV__) {
+    let reason = '';
+    let stack = '';
+    try {
+      // eslint-disable-next-line react-internal/safe-string-coercion
+      reason = String(postponeInstance.message);
+      // eslint-disable-next-line react-internal/safe-string-coercion
+      stack = String(postponeInstance.stack);
+    } catch (x) {}
+    row = serializeRowHeader('P', id) + stringify({reason, stack}) + '\n';
+  } else {
+    // No reason included in prod.
+    row = serializeRowHeader('P', id) + '\n';
+  }
+  const processedChunk = stringToChunk(row);
   request.completedErrorChunks.push(processedChunk);
 }
 
-function emitErrorChunkDev(
+function emitErrorChunk(
   request: Request,
   id: number,
   digest: string,
-  message: string,
-  stack: string,
+  error: mixed,
 ): void {
-  const processedChunk = processErrorChunkDev(
-    request,
-    id,
-    digest,
-    message,
-    stack,
-  );
+  let errorInfo: any;
+  if (__DEV__) {
+    let message;
+    let stack = '';
+    try {
+      if (error instanceof Error) {
+        // eslint-disable-next-line react-internal/safe-string-coercion
+        message = String(error.message);
+        // eslint-disable-next-line react-internal/safe-string-coercion
+        stack = String(error.stack);
+      } else {
+        message = 'Error: ' + (error: any);
+      }
+    } catch (x) {
+      message = 'An error occurred but serializing the error message failed.';
+    }
+    errorInfo = {digest, message, stack};
+  } else {
+    errorInfo = {digest};
+  }
+  const row = serializeRowHeader('E', id) + stringify(errorInfo) + '\n';
+  const processedChunk = stringToChunk(row);
   request.completedErrorChunks.push(processedChunk);
 }
 
@@ -1243,27 +1267,28 @@ function emitImportChunk(
   id: number,
   clientReferenceMetadata: ClientReferenceMetadata,
 ): void {
-  const processedChunk = processImportChunk(
-    request,
-    id,
-    clientReferenceMetadata,
-  );
+  // $FlowFixMe[incompatible-type] stringify can return null
+  const json: string = stringify(clientReferenceMetadata);
+  const row = serializeRowHeader('I', id) + json + '\n';
+  const processedChunk = stringToChunk(row);
   request.completedImportChunks.push(processedChunk);
 }
 
-function emitHintChunk(request: Request, code: string, model: HintModel): void {
-  const processedChunk = processHintChunk(
-    request,
-    request.nextChunkId++,
-    code,
-    model,
-  );
+function emitHintChunk<Code: HintCode>(
+  request: Request,
+  code: Code,
+  model: HintModel<Code>,
+): void {
+  const json: string = stringify(model);
+  const id = request.nextChunkId++;
+  const row = serializeRowHeader('H' + code, id) + json + '\n';
+  const processedChunk = stringToChunk(row);
   request.completedHintChunks.push(processedChunk);
 }
 
 function emitSymbolChunk(request: Request, id: number, name: string): void {
   const symbolReference = serializeSymbolReference(name);
-  const processedChunk = processReferenceChunk(request, id, symbolReference);
+  const processedChunk = encodeReferenceChunk(request, id, symbolReference);
   request.completedImportChunks.push(processedChunk);
 }
 
@@ -1273,7 +1298,19 @@ function emitProviderChunk(
   contextName: string,
 ): void {
   const contextReference = serializeProviderReference(contextName);
-  const processedChunk = processReferenceChunk(request, id, contextReference);
+  const processedChunk = encodeReferenceChunk(request, id, contextReference);
+  request.completedRegularChunks.push(processedChunk);
+}
+
+function emitModelChunk(
+  request: Request,
+  id: number,
+  model: ReactClientValue,
+): void {
+  // $FlowFixMe[incompatible-type] stringify can return null
+  const json: string = stringify(model, request.toJSON);
+  const row = id.toString(16) + ':' + json + '\n';
+  const processedChunk = stringToChunk(row);
   request.completedRegularChunks.push(processedChunk);
 }
 
@@ -1337,8 +1374,7 @@ function retryTask(request: Request, task: Task): void {
       }
     }
 
-    const processedChunk = processModelChunk(request, task.id, value);
-    request.completedRegularChunks.push(processedChunk);
+    emitModelChunk(request, task.id, value);
     request.abortableTasks.delete(task);
     task.status = COMPLETED;
   } catch (thrownValue) {
@@ -1351,24 +1387,27 @@ function retryTask(request: Request, task: Task): void {
           // later, once we deprecate the old API in favor of `use`.
           getSuspendedThenable()
         : thrownValue;
-    // $FlowFixMe[method-unbinding]
-    if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
-      // Something suspended again, let's pick it back up later.
-      const ping = task.ping;
-      x.then(ping, ping);
-      task.thenableState = getThenableStateAfterSuspending();
-      return;
-    } else {
-      request.abortableTasks.delete(task);
-      task.status = ERRORED;
-      const digest = logRecoverableError(request, x);
-      if (__DEV__) {
-        const {message, stack} = getErrorMessageAndStackDev(x);
-        emitErrorChunkDev(request, task.id, digest, message, stack);
-      } else {
-        emitErrorChunkProd(request, task.id, digest);
+    if (typeof x === 'object' && x !== null) {
+      // $FlowFixMe[method-unbinding]
+      if (typeof x.then === 'function') {
+        // Something suspended again, let's pick it back up later.
+        const ping = task.ping;
+        x.then(ping, ping);
+        task.thenableState = getThenableStateAfterSuspending();
+        return;
+      } else if (enablePostpone && x.$$typeof === REACT_POSTPONE_TYPE) {
+        request.abortableTasks.delete(task);
+        task.status = ERRORED;
+        const postponeInstance: Postpone = (x: any);
+        logPostpone(request, postponeInstance.message);
+        emitPostponeChunk(request, task.id, postponeInstance);
+        return;
       }
     }
+    request.abortableTasks.delete(task);
+    task.status = ERRORED;
+    const digest = logRecoverableError(request, x);
+    emitErrorChunk(request, task.id, digest, x);
   }
 }
 
@@ -1404,7 +1443,7 @@ function abortTask(task: Task, request: Request, errorId: number): void {
   // Instead of emitting an error per task.id, we emit a model that only
   // has a single value referencing the error.
   const ref = serializeByValueID(errorId);
-  const processedChunk = processReferenceChunk(request, task.id, ref);
+  const processedChunk = encodeReferenceChunk(request, task.id, ref);
   request.completedErrorChunks.push(processedChunk);
 }
 
@@ -1532,6 +1571,10 @@ export function startFlowing(request: Request, destination: Destination): void {
   }
 }
 
+export function stopFlowing(request: Request): void {
+  request.destination = null;
+}
+
 // This is called to early terminate a request. It creates an error at all pending tasks.
 export function abort(request: Request, reason: mixed): void {
   try {
@@ -1547,12 +1590,7 @@ export function abort(request: Request, reason: mixed): void {
       const digest = logRecoverableError(request, error);
       request.pendingChunks++;
       const errorId = request.nextChunkId++;
-      if (__DEV__) {
-        const {message, stack} = getErrorMessageAndStackDev(error);
-        emitErrorChunkDev(request, errorId, digest, message, stack);
-      } else {
-        emitErrorChunkProd(request, errorId, digest);
-      }
+      emitErrorChunk(request, errorId, digest, error);
       abortableTasks.forEach(task => abortTask(task, request, errorId));
       abortableTasks.clear();
     }
@@ -1582,107 +1620,3 @@ function importServerContexts(
   }
   return rootContextSnapshot;
 }
-
-function serializeRowHeader(tag: string, id: number) {
-  return id.toString(16) + ':' + tag;
-}
-
-function processErrorChunkProd(
-  request: Request,
-  id: number,
-  digest: string,
-): Chunk {
-  if (__DEV__) {
-    // These errors should never make it into a build so we don't need to encode them in codes.json
-    // eslint-disable-next-line react-internal/prod-error-codes
-    throw new Error(
-      'processErrorChunkProd should never be called while in development mode. Use processErrorChunkDev instead. This is a bug in React.',
-    );
-  }
-
-  const errorInfo: any = {digest};
-  const row = serializeRowHeader('E', id) + stringify(errorInfo) + '\n';
-  return stringToChunk(row);
-}
-
-function processErrorChunkDev(
-  request: Request,
-  id: number,
-  digest: string,
-  message: string,
-  stack: string,
-): Chunk {
-  if (!__DEV__) {
-    // These errors should never make it into a build so we don't need to encode them in codes.json
-    // eslint-disable-next-line react-internal/prod-error-codes
-    throw new Error(
-      'processErrorChunkDev should never be called while in production mode. Use processErrorChunkProd instead. This is a bug in React.',
-    );
-  }
-
-  const errorInfo: any = {digest, message, stack};
-  const row = serializeRowHeader('E', id) + stringify(errorInfo) + '\n';
-  return stringToChunk(row);
-}
-
-function processModelChunk(
-  request: Request,
-  id: number,
-  model: ReactClientValue,
-): Chunk {
-  // $FlowFixMe[incompatible-type] stringify can return null
-  const json: string = stringify(model, request.toJSON);
-  const row = id.toString(16) + ':' + json + '\n';
-  return stringToChunk(row);
-}
-
-function processReferenceChunk(
-  request: Request,
-  id: number,
-  reference: string,
-): Chunk {
-  const json = stringify(reference);
-  const row = id.toString(16) + ':' + json + '\n';
-  return stringToChunk(row);
-}
-
-function processImportChunk(
-  request: Request,
-  id: number,
-  clientReferenceMetadata: ReactClientValue,
-): Chunk {
-  // $FlowFixMe[incompatible-type] stringify can return null
-  const json: string = stringify(clientReferenceMetadata);
-  const row = serializeRowHeader('I', id) + json + '\n';
-  return stringToChunk(row);
-}
-
-function processHintChunk(
-  request: Request,
-  id: number,
-  code: string,
-  model: JSONValue,
-): Chunk {
-  const json: string = stringify(model);
-  const row = serializeRowHeader('H' + code, id) + json + '\n';
-  return stringToChunk(row);
-}
-
-function processTextHeader(
-  request: Request,
-  id: number,
-  binaryLength: number,
-): Chunk {
-  const row = id.toString(16) + ':T' + binaryLength.toString(16) + ',';
-  return stringToChunk(row);
-}
-
-function processBufferHeader(
-  request: Request,
-  tag: string,
-  id: number,
-  binaryLength: number,
-): Chunk {
-  const row = id.toString(16) + ':' + tag + binaryLength.toString(16) + ',';
-  return stringToChunk(row);
-}
diff --git a/packages/react-server/src/ReactServerStreamConfigBrowser.js b/packages/react-server/src/ReactServerStreamConfigBrowser.js
index c6f2ba8d7cf0a..da1a56f813303 100644
--- a/packages/react-server/src/ReactServerStreamConfigBrowser.js
+++ b/packages/react-server/src/ReactServerStreamConfigBrowser.js
@@ -182,3 +182,5 @@ export function closeWithError(destination: Destination, error: mixed): void {
     destination.close();
   }
 }
+
+export {createFastHashJS as createFastHash} from 'react-server/src/createFastHashJS';
diff --git a/packages/react-server/src/ReactServerStreamConfigBun.js b/packages/react-server/src/ReactServerStreamConfigBun.js
index 27317f0925cd4..276c7f59e490a 100644
--- a/packages/react-server/src/ReactServerStreamConfigBun.js
+++ b/packages/react-server/src/ReactServerStreamConfigBun.js
@@ -7,6 +7,8 @@
  * @flow
  */
 
+/* global Bun */
+
 type BunReadableStreamController = ReadableStreamController & {
   end(): mixed,
   write(data: Chunk | BinaryChunk): void,
@@ -96,3 +98,7 @@ export function closeWithError(destination: Destination, error: mixed): void {
     destination.close();
   }
 }
+
+export function createFastHash(input: string): string | number {
+  return Bun.hash(input);
+}
diff --git a/packages/react-server/src/ReactServerStreamConfigEdge.js b/packages/react-server/src/ReactServerStreamConfigEdge.js
index b665a13706edc..1bc9d7655a087 100644
--- a/packages/react-server/src/ReactServerStreamConfigEdge.js
+++ b/packages/react-server/src/ReactServerStreamConfigEdge.js
@@ -182,3 +182,5 @@ export function closeWithError(destination: Destination, error: mixed): void {
     destination.close();
   }
 }
+
+export {createFastHashJS as createFastHash} from 'react-server/src/createFastHashJS';
diff --git a/packages/react-server/src/ReactServerStreamConfigNode.js b/packages/react-server/src/ReactServerStreamConfigNode.js
index d6784e3c77b3a..5d5c6b4fab3b6 100644
--- a/packages/react-server/src/ReactServerStreamConfigNode.js
+++ b/packages/react-server/src/ReactServerStreamConfigNode.js
@@ -10,6 +10,7 @@
 import type {Writable} from 'stream';
 
 import {TextEncoder} from 'util';
+import {createHash} from 'crypto';
 
 interface MightBeFlushable {
   flush?: () => void;
@@ -243,3 +244,9 @@ export function closeWithError(destination: Destination, error: mixed): void {
   // $FlowFixMe[incompatible-call]: This is an Error object or the destination accepts other types.
   destination.destroy(error);
 }
+
+export function createFastHash(input: string): string | number {
+  const hash = createHash('md5');
+  hash.update(input);
+  return hash.digest('hex');
+}
diff --git a/packages/react-server/src/createFastHashJS.js b/packages/react-server/src/createFastHashJS.js
new file mode 100644
index 0000000000000..a72c75a88ff9d
--- /dev/null
+++ b/packages/react-server/src/createFastHashJS.js
@@ -0,0 +1,122 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// A pure JS implementation of a string hashing function. We do not use it for
+// security or obfuscation purposes, only to create compact hashes. So we
+// prioritize speed over collision avoidance. For example, we use this to hash
+// the component key path used by useFormState for MPA-style submissions.
+//
+// In environments where built-in hashing functions are available, we prefer
+// those instead. Like Node's crypto module, or Bun.hash. Unfortunately this
+// does not include the web standard crypto API because those methods are all
+// async. For our purposes, we need it to be sync because the cost of context
+// switching is too high to be worth it.
+//
+// The most popular hashing algorithm that meets these requirements in the JS
+// ecosystem is MurmurHash3, and almost all implementations I could find used
+// some version of the implementation by Gary Court inlined below.
+
+export function createFastHashJS(key: string): number {
+  return murmurhash3_32_gc(key, 0);
+}
+
+/* eslint-disable prefer-const, no-fallthrough */
+
+/**
+ * @license
+ *
+ * JS Implementation of MurmurHash3 (r136) (as of May 20, 2011)
+ *
+ * Copyright (c) 2011 Gary Court
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+function murmurhash3_32_gc(key: string, seed: number): number {
+  let remainder, bytes, h1, h1b, c1, c2, k1, i;
+
+  remainder = key.length & 3; // key.length % 4
+  bytes = key.length - remainder;
+  h1 = seed;
+  c1 = 0xcc9e2d51;
+  c2 = 0x1b873593;
+  i = 0;
+
+  while (i < bytes) {
+    k1 =
+      (key.charCodeAt(i) & 0xff) |
+      ((key.charCodeAt(++i) & 0xff) << 8) |
+      ((key.charCodeAt(++i) & 0xff) << 16) |
+      ((key.charCodeAt(++i) & 0xff) << 24);
+    ++i;
+
+    k1 =
+      ((k1 & 0xffff) * c1 + ((((k1 >>> 16) * c1) & 0xffff) << 16)) & 0xffffffff;
+    k1 = (k1 << 15) | (k1 >>> 17);
+    k1 =
+      ((k1 & 0xffff) * c2 + ((((k1 >>> 16) * c2) & 0xffff) << 16)) & 0xffffffff;
+
+    h1 ^= k1;
+    h1 = (h1 << 13) | (h1 >>> 19);
+    h1b =
+      ((h1 & 0xffff) * 5 + ((((h1 >>> 16) * 5) & 0xffff) << 16)) & 0xffffffff;
+    h1 = (h1b & 0xffff) + 0x6b64 + ((((h1b >>> 16) + 0xe654) & 0xffff) << 16);
+  }
+
+  k1 = 0;
+
+  switch (remainder) {
+    case 3:
+      k1 ^= (key.charCodeAt(i + 2) & 0xff) << 16;
+    case 2:
+      k1 ^= (key.charCodeAt(i + 1) & 0xff) << 8;
+    case 1:
+      k1 ^= key.charCodeAt(i) & 0xff;
+
+      k1 =
+        ((k1 & 0xffff) * c1 + ((((k1 >>> 16) * c1) & 0xffff) << 16)) &
+        0xffffffff;
+      k1 = (k1 << 15) | (k1 >>> 17);
+      k1 =
+        ((k1 & 0xffff) * c2 + ((((k1 >>> 16) * c2) & 0xffff) << 16)) &
+        0xffffffff;
+      h1 ^= k1;
+  }
+
+  h1 ^= key.length;
+
+  h1 ^= h1 >>> 16;
+  h1 =
+    ((h1 & 0xffff) * 0x85ebca6b +
+      ((((h1 >>> 16) * 0x85ebca6b) & 0xffff) << 16)) &
+    0xffffffff;
+  h1 ^= h1 >>> 13;
+  h1 =
+    ((h1 & 0xffff) * 0xc2b2ae35 +
+      ((((h1 >>> 16) * 0xc2b2ae35) & 0xffff) << 16)) &
+    0xffffffff;
+  h1 ^= h1 >>> 16;
+
+  return h1 >>> 0;
+}
diff --git a/packages/react-server/src/forks/ReactFizzConfig.custom.js b/packages/react-server/src/forks/ReactFizzConfig.custom.js
index f94b1eebc1b24..bdbd902c760ab 100644
--- a/packages/react-server/src/forks/ReactFizzConfig.custom.js
+++ b/packages/react-server/src/forks/ReactFizzConfig.custom.js
@@ -28,11 +28,10 @@ import type {TransitionStatus} from 'react-reconciler/src/ReactFiberConfig';
 
 declare var $$$config: any;
 export opaque type Destination = mixed; // eslint-disable-line no-undef
-export opaque type ResponseState = mixed;
-export opaque type Resources = mixed;
+export opaque type RenderState = mixed;
+export opaque type ResumableState = mixed;
 export opaque type BoundaryResources = mixed;
 export opaque type FormatContext = mixed;
-export opaque type SuspenseBoundaryID = mixed;
 export type {TransitionStatus};
 
 export const isPrimaryRenderer = false;
@@ -41,9 +40,6 @@ export const supportsRequestStorage = false;
 export const requestStorage: AsyncLocalStorage<Request> = (null: any);
 
 export const getChildFormatContext = $$$config.getChildFormatContext;
-export const UNINITIALIZED_SUSPENSE_BOUNDARY_ID =
-  $$$config.UNINITIALIZED_SUSPENSE_BOUNDARY_ID;
-export const assignSuspenseBoundaryID = $$$config.assignSuspenseBoundaryID;
 export const makeId = $$$config.makeId;
 export const pushTextInstance = $$$config.pushTextInstance;
 export const pushStartInstance = $$$config.pushStartInstance;
@@ -53,6 +49,10 @@ export const pushStartCompletedSuspenseBoundary =
 export const pushEndCompletedSuspenseBoundary =
   $$$config.pushEndCompletedSuspenseBoundary;
 export const pushSegmentFinale = $$$config.pushSegmentFinale;
+export const pushFormStateMarkerIsMatching =
+  $$$config.pushFormStateMarkerIsMatching;
+export const pushFormStateMarkerIsNotMatching =
+  $$$config.pushFormStateMarkerIsNotMatching;
 export const writeCompletedRoot = $$$config.writeCompletedRoot;
 export const writePlaceholder = $$$config.writePlaceholder;
 export const writeStartCompletedSuspenseBoundary =
diff --git a/packages/react-server/src/forks/ReactFizzConfig.dom-bun.js b/packages/react-server/src/forks/ReactFizzConfig.dom-bun.js
deleted file mode 100644
index 5f887770d211e..0000000000000
--- a/packages/react-server/src/forks/ReactFizzConfig.dom-bun.js
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-import type {Request} from 'react-server/src/ReactFizzServer';
-
-export * from 'react-dom-bindings/src/server/ReactFizzConfigDOM';
-
-export const supportsRequestStorage = false;
-export const requestStorage: AsyncLocalStorage<Request> = (null: any);
diff --git a/packages/react-server/src/forks/ReactFizzConfig.dom-edge-webpack.js b/packages/react-server/src/forks/ReactFizzConfig.dom-edge.js
similarity index 100%
rename from packages/react-server/src/forks/ReactFizzConfig.dom-edge-webpack.js
rename to packages/react-server/src/forks/ReactFizzConfig.dom-edge.js
diff --git a/packages/react-server/src/forks/ReactFizzConfig.dom-fb.js b/packages/react-server/src/forks/ReactFizzConfig.dom-fb.js
deleted file mode 100644
index 5f887770d211e..0000000000000
--- a/packages/react-server/src/forks/ReactFizzConfig.dom-fb.js
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-import type {Request} from 'react-server/src/ReactFizzServer';
-
-export * from 'react-dom-bindings/src/server/ReactFizzConfigDOM';
-
-export const supportsRequestStorage = false;
-export const requestStorage: AsyncLocalStorage<Request> = (null: any);
diff --git a/packages/react-server/src/forks/ReactFizzConfig.dom-node-esm.js b/packages/react-server/src/forks/ReactFizzConfig.dom-node-esm.js
deleted file mode 100644
index 71c6ab5a5586c..0000000000000
--- a/packages/react-server/src/forks/ReactFizzConfig.dom-node-esm.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-import {AsyncLocalStorage} from 'async_hooks';
-
-import type {Request} from 'react-server/src/ReactFizzServer';
-
-export * from 'react-dom-bindings/src/server/ReactFizzConfigDOM';
-
-export const supportsRequestStorage = true;
-export const requestStorage: AsyncLocalStorage<Request> =
-  new AsyncLocalStorage();
diff --git a/packages/react-server/src/forks/ReactFizzConfig.dom-node-webpack.js b/packages/react-server/src/forks/ReactFizzConfig.dom-node-webpack.js
deleted file mode 100644
index 71c6ab5a5586c..0000000000000
--- a/packages/react-server/src/forks/ReactFizzConfig.dom-node-webpack.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-import {AsyncLocalStorage} from 'async_hooks';
-
-import type {Request} from 'react-server/src/ReactFizzServer';
-
-export * from 'react-dom-bindings/src/server/ReactFizzConfigDOM';
-
-export const supportsRequestStorage = true;
-export const requestStorage: AsyncLocalStorage<Request> =
-  new AsyncLocalStorage();
diff --git a/packages/react-server/src/forks/ReactFizzConfig.dom-browser.js b/packages/react-server/src/forks/ReactFizzConfig.dom.js
similarity index 100%
rename from packages/react-server/src/forks/ReactFizzConfig.dom-browser.js
rename to packages/react-server/src/forks/ReactFizzConfig.dom.js
diff --git a/packages/react-server/src/forks/ReactFlightServerConfig.custom.js b/packages/react-server/src/forks/ReactFlightServerConfig.custom.js
index 1535d2ffde51e..4133395a1036e 100644
--- a/packages/react-server/src/forks/ReactFlightServerConfig.custom.js
+++ b/packages/react-server/src/forks/ReactFlightServerConfig.custom.js
@@ -12,7 +12,9 @@ import type {Request} from 'react-server/src/ReactFlightServer';
 export * from '../ReactFlightServerConfigBundlerCustom';
 
 export type Hints = any;
-export type HintModel = any;
+export type HintCode = any;
+// eslint-disable-next-line no-unused-vars
+export type HintModel<T: any> = any;
 
 export const isPrimaryRenderer = false;
 
diff --git a/packages/react-server/src/forks/ReactFlightServerConfig.dom-node-webpack.js b/packages/react-server/src/forks/ReactFlightServerConfig.dom-browser-esm.js
similarity index 86%
rename from packages/react-server/src/forks/ReactFlightServerConfig.dom-node-webpack.js
rename to packages/react-server/src/forks/ReactFlightServerConfig.dom-browser-esm.js
index 10d36f14a93eb..d52bf8ad7451e 100644
--- a/packages/react-server/src/forks/ReactFlightServerConfig.dom-node-webpack.js
+++ b/packages/react-server/src/forks/ReactFlightServerConfig.dom-browser-esm.js
@@ -10,7 +10,7 @@ import {AsyncLocalStorage} from 'async_hooks';
 
 import type {Request} from 'react-server/src/ReactFlightServer';
 
-export * from 'react-server-dom-webpack/src/ReactFlightServerConfigWebpackBundler';
+export * from 'react-server-dom-esm/src/ReactFlightServerConfigESMBundler';
 export * from 'react-dom-bindings/src/server/ReactFlightServerConfigDOM';
 
 export const supportsRequestStorage = true;
diff --git a/packages/react-server/src/forks/ReactFlightServerConfig.dom-edge-webpack.js b/packages/react-server/src/forks/ReactFlightServerConfig.dom-edge.js
similarity index 100%
rename from packages/react-server/src/forks/ReactFlightServerConfig.dom-edge-webpack.js
rename to packages/react-server/src/forks/ReactFlightServerConfig.dom-edge.js
diff --git a/packages/react-server/src/forks/ReactFlightServerConfig.dom-legacy.js b/packages/react-server/src/forks/ReactFlightServerConfig.dom-legacy.js
index 212bd8c89a66e..2e7273d82d696 100644
--- a/packages/react-server/src/forks/ReactFlightServerConfig.dom-legacy.js
+++ b/packages/react-server/src/forks/ReactFlightServerConfig.dom-legacy.js
@@ -9,7 +9,7 @@
 
 import type {Request} from 'react-server/src/ReactFlightServer';
 
-export * from 'react-server-dom-webpack/src/ReactFlightServerConfigWebpackBundler';
+export * from '../ReactFlightServerConfigBundlerCustom';
 export * from 'react-dom-bindings/src/server/ReactFlightServerConfigDOM';
 
 export const supportsRequestStorage = false;
diff --git a/packages/react-server/src/forks/ReactServerStreamConfig.custom.js b/packages/react-server/src/forks/ReactServerStreamConfig.custom.js
index 23bd4c35ddfa5..cc92a88b01e79 100644
--- a/packages/react-server/src/forks/ReactServerStreamConfig.custom.js
+++ b/packages/react-server/src/forks/ReactServerStreamConfig.custom.js
@@ -44,3 +44,4 @@ export const typedArrayToBinaryChunk = $$$config.typedArrayToBinaryChunk;
 export const clonePrecomputedChunk = $$$config.clonePrecomputedChunk;
 export const byteLengthOfChunk = $$$config.byteLengthOfChunk;
 export const byteLengthOfBinaryChunk = $$$config.byteLengthOfBinaryChunk;
+export const createFastHash = $$$config.createFastHash;
diff --git a/packages/react-server/src/forks/ReactServerStreamConfig.dom-edge-webpack.js b/packages/react-server/src/forks/ReactServerStreamConfig.dom-edge.js
similarity index 100%
rename from packages/react-server/src/forks/ReactServerStreamConfig.dom-edge-webpack.js
rename to packages/react-server/src/forks/ReactServerStreamConfig.dom-edge.js
diff --git a/packages/react-server/src/forks/ReactServerStreamConfig.dom-node-webpack.js b/packages/react-server/src/forks/ReactServerStreamConfig.dom-node-webpack.js
deleted file mode 100644
index 1a3871aef2e8b..0000000000000
--- a/packages/react-server/src/forks/ReactServerStreamConfig.dom-node-webpack.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-export * from '../ReactServerStreamConfigNode';
diff --git a/packages/react-test-renderer/src/ReactFiberConfigTestHost.js b/packages/react-test-renderer/src/ReactFiberConfigTestHost.js
index 2fb448d63c8d2..e374b25922b99 100644
--- a/packages/react-test-renderer/src/ReactFiberConfigTestHost.js
+++ b/packages/react-test-renderer/src/ReactFiberConfigTestHost.js
@@ -54,12 +54,10 @@ export * from 'react-reconciler/src/ReactFiberConfigWithNoResources';
 export * from 'react-reconciler/src/ReactFiberConfigWithNoSingletons';
 
 const NO_CONTEXT = {};
-const UPDATE_SIGNAL = {};
 const nodeToInstanceMap = new WeakMap<any, Instance>();
 
 if (__DEV__) {
   Object.freeze(NO_CONTEXT);
-  Object.freeze(UPDATE_SIGNAL);
 }
 
 export function getPublicInstance(inst: Instance | TextInstance): $FlowFixMe {
@@ -186,17 +184,6 @@ export function finalizeInitialChildren(
   return false;
 }
 
-export function prepareUpdate(
-  testElement: Instance,
-  type: string,
-  oldProps: Props,
-  newProps: Props,
-  rootContainerInstance: Container,
-  hostContext: Object,
-): null | {...} {
-  return UPDATE_SIGNAL;
-}
-
 export function shouldSetTextContent(type: string, props: Props): boolean {
   return false;
 }
diff --git a/packages/react/index.experimental.js b/packages/react/index.experimental.js
index 4bf5f67b74e8e..081fa2746964b 100644
--- a/packages/react/index.experimental.js
+++ b/packages/react/index.experimental.js
@@ -33,6 +33,7 @@ export {
   unstable_Cache,
   unstable_DebugTracingMode,
   unstable_Offscreen,
+  unstable_postpone,
   unstable_getCacheSignal,
   unstable_getCacheForType,
   unstable_SuspenseList,
diff --git a/packages/react/src/React.js b/packages/react/src/React.js
index aff0401792f86..b45a0cda05370 100644
--- a/packages/react/src/React.js
+++ b/packages/react/src/React.js
@@ -36,6 +36,7 @@ import {lazy} from './ReactLazy';
 import {forwardRef} from './ReactForwardRef';
 import {memo} from './ReactMemo';
 import {cache} from './ReactCache';
+import {postpone} from './ReactPostpone';
 import {
   getCacheSignal,
   getCacheForType,
@@ -100,6 +101,7 @@ export {
   lazy,
   memo,
   cache,
+  postpone as unstable_postpone,
   useCallback,
   useContext,
   useEffect,
diff --git a/packages/react/src/ReactPostpone.js b/packages/react/src/ReactPostpone.js
new file mode 100644
index 0000000000000..0496d2985b380
--- /dev/null
+++ b/packages/react/src/ReactPostpone.js
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import {REACT_POSTPONE_TYPE} from 'shared/ReactSymbols';
+
+declare class Postpone extends Error {
+  $$typeof: symbol;
+}
+
+export type {Postpone};
+
+export function postpone(reason: string): void {
+  // eslint-disable-next-line react-internal/prod-error-codes
+  const postponeInstance: Postpone = (new Error(reason): any);
+  postponeInstance.$$typeof = REACT_POSTPONE_TYPE;
+  throw postponeInstance;
+}
diff --git a/packages/react/src/ReactSharedSubset.experimental.js b/packages/react/src/ReactSharedSubset.experimental.js
index 460c1fa19a6cf..ed5340df9de03 100644
--- a/packages/react/src/ReactSharedSubset.experimental.js
+++ b/packages/react/src/ReactSharedSubset.experimental.js
@@ -32,6 +32,7 @@ export {
   unstable_SuspenseList,
   unstable_getCacheSignal,
   unstable_getCacheForType,
+  unstable_postpone,
   useId,
   useCallback,
   useContext,
diff --git a/packages/scheduler/src/__tests__/SchedulerPostTask-test.js b/packages/scheduler/src/__tests__/SchedulerPostTask-test.js
index d76ca570c2f31..c572ec595bb10 100644
--- a/packages/scheduler/src/__tests__/SchedulerPostTask-test.js
+++ b/packages/scheduler/src/__tests__/SchedulerPostTask-test.js
@@ -83,7 +83,8 @@ describe('SchedulerPostTask', () => {
     const scheduler = {};
     global.scheduler = scheduler;
 
-    scheduler.postTask = function (callback, {priority, signal}) {
+    scheduler.postTask = function (callback, {signal}) {
+      const {priority} = signal;
       const id = idCounter++;
       log(
         `Post Task ${id} [${priority === undefined ? '<default>' : priority}]`,
@@ -94,7 +95,8 @@ describe('SchedulerPostTask', () => {
       });
     };
 
-    scheduler.yield = function ({priority, signal}) {
+    scheduler.yield = function ({signal}) {
+      const {priority} = signal;
       const id = idCounter++;
       log(`Yield ${id} [${priority === undefined ? '<default>' : priority}]`);
       const controller = signal._controller;
@@ -111,8 +113,8 @@ describe('SchedulerPostTask', () => {
     };
 
     global.TaskController = class TaskController {
-      constructor() {
-        this.signal = {_controller: this};
+      constructor({priority}) {
+        this.signal = {_controller: this, priority};
       }
       abort() {
         const task = taskQueue.get(this);
diff --git a/packages/scheduler/src/forks/Scheduler.js b/packages/scheduler/src/forks/Scheduler.js
index b0d7469d9ea49..2263b706aad35 100644
--- a/packages/scheduler/src/forks/Scheduler.js
+++ b/packages/scheduler/src/forks/Scheduler.js
@@ -152,7 +152,7 @@ function handleTimeout(currentTime: number) {
   if (!isHostCallbackScheduled) {
     if (peek(taskQueue) !== null) {
       isHostCallbackScheduled = true;
-      requestHostCallback(flushWork);
+      requestHostCallback();
     } else {
       const firstTimer = peek(timerQueue);
       if (firstTimer !== null) {
@@ -162,7 +162,7 @@ function handleTimeout(currentTime: number) {
   }
 }
 
-function flushWork(hasTimeRemaining: boolean, initialTime: number) {
+function flushWork(initialTime: number) {
   if (enableProfiling) {
     markSchedulerUnsuspended(initialTime);
   }
@@ -180,7 +180,7 @@ function flushWork(hasTimeRemaining: boolean, initialTime: number) {
   try {
     if (enableProfiling) {
       try {
-        return workLoop(hasTimeRemaining, initialTime);
+        return workLoop(initialTime);
       } catch (error) {
         if (currentTask !== null) {
           const currentTime = getCurrentTime();
@@ -193,7 +193,7 @@ function flushWork(hasTimeRemaining: boolean, initialTime: number) {
       }
     } else {
       // No catch in prod code path.
-      return workLoop(hasTimeRemaining, initialTime);
+      return workLoop(initialTime);
     }
   } finally {
     currentTask = null;
@@ -206,7 +206,7 @@ function flushWork(hasTimeRemaining: boolean, initialTime: number) {
   }
 }
 
-function workLoop(hasTimeRemaining: boolean, initialTime: number) {
+function workLoop(initialTime: number) {
   let currentTime = initialTime;
   advanceTimers(currentTime);
   currentTask = peek(taskQueue);
@@ -214,10 +214,7 @@ function workLoop(hasTimeRemaining: boolean, initialTime: number) {
     currentTask !== null &&
     !(enableSchedulerDebugging && isSchedulerPaused)
   ) {
-    if (
-      currentTask.expirationTime > currentTime &&
-      (!hasTimeRemaining || shouldYieldToHost())
-    ) {
+    if (currentTask.expirationTime > currentTime && shouldYieldToHost()) {
       // This currentTask hasn't expired, and we've reached the deadline.
       break;
     }
@@ -422,7 +419,7 @@ function unstable_scheduleCallback(
     // wait until the next time we yield.
     if (!isHostCallbackScheduled && !isPerformingWork) {
       isHostCallbackScheduled = true;
-      requestHostCallback(flushWork);
+      requestHostCallback();
     }
   }
 
@@ -437,7 +434,7 @@ function unstable_continueExecution() {
   isSchedulerPaused = false;
   if (!isHostCallbackScheduled && !isPerformingWork) {
     isHostCallbackScheduled = true;
-    requestHostCallback(flushWork);
+    requestHostCallback();
   }
 }
 
@@ -465,12 +462,6 @@ function unstable_getCurrentPriorityLevel(): PriorityLevel {
 }
 
 let isMessageLoopRunning = false;
-let scheduledHostCallback:
-  | null
-  | ((
-      hasTimeRemaining: boolean,
-      initialTime: DOMHighResTimeStamp | number,
-    ) => boolean) = null;
 let taskTimeoutID: TimeoutID = (-1: any);
 
 // Scheduler periodically yields in case there is other work on the main
@@ -562,23 +553,21 @@ function forceFrameRate(fps: number) {
 }
 
 const performWorkUntilDeadline = () => {
-  if (scheduledHostCallback !== null) {
+  if (isMessageLoopRunning) {
     const currentTime = getCurrentTime();
     // Keep track of the start time so we can measure how long the main thread
     // has been blocked.
     startTime = currentTime;
-    const hasTimeRemaining = true;
 
     // If a scheduler task throws, exit the current browser task so the
     // error can be observed.
     //
     // Intentionally not using a try-catch, since that makes some debugging
-    // techniques harder. Instead, if `scheduledHostCallback` errors, then
-    // `hasMoreWork` will remain true, and we'll continue the work loop.
+    // techniques harder. Instead, if `flushWork` errors, then `hasMoreWork` will
+    // remain true, and we'll continue the work loop.
     let hasMoreWork = true;
     try {
-      // $FlowFixMe[not-a-function] found when upgrading Flow
-      hasMoreWork = scheduledHostCallback(hasTimeRemaining, currentTime);
+      hasMoreWork = flushWork(currentTime);
     } finally {
       if (hasMoreWork) {
         // If there's more work, schedule the next message event at the end
@@ -586,11 +575,8 @@ const performWorkUntilDeadline = () => {
         schedulePerformWorkUntilDeadline();
       } else {
         isMessageLoopRunning = false;
-        scheduledHostCallback = null;
       }
     }
-  } else {
-    isMessageLoopRunning = false;
   }
   // Yielding to the browser will give it a chance to paint, so we can
   // reset this.
@@ -630,10 +616,7 @@ if (typeof localSetImmediate === 'function') {
   };
 }
 
-function requestHostCallback(
-  callback: (hasTimeRemaining: boolean, initialTime: number) => boolean,
-) {
-  scheduledHostCallback = callback;
+function requestHostCallback() {
   if (!isMessageLoopRunning) {
     isMessageLoopRunning = true;
     schedulePerformWorkUntilDeadline();
diff --git a/packages/scheduler/src/forks/SchedulerPostTask.js b/packages/scheduler/src/forks/SchedulerPostTask.js
index 5af147117ef56..e5f45c06ce8c9 100644
--- a/packages/scheduler/src/forks/SchedulerPostTask.js
+++ b/packages/scheduler/src/forks/SchedulerPostTask.js
@@ -10,7 +10,7 @@
 import type {PriorityLevel} from '../SchedulerPriorities';
 
 declare class TaskController {
-  constructor(priority?: string): TaskController;
+  constructor(options?: {priority?: string}): TaskController;
   signal: mixed;
   abort(): void;
 }
@@ -95,9 +95,8 @@ export function unstable_scheduleCallback<T>(
       break;
   }
 
-  const controller = new TaskController();
+  const controller = new TaskController({priority: postTaskPriority});
   const postTaskOptions = {
-    priority: postTaskPriority,
     delay: typeof options === 'object' && options !== null ? options.delay : 0,
     signal: controller.signal,
   };
@@ -130,9 +129,10 @@ function runTask<T>(
     if (typeof result === 'function') {
       // Assume this is a continuation
       const continuation: SchedulerCallback<T> = (result: any);
-      const continuationController = new TaskController();
-      const continuationOptions = {
+      const continuationController = new TaskController({
         priority: postTaskPriority,
+      });
+      const continuationOptions = {
         signal: continuationController.signal,
       };
       // Update the original callback node's controller, since even though we're
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 3813798d09b3e..0a70b8cbe3818 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -86,6 +86,8 @@ export const enableFormActions = __EXPERIMENTAL__;
 
 export const enableBinaryFlight = __EXPERIMENTAL__;
 
+export const enablePostpone = __EXPERIMENTAL__;
+
 export const enableTransitionTracing = false;
 
 // No known bugs, but needs performance testing
@@ -116,9 +118,6 @@ export const enableUseEffectEventHook = __EXPERIMENTAL__;
 // (handled with an MutationObserver) instead of inline-scripts
 export const enableFizzExternalRuntime = true;
 
-// Performance related test
-export const diffInCommitPhase = __EXPERIMENTAL__;
-
 export const enableAsyncActions = __EXPERIMENTAL__;
 
 export const alwaysThrottleRetries = true;
diff --git a/packages/shared/ReactSymbols.js b/packages/shared/ReactSymbols.js
index 503c6ef0c417f..76df61b393aaf 100644
--- a/packages/shared/ReactSymbols.js
+++ b/packages/shared/ReactSymbols.js
@@ -49,6 +49,8 @@ export const REACT_MEMO_CACHE_SENTINEL: symbol = Symbol.for(
   'react.memo_cache_sentinel',
 );
 
+export const REACT_POSTPONE_TYPE: symbol = Symbol.for('react.postpone');
+
 const MAYBE_ITERATOR_SYMBOL = Symbol.iterator;
 const FAUX_ITERATOR_SYMBOL = '@@iterator';
 
diff --git a/packages/shared/ReactTypes.js b/packages/shared/ReactTypes.js
index 625d687e8829f..7bdbb09bf656b 100644
--- a/packages/shared/ReactTypes.js
+++ b/packages/shared/ReactTypes.js
@@ -174,3 +174,13 @@ export type ReactCustomFormAction = {
   target?: string,
   data?: null | FormData,
 };
+
+// This is an opaque type returned by decodeFormState on the server, but it's
+// defined in this shared file because the same type is used by React on
+// the client.
+export type ReactFormState<S, ReferenceId> = [
+  S /* actual state value */,
+  string /* key path */,
+  ReferenceId /* Server Reference ID */,
+  number /* number of bound arguments */,
+];
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 70909c55a0309..299fd43418410 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -37,6 +37,7 @@ export const enableCacheElement = true;
 export const enableFetchInstrumentation = false;
 export const enableFormActions = true; // Doesn't affect Native
 export const enableBinaryFlight = true;
+export const enablePostpone = false;
 export const enableSchedulerDebugging = false;
 export const debugRenderPhaseSideEffectsForStrictMode = true;
 export const disableJavaScriptURLs = false;
@@ -84,7 +85,6 @@ export const useModernStrictMode = false;
 export const enableDO_NOT_USE_disableStrictPassiveEffect = false;
 export const enableFizzExternalRuntime = false;
 
-export const diffInCommitPhase = true;
 export const enableAsyncActions = false;
 
 // Flow magic to verify the exports of this file match the original version.
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 675f937d58d49..6eec17ea53046 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -25,6 +25,7 @@ export const enableCacheElement = false;
 export const enableFetchInstrumentation = false;
 export const enableFormActions = true; // Doesn't affect Native
 export const enableBinaryFlight = true;
+export const enablePostpone = false;
 export const disableJavaScriptURLs = false;
 export const disableCommentsAsDOMContainers = true;
 export const disableInputAttributeSyncing = false;
@@ -72,7 +73,6 @@ export const enableDO_NOT_USE_disableStrictPassiveEffect = false;
 export const enableFizzExternalRuntime = false;
 export const enableDeferRootSchedulingToMicrotask = true;
 
-export const diffInCommitPhase = true;
 export const enableAsyncActions = false;
 
 export const alwaysThrottleRetries = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index e83c4dab44b9d..7bc3b64e0fd69 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -25,6 +25,7 @@ export const enableCacheElement = __EXPERIMENTAL__;
 export const enableFetchInstrumentation = true;
 export const enableFormActions = true; // Doesn't affect Test Renderer
 export const enableBinaryFlight = true;
+export const enablePostpone = false;
 export const disableJavaScriptURLs = false;
 export const disableCommentsAsDOMContainers = true;
 export const disableInputAttributeSyncing = false;
@@ -72,7 +73,6 @@ export const enableDO_NOT_USE_disableStrictPassiveEffect = false;
 export const enableFizzExternalRuntime = false;
 export const enableDeferRootSchedulingToMicrotask = true;
 
-export const diffInCommitPhase = true;
 export const enableAsyncActions = false;
 
 export const alwaysThrottleRetries = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index 9ddc9004125f5..e54353abd6f4f 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -25,6 +25,7 @@ export const enableCacheElement = true;
 export const enableFetchInstrumentation = false;
 export const enableFormActions = true; // Doesn't affect Test Renderer
 export const enableBinaryFlight = true;
+export const enablePostpone = false;
 export const disableJavaScriptURLs = false;
 export const disableCommentsAsDOMContainers = true;
 export const disableInputAttributeSyncing = false;
@@ -69,7 +70,6 @@ export const useModernStrictMode = false;
 export const enableDO_NOT_USE_disableStrictPassiveEffect = false;
 export const enableDeferRootSchedulingToMicrotask = true;
 
-export const diffInCommitPhase = true;
 export const enableAsyncActions = false;
 
 export const alwaysThrottleRetries = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index bdfc1acd77eed..dc90c6f837103 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -25,6 +25,7 @@ export const enableCacheElement = true;
 export const enableFetchInstrumentation = false;
 export const enableFormActions = true; // Doesn't affect Test Renderer
 export const enableBinaryFlight = true;
+export const enablePostpone = false;
 export const enableSchedulerDebugging = false;
 export const disableJavaScriptURLs = false;
 export const disableCommentsAsDOMContainers = true;
@@ -72,7 +73,6 @@ export const enableDO_NOT_USE_disableStrictPassiveEffect = false;
 export const enableFizzExternalRuntime = false;
 export const enableDeferRootSchedulingToMicrotask = true;
 
-export const diffInCommitPhase = true;
 export const enableAsyncActions = false;
 
 export const alwaysThrottleRetries = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index a1197be405837..db3adeb56d770 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -25,7 +25,6 @@ export const enableUnifiedSyncLane = __VARIANT__;
 export const enableTransitionTracing = __VARIANT__;
 export const enableCustomElementPropertySupport = __VARIANT__;
 export const enableDeferRootSchedulingToMicrotask = __VARIANT__;
-export const diffInCommitPhase = __VARIANT__;
 export const enableAsyncActions = __VARIANT__;
 export const alwaysThrottleRetries = __VARIANT__;
 export const enableDO_NOT_USE_disableStrictPassiveEffect = __VARIANT__;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index c2908e4335b61..ef2ef9d933690 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -27,7 +27,6 @@ export const {
   enableTransitionTracing,
   enableCustomElementPropertySupport,
   enableDeferRootSchedulingToMicrotask,
-  diffInCommitPhase,
   enableAsyncActions,
   alwaysThrottleRetries,
   enableDO_NOT_USE_disableStrictPassiveEffect,
@@ -77,6 +76,8 @@ export const enableFormActions = false;
 
 export const enableBinaryFlight = true;
 
+export const enablePostpone = false;
+
 export const disableJavaScriptURLs = true;
 
 // TODO: www currently relies on this feature. It's disabled in open source.
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index 395b61cc70119..dae06b5c68079 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -468,5 +468,13 @@
   "480": "File/Blob fields are not yet supported in progressive forms. It probably means you are closing over binary data or FormData in a Server Action.",
   "481": "Tried to encode a Server Action from a different instance than the encoder is from. This is a bug in React.",
   "482": "async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding `'use client'` to a module that was originally written for the server.",
-  "483": "Hooks are not supported inside an async component. This error is often caused by accidentally adding `'use client'` to a module that was originally written for the server."
-}
+  "483": "Hooks are not supported inside an async component. This error is often caused by accidentally adding `'use client'` to a module that was originally written for the server.",
+  "484": "A Server Component was postponed. The reason is omitted in production builds to avoid leaking sensitive details.",
+  "485": "Cannot update form state while rendering.",
+  "486": "It should not be possible to postpone at the root. This is a bug in React.",
+  "487": "We should not have any resumable nodes in the shell. This is a bug in React.",
+  "488": "Couldn't find all resumable slots by key/index during replaying. The tree doesn't match so React will fallback to client rendering.",
+  "489": "Expected to see a component of type \"%s\" in this slot. The tree doesn't match so React will fallback to client rendering.",
+  "490": "Expected to see a Suspense boundary in this slot. The tree doesn't match so React will fallback to client rendering.",
+  "491": "It should not be possible to postpone both at the root of an element as well as a slot below. This is a bug in React."
+}
\ No newline at end of file
diff --git a/scripts/flow/config/flowconfig b/scripts/flow/config/flowconfig
index f8e526d71d2ff..73bcfed4d8d9f 100644
--- a/scripts/flow/config/flowconfig
+++ b/scripts/flow/config/flowconfig
@@ -36,4 +36,4 @@ munge_underscores=false
 %REACT_RENDERER_FLOW_OPTIONS%
 
 [version]
-^0.209.0
+^0.217.0
diff --git a/scripts/flow/createFlowConfigs.js b/scripts/flow/createFlowConfigs.js
index 8a7c22b6d337c..cb4a89b5d95e3 100644
--- a/scripts/flow/createFlowConfigs.js
+++ b/scripts/flow/createFlowConfigs.js
@@ -9,6 +9,7 @@
 
 const chalk = require('chalk');
 const fs = require('fs');
+const path = require('path');
 const mkdirp = require('mkdirp');
 const inlinedHostConfigs = require('../shared/inlinedHostConfigs');
 
@@ -16,6 +17,40 @@ const configTemplate = fs
   .readFileSync(__dirname + '/config/flowconfig')
   .toString();
 
+// stores all forks discovered during config generation
+const allForks = new Set();
+// maps forked file to the base path containing it and it's forks (it's parent)
+const forkedFiles = new Map();
+
+function findForks(file) {
+  const basePath = path.join(file, '..');
+  const forksPath = path.join(basePath, 'forks');
+  const forks = fs.readdirSync(path.join('packages', forksPath));
+  forks.forEach(f => allForks.add('forks/' + f));
+  forkedFiles.set(file, basePath);
+  return basePath;
+}
+
+function addFork(forks, renderer, file) {
+  let basePath = forkedFiles.get(file);
+  if (!basePath) {
+    basePath = findForks(file);
+  }
+
+  const baseFilename = file.slice(basePath.length + 1);
+
+  const parts = renderer.split('-');
+  while (parts.length) {
+    const candidate = `forks/${baseFilename}.${parts.join('-')}.js`;
+    if (allForks.has(candidate)) {
+      forks.set(candidate, `${baseFilename}$$`);
+      return;
+    }
+    parts.pop();
+  }
+  throw new Error(`Cannot find fork for ${file} for renderer ${renderer}`);
+}
+
 function writeConfig(
   renderer,
   rendererInfo,
@@ -44,34 +79,39 @@ function writeConfig(
       }
       ignoredPaths.push(`.*/packages/${otherPath}`);
     });
+  });
+
+  const forks = new Map();
+  addFork(forks, renderer, 'react-reconciler/src/ReactFiberConfig');
+  addFork(forks, serverRenderer, 'react-server/src/ReactServerStreamConfig');
+  addFork(forks, serverRenderer, 'react-server/src/ReactFizzConfig');
+  addFork(forks, flightRenderer, 'react-server/src/ReactFlightServerConfig');
+  addFork(forks, flightRenderer, 'react-client/src/ReactFlightClientConfig');
+  forks.set(
+    'react-devtools-shared/src/config/DevToolsFeatureFlags.default',
+    'react-devtools-feature-flags',
+  );
 
-    if (
-      otherRenderer.shortName !== serverRenderer &&
-      otherRenderer.shortName !== flightRenderer
-    ) {
-      ignoredPaths.push(
-        `.*/packages/.*/forks/.*\\.${otherRenderer.shortName}.js`,
-      );
+  allForks.forEach(fork => {
+    if (!forks.has(fork)) {
+      ignoredPaths.push(`.*/packages/.*/${fork}`);
     }
   });
 
+  let moduleMappings = '';
+  forks.forEach((source, target) => {
+    moduleMappings += `module.name_mapper='${source.slice(
+      source.lastIndexOf('/') + 1,
+    )}' -> '${target}'\n`;
+  });
+
   const config = configTemplate
     .replace(
       '%CI_MAX_WORKERS%\n',
       // On CI, we seem to need to limit workers.
       process.env.CI ? 'server.max_workers=4\n' : '',
     )
-    .replace(
-      '%REACT_RENDERER_FLOW_OPTIONS%',
-      `
-module.name_mapper='ReactFiberConfig$$' -> 'forks/ReactFiberConfig.${renderer}'
-module.name_mapper='ReactServerStreamConfig$$' -> 'forks/ReactServerStreamConfig.${serverRenderer}'
-module.name_mapper='ReactFizzConfig$$' -> 'forks/ReactFizzConfig.${serverRenderer}'
-module.name_mapper='ReactFlightServerConfig$$' -> 'forks/ReactFlightServerConfig.${flightRenderer}'
-module.name_mapper='ReactFlightClientConfig$$' -> 'forks/ReactFlightClientConfig.${flightRenderer}'
-module.name_mapper='react-devtools-feature-flags' -> 'react-devtools-shared/src/config/DevToolsFeatureFlags.default'
-    `.trim(),
-    )
+    .replace('%REACT_RENDERER_FLOW_OPTIONS%', moduleMappings.trim())
     .replace('%REACT_RENDERER_FLOW_IGNORES%', ignoredPaths.join('\n'));
 
   const disclaimer = `
diff --git a/scripts/flow/environment.js b/scripts/flow/environment.js
index 18ba25264138e..7f3996de04fd8 100644
--- a/scripts/flow/environment.js
+++ b/scripts/flow/environment.js
@@ -281,3 +281,9 @@ declare module 'node:worker_threads' {
     port2: MessagePort;
   }
 }
+
+declare var Bun: {
+  hash(
+    input: string | $TypedArray | DataView | ArrayBuffer | SharedArrayBuffer,
+  ): number,
+};
diff --git a/scripts/jest/config.base.js b/scripts/jest/config.base.js
index 871995b0677fe..0460888a0e869 100644
--- a/scripts/jest/config.base.js
+++ b/scripts/jest/config.base.js
@@ -2,9 +2,6 @@
 
 module.exports = {
   globalSetup: require.resolve('./setupGlobal.js'),
-  haste: {
-    hasteImplModulePath: require.resolve('./noHaste.js'),
-  },
   modulePathIgnorePatterns: [
     '<rootDir>/scripts/rollup/shims/',
     '<rootDir>/scripts/bench/',
diff --git a/scripts/jest/noHaste.js b/scripts/jest/noHaste.js
deleted file mode 100644
index bf0e315b22fde..0000000000000
--- a/scripts/jest/noHaste.js
+++ /dev/null
@@ -1,8 +0,0 @@
-'use strict';
-
-module.exports = {
-  getHasteName() {
-    // We never want Haste.
-    return null;
-  },
-};
diff --git a/scripts/jest/setupHostConfigs.js b/scripts/jest/setupHostConfigs.js
index 85fe96cd2ac06..5ea6eb0f5810d 100644
--- a/scripts/jest/setupHostConfigs.js
+++ b/scripts/jest/setupHostConfigs.js
@@ -1,6 +1,7 @@
 'use strict';
 
 const fs = require('fs');
+const nodePath = require('path');
 const inlinedHostConfigs = require('../shared/inlinedHostConfigs');
 
 function resolveEntryFork(resolvedEntry, isFBBundle) {
@@ -117,7 +118,20 @@ function mockAllConfigs(rendererInfo) {
     jest.mock(path, () => {
       let idx = path.lastIndexOf('/');
       let forkPath = path.slice(0, idx) + '/forks' + path.slice(idx);
-      return jest.requireActual(`${forkPath}.${rendererInfo.shortName}.js`);
+      let parts = rendererInfo.shortName.split('-');
+      while (parts.length) {
+        try {
+          const candidate = `${forkPath}.${parts.join('-')}.js`;
+          fs.statSync(nodePath.join(process.cwd(), 'packages', candidate));
+          return jest.requireActual(candidate);
+        } catch (error) {
+          // try without a part
+        }
+        parts.pop();
+      }
+      throw new Error(
+        `Expected to find a fork for ${path} but did not find one.`
+      );
     });
   });
 }
diff --git a/scripts/rollup/build.js b/scripts/rollup/build.js
index 6e6384aba66f8..fe0158a9a477d 100644
--- a/scripts/rollup/build.js
+++ b/scripts/rollup/build.js
@@ -341,153 +341,162 @@ function getPlugins(
   pureExternalModules,
   bundle
 ) {
-  const forks = Modules.getForks(bundleType, entry, moduleType, bundle);
-  const isProduction = isProductionBundleType(bundleType);
-  const isProfiling = isProfilingBundleType(bundleType);
-  const isUMDBundle =
-    bundleType === UMD_DEV ||
-    bundleType === UMD_PROD ||
-    bundleType === UMD_PROFILING;
-  const isFBWWWBundle =
-    bundleType === FB_WWW_DEV ||
-    bundleType === FB_WWW_PROD ||
-    bundleType === FB_WWW_PROFILING;
-  const isRNBundle =
-    bundleType === RN_OSS_DEV ||
-    bundleType === RN_OSS_PROD ||
-    bundleType === RN_OSS_PROFILING ||
-    bundleType === RN_FB_DEV ||
-    bundleType === RN_FB_PROD ||
-    bundleType === RN_FB_PROFILING;
-  const shouldStayReadable = isFBWWWBundle || isRNBundle || forcePrettyOutput;
-  return [
-    // Keep dynamic imports as externals
-    dynamicImports(),
-    {
-      name: 'rollup-plugin-flow-remove-types',
-      transform(code) {
-        const transformed = flowRemoveTypes(code);
-        return {
-          code: transformed.toString(),
-          map: transformed.generateMap(),
-        };
-      },
-    },
-    // Shim any modules that need forking in this environment.
-    useForks(forks),
-    // Ensure we don't try to bundle any fbjs modules.
-    forbidFBJSImports(),
-    // Use Node resolution mechanism.
-    resolve({
-      // skip: externals, // TODO: options.skip was removed in @rollup/plugin-node-resolve 3.0.0
-    }),
-    // Remove license headers from individual modules
-    stripBanner({
-      exclude: 'node_modules/**/*',
-    }),
-    // Compile to ES2015.
-    babel(
-      getBabelConfig(
-        updateBabelOptions,
-        bundleType,
-        packageName,
-        externals,
-        !isProduction,
-        bundle
-      )
-    ),
-    // Remove 'use strict' from individual source files.
-    {
-      transform(source) {
-        return source.replace(/['"]use strict["']/g, '');
-      },
-    },
-    // Turn __DEV__ and process.env checks into constants.
-    replace({
-      preventAssignment: true,
-      values: {
-        __DEV__: isProduction ? 'false' : 'true',
-        __PROFILE__: isProfiling || !isProduction ? 'true' : 'false',
-        __UMD__: isUMDBundle ? 'true' : 'false',
-        'process.env.NODE_ENV': isProduction ? "'production'" : "'development'",
-        __EXPERIMENTAL__,
+  try {
+    const forks = Modules.getForks(bundleType, entry, moduleType, bundle);
+    const isProduction = isProductionBundleType(bundleType);
+    const isProfiling = isProfilingBundleType(bundleType);
+    const isUMDBundle =
+      bundleType === UMD_DEV ||
+      bundleType === UMD_PROD ||
+      bundleType === UMD_PROFILING;
+    const isFBWWWBundle =
+      bundleType === FB_WWW_DEV ||
+      bundleType === FB_WWW_PROD ||
+      bundleType === FB_WWW_PROFILING;
+    const isRNBundle =
+      bundleType === RN_OSS_DEV ||
+      bundleType === RN_OSS_PROD ||
+      bundleType === RN_OSS_PROFILING ||
+      bundleType === RN_FB_DEV ||
+      bundleType === RN_FB_PROD ||
+      bundleType === RN_FB_PROFILING;
+    const shouldStayReadable = isFBWWWBundle || isRNBundle || forcePrettyOutput;
+    return [
+      // Keep dynamic imports as externals
+      dynamicImports(),
+      {
+        name: 'rollup-plugin-flow-remove-types',
+        transform(code) {
+          const transformed = flowRemoveTypes(code);
+          return {
+            code: transformed.toString(),
+            map: transformed.generateMap(),
+          };
+        },
       },
-    }),
-    // The CommonJS plugin *only* exists to pull "art" into "react-art".
-    // I'm going to port "art" to ES modules to avoid this problem.
-    // Please don't enable this for anything else!
-    isUMDBundle && entry === 'react-art' && commonjs(),
-    // Apply dead code elimination and/or minification.
-    // closure doesn't yet support leaving ESM imports intact
-    isProduction &&
-      bundleType !== ESM_PROD &&
-      closure({
-        compilation_level: 'SIMPLE',
-        language_in: 'ECMASCRIPT_2020',
-        language_out:
-          bundleType === NODE_ES2015
-            ? 'ECMASCRIPT_2020'
-            : bundleType === BROWSER_SCRIPT
-            ? 'ECMASCRIPT5'
-            : 'ECMASCRIPT5_STRICT',
-        emit_use_strict:
-          bundleType !== BROWSER_SCRIPT &&
-          bundleType !== ESM_PROD &&
-          bundleType !== ESM_DEV,
-        env: 'CUSTOM',
-        warning_level: 'QUIET',
-        apply_input_source_maps: false,
-        use_types_for_optimization: false,
-        process_common_js_modules: false,
-        rewrite_polyfills: false,
-        inject_libraries: false,
-        allow_dynamic_import: true,
-
-        // Don't let it create global variables in the browser.
-        // https://github.com/facebook/react/issues/10909
-        assume_function_wrapper: !isUMDBundle,
-        renaming: !shouldStayReadable,
+      // Shim any modules that need forking in this environment.
+      useForks(forks),
+      // Ensure we don't try to bundle any fbjs modules.
+      forbidFBJSImports(),
+      // Use Node resolution mechanism.
+      resolve({
+        // skip: externals, // TODO: options.skip was removed in @rollup/plugin-node-resolve 3.0.0
       }),
-    // Add the whitespace back if necessary.
-    shouldStayReadable &&
-      prettier({
-        parser: 'flow',
-        singleQuote: false,
-        trailingComma: 'none',
-        bracketSpacing: true,
+      // Remove license headers from individual modules
+      stripBanner({
+        exclude: 'node_modules/**/*',
       }),
-    // License and haste headers, top-level `if` blocks.
-    {
-      renderChunk(source) {
-        return Wrappers.wrapBundle(
-          source,
-          bundleType,
-          globalName,
-          filename,
-          moduleType,
-          bundle.wrapWithModuleBoundaries
-        );
-      },
-    },
-    // Record bundle size.
-    sizes({
-      getSize: (size, gzip) => {
-        const currentSizes = Stats.currentBuildResults.bundleSizes;
-        const recordIndex = currentSizes.findIndex(
-          record =>
-            record.filename === filename && record.bundleType === bundleType
-        );
-        const index = recordIndex !== -1 ? recordIndex : currentSizes.length;
-        currentSizes[index] = {
-          filename,
+      // Compile to ES2015.
+      babel(
+        getBabelConfig(
+          updateBabelOptions,
           bundleType,
           packageName,
-          size,
-          gzip,
-        };
+          externals,
+          !isProduction,
+          bundle
+        )
+      ),
+      // Remove 'use strict' from individual source files.
+      {
+        transform(source) {
+          return source.replace(/['"]use strict["']/g, '');
+        },
+      },
+      // Turn __DEV__ and process.env checks into constants.
+      replace({
+        preventAssignment: true,
+        values: {
+          __DEV__: isProduction ? 'false' : 'true',
+          __PROFILE__: isProfiling || !isProduction ? 'true' : 'false',
+          __UMD__: isUMDBundle ? 'true' : 'false',
+          'process.env.NODE_ENV': isProduction
+            ? "'production'"
+            : "'development'",
+          __EXPERIMENTAL__,
+        },
+      }),
+      // The CommonJS plugin *only* exists to pull "art" into "react-art".
+      // I'm going to port "art" to ES modules to avoid this problem.
+      // Please don't enable this for anything else!
+      isUMDBundle && entry === 'react-art' && commonjs(),
+      // Apply dead code elimination and/or minification.
+      // closure doesn't yet support leaving ESM imports intact
+      isProduction &&
+        bundleType !== ESM_PROD &&
+        closure({
+          compilation_level: 'SIMPLE',
+          language_in: 'ECMASCRIPT_2020',
+          language_out:
+            bundleType === NODE_ES2015
+              ? 'ECMASCRIPT_2020'
+              : bundleType === BROWSER_SCRIPT
+              ? 'ECMASCRIPT5'
+              : 'ECMASCRIPT5_STRICT',
+          emit_use_strict:
+            bundleType !== BROWSER_SCRIPT &&
+            bundleType !== ESM_PROD &&
+            bundleType !== ESM_DEV,
+          env: 'CUSTOM',
+          warning_level: 'QUIET',
+          apply_input_source_maps: false,
+          use_types_for_optimization: false,
+          process_common_js_modules: false,
+          rewrite_polyfills: false,
+          inject_libraries: false,
+          allow_dynamic_import: true,
+
+          // Don't let it create global variables in the browser.
+          // https://github.com/facebook/react/issues/10909
+          assume_function_wrapper: !isUMDBundle,
+          renaming: !shouldStayReadable,
+        }),
+      // Add the whitespace back if necessary.
+      shouldStayReadable &&
+        prettier({
+          parser: 'flow',
+          singleQuote: false,
+          trailingComma: 'none',
+          bracketSpacing: true,
+        }),
+      // License and haste headers, top-level `if` blocks.
+      {
+        renderChunk(source) {
+          return Wrappers.wrapBundle(
+            source,
+            bundleType,
+            globalName,
+            filename,
+            moduleType,
+            bundle.wrapWithModuleBoundaries
+          );
+        },
       },
-    }),
-  ].filter(Boolean);
+      // Record bundle size.
+      sizes({
+        getSize: (size, gzip) => {
+          const currentSizes = Stats.currentBuildResults.bundleSizes;
+          const recordIndex = currentSizes.findIndex(
+            record =>
+              record.filename === filename && record.bundleType === bundleType
+          );
+          const index = recordIndex !== -1 ? recordIndex : currentSizes.length;
+          currentSizes[index] = {
+            filename,
+            bundleType,
+            packageName,
+            size,
+            gzip,
+          };
+        },
+      }),
+    ].filter(Boolean);
+  } catch (error) {
+    console.error(
+      chalk.red(`There was an error preparing plugins for entry "${entry}"`)
+    );
+    throw error;
+  }
 }
 
 function shouldSkipBundle(bundle, bundleType) {
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index b3c5484c282c0..cd4187a34887a 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -165,6 +165,18 @@ const bundles = [
     externals: ['react'],
   },
 
+  /******* React DOM Shared Subset *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: RENDERER,
+    entry: 'react-dom/src/ReactDOMSharedSubset.js',
+    name: 'react-dom.shared-subset',
+    global: 'ReactDOM',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['react'],
+  },
+
   /******* Test Utils *******/
   {
     moduleType: RENDERER_UTILS,
@@ -233,7 +245,7 @@ const bundles = [
   {
     bundleTypes: [NODE_DEV, NODE_PROD, UMD_DEV, UMD_PROD],
     moduleType: RENDERER,
-    entry: 'react-dom/src/server/ReactDOMFizzServerBrowser.js',
+    entry: 'react-dom/src/server/react-dom-server.browser.js',
     name: 'react-dom-server.browser',
     global: 'ReactDOMServer',
     minifyWithProdErrorCodes: true,
@@ -243,12 +255,12 @@ const bundles = [
   {
     bundleTypes: [NODE_DEV, NODE_PROD],
     moduleType: RENDERER,
-    entry: 'react-dom/src/server/ReactDOMFizzServerNode.js',
+    entry: 'react-dom/src/server/react-dom-server.node.js',
     name: 'react-dom-server.node',
     global: 'ReactDOMServer',
     minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,
-    externals: ['react', 'util', 'async_hooks', 'react-dom'],
+    externals: ['react', 'util', 'crypto', 'async_hooks', 'react-dom'],
   },
   {
     bundleTypes: __EXPERIMENTAL__ ? [FB_WWW_DEV, FB_WWW_PROD] : [],
@@ -264,7 +276,7 @@ const bundles = [
   {
     bundleTypes: [NODE_DEV, NODE_PROD],
     moduleType: RENDERER,
-    entry: 'react-dom/src/server/ReactDOMFizzServerEdge.js',
+    entry: 'react-dom/src/server/react-dom-server.edge.js',
     name: 'react-dom-server.edge', // 'node_modules/react/*.js',
 
     global: 'ReactDOMServer',
@@ -277,7 +289,7 @@ const bundles = [
   {
     bundleTypes: [BUN_DEV, BUN_PROD],
     moduleType: RENDERER,
-    entry: 'react-dom/src/server/ReactDOMFizzServerBun.js',
+    entry: 'react-dom/src/server/react-dom-server.bun.js',
     name: 'react-dom-server.bun', // 'node_modules/react/*.js',
 
     global: 'ReactDOMServer',
@@ -286,36 +298,6 @@ const bundles = [
     externals: ['react', 'react-dom'],
   },
 
-  /******* React DOM Fizz Static *******/
-  {
-    bundleTypes: __EXPERIMENTAL__ ? [NODE_DEV, NODE_PROD] : [],
-    moduleType: RENDERER,
-    entry: 'react-dom/static.browser',
-    global: 'ReactDOMStatic',
-    minifyWithProdErrorCodes: true,
-    wrapWithModuleBoundaries: false,
-    externals: ['react', 'react-dom'],
-  },
-  {
-    bundleTypes: __EXPERIMENTAL__ ? [NODE_DEV, NODE_PROD] : [],
-    moduleType: RENDERER,
-    entry: 'react-dom/static.node',
-    name: 'react-dom-static.node',
-    global: 'ReactDOMStatic',
-    minifyWithProdErrorCodes: false,
-    wrapWithModuleBoundaries: false,
-    externals: ['react', 'util', 'async_hooks', 'stream', 'react-dom'],
-  },
-  {
-    bundleTypes: __EXPERIMENTAL__ ? [NODE_DEV, NODE_PROD] : [],
-    moduleType: RENDERER,
-    entry: 'react-dom/static.edge',
-    global: 'ReactDOMStatic',
-    minifyWithProdErrorCodes: true,
-    wrapWithModuleBoundaries: false,
-    externals: ['react', 'react-dom'],
-  },
-
   /******* React DOM Fizz Server External Runtime *******/
   {
     bundleTypes: [BROWSER_SCRIPT],
@@ -357,7 +339,7 @@ const bundles = [
     global: 'ReactServerDOMServer',
     minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,
-    externals: ['react', 'util', 'async_hooks', 'react-dom'],
+    externals: ['react', 'util', 'crypto', 'async_hooks', 'react-dom'],
   },
   {
     bundleTypes: [NODE_DEV, NODE_PROD],
@@ -366,7 +348,7 @@ const bundles = [
     global: 'ReactServerDOMServer',
     minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,
-    externals: ['react', 'util', 'async_hooks', 'react-dom'],
+    externals: ['react', 'util', 'crypto', 'async_hooks', 'react-dom'],
   },
   {
     bundleTypes: [NODE_DEV, NODE_PROD],
@@ -375,7 +357,7 @@ const bundles = [
     global: 'ReactServerDOMServer',
     minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,
-    externals: ['react', 'util', 'async_hooks', 'react-dom'],
+    externals: ['react', 'util', 'crypto', 'async_hooks', 'react-dom'],
   },
 
   /******* React Server DOM Webpack Client *******/
@@ -395,7 +377,7 @@ const bundles = [
     global: 'ReactServerDOMClient',
     minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,
-    externals: ['react', 'react-dom', 'util'],
+    externals: ['react', 'react-dom', 'util', 'crypto'],
   },
   {
     bundleTypes: [NODE_DEV, NODE_PROD],
@@ -404,7 +386,7 @@ const bundles = [
     global: 'ReactServerDOMClient',
     minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,
-    externals: ['react', 'react-dom', 'util'],
+    externals: ['react', 'react-dom', 'util', 'crypto'],
   },
   {
     bundleTypes: [NODE_DEV, NODE_PROD],
@@ -457,7 +439,7 @@ const bundles = [
     entry: 'react-server-dom-esm/server.node',
     minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,
-    externals: ['react', 'util', 'async_hooks', 'react-dom'],
+    externals: ['react', 'util', 'crypto', 'async_hooks', 'react-dom'],
   },
 
   /******* React Server DOM ESM Client *******/
@@ -475,7 +457,7 @@ const bundles = [
     entry: 'react-server-dom-esm/client.node',
     minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,
-    externals: ['react', 'react-dom', 'util'],
+    externals: ['react', 'react-dom', 'util', 'crypto'],
   },
 
   /******* React Server DOM ESM Node.js Loader *******/
diff --git a/scripts/rollup/forks.js b/scripts/rollup/forks.js
index d51e784f68378..d46dbb2b85c45 100644
--- a/scripts/rollup/forks.js
+++ b/scripts/rollup/forks.js
@@ -1,5 +1,6 @@
 'use strict';
 
+const fs = require('node:fs');
 const {bundleTypes, moduleTypes} = require('./bundles');
 const inlinedHostConfigs = require('../shared/inlinedHostConfigs');
 
@@ -28,6 +29,22 @@ const __EXPERIMENTAL__ =
     ? RELEASE_CHANNEL === 'experimental'
     : true;
 
+function findNearestExistingForkFile(path, segmentedIdentifier, suffix) {
+  const segments = segmentedIdentifier.split('-');
+  while (segments.length) {
+    const candidate = segments.join('-');
+    const forkPath = path + candidate + suffix;
+    try {
+      fs.statSync(forkPath);
+      return forkPath;
+    } catch (error) {
+      // Try the next candidate.
+    }
+    segments.pop();
+  }
+  return null;
+}
+
 // If you need to replace a file with another file for a specific environment,
 // add it to this list with the logic for choosing the right replacement.
 
@@ -67,7 +84,11 @@ const forks = Object.freeze({
     entry,
     dependencies
   ) => {
-    if (entry === 'react-dom' || entry === 'react-dom/server-rendering-stub') {
+    if (
+      entry === 'react-dom' ||
+      entry === 'react-dom/server-rendering-stub' ||
+      entry === 'react-dom/src/ReactDOMSharedSubset.js'
+    ) {
       return './packages/react-dom/src/ReactDOMSharedInternals.js';
     }
     if (
@@ -261,7 +282,16 @@ const forks = Object.freeze({
     // eslint-disable-next-line no-for-of-loops/no-for-of-loops
     for (let rendererInfo of inlinedHostConfigs) {
       if (rendererInfo.entryPoints.indexOf(entry) !== -1) {
-        return `./packages/react-reconciler/src/forks/ReactFiberConfig.${rendererInfo.shortName}.js`;
+        const foundFork = findNearestExistingForkFile(
+          './packages/react-reconciler/src/forks/ReactFiberConfig.',
+          rendererInfo.shortName,
+          '.js'
+        );
+        if (foundFork) {
+          return foundFork;
+        }
+        // fall through to error
+        break;
       }
     }
     throw new Error(
@@ -289,7 +319,16 @@ const forks = Object.freeze({
         if (!rendererInfo.isServerSupported) {
           return null;
         }
-        return `./packages/react-server/src/forks/ReactServerStreamConfig.${rendererInfo.shortName}.js`;
+        const foundFork = findNearestExistingForkFile(
+          './packages/react-server/src/forks/ReactServerStreamConfig.',
+          rendererInfo.shortName,
+          '.js'
+        );
+        if (foundFork) {
+          return foundFork;
+        }
+        // fall through to error
+        break;
       }
     }
     throw new Error(
@@ -317,7 +356,16 @@ const forks = Object.freeze({
         if (!rendererInfo.isServerSupported) {
           return null;
         }
-        return `./packages/react-server/src/forks/ReactFizzConfig.${rendererInfo.shortName}.js`;
+        const foundFork = findNearestExistingForkFile(
+          './packages/react-server/src/forks/ReactFizzConfig.',
+          rendererInfo.shortName,
+          '.js'
+        );
+        if (foundFork) {
+          return foundFork;
+        }
+        // fall through to error
+        break;
       }
     }
     throw new Error(
@@ -345,7 +393,23 @@ const forks = Object.freeze({
         if (!rendererInfo.isServerSupported) {
           return null;
         }
-        return `./packages/react-server/src/forks/ReactFlightServerConfig.${rendererInfo.shortName}.js`;
+        if (rendererInfo.isFlightSupported === false) {
+          return new Error(
+            `Expected not to use ReactFlightServerConfig with "${entry}" entry point ` +
+              'in ./scripts/shared/inlinedHostConfigs.js. Update the renderer config to ' +
+              'activate flight suppport and add a matching fork implementation for ReactFlightServerConfig.'
+          );
+        }
+        const foundFork = findNearestExistingForkFile(
+          './packages/react-server/src/forks/ReactFlightServerConfig.',
+          rendererInfo.shortName,
+          '.js'
+        );
+        if (foundFork) {
+          return foundFork;
+        }
+        // fall through to error
+        break;
       }
     }
     throw new Error(
@@ -373,7 +437,23 @@ const forks = Object.freeze({
         if (!rendererInfo.isServerSupported) {
           return null;
         }
-        return `./packages/react-client/src/forks/ReactFlightClientConfig.${rendererInfo.shortName}.js`;
+        if (rendererInfo.isFlightSupported === false) {
+          return new Error(
+            `Expected not to use ReactFlightClientConfig with "${entry}" entry point ` +
+              'in ./scripts/shared/inlinedHostConfigs.js. Update the renderer config to ' +
+              'activate flight suppport and add a matching fork implementation for ReactFlightClientConfig.'
+          );
+        }
+        const foundFork = findNearestExistingForkFile(
+          './packages/react-client/src/forks/ReactFlightClientConfig.',
+          rendererInfo.shortName,
+          '.js'
+        );
+        if (foundFork) {
+          return foundFork;
+        }
+        // fall through to error
+        break;
       }
     }
     throw new Error(
diff --git a/scripts/rollup/validate/eslintrc.cjs.js b/scripts/rollup/validate/eslintrc.cjs.js
index 313f9639fb984..b3ea021a619f4 100644
--- a/scripts/rollup/validate/eslintrc.cjs.js
+++ b/scripts/rollup/validate/eslintrc.cjs.js
@@ -65,6 +65,8 @@ module.exports = {
 
     // Native Scheduler
     nativeRuntimeScheduler: 'readonly',
+
+    Bun: 'readonly',
   },
   parserOptions: {
     ecmaVersion: 2020,
diff --git a/scripts/rollup/validate/eslintrc.cjs2015.js b/scripts/rollup/validate/eslintrc.cjs2015.js
index dc35c98311863..435d5e5c820b6 100644
--- a/scripts/rollup/validate/eslintrc.cjs2015.js
+++ b/scripts/rollup/validate/eslintrc.cjs2015.js
@@ -62,6 +62,8 @@ module.exports = {
 
     // act
     IS_REACT_ACT_ENVIRONMENT: 'readonly',
+
+    Bun: 'readonly',
   },
   parserOptions: {
     ecmaVersion: 2015,
diff --git a/scripts/rollup/validate/eslintrc.esm.js b/scripts/rollup/validate/eslintrc.esm.js
index ae1846c08d7ba..11c72a68f9362 100644
--- a/scripts/rollup/validate/eslintrc.esm.js
+++ b/scripts/rollup/validate/eslintrc.esm.js
@@ -62,6 +62,8 @@ module.exports = {
 
     // act
     IS_REACT_ACT_ENVIRONMENT: 'readonly',
+
+    Bun: 'readonly',
   },
   parserOptions: {
     ecmaVersion: 2020,
diff --git a/scripts/shared/inlinedHostConfigs.js b/scripts/shared/inlinedHostConfigs.js
index 4b35976aeba29..8b11189fcd1ff 100644
--- a/scripts/shared/inlinedHostConfigs.js
+++ b/scripts/shared/inlinedHostConfigs.js
@@ -11,8 +11,9 @@ module.exports = [
     shortName: 'dom-node',
     entryPoints: [
       'react-dom',
+      'react-dom/src/ReactDOMSharedSubset.js',
       'react-dom/unstable_testing',
-      'react-dom/src/server/ReactDOMFizzServerNode.js',
+      'react-dom/src/server/react-dom-server.node.js',
       'react-dom/static.node',
       'react-dom/server-rendering-stub',
       'react-dom/unstable_server-external-runtime',
@@ -21,12 +22,14 @@ module.exports = [
     ],
     paths: [
       'react-dom',
+      'react-dom/src/ReactDOMSharedSubset.js',
       'react-dom-bindings',
       'react-dom/client',
       'react-dom/server',
       'react-dom/server.node',
       'react-dom/static',
       'react-dom/static.node',
+      'react-dom/src/server/react-dom-server.node',
       'react-dom/src/server/ReactDOMFizzServerNode.js', // react-dom/server.node
       'react-dom/src/server/ReactDOMFizzStaticNode.js',
       'react-server-dom-webpack',
@@ -46,10 +49,11 @@ module.exports = [
   },
   {
     shortName: 'dom-bun',
-    entryPoints: ['react-dom', 'react-dom/src/server/ReactDOMFizzServerBun.js'],
+    entryPoints: ['react-dom', 'react-dom/src/server/react-dom-server.bun.js'],
     paths: [
       'react-dom',
       'react-dom/server.bun',
+      'react-dom/src/server/react-dom-server.bun',
       'react-dom/src/server/ReactDOMFizzServerBun.js',
       'react-dom-bindings',
       'shared/ReactDOMSharedInternals',
@@ -62,7 +66,7 @@ module.exports = [
     entryPoints: [
       'react-dom',
       'react-dom/unstable_testing',
-      'react-dom/src/server/ReactDOMFizzServerBrowser.js',
+      'react-dom/src/server/react-dom-server.browser.js',
       'react-dom/static.browser',
       'react-dom/server-rendering-stub',
       'react-dom/unstable_server-external-runtime',
@@ -71,11 +75,13 @@ module.exports = [
     ],
     paths: [
       'react-dom',
+      'react-dom/src/ReactDOMSharedSubset.js',
       'react-dom-bindings',
       'react-dom/client',
       'react-dom/server.browser',
       'react-dom/static.browser',
       'react-dom/unstable_testing',
+      'react-dom/src/server/react-dom-server.browser',
       'react-dom/src/server/ReactDOMFizzServerBrowser.js', // react-dom/server.browser
       'react-dom/src/server/ReactDOMFizzStaticBrowser.js',
       'react-server-dom-webpack',
@@ -93,21 +99,46 @@ module.exports = [
     isFlowTyped: true,
     isServerSupported: true,
   },
+  {
+    shortName: 'dom-browser-esm',
+    entryPoints: ['react-server-dom-esm/client.browser'],
+    paths: [
+      'react-dom',
+      'react-dom/src/ReactDOMSharedSubset.js',
+      'react-dom/client',
+      'react-dom/server',
+      'react-dom/server.node',
+      'react-dom-bindings',
+      'react-server-dom-esm',
+      'react-server-dom-esm/client',
+      'react-server-dom-esm/client.browser',
+      'react-devtools',
+      'react-devtools-core',
+      'react-devtools-shell',
+      'react-devtools-shared',
+      'react-interactions',
+      'shared/ReactDOMSharedInternals',
+    ],
+    isFlowTyped: true,
+    isServerSupported: true,
+  },
   {
     shortName: 'dom-edge-webpack',
     entryPoints: [
-      'react-dom/src/server/ReactDOMFizzServerEdge.js',
+      'react-dom/src/server/react-dom-server.edge.js',
       'react-dom/static.edge',
       'react-server-dom-webpack/server.edge',
       'react-server-dom-webpack/client.edge',
     ],
     paths: [
       'react-dom',
+      'react-dom/src/ReactDOMSharedSubset.js',
       'react-dom-bindings',
       'react-dom/client',
       'react-dom/server.edge',
       'react-dom/static.edge',
       'react-dom/unstable_testing',
+      'react-dom/src/server/react-dom-server.edge',
       'react-dom/src/server/ReactDOMFizzServerEdge.js', // react-dom/server.edge
       'react-dom/src/server/ReactDOMFizzStaticEdge.js',
       'react-server-dom-webpack',
@@ -132,12 +163,14 @@ module.exports = [
     ],
     paths: [
       'react-dom',
+      'react-dom/src/ReactDOMSharedSubset.js',
       'react-dom-bindings',
       'react-dom/client',
       'react-dom/server',
       'react-dom/server.node',
       'react-dom/static',
       'react-dom/static.node',
+      'react-dom/src/server/react-dom-server.node',
       'react-dom/src/server/ReactDOMFizzServerNode.js', // react-dom/server.node
       'react-dom/src/server/ReactDOMFizzStaticNode.js',
       'react-server-dom-webpack',
@@ -160,22 +193,22 @@ module.exports = [
   {
     shortName: 'dom-node-esm',
     entryPoints: [
-      'react-server-dom-esm/client.browser',
       'react-server-dom-esm/server.node',
       'react-server-dom-esm/client.node',
     ],
     paths: [
       'react-dom',
+      'react-dom/src/ReactDOMSharedSubset.js',
       'react-dom-bindings',
       'react-dom/client',
       'react-dom/server',
       'react-dom/server.node',
       'react-dom/static',
       'react-dom/static.node',
+      'react-dom/src/server/react-dom-server.node',
       'react-dom/src/server/ReactDOMFizzServerNode.js', // react-dom/server.node
       'react-dom/src/server/ReactDOMFizzStaticNode.js',
       'react-server-dom-esm',
-      'react-server-dom-esm/client.browser',
       'react-server-dom-esm/client.node',
       'react-server-dom-esm/server',
       'react-server-dom-esm/server.node',
@@ -198,6 +231,7 @@ module.exports = [
     ],
     paths: [
       'react-dom',
+      'react-dom/src/ReactDOMSharedSubset.js',
       'react-dom-bindings',
       'react-server-dom-webpack',
       'react-dom/src/server/ReactDOMLegacyServerImpl.js', // not an entrypoint, but only usable in *Brower and *Node files
@@ -215,6 +249,7 @@ module.exports = [
     entryPoints: ['react-server-dom-fb/src/ReactDOMServerFB.js'],
     paths: [
       'react-dom',
+      'react-dom/src/ReactDOMSharedSubset.js',
       'react-dom-bindings',
       'react-server-dom-fb',
       'shared/ReactDOMSharedInternals',
diff --git a/yarn.lock b/yarn.lock
index 9552466aefdf7..524ba9d483f3e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3356,64 +3356,21 @@
     "@webassemblyjs/helper-numbers" "1.11.6"
     "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
 
-"@webassemblyjs/ast@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964"
-  integrity sha512-C6wW5L+b7ogSDVqymbkkvuW9kruN//YisMED04xzeBBqjHa2FYnmvOlS6Xj68xWQRgWvI9cIglsjFowH/RJyEA==
-  dependencies:
-    "@webassemblyjs/helper-module-context" "1.9.0"
-    "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
-    "@webassemblyjs/wast-parser" "1.9.0"
-
 "@webassemblyjs/floating-point-hex-parser@1.11.6":
   version "1.11.6"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.6.tgz#dacbcb95aff135c8260f77fa3b4c5fea600a6431"
   integrity sha512-ejAj9hfRJ2XMsNHk/v6Fu2dGS+i4UaXBXGemOfQ/JfQ6mdQg/WXtwleQRLLS4OvfDhv8rYnVwH27YJLMyYsxhw==
 
-"@webassemblyjs/floating-point-hex-parser@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.9.0.tgz#3c3d3b271bddfc84deb00f71344438311d52ffb4"
-  integrity sha512-TG5qcFsS8QB4g4MhrxK5TqfdNe7Ey/7YL/xN+36rRjl/BlGE/NcBvJcqsRgCP6Z92mRE+7N50pRIi8SmKUbcQA==
-
 "@webassemblyjs/helper-api-error@1.11.6":
   version "1.11.6"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.6.tgz#6132f68c4acd59dcd141c44b18cbebbd9f2fa768"
   integrity sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q==
 
-"@webassemblyjs/helper-api-error@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-api-error/-/helper-api-error-1.9.0.tgz#203f676e333b96c9da2eeab3ccef33c45928b6a2"
-  integrity sha512-NcMLjoFMXpsASZFxJ5h2HZRcEhDkvnNFOAKneP5RbKRzaWJN36NC4jqQHKwStIhGXu5mUWlUUk7ygdtrO8lbmw==
-
 "@webassemblyjs/helper-buffer@1.11.6":
   version "1.11.6"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.6.tgz#b66d73c43e296fd5e88006f18524feb0f2c7c093"
   integrity sha512-z3nFzdcp1mb8nEOFFk8DrYLpHvhKC3grJD2ardfKOzmbmJvEf/tPIqCY+sNcwZIY8ZD7IkB2l7/pqhUhqm7hLA==
 
-"@webassemblyjs/helper-buffer@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.9.0.tgz#a1442d269c5feb23fcbc9ef759dac3547f29de00"
-  integrity sha512-qZol43oqhq6yBPx7YM3m9Bv7WMV9Eevj6kMi6InKOuZxhw+q9hOkvq5e/PpKSiLfyetpaBnogSbNCfBwyB00CA==
-
-"@webassemblyjs/helper-code-frame@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.9.0.tgz#647f8892cd2043a82ac0c8c5e75c36f1d9159f27"
-  integrity sha512-ERCYdJBkD9Vu4vtjUYe8LZruWuNIToYq/ME22igL+2vj2dQ2OOujIZr3MEFvfEaqKoVqpsFKAGsRdBSBjrIvZA==
-  dependencies:
-    "@webassemblyjs/wast-printer" "1.9.0"
-
-"@webassemblyjs/helper-fsm@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-fsm/-/helper-fsm-1.9.0.tgz#c05256b71244214671f4b08ec108ad63b70eddb8"
-  integrity sha512-OPRowhGbshCb5PxJ8LocpdX9Kl0uB4XsAjl6jH/dWKlk/mzsANvhwbiULsaiqT5GZGT9qinTICdj6PLuM5gslw==
-
-"@webassemblyjs/helper-module-context@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-module-context/-/helper-module-context-1.9.0.tgz#25d8884b76839871a08a6c6f806c3979ef712f07"
-  integrity sha512-MJCW8iGC08tMk2enck1aPW+BE5Cw8/7ph/VGZxwyvGbJwjktKkDK7vy7gAmMDx88D7mhDTCNKAW5tED+gZ0W8g==
-  dependencies:
-    "@webassemblyjs/ast" "1.9.0"
-
 "@webassemblyjs/helper-numbers@1.11.6":
   version "1.11.6"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.6.tgz#cbce5e7e0c1bd32cf4905ae444ef64cea919f1b5"
@@ -3428,11 +3385,6 @@
   resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.6.tgz#bb2ebdb3b83aa26d9baad4c46d4315283acd51e9"
   integrity sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA==
 
-"@webassemblyjs/helper-wasm-bytecode@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.9.0.tgz#4fed8beac9b8c14f8c58b70d124d549dd1fe5790"
-  integrity sha512-R7FStIzyNcd7xKxCZH5lE0Bqy+hGTwS3LJjuv1ZVxd9O7eHCedSdrId/hMOd20I+v8wDXEn+bjfKDLzTepoaUw==
-
 "@webassemblyjs/helper-wasm-section@1.11.6":
   version "1.11.6"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.6.tgz#ff97f3863c55ee7f580fd5c41a381e9def4aa577"
@@ -3443,16 +3395,6 @@
     "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
     "@webassemblyjs/wasm-gen" "1.11.6"
 
-"@webassemblyjs/helper-wasm-section@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.9.0.tgz#5a4138d5a6292ba18b04c5ae49717e4167965346"
-  integrity sha512-XnMB8l3ek4tvrKUUku+IVaXNHz2YsJyOOmz+MMkZvh8h1uSJpSen6vYnw3IoQ7WwEuAhL8Efjms1ZWjqh2agvw==
-  dependencies:
-    "@webassemblyjs/ast" "1.9.0"
-    "@webassemblyjs/helper-buffer" "1.9.0"
-    "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
-    "@webassemblyjs/wasm-gen" "1.9.0"
-
 "@webassemblyjs/ieee754@1.11.6":
   version "1.11.6"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ieee754/-/ieee754-1.11.6.tgz#bb665c91d0b14fffceb0e38298c329af043c6e3a"
@@ -3460,13 +3402,6 @@
   dependencies:
     "@xtuc/ieee754" "^1.2.0"
 
-"@webassemblyjs/ieee754@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/ieee754/-/ieee754-1.9.0.tgz#15c7a0fbaae83fb26143bbacf6d6df1702ad39e4"
-  integrity sha512-dcX8JuYU/gvymzIHc9DgxTzUUTLexWwt8uCTWP3otys596io0L5aW02Gb1RjYpx2+0Jus1h4ZFqjla7umFniTg==
-  dependencies:
-    "@xtuc/ieee754" "^1.2.0"
-
 "@webassemblyjs/leb128@1.11.6":
   version "1.11.6"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/leb128/-/leb128-1.11.6.tgz#70e60e5e82f9ac81118bc25381a0b283893240d7"
@@ -3474,37 +3409,11 @@
   dependencies:
     "@xtuc/long" "4.2.2"
 
-"@webassemblyjs/leb128@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/leb128/-/leb128-1.9.0.tgz#f19ca0b76a6dc55623a09cffa769e838fa1e1c95"
-  integrity sha512-ENVzM5VwV1ojs9jam6vPys97B/S65YQtv/aanqnU7D8aSoHFX8GyhGg0CMfyKNIHBuAVjy3tlzd5QMMINa7wpw==
-  dependencies:
-    "@xtuc/long" "4.2.2"
-
 "@webassemblyjs/utf8@1.11.6":
   version "1.11.6"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/utf8/-/utf8-1.11.6.tgz#90f8bc34c561595fe156603be7253cdbcd0fab5a"
   integrity sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA==
 
-"@webassemblyjs/utf8@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/utf8/-/utf8-1.9.0.tgz#04d33b636f78e6a6813227e82402f7637b6229ab"
-  integrity sha512-GZbQlWtopBTP0u7cHrEx+73yZKrQoBMpwkGEIqlacljhXCkVM1kMQge/Mf+csMJAjEdSwhOyLAS0AoR3AG5P8w==
-
-"@webassemblyjs/wasm-edit@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.9.0.tgz#3fe6d79d3f0f922183aa86002c42dd256cfee9cf"
-  integrity sha512-FgHzBm80uwz5M8WKnMTn6j/sVbqilPdQXTWraSjBwFXSYGirpkSWE2R9Qvz9tNiTKQvoKILpCuTjBKzOIm0nxw==
-  dependencies:
-    "@webassemblyjs/ast" "1.9.0"
-    "@webassemblyjs/helper-buffer" "1.9.0"
-    "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
-    "@webassemblyjs/helper-wasm-section" "1.9.0"
-    "@webassemblyjs/wasm-gen" "1.9.0"
-    "@webassemblyjs/wasm-opt" "1.9.0"
-    "@webassemblyjs/wasm-parser" "1.9.0"
-    "@webassemblyjs/wast-printer" "1.9.0"
-
 "@webassemblyjs/wasm-edit@^1.11.5":
   version "1.11.6"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.6.tgz#c72fa8220524c9b416249f3d94c2958dfe70ceab"
@@ -3530,17 +3439,6 @@
     "@webassemblyjs/leb128" "1.11.6"
     "@webassemblyjs/utf8" "1.11.6"
 
-"@webassemblyjs/wasm-gen@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.9.0.tgz#50bc70ec68ded8e2763b01a1418bf43491a7a49c"
-  integrity sha512-cPE3o44YzOOHvlsb4+E9qSqjc9Qf9Na1OO/BHFy4OI91XDE14MjFN4lTMezzaIWdPqHnsTodGGNP+iRSYfGkjA==
-  dependencies:
-    "@webassemblyjs/ast" "1.9.0"
-    "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
-    "@webassemblyjs/ieee754" "1.9.0"
-    "@webassemblyjs/leb128" "1.9.0"
-    "@webassemblyjs/utf8" "1.9.0"
-
 "@webassemblyjs/wasm-opt@1.11.6":
   version "1.11.6"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.6.tgz#d9a22d651248422ca498b09aa3232a81041487c2"
@@ -3551,16 +3449,6 @@
     "@webassemblyjs/wasm-gen" "1.11.6"
     "@webassemblyjs/wasm-parser" "1.11.6"
 
-"@webassemblyjs/wasm-opt@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.9.0.tgz#2211181e5b31326443cc8112eb9f0b9028721a61"
-  integrity sha512-Qkjgm6Anhm+OMbIL0iokO7meajkzQD71ioelnfPEj6r4eOFuqm4YC3VBPqXjFyyNwowzbMD+hizmprP/Fwkl2A==
-  dependencies:
-    "@webassemblyjs/ast" "1.9.0"
-    "@webassemblyjs/helper-buffer" "1.9.0"
-    "@webassemblyjs/wasm-gen" "1.9.0"
-    "@webassemblyjs/wasm-parser" "1.9.0"
-
 "@webassemblyjs/wasm-parser@1.11.6", "@webassemblyjs/wasm-parser@^1.11.5":
   version "1.11.6"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.6.tgz#bb85378c527df824004812bbdb784eea539174a1"
@@ -3573,30 +3461,6 @@
     "@webassemblyjs/leb128" "1.11.6"
     "@webassemblyjs/utf8" "1.11.6"
 
-"@webassemblyjs/wasm-parser@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.9.0.tgz#9d48e44826df4a6598294aa6c87469d642fff65e"
-  integrity sha512-9+wkMowR2AmdSWQzsPEjFU7njh8HTO5MqO8vjwEHuM+AMHioNqSBONRdr0NQQ3dVQrzp0s8lTcYqzUdb7YgELA==
-  dependencies:
-    "@webassemblyjs/ast" "1.9.0"
-    "@webassemblyjs/helper-api-error" "1.9.0"
-    "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
-    "@webassemblyjs/ieee754" "1.9.0"
-    "@webassemblyjs/leb128" "1.9.0"
-    "@webassemblyjs/utf8" "1.9.0"
-
-"@webassemblyjs/wast-parser@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-parser/-/wast-parser-1.9.0.tgz#3031115d79ac5bd261556cecc3fa90a3ef451914"
-  integrity sha512-qsqSAP3QQ3LyZjNC/0jBJ/ToSxfYJ8kYyuiGvtn/8MK89VrNEfwj7BPQzJVHi0jGTRK2dGdJ5PRqhtjzoww+bw==
-  dependencies:
-    "@webassemblyjs/ast" "1.9.0"
-    "@webassemblyjs/floating-point-hex-parser" "1.9.0"
-    "@webassemblyjs/helper-api-error" "1.9.0"
-    "@webassemblyjs/helper-code-frame" "1.9.0"
-    "@webassemblyjs/helper-fsm" "1.9.0"
-    "@xtuc/long" "4.2.2"
-
 "@webassemblyjs/wast-printer@1.11.6":
   version "1.11.6"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.11.6.tgz#a7bf8dd7e362aeb1668ff43f35cb849f188eff20"
@@ -3605,15 +3469,6 @@
     "@webassemblyjs/ast" "1.11.6"
     "@xtuc/long" "4.2.2"
 
-"@webassemblyjs/wast-printer@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.9.0.tgz#4935d54c85fef637b00ce9f52377451d00d47899"
-  integrity sha512-2J0nE95rHXHyQ24cWjMKJ1tqB/ds8z/cyeOZxJhcb+rW+SQASVjuznUSmdz5GpVJTzU8JkhYut0D3siFDD6wsA==
-  dependencies:
-    "@webassemblyjs/ast" "1.9.0"
-    "@webassemblyjs/wast-parser" "1.9.0"
-    "@xtuc/long" "4.2.2"
-
 "@webpack-cli/configtest@^2.1.0":
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/@webpack-cli/configtest/-/configtest-2.1.0.tgz#b59b33377b1b896a9a7357cfc643b39c1524b1e6"
@@ -3710,7 +3565,7 @@ acorn-walk@^8.0.2:
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.2.0.tgz#741210f2e2426454508853a2f44d0ab83b7f69c1"
   integrity sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==
 
-acorn@^6.0.7, acorn@^6.4.1:
+acorn@^6.0.7:
   version "6.4.2"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.2.tgz#35866fd710528e92de10cf06016498e47e39e1e6"
   integrity sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ==
@@ -4051,11 +3906,6 @@ anymatch@^3.0.3, anymatch@~3.1.2:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
-aproba@^1.1.1:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
-  integrity sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==
-
 arch@^2.1.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/arch/-/arch-2.2.0.tgz#1bc47818f305764f23ab3306b0bfc086c5a29d11"
@@ -4236,15 +4086,6 @@ asap@~2.0.3:
   resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
   integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
 
-asn1.js@^4.0.0:
-  version "4.10.1"
-  resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-4.10.1.tgz#b9c2bf5805f1e64aadeed6df3a2bfafb5a73f5a0"
-  integrity sha512-p32cOF5q0Zqs9uBiONKYLm6BClCoBCM5O9JfeUSlnQLBTxYdTK+pW+nXflm8UkKd2UYlEbYz5qEi0JuZR9ckSw==
-  dependencies:
-    bn.js "^4.0.0"
-    inherits "^2.0.1"
-    minimalistic-assert "^1.0.0"
-
 asn1@^0.2.4, asn1@~0.2.3:
   version "0.2.4"
   resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.4.tgz#8d2475dfab553bb33e77b54e59e880bb8ce23136"
@@ -4848,26 +4689,11 @@ bl@^3.0.0:
   dependencies:
     readable-stream "^3.0.1"
 
-bluebird@^3.5.5:
-  version "3.7.2"
-  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
-  integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
-
 bluebird@~2.9.24:
   version "2.9.34"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-2.9.34.tgz#2f7b4ec80216328a9fddebdf69c8d4942feff7d8"
   integrity sha1-L3tOyAIWMoqf3evfacjUlC/v99g=
 
-bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.4.0:
-  version "4.11.8"
-  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f"
-  integrity sha512-ItfYfPLkWHUjckQCk8xC+LwxgK8NYcXywGigJgSwOP8Y2iyWT4f2vsZnoOXTTbo+o5yXmIUJ4gn5538SO5S3gA==
-
-bn.js@^5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.1.1.tgz#48efc4031a9c4041b9c99c6941d903463ab62eb5"
-  integrity sha512-IUTD/REb78Z2eodka1QZyyEk66pciRcP6Sroka0aI3tG/iwIdYLrBD62RsubR7vqdt3WyX8p4jxeatzmRSphtA==
-
 body-parser@1.20.1:
   version "1.20.1"
   resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.1.tgz#b1812a8912c195cd371a3ee5e66faa2338a5c668"
@@ -4971,71 +4797,6 @@ braces@^3.0.1, braces@~3.0.2:
   dependencies:
     fill-range "^7.0.1"
 
-brorand@^1.0.1:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
-  integrity sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=
-
-browserify-aes@^1.0.0, browserify-aes@^1.0.4:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-1.2.0.tgz#326734642f403dabc3003209853bb70ad428ef48"
-  integrity sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==
-  dependencies:
-    buffer-xor "^1.0.3"
-    cipher-base "^1.0.0"
-    create-hash "^1.1.0"
-    evp_bytestokey "^1.0.3"
-    inherits "^2.0.1"
-    safe-buffer "^5.0.1"
-
-browserify-cipher@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/browserify-cipher/-/browserify-cipher-1.0.1.tgz#8d6474c1b870bfdabcd3bcfcc1934a10e94f15f0"
-  integrity sha512-sPhkz0ARKbf4rRQt2hTpAHqn47X3llLkUGn+xEJzLjwY8LRs2p0v7ljvI5EyoRO/mexrNunNECisZs+gw2zz1w==
-  dependencies:
-    browserify-aes "^1.0.4"
-    browserify-des "^1.0.0"
-    evp_bytestokey "^1.0.0"
-
-browserify-des@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/browserify-des/-/browserify-des-1.0.2.tgz#3af4f1f59839403572f1c66204375f7a7f703e9c"
-  integrity sha512-BioO1xf3hFwz4kc6iBhI3ieDFompMhrMlnDFC4/0/vd5MokpuAc3R+LYbwTA9A5Yc9pq9UYPqffKpW2ObuwX5A==
-  dependencies:
-    cipher-base "^1.0.1"
-    des.js "^1.0.0"
-    inherits "^2.0.1"
-    safe-buffer "^5.1.2"
-
-browserify-rsa@^4.0.0, browserify-rsa@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/browserify-rsa/-/browserify-rsa-4.0.1.tgz#21e0abfaf6f2029cf2fafb133567a701d4135524"
-  integrity sha1-IeCr+vbyApzy+vsTNWenAdQTVSQ=
-  dependencies:
-    bn.js "^4.1.0"
-    randombytes "^2.0.1"
-
-browserify-sign@^4.0.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/browserify-sign/-/browserify-sign-4.1.0.tgz#4fe971b379a5aeb4925e06779f9fa1f41d249d70"
-  integrity sha512-VYxo7cDCeYUoBZ0ZCy4UyEUCP3smyBd4DRQM5nrFS1jJjPJjX7rP3oLRpPoWfkhQfyJ0I9ZbHbKafrFD/SGlrg==
-  dependencies:
-    bn.js "^5.1.1"
-    browserify-rsa "^4.0.1"
-    create-hash "^1.2.0"
-    create-hmac "^1.1.7"
-    elliptic "^6.5.2"
-    inherits "^2.0.4"
-    parse-asn1 "^5.1.5"
-    readable-stream "^3.6.0"
-
-browserify-zlib@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/browserify-zlib/-/browserify-zlib-0.2.0.tgz#2869459d9aa3be245fe8fe2ca1f46e2e7f54d73f"
-  integrity sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==
-  dependencies:
-    pako "~1.0.5"
-
 browserify-zlib@~0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/browserify-zlib/-/browserify-zlib-0.1.4.tgz#bb35f8a519f600e0fa6b8485241c979d0141fb2d"
@@ -5123,11 +4884,6 @@ buffer-from@^1.0.0:
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
   integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
 
-buffer-xor@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/buffer-xor/-/buffer-xor-1.0.3.tgz#26e61ed1422fb70dd42e6e36729ed51d855fe8d9"
-  integrity sha1-JuYe0UIvtw3ULm42cp7VHYVf6Nk=
-
 buffer@^3.0.3:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/buffer/-/buffer-3.6.0.tgz#a72c936f77b96bf52f5f7e7b467180628551defb"
@@ -5137,15 +4893,6 @@ buffer@^3.0.3:
     ieee754 "^1.1.4"
     isarray "^1.0.0"
 
-buffer@^4.3.0:
-  version "4.9.2"
-  resolved "https://registry.yarnpkg.com/buffer/-/buffer-4.9.2.tgz#230ead344002988644841ab0244af8c44bbe3ef8"
-  integrity sha512-xq+q3SRMOxGivLhBNaUdC64hDTQwejJ+H0T/NB1XMtTVEwNTrfFF3gAxiyW0Bu/xWEGhjVKgUcMhCrUy2+uCWg==
-  dependencies:
-    base64-js "^1.0.2"
-    ieee754 "^1.1.4"
-    isarray "^1.0.0"
-
 buffer@^5.1.0:
   version "5.4.0"
   resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.4.0.tgz#33294f5c1f26e08461e528b69fa06de3c45cbd8c"
@@ -5175,11 +4922,6 @@ builtin-modules@^3.3.0:
   resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-3.3.0.tgz#cae62812b89801e9656336e46223e030386be7b6"
   integrity sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==
 
-builtin-status-codes@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
-  integrity sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=
-
 bunyan@1.8.12:
   version "1.8.12"
   resolved "https://registry.yarnpkg.com/bunyan/-/bunyan-1.8.12.tgz#f150f0f6748abdd72aeae84f04403be2ef113797"
@@ -5200,27 +4942,6 @@ bytes@3.1.2:
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.2.tgz#8b0beeb98605adf1b128fa4386403c009e0221a5"
   integrity sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==
 
-cacache@^12.0.2:
-  version "12.0.4"
-  resolved "https://registry.yarnpkg.com/cacache/-/cacache-12.0.4.tgz#668bcbd105aeb5f1d92fe25570ec9525c8faa40c"
-  integrity sha512-a0tMB40oefvuInr4Cwb3GerbL9xTj1D5yg0T5xrjGCGyfvbxseIXX7BAO/u/hIXdafzOI5JC3wDwHyf24buOAQ==
-  dependencies:
-    bluebird "^3.5.5"
-    chownr "^1.1.1"
-    figgy-pudding "^3.5.1"
-    glob "^7.1.4"
-    graceful-fs "^4.1.15"
-    infer-owner "^1.0.3"
-    lru-cache "^5.1.1"
-    mississippi "^3.0.0"
-    mkdirp "^0.5.1"
-    move-concurrently "^1.0.1"
-    promise-inflight "^1.0.1"
-    rimraf "^2.6.3"
-    ssri "^6.0.1"
-    unique-filename "^1.1.1"
-    y18n "^4.0.0"
-
 cache-base@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/cache-base/-/cache-base-1.0.1.tgz#0a7f46416831c8b662ee36fe4e7c59d76f666ab2"
@@ -5483,7 +5204,7 @@ chokidar@^3.5.3:
   optionalDependencies:
     fsevents "~2.3.2"
 
-chownr@^1.0.1, chownr@^1.1.1:
+chownr@^1.0.1:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
   integrity sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==
@@ -5540,14 +5261,6 @@ ci-info@^3.2.0:
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.7.1.tgz#708a6cdae38915d597afdf3b145f2f8e1ff55f3f"
   integrity sha512-4jYS4MOAaCIStSRwiuxc4B8MYhIe676yO1sYGzARnjXkWpmzZMMYxY6zu8WYWDhSuth5zhrQ1rhNSibyyvv4/w==
 
-cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/cipher-base/-/cipher-base-1.0.4.tgz#8760e4ecc272f4c363532f926d874aae2c1397de"
-  integrity sha512-Kkht5ye6ZGmwv40uUDZztayT2ThLQGfnj/T71N/XzeZeo3nf8foyW7zGTsPYkEya3m5f3cAypH+qe7YOrM1U2Q==
-  dependencies:
-    inherits "^2.0.1"
-    safe-buffer "^5.0.1"
-
 cjs-module-lexer@^1.0.0:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz#9f84ba3244a512f3a54e5277e8eef4c489864e40"
@@ -5848,7 +5561,7 @@ concat-map@0.0.1:
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
   integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
 
-concat-stream@^1.4.7, concat-stream@^1.5.0:
+concat-stream@^1.4.7:
   version "1.6.2"
   resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.2.tgz#904bdf194cd3122fc675c77fc4ac3d4ff0fd1a34"
   integrity sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==
@@ -5915,11 +5628,6 @@ constants-browserify@0.0.1:
   resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-0.0.1.tgz#92577db527ba6c4cf0a4568d84bc031f441e21f2"
   integrity sha1-kld9tSe6bEzwpFaNhLwDH0QeIfI=
 
-constants-browserify@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
-  integrity sha1-wguW2MYXdIqvHBYCF2DNJ/y4y3U=
-
 content-disposition@0.5.4:
   version "0.5.4"
   resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.4.tgz#8b82b4efac82512a02bb0b1dcec9d2c5e8eb5bfe"
@@ -5971,18 +5679,6 @@ cookie@^0.3.1:
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"
   integrity sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s=
 
-copy-concurrently@^1.0.0:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/copy-concurrently/-/copy-concurrently-1.0.5.tgz#92297398cae34937fcafd6ec8139c18051f0b5e0"
-  integrity sha512-f2domd9fsVDFtaFcbaRZuYXwtdmnzqbADSwhSWYxYB/Q8zsdUUFMXVRwXGDMWmbEzAn1kdRrtI1T/KTFOL4X2A==
-  dependencies:
-    aproba "^1.1.1"
-    fs-write-stream-atomic "^1.0.8"
-    iferr "^0.1.5"
-    mkdirp "^0.5.1"
-    rimraf "^2.5.4"
-    run-queue "^1.0.0"
-
 copy-descriptor@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
@@ -6060,14 +5756,6 @@ crc@^3.4.4:
   dependencies:
     buffer "^5.1.0"
 
-create-ecdh@^4.0.0:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.3.tgz#c9111b6f33045c4697f144787f9254cdc77c45ff"
-  integrity sha512-GbEHQPMOswGpKXM9kCWVrremUcBmjteUaQ01T9rkKCPDXfUHX0IoP9LpHYo2NPFampa4e+/pFDc3jQdxrxQLaw==
-  dependencies:
-    bn.js "^4.1.0"
-    elliptic "^6.0.0"
-
 create-error-class@^3.0.0:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/create-error-class/-/create-error-class-3.0.2.tgz#06be7abef947a3f14a30fd610671d401bca8b7b6"
@@ -6075,29 +5763,6 @@ create-error-class@^3.0.0:
   dependencies:
     capture-stack-trace "^1.0.0"
 
-create-hash@^1.1.0, create-hash@^1.1.2, create-hash@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/create-hash/-/create-hash-1.2.0.tgz#889078af11a63756bcfb59bd221996be3a9ef196"
-  integrity sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==
-  dependencies:
-    cipher-base "^1.0.1"
-    inherits "^2.0.1"
-    md5.js "^1.3.4"
-    ripemd160 "^2.0.1"
-    sha.js "^2.4.0"
-
-create-hmac@^1.1.0, create-hmac@^1.1.4, create-hmac@^1.1.7:
-  version "1.1.7"
-  resolved "https://registry.yarnpkg.com/create-hmac/-/create-hmac-1.1.7.tgz#69170c78b3ab957147b2b8b04572e47ead2243ff"
-  integrity sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==
-  dependencies:
-    cipher-base "^1.0.3"
-    create-hash "^1.1.0"
-    inherits "^2.0.1"
-    ripemd160 "^2.0.0"
-    safe-buffer "^5.0.1"
-    sha.js "^2.4.8"
-
 create-react-class@^15.6.0, create-react-class@^15.6.2, create-react-class@^15.6.3:
   version "15.6.3"
   resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.3.tgz#2d73237fb3f970ae6ebe011a9e66f46dbca80036"
@@ -6178,23 +5843,6 @@ crx@^5.0.0:
     node-rsa "^1.0.5"
     pbf "^3.2.0"
 
-crypto-browserify@^3.11.0:
-  version "3.12.0"
-  resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.12.0.tgz#396cf9f3137f03e4b8e532c58f698254e00f80ec"
-  integrity sha512-fz4spIh+znjO2VjL+IdhEpRJ3YN6sMzITSBijk6FK2UvTqruSQW+/cCZTSNsMiZNvUeq0CqurF+dAbyiGOY6Wg==
-  dependencies:
-    browserify-cipher "^1.0.0"
-    browserify-sign "^4.0.0"
-    create-ecdh "^4.0.0"
-    create-hash "^1.1.0"
-    create-hmac "^1.1.0"
-    diffie-hellman "^5.0.0"
-    inherits "^2.0.1"
-    pbkdf2 "^3.0.3"
-    public-encrypt "^4.0.0"
-    randombytes "^2.0.0"
-    randomfill "^1.0.3"
-
 crypto-browserify@~3.2.6:
   version "3.2.8"
   resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.2.8.tgz#b9b11dbe6d9651dd882a01e6cc467df718ecf189"
@@ -6360,11 +6008,6 @@ currently-unhandled@^0.4.1:
   dependencies:
     array-find-index "^1.0.1"
 
-cyclist@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
-  integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=
-
 danger@^11.2.3:
   version "11.2.3"
   resolved "https://registry.yarnpkg.com/danger/-/danger-11.2.3.tgz#2a0a6d3581478005d0f2abf5b3995a8409165067"
@@ -6668,14 +6311,6 @@ deprecation@^2.0.0, deprecation@^2.3.1:
   resolved "https://registry.yarnpkg.com/deprecation/-/deprecation-2.3.1.tgz#6368cbdb40abf3373b525ac87e4a260c3a700919"
   integrity sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==
 
-des.js@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.1.tgz#5382142e1bdc53f85d86d53e5f4aa7deb91e0843"
-  integrity sha512-Q0I4pfFrv2VPd34/vfLrFOoRmlYj3OV50i7fskps1jZWK1kApMWWT9G6RRUeYedLcBDIhnSDaUvJMb3AhUlaEA==
-  dependencies:
-    inherits "^2.0.1"
-    minimalistic-assert "^1.0.0"
-
 destroy@1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.2.0.tgz#4803735509ad8be552934c67df614f94e66fa015"
@@ -6716,15 +6351,6 @@ diff@^4.0.1:
   resolved "https://registry.yarnpkg.com/diff/-/diff-4.0.2.tgz#60f3aecb89d5fae520c11aa19efc2bb982aade7d"
   integrity sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==
 
-diffie-hellman@^5.0.0:
-  version "5.0.3"
-  resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.3.tgz#40e8ee98f55a2149607146921c63e1ae5f3d2875"
-  integrity sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==
-  dependencies:
-    bn.js "^4.1.0"
-    miller-rabin "^4.0.0"
-    randombytes "^2.0.0"
-
 dir-glob@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"
@@ -6899,7 +6525,7 @@ duplexer@^0.1.1:
   resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.1.tgz#ace6ff808c1ce66b57d1ebf97977acb02334cfc1"
   integrity sha1-rOb/gIwc5mtX0ev5eXessCM0z8E=
 
-duplexify@^3.4.2, duplexify@^3.6.0:
+duplexify@^3.6.0:
   version "3.7.1"
   resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.7.1.tgz#2a4df5317f6ccfd91f86d6fd25d8d8a103b88309"
   integrity sha512-07z8uv2wMyS51kKhD1KsdXJg5WQ6t93RneqRxUHnskXVtlYYkLqM0gqStQZ3pj073g687jPCHrqNfCzawLYh5g==
@@ -6962,19 +6588,6 @@ electron@^23.1.2:
     "@types/node" "^16.11.26"
     extract-zip "^2.0.1"
 
-elliptic@^6.0.0, elliptic@^6.5.2:
-  version "6.5.2"
-  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.2.tgz#05c5678d7173c049d8ca433552224a495d0e3762"
-  integrity sha512-f4x70okzZbIQl/NSRLkI/+tteV/9WqL98zx+SQ69KbXxmVrmjwsNUPn/gYJJ0sHvEak24cZgHIPegRePAtA/xw==
-  dependencies:
-    bn.js "^4.4.0"
-    brorand "^1.0.1"
-    hash.js "^1.0.0"
-    hmac-drbg "^1.0.0"
-    inherits "^2.0.1"
-    minimalistic-assert "^1.0.0"
-    minimalistic-crypto-utils "^1.0.0"
-
 emittery@^0.13.1:
   version "0.13.1"
   resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.13.1.tgz#c04b8c3457490e0847ae51fced3af52d338e3dad"
@@ -7038,15 +6651,6 @@ end-of-stream@~1.1.0:
   dependencies:
     once "~1.3.0"
 
-enhanced-resolve@^4.1.0:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.1.1.tgz#2937e2b8066cd0fe7ce0990a98f0d71a35189f66"
-  integrity sha512-98p2zE+rL7/g/DzMHMTF4zZlCgeVdJ7yr6xzEpJRYwFYrGi9ANdn5DnJURg6RpBkyk60XYDnWIv51VfIhfNGuA==
-  dependencies:
-    graceful-fs "^4.1.2"
-    memory-fs "^0.5.0"
-    tapable "^1.0.0"
-
 enhanced-resolve@^5.14.0:
   version "5.14.0"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.14.0.tgz#0b6c676c8a3266c99fa281e4433a706f5c0c61c4"
@@ -7087,13 +6691,6 @@ envinfo@^7.7.3:
   resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-7.8.1.tgz#06377e3e5f4d379fea7ac592d5ad8927e0c4d475"
   integrity sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==
 
-errno@^0.1.3, errno@~0.1.7:
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.7.tgz#4684d71779ad39af177e3f007996f7c67c852618"
-  integrity sha512-MfrRBDWzIWifgq6tJj60gkAwtLNb6sQPlcFrSOflcP1aFmmruKQ2wRnze/8V6kgyz7H3FF8Npzv78mZ7XLLflg==
-  dependencies:
-    prr "~1.0.1"
-
 error-ex@^1.2.0, error-ex@^1.3.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
@@ -7596,24 +7193,11 @@ events@^1.0.0:
   resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924"
   integrity sha1-nr23Y1rQmccNzEwqH1AEKI6L2SQ=
 
-events@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/events/-/events-3.1.0.tgz#84279af1b34cb75aa88bf5ff291f6d0bd9b31a59"
-  integrity sha512-Rv+u8MLHNOdMjTAFeT3nCjHn2aGlx435FP/sDHNaRhDEMwyI/aB22Kj2qIN8R0cw3z28psEQLYwxVKLsKrMgWg==
-
 events@^3.2.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
   integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
 
-evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz#7fcbdb198dc71959432efe13842684e0525acb02"
-  integrity sha512-/f2Go4TognH/KvCISP7OUsHn85hT9nUkxxA9BEWxFn+Oj9o8ZNLm/40hdlgSLyuOimsrTKLUMEorQexp/aPQeA==
-  dependencies:
-    md5.js "^1.3.4"
-    safe-buffer "^5.1.1"
-
 exec-buffer@^3.0.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/exec-buffer/-/exec-buffer-3.2.0.tgz#b1686dbd904c7cf982e652c1f5a79b1e5573082b"
@@ -8016,11 +7600,6 @@ fd-slicer@~1.1.0:
   dependencies:
     pend "~1.2.0"
 
-figgy-pudding@^3.5.1:
-  version "3.5.2"
-  resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.2.tgz#b4eee8148abb01dcf1d1ac34367d59e12fa61d6e"
-  integrity sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw==
-
 figures@^1.3.5:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/figures/-/figures-1.7.0.tgz#cbe1e3affcf1cd44b80cadfed28dc793a9701d2e"
@@ -8287,22 +7866,22 @@ flatted@^3.1.0:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.7.tgz#609f39207cb614b89d0765b477cb2d437fbf9787"
   integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==
 
-flow-bin@^0.209.0:
-  version "0.209.0"
-  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.209.0.tgz#616a002b94ef35e1b083add9a6d27dbe387bf4f0"
-  integrity sha512-HRc6+bKE8AN23SnuKaxdUjcQcjaIp6pksrGJ6pltFO5tIEvZmPrbT99P7Yb3ybqwcKU/Ry8yfJbuW92Ed2V3nw==
+flow-bin@^0.217.0:
+  version "0.217.0"
+  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.217.0.tgz#c255b4d8d815520d396416c2f712ab849d61f467"
+  integrity sha512-AbbDE6QUpR+jpY9ejNROAk0P5D/2PxJzjU4D5vfmMwtS+QjjPjzfZGuatEJIn2k4PTZ2agbncaCtyHGO0AvG7A==
 
-flow-parser@^0.209.0:
-  version "0.209.0"
-  resolved "https://registry.yarnpkg.com/flow-parser/-/flow-parser-0.209.0.tgz#adf4fa1245b2dd9073bbffbdca5c005e83194430"
-  integrity sha512-uD7Du+9xC/gGnOyk3kANQmtgWWKANWcKGJ84Wu0NSjTaVING3GqUAsywUPAl3fEYKLVVIcDWiaQ8+R6qzghwmA==
+flow-parser@^0.217.0:
+  version "0.217.0"
+  resolved "https://registry.yarnpkg.com/flow-parser/-/flow-parser-0.217.0.tgz#0e6bed214151fa3240dc9fd83ac8a9e050e523c5"
+  integrity sha512-hEa5n0dta1RcaDwJDWbnyelw07PK7+Vx0f9kDht28JOt2hXgKdKGaT3wM45euWV2DxOXtzDSTaUgGSD/FPvC2Q==
 
-flow-remove-types@^2.209.0:
-  version "2.209.0"
-  resolved "https://registry.yarnpkg.com/flow-remove-types/-/flow-remove-types-2.209.0.tgz#32dbb65515f417067ade9f76260e8badd1baa541"
-  integrity sha512-p8Tvy95IunOvO0PVSb/rqxUqVXRS+G9aLSkDU56eGNTJ4lEdPbnXd+LCUUb3Ntl5t0L0Llndja6cQqjovC1qaQ==
+flow-remove-types@^2.217.0:
+  version "2.217.0"
+  resolved "https://registry.yarnpkg.com/flow-remove-types/-/flow-remove-types-2.217.0.tgz#b09084445b2cd929330638d7b8f1aacaa288c43a"
+  integrity sha512-4NbzbbseCAnPERMhPt7cwlRjynXda/fatzHCWCRBsnGO43oqSG5PqzZKEBJXngCJuVS8M5YQrw3ad3psPTEfCQ==
   dependencies:
-    flow-parser "^0.209.0"
+    flow-parser "^0.217.0"
     pirates "^3.0.2"
     vlq "^0.2.1"
 
@@ -8311,14 +7890,6 @@ fluent-syntax@0.13.0:
   resolved "https://registry.yarnpkg.com/fluent-syntax/-/fluent-syntax-0.13.0.tgz#417144d99cba94ff474c422b3e6623d5a842855a"
   integrity sha512-0Bk1AsliuYB550zr4JV9AYhsETsD3ELXUQzdXGJfIc1Ni/ukAfBdQInDhVMYJUaT2QxoamNslwkYF7MlOrPUwg==
 
-flush-write-stream@^1.0.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.1.1.tgz#8dd7d873a1babc207d94ead0c2e0e44276ebf2e8"
-  integrity sha512-3Z4XhFZ3992uIq0XOqb9AreonueSYphE6oYbpt5+3u06JWklbsPkNv3ZKkP9Bz/r+1MWCaMoSQ28P85+1Yc77w==
-  dependencies:
-    inherits "^2.0.3"
-    readable-stream "^2.3.6"
-
 follow-redirects@^1.0.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.7.0.tgz#489ebc198dc0e7f64167bd23b03c4c19b5784c76"
@@ -8387,7 +7958,7 @@ fresh@0.5.2:
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
   integrity sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=
 
-from2@^2.1.0, from2@^2.1.1:
+from2@^2.1.1:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/from2/-/from2-2.3.0.tgz#8bfb5502bde4a4d36cfdeea007fcca21d7e382af"
   integrity sha1-i/tVAr3kpNNs/e6gB/zKIdfjgq8=
@@ -8433,16 +8004,6 @@ fs-readdir-recursive@^1.1.0:
   resolved "https://registry.yarnpkg.com/fs-readdir-recursive/-/fs-readdir-recursive-1.1.0.tgz#e32fc030a2ccee44a6b5371308da54be0b397d27"
   integrity sha512-GNanXlVr2pf02+sPN40XN8HG+ePaNcvM0q5mZBd668Obwb0yD5GiUbZOFgwn8kGMY6I3mdyDJzieUy3PTYyTRA==
 
-fs-write-stream-atomic@^1.0.8:
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz#b47df53493ef911df75731e70a9ded0189db40c9"
-  integrity sha1-tH31NJPvkR33VzHnCp3tAYnbQMk=
-  dependencies:
-    graceful-fs "^4.1.2"
-    iferr "^0.1.5"
-    imurmurhash "^0.1.4"
-    readable-stream "1 || 2"
-
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
@@ -8907,7 +8468,7 @@ graceful-fs@^4.1.10, graceful-fs@^4.2.6:
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.6.tgz#ff040b2b0853b23c3d31027523706f1885d76bee"
   integrity sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==
 
-graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.2.4:
+graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.2.4:
   version "4.2.4"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb"
   integrity sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==
@@ -9050,52 +8611,26 @@ has@^1.0.1, has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
-hash-base@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/hash-base/-/hash-base-3.1.0.tgz#55c381d9e06e1d2997a883b4a3fddfe7f0d3af33"
-  integrity sha512-1nmYp/rhMDiE7AYkDw+lLwlAzz0AntGIe51F3RfFfEqyQ3feY2eI/NcwC6umIQVOASPMsWJLJScWKSSvzL9IVA==
-  dependencies:
-    inherits "^2.0.4"
-    readable-stream "^3.6.0"
-    safe-buffer "^5.2.0"
-
-hash.js@^1.0.0, hash.js@^1.0.3:
-  version "1.1.7"
-  resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.7.tgz#0babca538e8d4ee4a0f8988d68866537a003cf42"
-  integrity sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==
-  dependencies:
-    inherits "^2.0.3"
-    minimalistic-assert "^1.0.1"
-
-hermes-eslint@^0.9.0:
-  version "0.9.0"
-  resolved "https://registry.yarnpkg.com/hermes-eslint/-/hermes-eslint-0.9.0.tgz#f1423abe3dfd959257430d61a9bccd4700b59e09"
-  integrity sha512-rlkK51UpGwo0ZWg8hu8DVICth7RfGSvaEJzFflos8bDOYm/d842/J3IXi0lB9R9waOp4VGGSc8VDmh+a9p2Q2w==
+hermes-eslint@^0.15.1:
+  version "0.15.1"
+  resolved "https://registry.yarnpkg.com/hermes-eslint/-/hermes-eslint-0.15.1.tgz#c5919a6fdbd151febc3d5ed8ff17e5433913528c"
+  integrity sha512-ArfT3oASsYOkCa29GOw34GR+kpHXqrhhYgXDadK3daJBejrMPbGlUbBTzTlGBuz1CGLxxdC5lwwv3OegPJzfDA==
   dependencies:
     esrecurse "^4.3.0"
-    hermes-estree "0.9.0"
-    hermes-parser "0.9.0"
+    hermes-estree "0.15.1"
+    hermes-parser "0.15.1"
 
-hermes-estree@0.9.0:
-  version "0.9.0"
-  resolved "https://registry.yarnpkg.com/hermes-estree/-/hermes-estree-0.9.0.tgz#026e0abe6db1dcf50a81a79014b779a83db3b814"
-  integrity sha512-5DZ7Y0CbHVk8zPqgRCvqp8iw+P05svnQDI1aJFjdqCfXJ/1CZ+8aYpGlhJ29zCG5SE5duGTzSxogAYYI4QqXqw==
+hermes-estree@0.15.1:
+  version "0.15.1"
+  resolved "https://registry.yarnpkg.com/hermes-estree/-/hermes-estree-0.15.1.tgz#d06d4ddf87e91857b0130a083a9d7696d7aec61f"
+  integrity sha512-XrQH+GATG/8DYbzlrVs6Vf/EDxLhYEHXvzt/Xve4b/NXXpsNLDN8bdBEKp5z0XeOMoL1XMEexxIIf1a5bH6kYA==
 
-hermes-parser@0.9.0, hermes-parser@^0.9.0:
-  version "0.9.0"
-  resolved "https://registry.yarnpkg.com/hermes-parser/-/hermes-parser-0.9.0.tgz#ede3044d50479c61843cef5bbdcea83933d4e4ec"
-  integrity sha512-IcvJIlAn+9tpHkP+HTsxWKrIdQPp0gvGrrQmxlL4XnNS+Oh6R/Fpxbcoflm2kY3zgQjEvxZxLiK/2+k3/5wsrw==
+hermes-parser@0.15.1, hermes-parser@^0.15.1:
+  version "0.15.1"
+  resolved "https://registry.yarnpkg.com/hermes-parser/-/hermes-parser-0.15.1.tgz#f02587be85228b22841d50f6839ae42a308e5100"
+  integrity sha512-38Re105dr4UZ0/EPRApWxtIOWWynQpdOYWO+7nFO8ADd2mXdaHKMCFAxIjkqACa1GLrAtrXqqaJdUYHi/QUbkA==
   dependencies:
-    hermes-estree "0.9.0"
-
-hmac-drbg@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
-  integrity sha1-0nRXAQJabHdabFRXk+1QL8DGSaE=
-  dependencies:
-    hash.js "^1.0.3"
-    minimalistic-assert "^1.0.0"
-    minimalistic-crypto-utils "^1.0.1"
+    hermes-estree "0.15.1"
 
 homedir-polyfill@^1.0.0, homedir-polyfill@^1.0.1:
   version "1.0.3"
@@ -9258,11 +8793,6 @@ https-browserify@0.0.0:
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.0.tgz#b3ffdfe734b2a3d4a9efd58e8654c91fce86eafd"
   integrity sha1-s//f5zSyo9Sp79WOhlTJH86G6v0=
 
-https-browserify@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
-  integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=
-
 https-proxy-agent@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-5.0.0.tgz#e2a90542abb68a762e0a0850f6c9edadfd8506b2"
@@ -9342,11 +8872,6 @@ ieee754@^1.1.13, ieee754@^1.2.1:
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
   integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
 
-iferr@^0.1.5:
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/iferr/-/iferr-0.1.5.tgz#c60eed69e6d8fdb6b3104a1fcbca1c192dc5b501"
-  integrity sha1-xg7taebY/bazEEofy8ocGS3FtQE=
-
 ignore@^4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
@@ -9465,11 +8990,6 @@ indexof@0.0.1:
   resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
   integrity sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10=
 
-infer-owner@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/infer-owner/-/infer-owner-1.0.4.tgz#c4cefcaa8e51051c2a40ba2ce8a3d27295af9467"
-  integrity sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==
-
 inflight@^1.0.4:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
@@ -9478,7 +8998,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@2.0.4, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.1, inherits@~2.0.3:
+inherits@2, inherits@2.0.4, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.1, inherits@~2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -10761,7 +10281,7 @@ json-merge-patch@^0.2.3:
   dependencies:
     deep-equal "^1.0.0"
 
-json-parse-better-errors@^1.0.1, json-parse-better-errors@^1.0.2:
+json-parse-better-errors@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
   integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==
@@ -11069,11 +10589,6 @@ load-json-file@^1.0.0:
     pinkie-promise "^2.0.0"
     strip-bom "^2.0.0"
 
-loader-runner@^2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.4.0.tgz#ed47066bfe534d7e84c4c7b9998c2a75607d9357"
-  integrity sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw==
-
 loader-runner@^4.2.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.3.0.tgz#c1b4a163b99f614830353b16755e7149ac2314e1"
@@ -11088,7 +10603,7 @@ loader-utils@^1.0.2, loader-utils@^1.1.0:
     emojis-list "^2.0.0"
     json5 "^1.0.1"
 
-loader-utils@^1.2.3, loader-utils@^1.4.0:
+loader-utils@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
   integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==
@@ -11442,15 +10957,6 @@ matcher@^3.0.0:
   dependencies:
     escape-string-regexp "^4.0.0"
 
-md5.js@^1.3.4:
-  version "1.3.5"
-  resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
-  integrity sha512-xitP+WxNPcTTOgnTJcrhM0xvdPepipPSf3I8EIpGKeFLjt3PlJLIDG3u8EX53ZIubkb+5U2+3rELYpEhHhzdkg==
-  dependencies:
-    hash-base "^3.0.0"
-    inherits "^2.0.1"
-    safe-buffer "^5.1.2"
-
 mdn-browser-compat-data@1.0.25:
   version "1.0.25"
   resolved "https://registry.yarnpkg.com/mdn-browser-compat-data/-/mdn-browser-compat-data-1.0.25.tgz#140744490d69c3a1792338173d567f49377fca38"
@@ -11506,22 +11012,6 @@ memoize-one@^5.1.1:
   resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.1.1.tgz#047b6e3199b508eaec03504de71229b8eb1d75c0"
   integrity sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA==
 
-memory-fs@^0.4.1:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
-  integrity sha1-OpoguEYlI+RHz7x+i7gO1me/xVI=
-  dependencies:
-    errno "^0.1.3"
-    readable-stream "^2.0.1"
-
-memory-fs@^0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.5.0.tgz#324c01288b88652966d161db77838720845a8e3c"
-  integrity sha512-jA0rdU5KoQMC0e6ppoNRtpp6vjFq6+NY7r8hywnC7V+1Xj/MtHwGIbB1QaK/dunyjWteJzmkpd7ooeWg10T7GA==
-  dependencies:
-    errno "^0.1.3"
-    readable-stream "^2.0.1"
-
 meow@^3.3.0:
   version "3.7.0"
   resolved "https://registry.yarnpkg.com/meow/-/meow-3.7.0.tgz#72cb668b425228290abbfa856892587308a801fb"
@@ -11593,14 +11083,6 @@ micromatch@^4.0.4:
     braces "^3.0.1"
     picomatch "^2.2.3"
 
-miller-rabin@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/miller-rabin/-/miller-rabin-4.0.1.tgz#f080351c865b0dc562a8462966daa53543c78a4d"
-  integrity sha512-115fLhvZVqWwHPbClyntxEVfVDfl9DLLTuJvq3g2O/Oxi8AiNouAHvDSzHS0viUJc+V5vm3eq91Xwqn9dp4jRA==
-  dependencies:
-    bn.js "^4.0.0"
-    brorand "^1.0.1"
-
 mime-db@1.40.0, "mime-db@>= 1.40.0 < 2":
   version "1.40.0"
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.40.0.tgz#a65057e998db090f732a68f6c276d387d4126c32"
@@ -11667,16 +11149,11 @@ mimic-response@^3.1.0:
   resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-3.1.0.tgz#2d1d59af9c1b129815accc2c46a022a5ce1fa3c9"
   integrity sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==
 
-minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
+minimalistic-assert@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
   integrity sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==
 
-minimalistic-crypto-utils@^1.0.0, minimalistic-crypto-utils@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
-  integrity sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=
-
 "minimatch@2 || 3", minimatch@^3.0.3, minimatch@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
@@ -11713,22 +11190,6 @@ minimist@^1.2.3:
   resolved "https://registry.yarnpkg.com/minipass/-/minipass-6.0.2.tgz#542844b6c4ce95b202c0995b0a471f1229de4c81"
   integrity sha512-MzWSV5nYVT7mVyWCwn2o7JH13w2TBRmmSqSRCKzTw+lmft9X4z+3wjvs06Tzijo5z4W/kahUCDpRXTF+ZrmF/w==
 
-mississippi@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/mississippi/-/mississippi-3.0.0.tgz#ea0a3291f97e0b5e8776b363d5f0a12d94c67022"
-  integrity sha512-x471SsVjUtBRtcvd4BzKE9kFC+/2TeWgKCgw0bZcw1b9l2X3QX5vCWgF+KaZaYm87Ss//rHnWryupDrgLvmSkA==
-  dependencies:
-    concat-stream "^1.5.0"
-    duplexify "^3.4.2"
-    end-of-stream "^1.1.0"
-    flush-write-stream "^1.0.0"
-    from2 "^2.1.0"
-    parallel-transform "^1.1.0"
-    pump "^3.0.0"
-    pumpify "^1.3.3"
-    stream-each "^1.1.0"
-    through2 "^2.0.0"
-
 mixin-deep@^1.2.0:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.2.tgz#1120b43dc359a785dce65b55b82e257ccf479566"
@@ -11754,18 +11215,6 @@ moment@^2.10.6:
   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"
-  resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
-  integrity sha1-viwAX9oy4LKa8fBdfEszIUxwH5I=
-  dependencies:
-    aproba "^1.1.1"
-    copy-concurrently "^1.0.0"
-    fs-write-stream-atomic "^1.0.8"
-    mkdirp "^0.5.1"
-    rimraf "^2.5.4"
-    run-queue "^1.0.3"
-
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
@@ -11981,35 +11430,6 @@ node-libs-browser@0.5.3:
     util "~0.10.3"
     vm-browserify "0.0.4"
 
-node-libs-browser@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-2.2.1.tgz#b64f513d18338625f90346d27b0d235e631f6425"
-  integrity sha512-h/zcD8H9kaDZ9ALUWwlBUDo6TKF8a7qBSCSEGfjTVIYeqsioSKaAX+BN7NgiMGp6iSIXZ3PxgCu8KS3b71YK5Q==
-  dependencies:
-    assert "^1.1.1"
-    browserify-zlib "^0.2.0"
-    buffer "^4.3.0"
-    console-browserify "^1.1.0"
-    constants-browserify "^1.0.0"
-    crypto-browserify "^3.11.0"
-    domain-browser "^1.1.1"
-    events "^3.0.0"
-    https-browserify "^1.0.0"
-    os-browserify "^0.3.0"
-    path-browserify "0.0.1"
-    process "^0.11.10"
-    punycode "^1.2.4"
-    querystring-es3 "^0.2.0"
-    readable-stream "^2.3.3"
-    stream-browserify "^2.0.1"
-    stream-http "^2.7.2"
-    string_decoder "^1.0.0"
-    timers-browserify "^2.0.4"
-    tty-browserify "0.0.0"
-    url "^0.11.0"
-    util "^0.11.0"
-    vm-browserify "^1.0.1"
-
 node-modules-regexp@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/node-modules-regexp/-/node-modules-regexp-1.0.0.tgz#8d9dbe28964a4ac5712e9131642107c71e90ec40"
@@ -12363,11 +11783,6 @@ ordered-read-streams@^1.0.0:
     is-stream "^1.0.1"
     readable-stream "^2.0.1"
 
-os-browserify@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.3.0.tgz#854373c7f5c2315914fc9bfc6bd8238fdda1ec27"
-  integrity sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc=
-
 os-browserify@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.1.2.tgz#49ca0293e0b19590a5f5de10c7f265a617d8fe54"
@@ -12575,20 +11990,11 @@ pako@~0.2.0:
   resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75"
   integrity sha1-8/dSL073gjSNqBYbrZ7P1Rv4OnU=
 
-pako@~1.0.2, pako@~1.0.5:
+pako@~1.0.2:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
   integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
 
-parallel-transform@^1.1.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/parallel-transform/-/parallel-transform-1.2.0.tgz#9049ca37d6cb2182c3b1d2c720be94d14a5814fc"
-  integrity sha512-P2vSmIu38uIlvdcU7fDkyrxj33gTUy/ABO5ZUbGowxNCopBq/OoD42bP4UmMrJoPyk4Uqf0mu3mtWBhHCZD8yg==
-  dependencies:
-    cyclist "^1.0.1"
-    inherits "^2.0.3"
-    readable-stream "^2.1.5"
-
 parent-module@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
@@ -12596,18 +12002,6 @@ parent-module@^1.0.0:
   dependencies:
     callsites "^3.0.0"
 
-parse-asn1@^5.0.0, parse-asn1@^5.1.5:
-  version "5.1.5"
-  resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.1.5.tgz#003271343da58dc94cace494faef3d2147ecea0e"
-  integrity sha512-jkMYn1dcJqF6d5CpU689bq7w/b5ALS9ROVSpQDPrZsqqesUJii9qutvoT5ltGedNXMO2e16YUWIghG9KxaViTQ==
-  dependencies:
-    asn1.js "^4.0.0"
-    browserify-aes "^1.0.0"
-    create-hash "^1.1.0"
-    evp_bytestokey "^1.0.0"
-    pbkdf2 "^3.0.3"
-    safe-buffer "^5.1.1"
-
 parse-diff@^0.7.0:
   version "0.7.1"
   resolved "https://registry.yarnpkg.com/parse-diff/-/parse-diff-0.7.1.tgz#9b7a2451c3725baf2c87c831ba192d40ee2237d4"
@@ -12714,11 +12108,6 @@ path-browserify@0.0.0:
   resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.0.tgz#a0b870729aae214005b7d5032ec2cbbb0fb4451a"
   integrity sha1-oLhwcpquIUAFt9UDLsLLuw+0RRo=
 
-path-browserify@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.1.tgz#e6c4ddd7ed3aa27c68a20cc4e50e1a4ee83bbc4a"
-  integrity sha512-BapA40NHICOS+USX9SN4tyhq+A2RrN/Ws5F0Z5aMHDp98Fl86lX8Oti8B7uN93L4Ifv4fHOEA+pQw87gmMO/lQ==
-
 path-dirname@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/path-dirname/-/path-dirname-1.0.2.tgz#cc33d24d525e099a5388c0336c6e32b9160609e0"
@@ -12823,17 +12212,6 @@ pbkdf2-compat@2.0.1:
   resolved "https://registry.yarnpkg.com/pbkdf2-compat/-/pbkdf2-compat-2.0.1.tgz#b6e0c8fa99494d94e0511575802a59a5c142f288"
   integrity sha1-tuDI+plJTZTgURV1gCpZpcFC8og=
 
-pbkdf2@^3.0.3:
-  version "3.0.17"
-  resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.0.17.tgz#976c206530617b14ebb32114239f7b09336e93a6"
-  integrity sha512-U/il5MsrZp7mGg3mSQfn742na2T+1/vHDCG5/iTI3X9MKUuYUZVLQhyRsg06mCgDBTd57TxzgZt7P+fYfjRLtA==
-  dependencies:
-    create-hash "^1.1.2"
-    create-hmac "^1.1.4"
-    ripemd160 "^2.0.1"
-    safe-buffer "^5.0.1"
-    sha.js "^2.4.8"
-
 peek-readable@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/peek-readable/-/peek-readable-4.0.0.tgz#b024ef391c86136eba0ae9df3ff4f966a09e9a7e"
@@ -13218,11 +12596,6 @@ progress@^2.0.0, progress@^2.0.3:
   resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
   integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
 
-promise-inflight@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
-  integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
-
 promise-polyfill@^6.0.1:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/promise-polyfill/-/promise-polyfill-6.1.0.tgz#dfa96943ea9c121fca4de9b5868cb39d3472e057"
@@ -13289,11 +12662,6 @@ proxy-from-env@^1.1.0:
   resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
   integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
 
-prr@~1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
-  integrity sha1-0/wRS6BplaRexok/SEzrHXj19HY=
-
 pseudomap@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
@@ -13309,18 +12677,6 @@ psl@^1.1.33:
   resolved "https://registry.yarnpkg.com/psl/-/psl-1.9.0.tgz#d0df2a137f00794565fcaf3b2c00cd09f8d5a5a7"
   integrity sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==
 
-public-encrypt@^4.0.0:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/public-encrypt/-/public-encrypt-4.0.3.tgz#4fcc9d77a07e48ba7527e7cbe0de33d0701331e0"
-  integrity sha512-zVpa8oKZSz5bTMTFClc1fQOnyyEzpl5ozpi1B5YcvBrdohMjH2rfsBtyXcuNuwjsDIXmBYlF2N5FlJYhR29t8Q==
-  dependencies:
-    bn.js "^4.1.0"
-    browserify-rsa "^4.0.0"
-    create-hash "^1.1.0"
-    parse-asn1 "^5.0.0"
-    randombytes "^2.0.1"
-    safe-buffer "^5.1.2"
-
 pump@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/pump/-/pump-1.0.2.tgz#3b3ee6512f94f0e575538c17995f9f16990a5d51"
@@ -13345,7 +12701,7 @@ pump@^3.0.0:
     end-of-stream "^1.1.0"
     once "^1.3.1"
 
-pumpify@^1.3.3, pumpify@^1.3.5:
+pumpify@^1.3.5:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/pumpify/-/pumpify-1.5.1.tgz#36513be246ab27570b1a374a5ce278bfd74370ce"
   integrity sha512-oClZI37HvuUJJxSKKrC17bZ9Cu0ZYhEAGPsPUy9KlMUmv9dKX2o77RUmq7f3XjIxbwyGwYzbzQ1L2Ks8sIradQ==
@@ -13412,7 +12768,7 @@ query-string@^6.12.1:
     split-on-first "^1.0.0"
     strict-uri-encode "^2.0.0"
 
-querystring-es3@^0.2.0, querystring-es3@~0.2.0:
+querystring-es3@~0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
   integrity sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM=
@@ -13452,21 +12808,13 @@ random-seed@^0.3.0:
   dependencies:
     json-stringify-safe "^5.0.1"
 
-randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5, randombytes@^2.1.0:
+randombytes@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
   integrity sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==
   dependencies:
     safe-buffer "^5.1.0"
 
-randomfill@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/randomfill/-/randomfill-1.0.4.tgz#c92196fc86ab42be983f1bf31778224931d61458"
-  integrity sha512-87lcbR8+MhcWcUiQ+9e+Rwx8MyR2P7qnt15ynUlbm3TU/fjbgz4GsvfSUDTemtCCtVCqb4ZcEFlyPNTh9bBTLw==
-  dependencies:
-    randombytes "^2.0.5"
-    safe-buffer "^5.1.0"
-
 range-parser@^1.2.1, range-parser@~1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
@@ -13611,19 +12959,6 @@ read-pkg@^1.0.0:
     normalize-package-data "^2.3.2"
     path-type "^1.0.0"
 
-"readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.5, readable-stream@^2.3.6, readable-stream@~2.3.6:
-  version "2.3.7"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
-  integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
-  dependencies:
-    core-util-is "~1.0.0"
-    inherits "~2.0.3"
-    isarray "~1.0.0"
-    process-nextick-args "~2.0.0"
-    safe-buffer "~5.1.1"
-    string_decoder "~1.1.1"
-    util-deprecate "~1.0.1"
-
 "readable-stream@2 || 3":
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.5.0.tgz#465d70e6d1087f6162d079cd0b5db7fbebfd1606"
@@ -13643,6 +12978,19 @@ readable-stream@^1.0.27-1, readable-stream@^1.1.13:
     isarray "0.0.1"
     string_decoder "~0.10.x"
 
+readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.5, readable-stream@^2.3.6, readable-stream@~2.3.6:
+  version "2.3.7"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
+  integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.3"
+    isarray "~1.0.0"
+    process-nextick-args "~2.0.0"
+    safe-buffer "~5.1.1"
+    string_decoder "~1.1.1"
+    util-deprecate "~1.0.1"
+
 readable-stream@^2.0.5, readable-stream@^2.3.0:
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.6.tgz#b11c27d88b8ff1fbe070643cf94b0c79ae1b0aaf"
@@ -13665,15 +13013,6 @@ readable-stream@^3.0.1, readable-stream@^3.0.6, readable-stream@^3.1.1, readable
     string_decoder "^1.1.1"
     util-deprecate "^1.0.1"
 
-readable-stream@^3.6.0:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
-  integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
-  dependencies:
-    inherits "^2.0.3"
-    string_decoder "^1.1.1"
-    util-deprecate "^1.0.1"
-
 readable-web-to-node-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/readable-web-to-node-stream/-/readable-web-to-node-stream-2.0.0.tgz#751e632f466552ac0d5c440cc01470352f93c4b7"
@@ -14084,14 +13423,6 @@ ripemd160@0.2.0:
   resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-0.2.0.tgz#2bf198bde167cacfa51c0a928e84b68bbe171fce"
   integrity sha1-K/GYveFnys+lHAqSjoS2i74XH84=
 
-ripemd160@^2.0.0, ripemd160@^2.0.1:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-2.0.2.tgz#a1c1a6f624751577ba5d07914cbc92850585890c"
-  integrity sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA==
-  dependencies:
-    hash-base "^3.0.0"
-    inherits "^2.0.1"
-
 roarr@^2.15.3:
   version "2.15.3"
   resolved "https://registry.yarnpkg.com/roarr/-/roarr-2.15.3.tgz#65248a291a15af3ebfd767cbf7e44cb402d1d836"
@@ -14150,13 +13481,6 @@ run-parallel@^1.1.9:
   resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.1.9.tgz#c9dd3a7cf9f4b2c4b6244e173a6ed866e61dd679"
   integrity sha512-DEqnSRTDw/Tc3FXf49zedI638Z9onwUotBMiUFKmrO2sdFKIbXamXGQ3Axd4qgphxKB4kw/qP1w5kTxnfU1B9Q==
 
-run-queue@^1.0.0, run-queue@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/run-queue/-/run-queue-1.0.3.tgz#e848396f057d223f24386924618e25694161ec47"
-  integrity sha1-6Eg5bwV9Ij8kOGkkYY4laUFh7Ec=
-  dependencies:
-    aproba "^1.1.1"
-
 rxjs@^5.5.6:
   version "5.5.6"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-5.5.6.tgz#e31fb96d6fd2ff1fd84bcea8ae9c02d007179c02"
@@ -14181,7 +13505,7 @@ safe-buffer@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.0, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@^5.2.0, safe-buffer@~5.2.0:
+safe-buffer@>=5.1.0, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@~5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.0.tgz#b74daec49b1148f88c64b68d49b1e815c1f2f519"
   integrity sha512-fZEwUGbVl7kouZs1jCdMLdt95hdIv0ZeHg6L7qPeciMZhZ+/gdesW4wgTARkrFWEpspjEATAzUGPG8N2jJiwbg==
@@ -14405,11 +13729,6 @@ serialize-error@^7.0.1:
   dependencies:
     type-fest "^0.13.1"
 
-serialize-javascript@^2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-2.1.2.tgz#ecec53b0e0317bdc95ef76ab7074b7384785fa61"
-  integrity sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ==
-
 serialize-javascript@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-6.0.1.tgz#b206efb27c3da0b0ab6b52f48d170b7996458e5c"
@@ -14455,7 +13774,7 @@ set-value@^2.0.0, set-value@^2.0.1:
     is-plain-object "^2.0.3"
     split-string "^3.0.1"
 
-setimmediate@^1.0.4, setimmediate@^1.0.5:
+setimmediate@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
   integrity sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=
@@ -14475,7 +13794,7 @@ sha.js@2.2.6:
   resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.2.6.tgz#17ddeddc5f722fb66501658895461977867315ba"
   integrity sha1-F93t3F9yL7ZlAWWIlUYZd4ZzFbo=
 
-sha.js@^2.4.0, sha.js@^2.4.8, sha.js@~2.4.4:
+sha.js@~2.4.4:
   version "2.4.11"
   resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.11.tgz#37a5cf0b81ecbc6943de109ba2960d1b26584ae7"
   integrity sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==
@@ -14773,7 +14092,7 @@ source-map-support@^0.4.18:
   dependencies:
     source-map "^0.5.6"
 
-source-map-support@^0.5.16, source-map-support@^0.5.17, source-map-support@~0.5.12, source-map-support@~0.5.20, source-map-support@~0.5.4:
+source-map-support@^0.5.16, source-map-support@^0.5.17, source-map-support@~0.5.20, 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==
@@ -14916,13 +14235,6 @@ sshpk@^1.7.0:
     jsbn "~0.1.0"
     tweetnacl "~0.14.0"
 
-ssri@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/ssri/-/ssri-6.0.1.tgz#2a3c41b28dd45b62b63676ecb74001265ae9edd8"
-  integrity sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==
-  dependencies:
-    figgy-pudding "^3.5.1"
-
 stable@^0.1.8:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
@@ -14966,33 +14278,6 @@ stream-browserify@^1.0.0:
     inherits "~2.0.1"
     readable-stream "^1.0.27-1"
 
-stream-browserify@^2.0.1:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.2.tgz#87521d38a44aa7ee91ce1cd2a47df0cb49dd660b"
-  integrity sha512-nX6hmklHs/gr2FuxYDltq8fJA1GDlxKQCz8O/IM4atRqBH8OORmBNgfvW5gG10GT/qQ9u0CzIvr2X5Pkt6ntqg==
-  dependencies:
-    inherits "~2.0.1"
-    readable-stream "^2.0.2"
-
-stream-each@^1.1.0:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/stream-each/-/stream-each-1.2.3.tgz#ebe27a0c389b04fbcc233642952e10731afa9bae"
-  integrity sha512-vlMC2f8I2u/bZGqkdfLQW/13Zihpej/7PmSiMQsbYddxuTsJp8vRe2x2FvVExZg7FaOds43ROAuFJwPR4MTZLw==
-  dependencies:
-    end-of-stream "^1.1.0"
-    stream-shift "^1.0.0"
-
-stream-http@^2.7.2:
-  version "2.8.3"
-  resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.8.3.tgz#b2d242469288a5a27ec4fe8933acf623de6514fc"
-  integrity sha512-+TSkfINHDo4J+ZobQLWiMouQYB+UVYFttRA94FpEzzJ7ZdqcL4uUUQ7WkdkI4DSozGmgBUE/a47L+38PenXhUw==
-  dependencies:
-    builtin-status-codes "^3.0.0"
-    inherits "^2.0.1"
-    readable-stream "^2.3.6"
-    to-arraybuffer "^1.0.0"
-    xtend "^4.0.0"
-
 stream-parser@~0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/stream-parser/-/stream-parser-0.3.1.tgz#1618548694420021a1182ff0af1911c129761773"
@@ -15120,7 +14405,7 @@ string.prototype.trimstart@^1.0.4:
     call-bind "^1.0.2"
     define-properties "^1.1.3"
 
-string_decoder@^1.0.0, string_decoder@^1.1.1:
+string_decoder@^1.1.1:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e"
   integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
@@ -15395,11 +14680,6 @@ table@^6.0.9:
     string-width "^4.2.3"
     strip-ansi "^6.0.1"
 
-tapable@^1.0.0, tapable@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
-  integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==
-
 tapable@^2.1.1, tapable@^2.2.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
@@ -15471,21 +14751,6 @@ term-size@^2.1.0:
   resolved "https://registry.yarnpkg.com/term-size/-/term-size-2.2.0.tgz#1f16adedfe9bdc18800e1776821734086fcc6753"
   integrity sha512-a6sumDlzyHVJWb8+YofY4TW112G6p2FCPEAFk+59gIYHv3XHRhm9ltVQ9kli4hNWeQBwSpe8cRN25x0ROunMOw==
 
-terser-webpack-plugin@^1.4.3:
-  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.4.3.tgz#5ecaf2dbdc5fb99745fd06791f46fc9ddb1c9a7c"
-  integrity sha512-QMxecFz/gHQwteWwSo5nTc6UaICqN1bMedC5sMtUc7y3Ha3Q8y6ZO0iCR8pq4RJC8Hjf0FEPEHZqcMB/+DFCrA==
-  dependencies:
-    cacache "^12.0.2"
-    find-cache-dir "^2.1.0"
-    is-wsl "^1.1.0"
-    schema-utils "^1.0.0"
-    serialize-javascript "^2.1.2"
-    source-map "^0.6.1"
-    terser "^4.1.2"
-    webpack-sources "^1.4.0"
-    worker-farm "^1.7.0"
-
 terser-webpack-plugin@^5.3.7:
   version "5.3.8"
   resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.3.8.tgz#415e03d2508f7de63d59eca85c5d102838f06610"
@@ -15497,15 +14762,6 @@ terser-webpack-plugin@^5.3.7:
     serialize-javascript "^6.0.1"
     terser "^5.16.8"
 
-terser@^4.1.2:
-  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"
-    source-map-support "~0.5.12"
-
 terser@^5.16.8:
   version "5.17.3"
   resolved "https://registry.yarnpkg.com/terser/-/terser-5.17.3.tgz#7f908f16b3cdf3f6c0f8338e6c1c674837f90d25"
@@ -15602,13 +14858,6 @@ timers-browserify@^1.0.1:
   dependencies:
     process "~0.11.0"
 
-timers-browserify@^2.0.4:
-  version "2.0.11"
-  resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.11.tgz#800b1f3eee272e5bc53ee465a04d0e804c31211f"
-  integrity sha512-60aV6sgJ5YEbzUdn9c8kYGIqOubPoUdqQCul3SBAsRCZ40s6Y5cMcrW4dt3/k/EsbLVJNl9n6Vz3fTc+k2GeKQ==
-  dependencies:
-    setimmediate "^1.0.4"
-
 tiny-warning@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
@@ -15642,11 +14891,6 @@ to-absolute-glob@^2.0.0:
     is-absolute "^0.2.5"
     is-negated-glob "^1.0.0"
 
-to-arraybuffer@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
-  integrity sha1-fSKbH8xjfkZsoIEYCDanqr/4P0M=
-
 to-buffer@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/to-buffer/-/to-buffer-1.1.1.tgz#493bd48f62d7c43fcded313a03dcadb2e1213a80"
@@ -15963,20 +15207,6 @@ uniq@^1.0.1:
   resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
   integrity sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=
 
-unique-filename@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/unique-filename/-/unique-filename-1.1.1.tgz#1d69769369ada0583103a1e6ae87681b56573230"
-  integrity sha512-Vmp0jIp2ln35UTXuryvjzkjGdRyf9b2lTXuSYUiPmzRcl3FDtYqAwOnTJkAngD9SWhnoJzDbTKwaOrZ+STtxNQ==
-  dependencies:
-    unique-slug "^2.0.0"
-
-unique-slug@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/unique-slug/-/unique-slug-2.0.2.tgz#baabce91083fc64e945b0f3ad613e264f7cd4e6c"
-  integrity sha512-zoWr9ObaxALD3DOPfjPSqxt4fnZiWblxHIgeWqW8x7UqDzEtHEQLzji2cuJYQFCU6KmoJikOYAZlrTHHebjx2w==
-  dependencies:
-    imurmurhash "^0.1.4"
-
 unique-stream@^2.0.2:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/unique-stream/-/unique-stream-2.2.1.tgz#5aa003cfbe94c5ff866c4e7d668bb1c4dbadb369"
@@ -16151,14 +15381,6 @@ url-to-options@^1.0.1:
   resolved "https://registry.yarnpkg.com/url-to-options/-/url-to-options-1.0.1.tgz#1505a03a289a48cbd7a434efbaeec5055f5633a9"
   integrity sha1-FQWgOiiaSMvXpDTvuu7FBV9WM6k=
 
-url@^0.11.0:
-  version "0.11.0"
-  resolved "https://registry.yarnpkg.com/url/-/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1"
-  integrity sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=
-  dependencies:
-    punycode "1.3.2"
-    querystring "0.2.0"
-
 url@~0.10.1:
   version "0.10.3"
   resolved "https://registry.yarnpkg.com/url/-/url-0.10.3.tgz#021e4d9c7705f21bbf37d03ceb58767402774c64"
@@ -16199,13 +15421,6 @@ util@0.10.3:
   dependencies:
     inherits "2.0.1"
 
-util@^0.11.0:
-  version "0.11.1"
-  resolved "https://registry.yarnpkg.com/util/-/util-0.11.1.tgz#3236733720ec64bb27f6e26f421aaa2e1b588d61"
-  integrity sha512-HShAsny+zS2TZfaXxD9tYj4HQGlBezXZMZuM/S5PKLLoZkShZiGk9o5CzukI1LVHZvjdvZ2Sj1aW/Ndn2NB/HQ==
-  dependencies:
-    inherits "2.0.3"
-
 util@~0.10.3:
   version "0.10.4"
   resolved "https://registry.yarnpkg.com/util/-/util-0.10.4.tgz#3aa0125bfe668a4672de58857d3ace27ecb76901"
@@ -16314,11 +15529,6 @@ vm-browserify@0.0.4:
   dependencies:
     indexof "0.0.1"
 
-vm-browserify@^1.0.1:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
-  integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
-
 w3c-xmlserializer@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz#aebdc84920d806222936e3cdce408e32488a3073"
@@ -16333,7 +15543,7 @@ walker@^1.0.8:
   dependencies:
     makeerror "1.0.12"
 
-watchpack@1.6.1, watchpack@^1.6.1:
+watchpack@1.6.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.1.tgz#280da0a8718592174010c078c7585a74cd8cd0e2"
   integrity sha512-+IF9hfUFOrYOOaKyfaI7h7dquUIOgyEMoQMLA7OP5FxegKA2+XdXThAZ9TU2kucfhDH7rfMHs1oPYziVGWRnZA==
@@ -16498,48 +15708,11 @@ webpack-merge@^5.7.3:
     clone-deep "^4.0.1"
     wildcard "^2.0.0"
 
-webpack-sources@^1.4.0, webpack-sources@^1.4.1:
-  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.4.3.tgz#eedd8ec0b928fbf1cbfe994e22d2d890f330a933"
-  integrity sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==
-  dependencies:
-    source-list-map "^2.0.0"
-    source-map "~0.6.1"
-
 webpack-sources@^3.2.3:
   version "3.2.3"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"
   integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
 
-webpack@^4.41.2:
-  version "4.43.0"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.43.0.tgz#c48547b11d563224c561dad1172c8aa0b8a678e6"
-  integrity sha512-GW1LjnPipFW2Y78OOab8NJlCflB7EFskMih2AHdvjbpKMeDJqEgSx24cXXXiPS65+WSwVyxtDsJH6jGX2czy+g==
-  dependencies:
-    "@webassemblyjs/ast" "1.9.0"
-    "@webassemblyjs/helper-module-context" "1.9.0"
-    "@webassemblyjs/wasm-edit" "1.9.0"
-    "@webassemblyjs/wasm-parser" "1.9.0"
-    acorn "^6.4.1"
-    ajv "^6.10.2"
-    ajv-keywords "^3.4.1"
-    chrome-trace-event "^1.0.2"
-    enhanced-resolve "^4.1.0"
-    eslint-scope "^4.0.3"
-    json-parse-better-errors "^1.0.2"
-    loader-runner "^2.4.0"
-    loader-utils "^1.2.3"
-    memory-fs "^0.4.1"
-    micromatch "^3.1.10"
-    mkdirp "^0.5.3"
-    neo-async "^2.6.1"
-    node-libs-browser "^2.2.1"
-    schema-utils "^1.0.0"
-    tapable "^1.1.3"
-    terser-webpack-plugin "^1.4.3"
-    watchpack "^1.6.1"
-    webpack-sources "^1.4.1"
-
 webpack@^5.82.1:
   version "5.82.1"
   resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.82.1.tgz#8f38c78e53467556e8a89054ebd3ef6e9f67dbab"
@@ -16714,13 +15887,6 @@ word-wrap@^1.2.3, word-wrap@~1.2.3:
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
   integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
 
-worker-farm@^1.7.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/worker-farm/-/worker-farm-1.7.0.tgz#26a94c5391bbca926152002f69b84a4bf772e5a8"
-  integrity sha512-rvw3QTZc8lAxyVrqcSGVm5yP/IJ2UcB3U0graE3LCFoZ0Yn2x4EoVSqJKdB/T5M+FLcRPjz4TDacRf3OCfNUzw==
-  dependencies:
-    errno "~0.1.7"
-
 workerize-loader@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/workerize-loader/-/workerize-loader-2.0.2.tgz#2f39c3e6eb6c41fac8d28d5b9fa20b4035e3db7a"