React v19 Discussion #11832
Replies: 2 comments
-
I too am wondering about your first question. In general the hooks/features offered around actions don't seem to align well with client side validations. Although I know you can just call an action directly in your own submit handler. Still, would be nice to use the action prop on the form API. |
Beta Was this translation helpful? Give feedback.
-
One benefit of the new One solution I've seen that makes use of both the
The code looks something like this: import { serverAction } from "./actions"
const form = useForm()
const formRef = useRef(null)
const [state, formAction] = useActionState(serverAction, { message: null })
return (
<Form {...form}>
<form
ref={formRef}
action={formAction}
onSubmit={form.handleSubmit(() => formRef.current?.submit())}
>
{/* form fields here */}
</form>
{state.message != null && <p>state.message</p>}
</Form>
) Functionally I think this is great, since it lets us take advantage of progressive enhancement and the new React 19 features, but there is a bit too much going on here I think, making it feel a little clunky. It would be nice to consolidate all of this behavior into one, but it might not align well with the vision of this specific library. In that case, the workaround above^ seem to work fine for now. |
Beta Was this translation helpful? Give feedback.
-
Hey,
Some exciting new API's and Hooks are being teased as part of the React v19 upgrade. There is a lot more thought going into how the core React API can help with form submission, and some of their new hooks may be worth looking into sooner rather than later to perhaps identify how
react-hook-form
may or may not be able to integrate with it (or whether it should).So, what's coming up in React 19?
Actions
TL;DR lots of thought around how taking data from a form and making an API request to save the data could be simplified/improved.
useTransition
can be used to save data from a basic formuseActionState
- accept an "action" argument and returns any errors, the action itself, and whether the action is stillpending
. If anyone saw the canary release, it was previously nameduseFormState
.useFormStatus
allows access to the state of a form for any child component of the HTML form, without need for additional context or providers.useOptimistic
- This doesn't look specific to forms, but nonetheless is a feature to make displaying optimistic responses from pending API requests a little easier.Feel free to contribute to the discussion if you have any thoughts or ideas. I've been thinking about it myself since I read the announcement, and i've already got some high level questions:
action
attribute, introduced in ReactDOM, impact the current strategy for handling form validation & submission by usingonSubmit={handleSubmit(myCustomSubmitHandler)}
?useFormStatus
take responsibility of some of the state that react-hook-form currently handles? It will initially expose four properties; pending, form data, form method and the action itself.All high level questions and open to scrutiny / debate, Though in general it is quite exciting to see the React core team focus efforts on forms, something that I have always seen as being particularly neglected, and largely why I enjoy working with react-hook-form for managing forms!
Beta Was this translation helpful? Give feedback.
All reactions