This object contains information about the entire form state. It helps you to keep on track with the user's interaction with your form application.

Return

Rules

• formState is wrapped with a Proxy to improve render performance and skip extra logic if specific state is not subscribed to. Therefore make sure you invoke or read it before a render in order to enable the state update.

• formState is updated in batch. If you want to subscribe to formState via useEffect, make sure that you place the entire formState in the optional array.

  snippetexample

  Copy

  useEffect(() => { if (formState.errors.firstName) { // do the your logic here } }, [formState]); // ✅ // ❌ formState.errors will not trigger the useEffect

  useEffect(() => {
    if (formState.errors.firstName) {
      // do the your logic here
    }
  }, [formState]); // ✅ 
  // ❌ formState.errors will not trigger the useEffect        
  
  

  JSTSCopy

  import React from "react"; import { useForm } from "react-hook-form"; export default function App () { const { register, handleSubmit, formState } = useForm(); const onSubmit = (data) => console.log(data); React.useEffect(() => { console.log("touchedFields", formState.touchedFields); },[formState]); // use entire formState object as optional array arg in useEffect, not individual properties of it return ( <form onSubmit={handleSubmit(onSubmit)}> <input {...register("test")} /> <input type="submit" /> </form> ); };

  import React from "react";
  import { useForm } from "react-hook-form";
  
  export default function App () {
    const {
      register,
      handleSubmit,
      formState
    } = useForm();
  
    const onSubmit = (data) => console.log(data);
  
    React.useEffect(() => {
      console.log("touchedFields", formState.touchedFields);
    },[formState]); // use entire formState object as optional array arg in useEffect, not individual properties of it
  
  
    return (
      <form onSubmit={handleSubmit(onSubmit)}>
        <input {...register("test")} />
        <input type="submit" />
      </form>
    );
  };
  
  
  

• Pay attention to the logical operator when subscription to formState.

  Copy

  // ❌ formState.isValid is accessed conditionally, // so the Proxy does not subscribe to changes of that state return <button disabled={!formState.isDirty || !formState.isValid} />; // ✅ read all formState values to subscribe to changes const { isDirty, isValid } = formState; return <button disabled={!isDirty || !isValid} />;

  // ❌ formState.isValid is accessed conditionally, 
  // so the Proxy does not subscribe to changes of that state
  return <button disabled={!formState.isDirty || !formState.isValid} />;
    
  // ✅ read all formState values to subscribe to changes
  const { isDirty, isValid } = formState;
  return <button disabled={!isDirty || !isValid} />;
  
  

Examples

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

export default function App() {
  const {
    register,
    handleSubmit,
    // Read the formState before render to subscribe the form state through the Proxy
    formState: { errors, isDirty, isSubmitting, touchedFields, submitCount },
  } = useForm();
  const onSubmit = (data: FormInputs) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("test")} />
      <input type="submit" />
    </form>
  );
}

Video

The following video will explain in detail different form states.