useFormState: Hash the component key path for more compact output (#27397)

To support MPA-style form submissions, useFormState sends down a key
that represents the identity of the hook on the page. It's based on the
key path of the component within the React tree; for deeply nested
hooks, this keypath can become very long. We can hash the key to make it
shorter.

Adds a method called createFastHash to the Stream Config interface.
We're not using this for security or obfuscation, only to generate a
more compact key without sacrificing too much collision resistance.

- In Node.js builds, createFastHash uses the built-in crypto module.
- In Bun builds, createFastHash uses Bun.hash. See:
https://bun.sh/docs/api/hashing#bun-hash

I have not yet implemented createFastHash in the Edge, Browser, or FB
(Hermes) stream configs because those environments do not have a
built-in hashing function that meets our requirements. (We can't use the
web standard `crypto` API because those methods are async, and yielding
to the main thread is too costly to be worth it for this particular use
case.) We'll likely use a pure JS implementation in those environments;
for now, they just return the original string without hashing it. I'll
address this in separate PRs.

.eslintrc.js

@@ -415,9 +415,7 @@ module.exports = {
       },
     },
     {
-      files: [
-        'packages/react-native-renderer/**/*.js',
-      ],
+      files: ['packages/react-native-renderer/**/*.js'],
       globals: {
         nativeFabricUIManager: 'readonly',
       },

packages/react-dom-bindings/src/server/ReactDOMLegacyServerStreamConfig.js

@@ -76,3 +76,7 @@ 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 {
+  return input;
+}

packages/react-server-dom-fb/src/ReactServerStreamConfigFB.js

@@ -83,3 +83,7 @@ export function closeWithError(destination: Destination, error: mixed): void {
   destination.fatal = true;
   destination.error = error;
 }
+
+export function createFastHash(input: string): string | number {
+  return input;
+}

packages/react-server/src/ReactFizzHooks.js

@@ -27,6 +27,7 @@ import {getTreeId} from './ReactFizzTreeContext';
 import {createThenableState, trackUsedThenable} from './ReactFizzThenable';
 
 import {makeId, NotPendingTransition} from './ReactFizzConfig';
+import {createFastHash} from './ReactServerStreamConfig';
 
 import {
   enableCache,
@@ -592,11 +593,16 @@ function createPostbackFormStateKey(
   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];
-    return 'k' + JSON.stringify(keyPath);
+    // 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;
   }
 }
 

packages/react-server/src/ReactServerStreamConfigBrowser.js

@@ -182,3 +182,7 @@ export function closeWithError(destination: Destination, error: mixed): void {
     destination.close();
   }
 }
+
+export function createFastHash(input: string): string | number {
+  return input;
+}

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);
+}

packages/react-server/src/ReactServerStreamConfigEdge.js

@@ -182,3 +182,7 @@ export function closeWithError(destination: Destination, error: mixed): void {
     destination.close();
   }
 }
+
+export function createFastHash(input: string): string | number {
+  return input;
+}

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');
+}

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;

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,
+};

scripts/rollup/bundles.js

@@ -260,7 +260,7 @@ const bundles = [
     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] : [],
@@ -339,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],
@@ -348,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],
@@ -357,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 *******/
@@ -377,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],
@@ -386,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],
@@ -439,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 *******/
@@ -457,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 *******/

scripts/rollup/validate/eslintrc.cjs.js

@@ -65,6 +65,8 @@ module.exports = {
 
     // Native Scheduler
     nativeRuntimeScheduler: 'readonly',
+
+    Bun: 'readonly',
   },
   parserOptions: {
     ecmaVersion: 2020,

scripts/rollup/validate/eslintrc.cjs2015.js

@@ -62,6 +62,8 @@ module.exports = {
 
     // act
     IS_REACT_ACT_ENVIRONMENT: 'readonly',
+
+    Bun: 'readonly',
   },
   parserOptions: {
     ecmaVersion: 2015,

scripts/rollup/validate/eslintrc.esm.js

@@ -62,6 +62,8 @@ module.exports = {
 
     // act
     IS_REACT_ACT_ENVIRONMENT: 'readonly',
+
+    Bun: 'readonly',
   },
   parserOptions: {
     ecmaVersion: 2020,