API Reference / @gtkx/forms / useFormState

Function: useFormState()

useFormState<TFieldValues, TTransformedValues>(props?): UseFormStateReturn<TFieldValues>

Defined in: node_modules/.pnpm/react-hook-form@7.86.0_react@19.2.8/node_modules/react-hook-form/dist/useFormState.d.ts:32

Subscribes to each form state and isolates re-renders at the custom hook level. It has its own scope for form state subscriptions, so it will not affect other useFormState or useForm instances. Using this hook can reduce the re-render impact on large and complex form applications.

Type Parameters

TFieldValues

TFieldValues extends FieldValues = FieldValues

TTransformedValues

TTransformedValues = TFieldValues

Parameters

props?

Partial<{ control?: Control<TFieldValues, any, TTransformedValues>; disabled?: boolean; exact?: boolean; name?: Path<TFieldValues> | Path<TFieldValues>[] | readonly Path<TFieldValues>[]; }>

Include options to specify fields to subscribe to. UseFormStateReturn

Returns

UseFormStateReturn<TFieldValues>

Remarks

API • Demo

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>
  );
}