useFormState: Reuse state from previous form submission #27321
Merged
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
force-pushed
the
useformstate-mpa
branch
3 times, most recently
from
6df391d
to
79ca08f
Compare
acdlite
force-pushed
the
useformstate-mpa
branch
6 times, most recently
from
a0e218e
to
01c7d6c
Compare
acdlite
force-pushed
the
useformstate-mpa
branch
from
01c7d6c
to
4acbe95
Compare
acdlite
added a commit
that referenced
this pull request
Sep 13, 2023
…7366) Currently, if a component suspends, the keyPath has already been modified to include the identity of the component itself; the path is set before the component body is called (akin to the begin phase in Fiber). An accidental consequence is that when the promise resolves and component is retried, the identity gets appended to the keyPath again, leading to a duplicate node in the path. To address this, we should only modify contexts after any code that may suspend. For maximum safety, this should occur as late as possible: right before the recursive renderNode call, before the children are rendered. I did not add a test yet because there's no feature that currently observes it, but I do have tests in my other WIP PR for useFormState: #27321
github-actions bot
pushed a commit
that referenced
this pull request
Sep 13, 2023
…7366) Currently, if a component suspends, the keyPath has already been modified to include the identity of the component itself; the path is set before the component body is called (akin to the begin phase in Fiber). An accidental consequence is that when the promise resolves and component is retried, the identity gets appended to the keyPath again, leading to a duplicate node in the path. To address this, we should only modify contexts after any code that may suspend. For maximum safety, this should occur as late as possible: right before the recursive renderNode call, before the children are rendered. I did not add a test yet because there's no feature that currently observes it, but I do have tests in my other WIP PR for useFormState: #27321 DiffTrain build for [d07921e](d07921e)
acdlite
force-pushed
the
useformstate-mpa
branch
4 times, most recently
from
66035c5
to
b127cfb
Compare
sebmarkbage
reviewed
Sep 13, 2023
| ); | ||
|
|
||
| ReactDOM.hydrateRoot(document, <Shell data={root} />, { | ||
| experimental_formState: formState, |
There was a problem hiding this comment.
So since we're serializing formState (nor the rest of the RSC payload) submitting this without JS and then hydrating the result will result in a hydration mismatch in the fixture, right?
There was a problem hiding this comment.
Ah, yes. Didn't catch that because I disabled hydration entirely when I was testing. Should add a button or something to start hydration asynchronously.
There was a problem hiding this comment.
Not actually sure how to transport this since it's a separate process. Seems like it'd have to be encoded into the HTML.
There was a problem hiding this comment.
Yea, Next.js encodes the stream as text into the html (which doesn't allow for binary). We didn't bother doing that here because we wanted a more built-in mechanism for this upstream anyway. Seems fine to leave with a comment for now.
sebmarkbage
reviewed
Sep 13, 2023
|
|
||
| // 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. |
There was a problem hiding this comment.
Seems like we should just pass the string value through. This shouldn't really be shared with the client since it doesn't know the format and the format could change to just a string for example. It might not even be JSON. I think of the key as just a string similar to a key on a React Element.
There was a problem hiding this comment.
It also indicates that there's not parity since Flight does JSON.parse and Fizz does JSON.stringify. So there's not one owner. Seems like Fizz should be the sole owner and do the JSON.parse part and while passing around it's just a string. This means that in the RSC protocol it'll be encoded twice as a JSON string inside of JSON but really it's just an id. Could be a hash too.
There was a problem hiding this comment.
I guess ReactFormState<S> would still be an opaque type here but KeyNode can go away and live in Fizz.
sebmarkbage
reviewed
Sep 13, 2023
| @@ -577,22 +587,76 @@ function useOptimistic<S, A>( | |||
| return [passthrough, unsupportedSetOptimisticState]; | |||
| } | |||
|
|
|||
| function isSameFormStateInstance(k1: KeyNode, k2: KeyNode): boolean { | |||
There was a problem hiding this comment.
If we accepted a string as the argument to Fizz instead, this could just be JSON.stringify(key) === formState.key. That would also allow us to optionally apply a hash to the key.
sebmarkbage
requested changes
Sep 13, 2023
acdlite
force-pushed
the
useformstate-mpa
branch
from
b127cfb
to
4152ed3
Compare
acdlite
force-pushed
the
useformstate-mpa
branch
from
4152ed3
to
4db9a41
Compare
If a Server Action is passed to useFormState, the action may be submitted
before it has hydrated. This will trigger a full page (MPA-style) navigation.
We can transfer the form state to the next page by comparing the key path
of the hook instance.
`ReactServerDOMServer.decodeFormState` is used by the server to extract the form
state from the submitted action. This value can then be passed as an option
when rendering the new page. It must be passed during both SSR and hydration.
```js
const boundAction = await decodeAction(formData, serverManifest);
const result = await boundAction();
const formState = decodeFormState(result, formData, serverManifest);
// SSR
const response = createFromReadableStream(<App />);
const ssrStream = await renderToReadableStream(response, { formState })
// Hydration
hydrateRoot(container, <App />, { formState });
```
If the `formState` option is omitted, then the state won't be transferred to
the next page. However, it must be passed in both places, or in neither;
misconfiguring will result in a hydration mismatch.
Updates the Flight fixture's Counter component to useFormState instead of useState.
acdlite
force-pushed
the
useformstate-mpa
branch
from
4db9a41
to
765ceb2
Compare
sebmarkbage
approved these changes
Sep 13, 2023
github-actions bot
pushed a commit
that referenced
this pull request
Sep 13, 2023
If a Server Action is passed to useFormState, the action may be
submitted before it has hydrated. This will trigger a full page
(MPA-style) navigation. We can transfer the form state to the next page
by comparing the key path of the hook instance.
`ReactServerDOMServer.decodeFormState` is used by the server to extract
the form state from the submitted action. This value can then be passed
as an option when rendering the new page. It must be passed during both
SSR and hydration.
```js
const boundAction = await decodeAction(formData, serverManifest);
const result = await boundAction();
const formState = decodeFormState(result, formData, serverManifest);
// SSR
const response = createFromReadableStream(<App />);
const ssrStream = await renderToReadableStream(response, { formState })
// Hydration
hydrateRoot(container, <App />, { formState });
```
If the `formState` option is omitted, then the state won't be
transferred to the next page. However, it must be passed in both places,
or in neither; misconfiguring will result in a hydration mismatch.
(The `formState` option is currently prefixed with `experimental_`)
DiffTrain build for [612b2b6](612b2b6)
acdlite
added a commit
to acdlite/next.js
that referenced
this pull request
Sep 14, 2023
React upstream changes: - facebook/react#27374 - facebook/react#27369 - facebook/react#27372 - facebook/react#27371 - facebook/react#27370 - facebook/react#27321 - facebook/react#27368 - facebook/react#27367 - facebook/react#27366 - facebook/react#27360 - facebook/react#27361 - facebook/react#27357 - facebook/react#27359 - facebook/react#27358 - facebook/react#27330 - facebook/react#27347 - facebook/react#27307 - facebook/react#27346 - facebook/react#27342 - facebook/react#27340 - facebook/react#27328 - facebook/react#27327 - facebook/react#27325 - facebook/react#27337 - facebook/react#27336 - facebook/react#27323 - facebook/react#27320 - facebook/react#27317 - facebook/react#27318 - facebook/react#27316 - facebook/react#27313 - facebook/react#27309 - facebook/react#27302 - facebook/react#27297 - facebook/react#27295 - facebook/react#27305 - facebook/react#27215 - facebook/react#27304 - facebook/react#27067 - facebook/react#27179 - facebook/react#27278 - facebook/react#27277 - facebook/react#27282 - facebook/react#27230 - facebook/react#27260 - facebook/react#27270 - facebook/react#27273 - facebook/react#27268 - facebook/react#27269
acdlite
added a commit
to acdlite/next.js
that referenced
this pull request
Sep 14, 2023
React upstream changes: - facebook/react#27374 - facebook/react#27369 - facebook/react#27372 - facebook/react#27371 - facebook/react#27370 - facebook/react#27321 - facebook/react#27368 - facebook/react#27367 - facebook/react#27366 - facebook/react#27360 - facebook/react#27361 - facebook/react#27357 - facebook/react#27359 - facebook/react#27358 - facebook/react#27330 - facebook/react#27347 - facebook/react#27307 - facebook/react#27346 - facebook/react#27342 - facebook/react#27340 - facebook/react#27328 - facebook/react#27327 - facebook/react#27325 - facebook/react#27337 - facebook/react#27336 - facebook/react#27323 - facebook/react#27320 - facebook/react#27317 - facebook/react#27318 - facebook/react#27316 - facebook/react#27313 - facebook/react#27309 - facebook/react#27302 - facebook/react#27297 - facebook/react#27295 - facebook/react#27305 - facebook/react#27215 - facebook/react#27304 - facebook/react#27067 - facebook/react#27179 - facebook/react#27278 - facebook/react#27277 - facebook/react#27282 - facebook/react#27230 - facebook/react#27260 - facebook/react#27270 - facebook/react#27273 - facebook/react#27268 - facebook/react#27269
acdlite
added a commit
to acdlite/next.js
that referenced
this pull request
Sep 14, 2023
React upstream changes: - facebook/react#27374 - facebook/react#27369 - facebook/react#27372 - facebook/react#27371 - facebook/react#27370 - facebook/react#27321 - facebook/react#27368 - facebook/react#27367 - facebook/react#27366 - facebook/react#27360 - facebook/react#27361 - facebook/react#27357 - facebook/react#27359 - facebook/react#27358 - facebook/react#27330 - facebook/react#27347 - facebook/react#27307 - facebook/react#27346 - facebook/react#27342 - facebook/react#27340 - facebook/react#27328 - facebook/react#27327 - facebook/react#27325 - facebook/react#27337 - facebook/react#27336 - facebook/react#27323 - facebook/react#27320 - facebook/react#27317 - facebook/react#27318 - facebook/react#27316 - facebook/react#27313 - facebook/react#27309 - facebook/react#27302 - facebook/react#27297 - facebook/react#27295 - facebook/react#27305 - facebook/react#27215 - facebook/react#27304 - facebook/react#27067 - facebook/react#27179 - facebook/react#27278 - facebook/react#27277 - facebook/react#27282 - facebook/react#27230 - facebook/react#27260 - facebook/react#27270 - facebook/react#27273 - facebook/react#27268 - facebook/react#27269
kodiakhq bot
pushed a commit
to vercel/next.js
that referenced
this pull request
Sep 14, 2023
### React upstream changes: - facebook/react#27374 - facebook/react#27369 - facebook/react#27372 - facebook/react#27371 - facebook/react#27370 - facebook/react#27321 - facebook/react#27368 - facebook/react#27367 - facebook/react#27366 - facebook/react#27360 - facebook/react#27361 - facebook/react#27357 - facebook/react#27359 - facebook/react#27358 - facebook/react#27330 - facebook/react#27347 - facebook/react#27307 - facebook/react#27346 - facebook/react#27342 - facebook/react#27340 - facebook/react#27328 - facebook/react#27327 - facebook/react#27325 - facebook/react#27337 - facebook/react#27336 - facebook/react#27323 - facebook/react#27320 - facebook/react#27317 - facebook/react#27318 - facebook/react#27316 - facebook/react#27313 - facebook/react#27309 - facebook/react#27302 - facebook/react#27297 - facebook/react#27295 - facebook/react#27305 - facebook/react#27215 - facebook/react#27304 - facebook/react#27067 - facebook/react#27179 - facebook/react#27278 - facebook/react#27277 - facebook/react#27282 - facebook/react#27230 - facebook/react#27260 - facebook/react#27270 - facebook/react#27273 - facebook/react#27268 - facebook/react#27269
EdisonVan
pushed a commit
to EdisonVan/react
that referenced
this pull request
Apr 15, 2024
…cebook#27366) Currently, if a component suspends, the keyPath has already been modified to include the identity of the component itself; the path is set before the component body is called (akin to the begin phase in Fiber). An accidental consequence is that when the promise resolves and component is retried, the identity gets appended to the keyPath again, leading to a duplicate node in the path. To address this, we should only modify contexts after any code that may suspend. For maximum safety, this should occur as late as possible: right before the recursive renderNode call, before the children are rendered. I did not add a test yet because there's no feature that currently observes it, but I do have tests in my other WIP PR for useFormState: facebook#27321
EdisonVan
pushed a commit
to EdisonVan/react
that referenced
this pull request
Apr 15, 2024
If a Server Action is passed to useFormState, the action may be
submitted before it has hydrated. This will trigger a full page
(MPA-style) navigation. We can transfer the form state to the next page
by comparing the key path of the hook instance.
`ReactServerDOMServer.decodeFormState` is used by the server to extract
the form state from the submitted action. This value can then be passed
as an option when rendering the new page. It must be passed during both
SSR and hydration.
```js
const boundAction = await decodeAction(formData, serverManifest);
const result = await boundAction();
const formState = decodeFormState(result, formData, serverManifest);
// SSR
const response = createFromReadableStream(<App />);
const ssrStream = await renderToReadableStream(response, { formState })
// Hydration
hydrateRoot(container, <App />, { formState });
```
If the `formState` option is omitted, then the state won't be
transferred to the next page. However, it must be passed in both places,
or in neither; misconfiguring will result in a hydration mismatch.
(The `formState` option is currently prefixed with `experimental_`)
bigfootjon
pushed a commit
that referenced
this pull request
Apr 18, 2024
…7366) Currently, if a component suspends, the keyPath has already been modified to include the identity of the component itself; the path is set before the component body is called (akin to the begin phase in Fiber). An accidental consequence is that when the promise resolves and component is retried, the identity gets appended to the keyPath again, leading to a duplicate node in the path. To address this, we should only modify contexts after any code that may suspend. For maximum safety, this should occur as late as possible: right before the recursive renderNode call, before the children are rendered. I did not add a test yet because there's no feature that currently observes it, but I do have tests in my other WIP PR for useFormState: #27321 DiffTrain build for commit d07921e.
bigfootjon
pushed a commit
that referenced
this pull request
Apr 18, 2024
If a Server Action is passed to useFormState, the action may be
submitted before it has hydrated. This will trigger a full page
(MPA-style) navigation. We can transfer the form state to the next page
by comparing the key path of the hook instance.
`ReactServerDOMServer.decodeFormState` is used by the server to extract
the form state from the submitted action. This value can then be passed
as an option when rendering the new page. It must be passed during both
SSR and hydration.
```js
const boundAction = await decodeAction(formData, serverManifest);
const result = await boundAction();
const formState = decodeFormState(result, formData, serverManifest);
// SSR
const response = createFromReadableStream(<App />);
const ssrStream = await renderToReadableStream(response, { formState })
// Hydration
hydrateRoot(container, <App />, { formState });
```
If the `formState` option is omitted, then the state won't be
transferred to the next page. However, it must be passed in both places,
or in neither; misconfiguring will result in a hydration mismatch.
(The `formState` option is currently prefixed with `experimental_`)
DiffTrain build for commit 612b2b6.
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.
If a Server Action is passed to useFormState, the action may be submitted before it has hydrated. This will trigger a full page (MPA-style) navigation. We can transfer the form state to the next page by comparing the key path of the hook instance.
ReactServerDOMServer.decodeFormStateis used by the server to extract the form state from the submitted action. This value can then be passed as an option when rendering the new page. It must be passed during both SSR and hydration.If the
formStateoption is omitted, then the state won't be transferred to the next page. However, it must be passed in both places, or in neither; misconfiguring will result in a hydration mismatch.(The
formStateoption is currently prefixed withexperimental_)