GTKX

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 ​

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