Add useFormStatus Hook API reference documentation
#6314
Conversation
Size changes📦 Next.js Bundle Analysis for react-devThis analysis was generated by the Next.js Bundle Analysis action. 🤖 One Page Changed SizeThe following page changed size from the code in this PR compared to its base branch:
DetailsOnly the gzipped size is provided here based on an expert tip. First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If Any third party scripts you have added directly to your app using the Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 10% or more, there will be a red status indicator applied, indicating that special attention should be given to this. |
|
@mattcarrollcode @kmiddleton14 @davidmccabe @TheSavior PR is ready for another look! |
| The `useFormStatus` Hook provides status information of the last form submission. | ||
|
|
||
| ```js [[1, 5, "status.pending"]] | ||
| import action from './actions'; |
There was a problem hiding this comment.
Is there a reason we're importing action from ./actions vs. getting it from useFormStatus()? What're the differences between the action returned from useFormStatus() vs. using the imported one and when to use one over the other
There was a problem hiding this comment.
The action prop that is given in useFormStatus is the action we're passing to the <form> tag. If we didn't pass an action in <form action={action}... then status.action would be null
| import action from './actions'; | ||
|
|
||
| function Submit() { | ||
| const status = useFormStatus(); |
There was a problem hiding this comment.
nit: should we use the same convention as earlier?
const { pending } = useFormStatus();
There was a problem hiding this comment.
I intentionally replaced this with the object as I wanted to mirror the definition that useFormStatus returns status information, more than just pending.
True, it's cleaner to use {pending} but my impression is that this version puts less emphasis on the other properties that are returned in status -- but just slightly. So happy to change if you strongly disagree.
|
|
||
| * `pending`: A boolean. If `true`, this means the parent `<form>` is pending submission. Otherwise, `false`. | ||
| * `data`: An object implementing the [`FormData interface`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) that contains the data the parent `<form>` is submitting. `null` if there is no active submission or no parent `<form>`. | ||
| * `method`: A string value of either `'get'` or `'post'`. This represents whether the parent `<form>` is submitting with either `GET` or `POST` [HTTP method](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods). By default, a `<form>` will use `GET` method and can be specified by the [`method`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attributes_for_form_submission) property. |
There was a problem hiding this comment.
nit: Instead of https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attributes_for_form_submission
Should we link to method specifically?
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#method?
| } | ||
| ``` | ||
| </Sandpack> | ||
|
|
There was a problem hiding this comment.
Would we want to include a usage example for method and/or action too from useFormStatus?
There was a problem hiding this comment.
Yea I was wondering the same but I can't think of common patterns in which you'll need to reference the method and even more so the action prop. If you have any ideas, happy to add!
|
Thank you @lunaleaps getting this done! This looks great. I love the troubleshooting section and the accessing form data example. I didn't even know about the |
Add initial reference documentation for the
useFormStatusHookPreview: https://react-dev-git-useformstatus-fbopensource.vercel.app/reference/react-dom/hooks/useFormStatus