Fix Server Function examples for Actions, forms, and useActionState - #8538
Open
smith558 wants to merge 7 commits into
Open
Fix Server Function examples for Actions, forms, and useActionState#8538smith558 wants to merge 7 commits into
smith558 wants to merge 7 commits into
Conversation
Size changesDetails📦 Next.js Bundle Analysis for react-devThis analysis was generated by the Next.js Bundle Analysis action. 🤖 This PR introduced no changes to the JavaScript bundle! 🙌 |
Contributor
|
Hi, I am getting a client-side error on the server functions preview. This is usually caused by a misalignment of line numbers for function highlights. 
Edit: This has been fixed! |
Contributor
Author
|
@MaxwellCohen thanks, will fix |
Corrected the index of 'submitAction' in the code snippet.
Contributor
Author
|
@MaxwellCohen fixed |
Contributor
Author
|
@MaxwellCohen @rickhanlonii @aurorascharff 🙂 please review |
… transition comment - Convert the remaining two Usage headings to gerund form to match the rest of the page and react.dev convention (anchors unchanged) - Reset wording: "succeeds" + "the form's uncontrolled fields" (aligns with reactjs#8512) - Comment the startTransition-after-await; bump CodeStep line accordingly Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
| Server Functions work with the new Form features in React 19. | ||
|
|
||
| You can pass a Server Function to a Form to automatically submit the form to the server: | ||
| You can pass a Server Function to a Form to automatically submit the form to the server. React passes the submitted `FormData` to the Server Function as its first argument: |
Contributor
There was a problem hiding this comment.
we should add a link to MDN form data here so that users can see what is included in the form data
FormData link so users know what functions are available.
Suggested change
| You can pass a Server Function to a Form to automatically submit the form to the server. React passes the submitted `FormData` to the Server Function as its first argument: | |
| You can pass a Server Function to a Form to automatically submit the form to the server. React passes the submitted `[FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData)` to the Server Function as its first argument: |
| ``` | ||
|
|
||
| When the <CodeStep step={2}>permalink</CodeStep> is provided to `useActionState`, React will redirect to the provided URL if the form is submitted before the JavaScript bundle loads. | ||
| When the <CodeStep step={2}>permalink</CodeStep> is provided to `useActionState`, the browser will navigate to the provided URL if the form is submitted before the JavaScript bundle loads. At the destination, render `useActionState` with the same Server Function and permalink so React can pass the returned state to it. |
Contributor
There was a problem hiding this comment.
❤️ I really like pointing out that this is browser behavior, not React behavior.
| ### Server Functions with `useActionState` {/*server-functions-with-use-action-state*/} | ||
| ### Calling a Server Function with `useActionState` {/*server-functions-with-use-action-state*/} | ||
|
|
||
| You can call Server Functions with `useActionState` for the common case where you just need access to the action pending state and last returned response. The Server Function receives the previous state as its first argument and the submitted `FormData` as its second argument. Its return value becomes the next state: |
Contributor
There was a problem hiding this comment.
Suggested change
| You can call Server Functions with `useActionState` for the common case where you just need access to the action pending state and last returned response. The Server Function receives the previous state as its first argument and the submitted `FormData` as its second argument. Its return value becomes the next state: | |
| You can call Server Functions with `useActionState` for the common case where you need access to the Action's pending state and the last returned response. The Server Function receives the previous state as its first argument and the submitted `[FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData)` as its second argument. Its return value becomes the next state: |
aurorascharff
changed the title
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
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.
Summary
Fixes #8537.
The Server Functions reference reused one
updateNamefunction across examples that invoke it with different arguments. This PR gives each usage a compatible Server Function and completes the corresponding client examples:<form>actionprop receives the submittedFormData.useActionStatereceives the previous state and submittedFormData, then returns the next state.permalinkexample explains the browser navigation that occurs when a form is submitted before JavaScript loads.The PR also clarifies Server Function references, form reset behavior, Action terminology, pending state, and the boundary between server and client files.