React v19 Discussion

[bradlocking]

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 form
• useActionState - accept an "action" argument and returns any errors, the action itself, and whether the action is still pending. If anyone saw the canary release, it was previously named useFormState.
• ReactDOM now supports the action attribute on any form, to make handling submission and form reset easier.
• 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:

1. How does the form action attribute, introduced in ReactDOM, impact the current strategy for handling form validation & submission by using onSubmit={handleSubmit(myCustomSubmitHandler)}?
2. React look to be wanting to take more control of the "state" of a form, including errors, actions and pending flags. Should react-hook-form keep their current state management strategy, or see if its possible to integrate with the new react API's?
3. Does 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!

[npearson72]

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.

[jennnx]

One benefit of the new action prop on forms is progressive enhancement, allowing you to submit forms (as well as show errors) when javascript is disabled.

One solution I've seen that makes use of both the action prop and useForm() is from Jack Herrington's video here, where he:

1. Gives the form a server action using the action prop
2. Validates the form with handleSubmit() in the form's onSubmit() prop
3. Manually calls formRef.submit() in the handleSubmit() function, forcing the form to submit and call the action
4. Using useActionState() (previously useFormState()) to show server validation errors on the page in addition to the client-side validation errors from react-hook-form.

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.

[nidrizi]

For anyone using this approach, you can find Jack's code here:

https://github.com/ProNextJS/forms-management-yt/blob/main/forms-mgmt-finished/src/app/MailForm.tsx.

He has actually changed the code from the video.

[pandeymangg]

The approach works well, the only problem I'm facing is that my server action also expects another argument beside the previousState and the formData, do you have any idea how to pass other arguments to the server action?

[jennnx]

Yes @pandeymangg, you can use JavaScript’s built-in ‘bind’ function for this.

Here’s an example of binding additional arguments to a server action.

[chukwumaijem]

I used this approach in a form modal after watching his video, it worked well until I noticed there was no way to reset the formState created by const [state, formAction] = useActionState(serverAction, { message: null }) .

This is probably not the solution for you if you are not redirecting away from the form page after a successful submission.