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.

[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.

[ahnniething]

After upgrading to React 19 RC to try using useActionState, I was struggling with client-side validation suddenly not working. However, by following the method you shared, I was able to resolve client-side validation using react-hook-form and zod perfectly. Thank you so much for sharing this great solution!

However, I encountered one issue. It seems like this approach doesn't work well with the React Compiler in React 19. Instead of just re-rendering the field I'm typing in, the entire form re-renders. Is there anyone who could offer some help with this issue?

[arfa123]

after doing this const { pending } = useFormStatus(); not working

[maurer2]

Hello, I think the component where the useFormStatus-hook is used, needs to be a child (or deeper nested) component of the form-component, which uses the useActionState-hook. useFormStatus and useActionState can't be used in the same component.

[yishay-at-bay]

I watched the video mentioned above and tried it. Client & server validations working great but what about the fact that after submitting the form a full reload of the page happens?
I'd say this behavior is not that great. Maybe someone has an idea how to get client & server validations without reloading after submitting?

[ungureanustefan]

One issue that I see and don't know how to fix in Next.js is the following error:

[arfa123]

I am using this approach to combine React Server Actions with react-hook-form to utilize both:

const form = useForm()
const [state, formAction] = useActionState(serverAction, { message: null })

const {
    trigger,
    formState: { errors, isValid },
  } = form; 

return (
  <FormProvider {...form}>
    <form
      action={formAction} 
      onSubmit={async (e) => {
          if (!isValid) {
            e.preventDefault();
            await trigger();
            return;
          }
          e.currentTarget?.requestSubmit();
        }}
    >
     {/* form fields here */}
   </form>
   {state.message != null && <p>state.message</p>}
  </FormProvider>
)

[judewang]

Since the initial value of formState.isValid could be undefined, this approach will not work if the input values are valid before submitting.

[tomaszbujnicki]

Maybe you don't need onSubmit for your case.
Try adding attribute disabled={!isValid} on submit input and set mode: 'onChange' / 'onBlur' in useForm hook options.

export function CreateCategoryForm() {
   const [state, formAction] = useActionState(createCategoryAction, null)

   const {
      register,
      setValue,
      formState: { errors, isValid },
   } = useForm<CreateCategory>({
      mode: 'onChange',
      resolver: zodResolver(CreateCategorySchema),
   })

   return (
      <Form action={formAction}>
         <Fieldset legend="Content">
            <TextInput
               label="Title"
               message={errors.title?.message}
               {...register('title')}
            />
            <TextArea
               label="Description"
               message={errors.description?.message}
               {...register('description')}
            />
         </Fieldset>

         <Fieldset legend="Actions">
            <input type="submit" value="Create" disabled={!isValid} />
         </Fieldset>
      </Form>
   )
}

[tyteen4a03]

Is the team working on a golden path solution for Form Actions?

[AsuraKev]

Just wondering will React Compiler bring any performance boost out of box? e.g less rerenders

[Lenghak]

For this matter though, I am facing an issue where a component does not re-render when the validation failed with valibot or zod after upgrading to react 19. Now I am still wondering whether this is a feature or a bug?

[sashamorozov]

@Lenghak same problem, formState is not updated in the inner component and the error is not displayed after handleSubmit.

This is 100% a bug

---

One of the solutions could be a plugin like this until everything works (I haven't tried it yet though)

https://gist.github.com/stevoland/a6cb19ed10c33e420b08b8e5c69b2336

[anthonyalayo]

Does anyone have a good answer for how to code a scenario where you are using useActionState with a multi-step form, such that the form fields are not all rendered on the screen at one time? I am maintaining form state via controlled components, but you can't simply use action={formAction} since it won't contain all the fields.

[carloscsc]

I don't know if this helps you, but I have a multi-step form, and I deal with it like this: when the user goes to the next step, I check which step they are in and manually trigger the fields corresponding to that step. And if there are errors, I hold the user until he correctly validates the fields

` const handleNext = async () => {
let isValid = true;

if (activeStep === 0) {
  isValid = await trigger([
    "name",
    "email",
    "cpf",
    "nascimento",
    "cel",
    "tel",
  ]);
}

if (activeStep === 1) {
  isValid = await trigger([
    "cep",
    "endereco",
    "numero",
    "bairro",
    "cidade",
    "uf",
  ]);
}

if (isValid) {
  // setActiveStep((prevActiveStep) => prevActiveStep + 1);
}

};`

[anthonyalayo]

@carloscsc thanks for sharing! I got through that part actually (doing something similar to you), but the big issue was at the final screen when submitting. Are you using useActionState? If so, how do you have all the fields?

I just tried something very hacky, which thankfully works. Hopefully someone can give me a much better way :-). I inject all the missing inputs from previous pages/components behind the scenes and then allow the action to submit. If someone from the react team can chime in on a cleaner way, please do!

        <form
          onSubmit={form.onSubmit(async (values, event) => {
            const formRef = event?.currentTarget;
            if (!formRef) {
              return;
            }
            for (const [key, value] of Object.entries(values)) {
              let input = formRef.querySelector(`[name="${key}"]`) as HTMLInputElement | null;

              if (!input) {
                input = document.createElement('input');
                input.type = 'hidden';
                input.name = key;
                formRef.appendChild(input);
              }

              input.value = value.toString();
            }
            event?.currentTarget.requestSubmit();
          })}
          action={formAction}
        >

[carloscsc]

I'm not sure, but I believe you don't need useActionState, along with the React Hook Form.

see my implementation:

Here I define the form register and other settings:

const {
    register,
    handleSubmit,
    control,
    setValue,
    trigger,
    watch,
    clearErrors,
    formState: { errors },
  } = useForm<z.infer<typeof RegisterFormSchema>>({
    resolver: zodResolver(RegisterFormSchema),
    defaultValues: {
      name: "",
      email: "",
      cpf: "",
      nascimento: "",
      cel: "",
      tel: "",
      cep: "",
      endereco: "",
      numero: "",
      complemento: "",
      bairro: "",
      cidade: "",
      uf: "",
      password: "",
      repeat: "",
      termos: true,
      pergunta: "Opt 1",
      status: "pendent",
      role: "subscriber",
    },
  }); 

It is very important that you define a defaultValue for your fields even if it is empty

Here, I define the submit, and the server action

const onSubmit = useCallback((data: z.infer<typeof RegisterFormSchema>) => {
    setMessage(null);
    startTransition(async () => {
      const submit = await RegisterUser(data);

      if (submit.message) {
        setMessage(submit.message);
      }
    });
  }, []);

And here, finally I pass the submit to the form: <form onSubmit={handleSubmit(onSubmit)}>

In this approach, even if the fields are not all rendered, their values ​​are saved and updated in the React Hook Form state.

Follow the entire code below (I'm refactoring, there are still some poorly written things, but maybe it will help you understand better, I hope it helps!

import { useEffect, useState, useTransition, useCallback } from "react";
import { useForm, Controller } from "react-hook-form";
import { withMask } from "use-mask-input";
import { zodResolver } from "@hookform/resolvers/zod";
import { FormResponseProps, RegisterFormSchema } from "@/lib/definitions";

import {
  Alert,
  Box,
  Button,
  Checkbox,
  FormControl,
  FormControlLabel,
  FormGroup,
  FormHelperText,
  FormLabel,
  Radio,
  RadioGroup,
  Typography,
  Step,
  Stepper,
  StepLabel,
  Stack,
} from "@mui/material";
import Grid from "@mui/material/Grid2";
import LoadingButton from "@mui/lab/LoadingButton";

import Link from "next/link";

import { register as RegisterUser } from "@/actions/auth";
import { z } from "zod";
import { PersonAdd } from "@mui/icons-material";
import handleCEPChange from "@/utils/handleCep";
import PasswordInput from "@/components/Forms/PasswordInput";
import TextInput from "@/components/Forms/TextInput";

const steps = ["Dados Pessoais", "Endereço", "Senha"];

const AuthRegister = () => {
  const [isPending, startTransition] = useTransition();
  const [activeStep, setActiveStep] = useState(0);
  const [message, setMessage] = useState<FormResponseProps["message"] | null>(
    null,
  );

  const {
    register,
    handleSubmit,
    control,
    setValue,
    trigger,
    watch,
    clearErrors,
    formState: { errors },
  } = useForm<z.infer<typeof RegisterFormSchema>>({
    resolver: zodResolver(RegisterFormSchema),
    defaultValues: {
      name: "",
      email: "",
      cpf: "",
      nascimento: "",
      cel: "",
      tel: "",
      cep: "",
      endereco: "",
      numero: "",
      complemento: "",
      bairro: "",
      cidade: "",
      uf: "",
      password: "",
      repeat: "",
      termos: true,
      pergunta: "Opt 1",
      status: "pendent",
      role: "subscriber",
    },
  });

  register("status");
  register("role");

  // Steps
  const handleNext = async () => {
    let isValid = true;

    if (activeStep === 0) {
      isValid = await trigger([
        "name",
        "email",
        "cpf",
        "nascimento",
        "cel",
        "tel",
      ]);
    }

    if (activeStep === 1) {
      isValid = await trigger([
        "cep",
        "endereco",
        "numero",
        "bairro",
        "cidade",
        "uf",
      ]);
    }

    setActiveStep((prevActiveStep) => prevActiveStep + 1);
    // Só avança se não houver erros
    if (isValid) {
      // setActiveStep((prevActiveStep) => prevActiveStep + 1);
    }
  };

  const handleBack = async () => {
    setMessage(null);
    setActiveStep((prevActiveStep) => prevActiveStep - 1);
  };

  const onSubmit = useCallback((data: z.infer<typeof RegisterFormSchema>) => {
    setMessage(null);
    startTransition(async () => {
      const submit = await RegisterUser(data);

      if (submit.message) {
        setMessage(submit.message);
      }
    });
  }, []);

  useEffect(() => {
    const subscription = watch((value, { name }) => {
      if (name) {
        clearErrors(name);
      }
    });
    return () => subscription.unsubscribe();
  }, [watch, clearErrors]);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Stepper activeStep={activeStep}>
        {steps.map((label, index) => {
          const stepProps = {};
          const labelProps = {};

          return (
            <Step key={label} {...stepProps}>
              <StepLabel {...labelProps}>{label}</StepLabel>
            </Step>
          );
        })}
      </Stepper>
      <Stack mb={4} mt={2}>
        {activeStep === 0 && (
          <>
            <TextInput control={control} name="name" label="Nome Completo" />
            <TextInput control={control} name="email" label="E-mail" />
            <TextInput
              control={control}
              name="cpf"
              label="CPF"
              mask="999.999.999-99"
            />
            <TextInput
              control={control}
              name="nascimento"
              label="Data de Nascimento"
              mask="99/99/9999"
            />

            <TextInput
              control={control}
              name="cel"
              label="Celular"
              mask="99 99999-9999"
            />

            <TextInput
              control={control}
              name="tel"
              label="Telefone (opicional)"
              mask="99 9999-9999"
            />
          </>
        )}

        {activeStep === 1 && (
          <>
            <TextInput
              control={control}
              name="cep"
              label="CEP"
              mask="99999-999"
              onChange={(e) => handleCEPChange(e, setValue)}
            />

            <Grid container spacing={2}>
              <Grid size={8}>
                <TextInput control={control} name="endereco" label="Endereço" />
              </Grid>
              <Grid size={4}>
                <TextInput control={control} name="numero" label="Número" />
              </Grid>
            </Grid>

            <TextInput
              control={control}
              name="complemento"
              label="Complemento"
            />

            <TextInput control={control} name="bairro" label="Bairro" />

            <Grid container spacing={2}>
              <Grid size={8}>
                <TextInput
                  control={control}
                  name="cidade"
                  label="Cidade"
                  readOnly
                  variant="filled"
                />
              </Grid>
              <Grid size={4}>
                <TextInput
                  control={control}
                  name="uf"
                  label="UF"
                  readOnly
                  variant="filled"
                />
              </Grid>
            </Grid>
          </>
        )}

        {activeStep === 2 && (
          <>
            <Stack spacing={2} mt={3}>
              <PasswordInput control={control} name="password" label="Senha" />

              <PasswordInput
                control={control}
                name="repeat"
                label="Repita a senha"
              />
            </Stack>

            <FormGroup sx={{ mt: 3, mb: 3 }}>
              <Controller
                name="termos"
                control={control}
                render={({ field }) => (
                  <FormControlLabel
                    name="termos"
                    control={
                      <Checkbox defaultChecked {...field} value={field.value} />
                    }
                    label={
                      <Typography variant="caption">
                        Eu li e concordo com os{" "}
                        <Link href="#">termos do regulamento</Link>e estou
                        ciente do tratamento e privacidade de meus dados”
                      </Typography>
                    }
                  />
                )}
              />
              <FormHelperText error>
                {errors?.termos?.message || ""}
              </FormHelperText>
            </FormGroup>

            <FormControl
              component="fieldset"
              error={!!errors?.pergunta}
              sx={{ mb: 3 }}
            >
              <FormLabel id="demo-row-radio-buttons-group-label">
                Qual a resposta certa?
              </FormLabel>
              <Controller
                name="pergunta"
                control={control}
                rules={{
                  required: "Escolha uma resposta.",
                }}
                render={({ field }) => (
                  <RadioGroup
                    {...field}
                    row
                    aria-labelledby="demo-row-radio-buttons-group-label"
                  >
                    <FormControlLabel
                      value="Opt 1"
                      control={<Radio />}
                      label="Essa Resposta"
                    />
                    <FormControlLabel
                      value="Opt 2"
                      control={<Radio />}
                      label="Outra"
                    />
                  </RadioGroup>
                )}
              />
              {errors?.pergunta && (
                <FormHelperText>{errors.pergunta.message}</FormHelperText>
              )}
            </FormControl>

            <LoadingButton
              loading={isPending}
              loadingPosition="start"
              startIcon={<PersonAdd />}
              type="submit"
              variant="contained"
              size="large"
            >
              Criar minha conta
            </LoadingButton>

            {message && (
              <Alert severity={message.type} sx={{ mt: 2 }}>
                {message.content}
              </Alert>
            )}
          </>
        )}
      </Stack>
      <>
        <Box sx={{ display: "flex", flexDirection: "row", pt: 2 }}>
          <Button
            color="inherit"
            disabled={activeStep === 0}
            onClick={handleBack}
            sx={{ mr: 1 }}
            variant="outlined"
          >
            Voltar
          </Button>
          <Box sx={{ flex: "1 1 auto" }} />
          {activeStep < 2 && (
            <Button onClick={handleNext} variant="outlined">
              {activeStep === steps.length - 1 ? null : "Avançar"}
            </Button>
          )}
        </Box>
      </>
    </form>
  );
};

export default AuthRegister;

[marcomuser]

What would be wonderful would be a new hypothetical helper function registerAction that accepts an action as an argument and returns it, but handles client side validation and syncs the react-hook-form with the react transition (and the pending state etc.). Pseudo-code:

const {
    register,
    registerAction,
    formState: { errors },
  } = useForm<FormValues>()

return (
    <form
      action={registerAction(action)} 
    >
     {/* form fields here */}
   </form>
)

No idea if that's feasible. 😅

[maurer2]

Perhaps the experimental Form tag could be used for that: https://react-hook-form.com/docs/useform/form

[ludwighogstrom]

In my case, triggering submit caused a full page reload.

The server action got called but I'm guessing it's more like a POST when javascript is disabled.

Didn't spot the problem first because it looks like everything works because of the "progressive enhancement", i.e. works without javascript enabled.

// This was triggering a full page reload for me
onSubmit={form.handleSubmit(() => formRef.current?.submit())}

Instead I tried to just validate in onSubmit and block the action with preventDefault if invalid. Here it became troublesome because RHF validate function trigger is async and event.preventDefault needs to be called directly.

action={formAction}
onSubmit={(event) => {
  const isValid = checkFormValidation(); // Can't call "trigger" here and await the result before calling "preventDefault"
  if (!isValid) {
    event.preventDefault();
  }
}}

For me, it feels like you had to do too many special things to make RHF work with the new React 19 form and server actions.

[nghiepdev]

I'm still waiting for the official documentation on how to properly use RHF with the new form in React 19

[vsDizzy]

I have the same question and see that people suggesting to just use RVF.

[ZilvinasAbr]

@vsDizzy What is this RVF you mentioned? Haven't heard of this acronym before

[TylerNRobertson]

React 19 with the react compiler also seems to break how methods.watch works, it becomes really inconsistent due to the watch getting auto-memoized by the compiler

[paul-suciu]

I also started a discussion thread for React Compiler support here https://github.com/orgs/react-hook-form/discussions/12524

[NarkisMunassa]

  onSubmitProps.resetForm();

resetForm not working in react 19 i need a solution

[Emmanuel-Xs]

Hey guys I wrote a blog on this check it out

https://dev.to/emmanuel_xs/how-to-use-react-hook-form-with-useactionstate-hook-in-nextjs15-1hja

And one thing I need to add is that I can't use useFormStatus with React-hook-form so just get the isPending value from useActionState

[dizzyjaguar]

any update on this? Looking for the best way to use react-hook-form with useActionState

[Emmanuel-Xs]

#11832 (comment)

Check this out

[dizzyjaguar]

👍🏼 I ended up doing something simliar

[ZilvinasAbr]

Anyone came up with solution to sync the useActionState's isPending with React Hook Form's isSubmitting and the rest of formState? That's the biggest issue I have with trying to use React-hook-form with React 19

[ZilvinasAbr]

Why use the two, I mean does isPending from useActionState not solve your problem.

My concern regarding this is that this might break something inside react-hook-form or it would not work as expected in some cases.
Essentially, this is how it would work:

1. User clicks submit.
2. isSubmitting becomes true, isPending also true
3. isSubmitting quickly changes to false, while isPending is still true. (I'm scared of this state. What if RHF does some something in the background when isSubmitting is false even though technically it is still pending?)
4. isPending then becomes false after server actions finishes.

Yes, you can just use that.

Otherwise you can also sync it somewhat with

useForm({ ..., disabled: isPending })

but only if you're then taking advantage of it.

From docs disabled is to disable the whole of react-hook-form functionality, which is not the same as to say to RHF that the form is just in the submission state. This solution doesn't seem valid in this case.

[Emmanuel-Xs]

Is there a reason for using the two?

[ZilvinasAbr]

Is there a reason for using the two?

Probably not, but I would ideally use RHF's isSubmitting. I would see isPending as just an internal variable. Essentially, something like that:

const useWrappedForm = () => {
  const [serverFormState, formAction, isPending] = useActionState(...) 
  const form = useForm({
    isSubmittingOverride: isPending // We would pass this to sync RHF with useActionState
  })

  return { form, serverFormState, formAction }
}

It would be interesting to hear from someone more experiences in RFH source code if not syncing isSubmitting would give any risks

[Emmanuel-Xs]

Love the wrapped hook, since there isn't sth like that available, use the isPending from the useActionState hook

[ZilvinasAbr]

Love the wrapped hook, since there isn't sth like that available, use the isPending from the useActionState hook

Yeah, I guess that's the only way for now

[matt-hosseini-dev]

I use this simple approach on the submit button’s onClick, run await trigger(). If invalid, call e.preventDefault() to stop the native post to the server action. If valid, let it submit.

'use client';

import { useForm } from 'react-hook-form';
import { useCallback } from 'react';
import { authenticate } from './actions';

type Values = { email: string; password: string };

export default function LoginForm() {
  const { register, trigger, formState: { errors } } = useForm<Values>({
    // default is submit-only validation
  });

  // Gate native submit to the server action with RHF validation
  const handleValidateThenSubmit = useCallback(async (e: React.MouseEvent<HTMLButtonElement>) => {
    const ok = await trigger();     // runs RHF validation now
    if (!ok) e.preventDefault();    // block posting to server action if invalid
  }, [trigger]);

  return (
    <form action={authenticate} noValidate>
      <input {...register('email', { required: 'Email is required' })} name="email" type="email" />
      {errors.email && <p>{errors.email.message}</p>}

      <input {...register('password', { required: 'Password is required' })} name="password" type="password" />
      {errors.password && <p>{errors.password.message}</p>}

      <button type="submit" onClick={handleValidateThenSubmit}>
        Sign in
      </button>
    </form>
  );
}

[chapman-cc]

I think RHF and React 19's useActionState and server funciton works great together
here's my take

"use server";

import { redirect } from "next/navigation";

export type State = string | null;
export type Payload = Record<string, any>;

export const createRecord = async (payload: Payload): Promise<string> => {
  try {
    // do things with payload
    redirect("/created");
  } catch (error) {
    return "some thing is wrong";
  }
};

The form iteself

"use client";

import { useActionState } from "react";
import { useForm } from "react-hook-form";
import { createRecord, Payload, State } from "./action";

export default function page() {
  const { register, handleSubmit } = useForm();

  const [errString, action, isPending] = useActionState<State, Payload>(
    (prevState, payload) => createRecord(payload),
    null
  );

  return (
    <div>
      {errString && <h1>Error: {errString}</h1>}
      <form onClick={handleSubmit(action)}>
        <div>
          <label htmlFor="name">User Name</label>
          <input type="text" {...register("name")} />
        </div>

        <div>
          <label htmlFor="email">User Email</label>
          <input type="email" {...register("email")} required />
        </div>

        {isPending ? (
          <button type="submit" disabled>
            Submitting
          </button>
        ) : (
          <button type="submit">Submit</button>
        )}
      </form>
    </div>
  );
}

and the fact that the State type is ambiguous, meaning you can shape it however you want and has huge flexibility

[Vish05]

We've been experimenting with React 19 + useActionState over the past few months, and one thing we kept repeating was the same server-side validation and error-handling logic in every action.

Our pattern is to keep useActionState as the single source of truth:

• Parse FormData
• Validate with Zod
• Return typed field errors
• Execute the handler only when validation succeeds
• Catch unexpected exceptions and return a consistent { status: "error", message }

When combining it with React Hook Form, we also sync server-side validation errors back into RHF instead of duplicating validation logic.

After using this approach across several projects, I extracted it into a small open-source library called zod-form-action.

GitHub: https://github.com/Vish05/zod-form-action
npm: https://www.npmjs.com/package/zod-form-action

I'm the author, so this isn't meant as a neutral recommendation—I'd genuinely appreciate feedback from anyone building forms with React 19. If there are edge cases or workflows I haven't considered, I'd love to improve it.