@samitouri / QOS-React / commits / 2b3d582683

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.

Andrew Clark committed Sep 20, 2023 at 17:13 UTC 2b3d5826836ac59f8446281976762d594e55d97e

14 files changed +58 -12

.eslintrc.js

+1 -3

@@ -415,9 +415,7 @@ module.exports = {

415 },

416 },

417 {

418 - files: [

419 - 'packages/react-native-renderer/**/*.js',

420 - ],

418 + files: ['packages/react-native-renderer/**/*.js'],

419 globals: {

420 nativeFabricUIManager: 'readonly',

421 },

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

@@ -76,3 +76,7 @@ export function closeWithError(destination: Destination, error: mixed): void {

76 // $FlowFixMe[incompatible-call]: This is an Error object or the destination accepts other types.

77 destination.destroy(error);

78 }

79 +

80 +export function createFastHash(input: string): string | number {

81 + return input;

82 +}

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

@@ -83,3 +83,7 @@ export function closeWithError(destination: Destination, error: mixed): void {

83 destination.fatal = true;

84 destination.error = error;

85 }

86 +

87 +export function createFastHash(input: string): string | number {

88 + return input;

89 +}

packages/react-server/src/ReactFizzHooks.js

+7 -1

@@ -27,6 +27,7 @@ import {getTreeId} from './ReactFizzTreeContext';

27 import {createThenableState, trackUsedThenable} from './ReactFizzThenable';

29 import {makeId, NotPendingTransition} from './ReactFizzConfig';

30 +import {createFastHash} from './ReactServerStreamConfig';

32 import {

33 enableCache,

@@ -592,11 +593,16 @@ function createPostbackFormStateKey(

593 hookIndex: number,

594 ): string {

595 if (permalink !== undefined) {

596 + // Don't bother to hash a permalink-based key since it's already short.

597 return 'p' + permalink;

598 } else {

599 // Append a node to the key path that represents the form state hook.

600 const keyPath: KeyNode = [componentKeyPath, null, hookIndex];

599 - return 'k' + JSON.stringify(keyPath);

601 + // Key paths are hashed to reduce the size. It does not need to be secure,

602 + // and it's more important that it's fast than that it's completely

603 + // collision-free.

604 + const keyPathHash = createFastHash(JSON.stringify(keyPath));

605 + return 'k' + keyPathHash;

606 }

607 }

608

packages/react-server/src/ReactServerStreamConfigBrowser.js

@@ -182,3 +182,7 @@ export function closeWithError(destination: Destination, error: mixed): void {

182 destination.close();

183 }

184 }

185 +

186 +export function createFastHash(input: string): string | number {

187 + return input;

188 +}

packages/react-server/src/ReactServerStreamConfigBun.js

@@ -7,6 +7,8 @@

7 * @flow

8 */

10 +/* global Bun */

11 +

12 type BunReadableStreamController = ReadableStreamController & {

13 end(): mixed,

14 write(data: Chunk | BinaryChunk): void,

@@ -96,3 +98,7 @@ export function closeWithError(destination: Destination, error: mixed): void {

98 destination.close();

99 }

100 }

101 +

102 +export function createFastHash(input: string): string | number {

103 + return Bun.hash(input);

104 +}

packages/react-server/src/ReactServerStreamConfigEdge.js

@@ -182,3 +182,7 @@ export function closeWithError(destination: Destination, error: mixed): void {

182 destination.close();

183 }

184 }

185 +

186 +export function createFastHash(input: string): string | number {

187 + return input;

188 +}

packages/react-server/src/ReactServerStreamConfigNode.js

@@ -10,6 +10,7 @@

10 import type {Writable} from 'stream';

12 import {TextEncoder} from 'util';

13 +import {createHash} from 'crypto';

15 interface MightBeFlushable {

16 flush?: () => void;

@@ -243,3 +244,9 @@ export function closeWithError(destination: Destination, error: mixed): void {

244 // $FlowFixMe[incompatible-call]: This is an Error object or the destination accepts other types.

245 destination.destroy(error);

246 }

247 +

248 +export function createFastHash(input: string): string | number {

249 + const hash = createHash('md5');

250 + hash.update(input);

251 + return hash.digest('hex');

252 +}

packages/react-server/src/forks/ReactServerStreamConfig.custom.js

@@ -44,3 +44,4 @@ export const typedArrayToBinaryChunk = $$$config.typedArrayToBinaryChunk;

44 export const clonePrecomputedChunk = $$$config.clonePrecomputedChunk;

45 export const byteLengthOfChunk = $$$config.byteLengthOfChunk;

46 export const byteLengthOfBinaryChunk = $$$config.byteLengthOfBinaryChunk;

47 +export const createFastHash = $$$config.createFastHash;

scripts/flow/environment.js

@@ -281,3 +281,9 @@ declare module 'node:worker_threads' {

281 port2: MessagePort;

282 }

283 }

