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.

DiffTrain build for commit https://github.com/facebook/react/commit/2b3d5826836ac59f8446281976762d594e55d97e.
This commit is contained in:
acdlite
2023-09-20 21:18:00 +00:00
parent 57f7532544
commit bdfa4e69a2
7 changed files with 9 additions and 9 deletions
@@ -23998,7 +23998,7 @@ function createFiberRoot(
return root;
}
var ReactVersion = "18.3.0-canary-1f4936660-20230920";
var ReactVersion = "18.3.0-canary-2b3d58268-20230920";
// Might add PROFILE later.
@@ -8620,7 +8620,7 @@ var devToolsConfig$jscomp$inline_1028 = {
throw Error("TestRenderer does not support findFiberByHostInstance()");
},
bundleType: 0,
version: "18.3.0-canary-1f4936660-20230920",
version: "18.3.0-canary-2b3d58268-20230920",
rendererPackageName: "react-test-renderer"
};
var internals$jscomp$inline_1227 = {
@@ -8651,7 +8651,7 @@ var internals$jscomp$inline_1227 = {
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "18.3.0-canary-1f4936660-20230920"
reconcilerVersion: "18.3.0-canary-2b3d58268-20230920"
};
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
var hook$jscomp$inline_1228 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -9046,7 +9046,7 @@ var devToolsConfig$jscomp$inline_1070 = {
throw Error("TestRenderer does not support findFiberByHostInstance()");
},
bundleType: 0,
version: "18.3.0-canary-1f4936660-20230920",
version: "18.3.0-canary-2b3d58268-20230920",
rendererPackageName: "react-test-renderer"
};
var internals$jscomp$inline_1268 = {
@@ -9077,7 +9077,7 @@ var internals$jscomp$inline_1268 = {
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "18.3.0-canary-1f4936660-20230920"
reconcilerVersion: "18.3.0-canary-2b3d58268-20230920"
};
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
var hook$jscomp$inline_1269 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -27,7 +27,7 @@ if (
}
"use strict";
var ReactVersion = "18.3.0-canary-1f4936660-20230920";
var ReactVersion = "18.3.0-canary-2b3d58268-20230920";
// ATTENTION
// When adding new symbols to this file,
@@ -616,4 +616,4 @@ exports.useSyncExternalStore = function (
exports.useTransition = function () {
return ReactCurrentDispatcher.current.useTransition();
};
exports.version = "18.3.0-canary-1f4936660-20230920";
exports.version = "18.3.0-canary-2b3d58268-20230920";
@@ -619,7 +619,7 @@ exports.useSyncExternalStore = function (
exports.useTransition = function () {
return ReactCurrentDispatcher.current.useTransition();
};
exports.version = "18.3.0-canary-1f4936660-20230920";
exports.version = "18.3.0-canary-2b3d58268-20230920";
/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
if (
@@ -1 +1 @@
1f4936660dcaba2e5722013f0ad12d7369543a9f
2b3d5826836ac59f8446281976762d594e55d97e