This method is introduced in react-hook-form (v7.25.0) to return individual field state. It's useful in case you are trying to retrieve nested field state in a typesafe way.

Props

Return

Rules

• name needs to match a registered field name.

  Copy

  getFieldState('test');
  
  getFieldState('test'); // ✅ register input and return field state
  getFieldState('non-existent-name'); // ❌ will return state as false and error as undefined 
  

• formState will need to be subscribed.

  You can subscribe to the formState in two different ways:

  1. You can simply define the required state information when destructuring the returned value of a relevant hook, such as useForm (at global level) or useFormState (at hook level).

     You do not need to pass the state information to getFieldState().

     Copy

     const { register, formState: { isDirty } } = useForm()
     register('test');
     getFieldState('test'); // ✅ register input and return field state
     
     ---------------------------
     
     // This is valid with useFormState as well
     const { isDirty } = useFormState();
     
     register('test');
     getFieldState('test'); // ✅ register input and return field state
     

  2. You can pass the entire formState from useForm(),useFormContext() oruseFormState() directly to getFieldState().

     This will be the preferred approach for Typescript users who have stricter linting or compilation rules about unused declarations.

     Copy

     const { register } = useForm()
     register('test');
     getFieldState('test'); // ❌ formState is not subscribed so has no re-render to update state
     
     ---------------------------
     
     const { register, formState } = useForm()
     getFieldState('test', formState); // ✅ register input and return field state
     

Examples

import * as React from "react";
import { useForm } from "react-hook-form";

export default function App() {
  const {
    register,
    getFieldState,
    formState: { isDirty, isValid }
  } = useForm({
    mode: "onChange",
    defaultValues: {
      firstName: ""
    }
  });

  // you can invoke before render or within the render function
  const fieldState = getFieldState("firstName");

  return (
    <form>
      <input {...register("firstName", { required: true })} />
      <p>{getFieldState("firstName").isDirty && "dirty"}</p>
      <p>{getFieldState("firstName").isTouched && "touched"}</p>
      <button type="button" onClick={() => console.log(getFieldState("firstName"))}>
        field state
      </button>
    </form>
  );
}