284 +

285 +declare var Bun: {

286 + hash(

287 + input: string | $TypedArray | DataView | ArrayBuffer | SharedArrayBuffer,

288 + ): number,

289 +};

scripts/rollup/bundles.js

+8 -8

@@ -260,7 +260,7 @@ const bundles = [

260 global: 'ReactDOMServer',

261 minifyWithProdErrorCodes: false,

262 wrapWithModuleBoundaries: false,

263 - externals: ['react', 'util', 'async_hooks', 'react-dom'],

263 + externals: ['react', 'util', 'crypto', 'async_hooks', 'react-dom'],

264 },

265 {

266 bundleTypes: __EXPERIMENTAL__ ? [FB_WWW_DEV, FB_WWW_PROD] : [],

@@ -339,7 +339,7 @@ const bundles = [

339 global: 'ReactServerDOMServer',

340 minifyWithProdErrorCodes: false,

341 wrapWithModuleBoundaries: false,

342 - externals: ['react', 'util', 'async_hooks', 'react-dom'],

342 + externals: ['react', 'util', 'crypto', 'async_hooks', 'react-dom'],

343 },

344 {

345 bundleTypes: [NODE_DEV, NODE_PROD],

@@ -348,7 +348,7 @@ const bundles = [

348 global: 'ReactServerDOMServer',

349 minifyWithProdErrorCodes: false,

350 wrapWithModuleBoundaries: false,

351 - externals: ['react', 'util', 'async_hooks', 'react-dom'],

351 + externals: ['react', 'util', 'crypto', 'async_hooks', 'react-dom'],

352 },

353 {

354 bundleTypes: [NODE_DEV, NODE_PROD],

@@ -357,7 +357,7 @@ const bundles = [

357 global: 'ReactServerDOMServer',

358 minifyWithProdErrorCodes: false,

359 wrapWithModuleBoundaries: false,

360 - externals: ['react', 'util', 'async_hooks', 'react-dom'],

360 + externals: ['react', 'util', 'crypto', 'async_hooks', 'react-dom'],

361 },

362

363 /******* React Server DOM Webpack Client *******/

@@ -377,7 +377,7 @@ const bundles = [

377 global: 'ReactServerDOMClient',

378 minifyWithProdErrorCodes: false,

379 wrapWithModuleBoundaries: false,

380 - externals: ['react', 'react-dom', 'util'],

380 + externals: ['react', 'react-dom', 'util', 'crypto'],

381 },

382 {

383 bundleTypes: [NODE_DEV, NODE_PROD],

@@ -386,7 +386,7 @@ const bundles = [

386 global: 'ReactServerDOMClient',

387 minifyWithProdErrorCodes: false,

388 wrapWithModuleBoundaries: false,

389 - externals: ['react', 'react-dom', 'util'],

389 + externals: ['react', 'react-dom', 'util', 'crypto'],

390 },

391 {

392 bundleTypes: [NODE_DEV, NODE_PROD],

@@ -439,7 +439,7 @@ const bundles = [

439 entry: 'react-server-dom-esm/server.node',

440 minifyWithProdErrorCodes: false,

441 wrapWithModuleBoundaries: false,

442 - externals: ['react', 'util', 'async_hooks', 'react-dom'],

442 + externals: ['react', 'util', 'crypto', 'async_hooks', 'react-dom'],

443 },

444

445 /******* React Server DOM ESM Client *******/

@@ -457,7 +457,7 @@ const bundles = [

457 entry: 'react-server-dom-esm/client.node',

458 minifyWithProdErrorCodes: false,

459 wrapWithModuleBoundaries: false,

460 - externals: ['react', 'react-dom', 'util'],

460 + externals: ['react', 'react-dom', 'util', 'crypto'],

461 },

462

463 /******* React Server DOM ESM Node.js Loader *******/

scripts/rollup/validate/eslintrc.cjs.js

@@ -65,6 +65,8 @@ module.exports = {

66 // Native Scheduler

67 nativeRuntimeScheduler: 'readonly',

68 +

69 + Bun: 'readonly',

70 },

71 parserOptions: {

72 ecmaVersion: 2020,

scripts/rollup/validate/eslintrc.cjs2015.js

@@ -62,6 +62,8 @@ module.exports = {

63 // act

64 IS_REACT_ACT_ENVIRONMENT: 'readonly',

65 +

66 + Bun: 'readonly',

67 },

68 parserOptions: {

69 ecmaVersion: 2015,

scripts/rollup/validate/eslintrc.esm.js