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.