Repository navigation
Update form documentation for forms default reset behavior - #8512
aurorascharff merged 29 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! 🙌 |
|
Going to dig a bit into the current behavior of this, so might take some time to review! Thank you! |
…ction` prop and its behavior: - including the handling of `FormData`, - the necessity of `name` attributes, - the advantages of using a function over a URL. - removed redundant information about `e.preventDefault()` for the `action` prop.
| function EditForm() { | ||
| // The action returns { submitted: formData, error } on failure | ||
| const [state, formAction] = useActionState(submitForm, {}); | ||
| const values = state.submitted ?? new FormData(); |
There was a problem hiding this comment.
Why do we need a seperate variable for values? Is this pattern better than returning the values from the useActionState function?
https://aurorascharff.no/posts/handling-form-validation-errors-and-resets-with-useactionstate/
https://www.robinwieruch.de/react-server-action-reset-form/
There was a problem hiding this comment.
Good point, I forgot about optional chaining (one of my favorite JS features when working on making the examples)
…s in the `action` prop, including detailed examples for passing extra data and handling form submissions. Clarify the behavior of form elements and their interaction with `FormData`.
2520b1e to
5a06609
Compare
samselikoff
left a comment
samselikoff
left a comment
There was a problem hiding this comment.
We definitely need a Learn for all this but I think this is still an improvement on the current page! Just a few comments
…8538) * Fix Server Functions documentation examples * Fix code snippet highlights Corrected the index of 'submitAction' in the code snippet. * Clarify wording * Update section titles for clarity * Polish Server Functions examples: consistent headings, reset wording, 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 #8512) - Comment the startTransition-after-await; bump CodeStep line accordingly Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * Polish Server Functions examples * Fix Server Functions code highlight --------- Co-authored-by: Aurora Scharff <aurora.sofie@gmail.com> Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
@MaxwellCohen @samselikoff @aurorascharff Thanks for getting this in! Did this also cover the current open bugs in React with
These are super confusing, especially to new learners and LLMs. |
I will dig into this!
|
Summary
Documents React’s default form-reset behavior when using the function
action/formActionprops, and explains how to preserve field values when you don’t want that reset. Applying @rickhanlonii's feedback from #7795 and building off of work @aurorascharff recentlly did.actionprop section, and a new Troubleshooting entry (“Why does my form reset when I use an action?”). React resets uncontrolled fields after a successful action, matching browser<form action="...">behavior (including before JS loads).e.preventDefault()inonSubmit, then run the action manually insideuseTransitionwhile keeping theactionprop for progressive enhancement.requestFormResetfromreact-dom, and returning submittedFormDatafrom server actions to restore values viadefaultValue(withuseActionState).key/defaultValuekeep textarea content after “Save draft.”Closes #8397
Alternative to #7795 and #8465