useFormState: Hash the component key path for more compact output #27397
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
facebook-github-bot
added
CLA Signed
React Core Team
acdlite
commented
Sep 20, 2023
| @@ -281,3 +281,9 @@ declare module 'node:worker_threads' { | |||
| port2: MessagePort; | |||
| } | |||
| } | |||
|
|
|||
| declare var Bun: { | |||
There was a problem hiding this comment.
We should really have separate libdefs for each environment but since they're already all mixed together in this one file already I just tacked it on here. Can improve later.
sebmarkbage
approved these changes
Sep 20, 2023
acdlite
force-pushed
the
hash-useformstate-key
branch
from
006694d to
630ac4e
Compare
Adds a method called createFastHash to the Stream Config interface, a non-cryptographic hash function. We'll use it to hash the component keypath when generating a key for useFormState progressive enhancement. We're not using this for security or obfuscation, only to generate a more compact key without sacrificing too much collision resistance. This does not implement createFastHash for each environment yet; it only adds the method and connects it to useFormState.
In Node.js builds, createFastHash uses the built-in `crypto` module.
acdlite
force-pushed
the
hash-useformstate-key
branch
from
630ac4e to
0a40985
Compare
|
Comparing: 2807d78...92208da Critical size changesIncludes critical production bundles, as well as any change greater than 2%:
Significant size changesIncludes any change greater than 0.2%: (No significant changes) |
In Bun builds, createFastHash uses Bun.hash. See: https://bun.sh/docs/api/hashing#bun-hash
acdlite
force-pushed
the
hash-useformstate-key
branch
from
0a40985 to
92208da
Compare
github-actions bot
pushed a commit
that referenced
this pull request
Sep 20, 2023
…7397) 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 [2b3d582](2b3d582)
acdlite
added a commit
to acdlite/react
that referenced
this pull request
Sep 20, 2023
Adds 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. See facebook#27397 for details. 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. So that's the one I've used. In the future we should try to migrate these to native calls whenever possible. It's especially unfortunate that the Edge build doesn't use a native implementation, because that's the one used by newer frameworks like Next.js.
acdlite
added a commit
to acdlite/react
that referenced
this pull request
Sep 20, 2023
Adds 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. See facebook#27397 for details. 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. So that's the one I've used. In the future we should try to migrate these to native calls whenever possible. It's especially unfortunate that the Edge build doesn't use a native implementation, because that's the one used by newer frameworks like Next.js.
acdlite
added a commit
to acdlite/react
that referenced
this pull request
Sep 21, 2023
Adds 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. See facebook#27397 for details. 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. So that's the one I've used. In the future we should try to migrate these to native calls whenever possible. It's especially unfortunate that the Edge build doesn't use a native implementation, because that's the one used by newer frameworks like Next.js.
acdlite
added a commit
to acdlite/react
that referenced
this pull request
Sep 21, 2023
Adds 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. See facebook#27397 for details. 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. So that's the one I've used. In the future we should try to migrate these to native calls whenever possible. It's especially unfortunate that the Edge build doesn't use a native implementation, because that's the one used by newer frameworks like Next.js.
kodiakhq bot
pushed a commit
to vercel/next.js
that referenced
this pull request
Sep 26, 2023
### React upstream changes - facebook/react#27417 - facebook/react#27408 - facebook/react#27409 - facebook/react#27405 - facebook/react#27375 - facebook/react#27407 - facebook/react#27365 - facebook/react#27399 - facebook/react#27395 - facebook/react#27394 - facebook/react#27397 - facebook/react#26992 - facebook/react#27388 - facebook/react#27373 - facebook/react#27332
|
@acdlite please provide a way for the developers to provide the hashing function, so it's up to the developer what type of hashing algorithm to use. This would also enable platform independent implementation and custom algorithm implementations. You can still only accept a sync function to disallow browser |
EdisonVan
pushed a commit
to EdisonVan/react
that referenced
this pull request
Apr 15, 2024
…cebook#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.
bigfootjon
pushed a commit
that referenced
this pull request
Apr 18, 2024
…7397) 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 2b3d582.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.
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
cryptoAPI 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.