Add useFormState reference #6338
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. |
| "devDependencies": {} | ||
| } | ||
| ``` | ||
| </Sandpack> |
There was a problem hiding this comment.
Have you considered adding an example demonstrating how you could use useFormState to update the UI without JavaScript?
There was a problem hiding this comment.
I don't know how to demonstrate that without having RSC on the docs website, do you have an idea of how that would look?
There was a problem hiding this comment.
You could add a non-interactive example with standard Markdown code syntax e.g. ```js
There was a problem hiding this comment.
Is there some specific application or use case for updating the UI without javascript that is different from existing examples such as Add to Cart?
There was a problem hiding this comment.
I've only looked and commented on the first half. Overall I think there needs to be some changes from describing how the API should be used to what the API does and how it works. I think the usage section is the right place to describe how to solve problems with the API. I think all the sections above the usage section should be focused on what the API does and how it work, and less on use-cases and opinions on how the API should be used.
|
|
||
| <Intro> | ||
|
|
||
| `useFormState` is a Hook that allows you to read the return value of the form action after a form is submitted. |
There was a problem hiding this comment.
read the return value of the form action
I think "return value of the form action" it a lot for folks that are new to this to parse. Have you considered making this more descriptive/abstract? I think the less React-specific langauge we can use here the easier its going to be for folks new to forms with React to understand the rest of the page.
after a form is submitted.
I don't think this is quite right. You can trigger a formAction from a button that doesn't actually submit the form: https://codesandbox.io/s/stoic-fog-qnyvn7?file=/App.js
There was a problem hiding this comment.
I changed this to "useFormState is a Hook that allows you to update state based on the result of a form action." — what do you think?
|
Can we make the real-world examples of the action function more prominent? Right now you need to scroll all the way to the recipes and click |
| ```json package.json hidden | ||
| { | ||
| "dependencies": { | ||
| "react": "experimental", |
|
@davidmccabe thoughts on my comment above for a follow-up? |
|
I accidentally merged this without the commit where I incorporate the feedback here. Trying to figure out how to fix it now. |
|
ah, great! feel free to ping me on work chat if I can help you get out of a git pickle |
|
Merged the PR with the intended changes #6383 |
Initial stab at docs for useFormState. The examples are limited as we don't have server actions actually working within the docs website yet.
This is another example I could include which uses a client action to update the state of the component, but I think it's confusing. If we want people to refresh instead of updating client state, maybe we shouldn't show this. https://codesandbox.io/s/strange-waterfall-wqwsys?file=/App.js
Preview