Rename useFormState to useActionState #6776
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
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. |
There was a problem hiding this comment.
Nice!! One thing is that we need to keep useFormState for a bit because it's only deprecated in 19 and there are a ton of users using it (for example, everyone on Next.js App Router) and there are links around the net for it. We could do that with a shell that has a warning and a link to the new page, or add a redirect in vercel.json
| @@ -113,6 +113,7 @@ These Hooks are mostly useful to library authors and aren't commonly used in the | |||
| - [`useDebugValue`](/reference/react/useDebugValue) lets you customize the label React DevTools displays for your custom Hook. | |||
| - [`useId`](/reference/react/useId) lets a component associate a unique ID with itself. Typically used with accessibility APIs. | |||
| - [`useSyncExternalStore`](/reference/react/useSyncExternalStore) lets a component subscribe to an external store. | |||
| * [`useActionState`](/reference/react/useActionState) allows you to manage state of actions. | |||
There was a problem hiding this comment.
Should there be a section Action Hooks maybe? Not sure where this should go.
There was a problem hiding this comment.
Yeah I'd create a section with useTransition, useActionState, and useDeferredValue and call it like "UI hooks" or something
| @@ -283,7 +281,7 @@ form button { | |||
|
|
|||
| ### My action can no longer read the submitted form data {/*my-action-can-no-longer-read-the-submitted-form-data*/} | |||
|
|
|||
| When you wrap an action with `useFormState`, it gets an extra argument *as its first argument*. The submitted form data is therefore its *second* argument instead of its first as it would usually be. The new first argument that gets added is the current state of the form. | |||
| When you wrap an action with `useActionState`, it gets an extra argument *as its first argument*. The submitted form data is therefore its *second* argument instead of its first as it would usually be. The new first argument that gets added is the current state of the form. | |||
There was a problem hiding this comment.
A lot is referring to forms. Probably needs another pass to abstract this more from DOM forms specifically and explain how to use actions w/o forms.
There was a problem hiding this comment.
Yeah, fwiw I was waiting to rewrite this before moving it here for that reason
|
@kassens Do you have a plan to add the |
|
@koba04 yeah I'm updating the docs, got a little delayed with React Conf |
We renamed this and moved it to the
reactpackage because it's not tied to DOM forms.