useFormState

This custom hook allows you to subscribe to each form state, and isolate the re-render at the custom hook level. It has its scope in terms of form state subscription, so it would not affect other useFormState and useForm. Using this hook can reduce the re-render impact on large and complex form application.

@example

function App() {
  const { register, handleSubmit, control } = useForm({
    defaultValues: {
    firstName: "firstName"
  }});
  const { dirtyFields } = useFormState({
    control
  });
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName")} placeholder="First Name" />
      {dirtyFields.firstName && <p>Field is dirty.</p>}
      <input type="submit" />
    </form>
  );
}

function useFormState<TFieldValues extends FieldValues = FieldValues>(props?: UseFormStateProps<TFieldValues>): UseFormStateReturn<TFieldValues>;

useFormState<TFieldValues extends FieldValues = FieldValues>(props?: UseFormStateProps<TFieldValues>): UseFormStateReturn<TFieldValues>

[src]

§Type Parameters

TFieldValues extends FieldValues = FieldValues

[src]

§Parameters

props?: UseFormStateProps<TFieldValues> optional

[src]

include options on specify fields to subscribe. UseFormStateReturn

§Return Type

UseFormStateReturn<TFieldValues>

[src]