Skip to content
React Hook Form
Star

getValues

Read current form values without subscribing to re-renders.

View MarkdownOpen in ChatGPTOpen in Claude

</> getValues: UseFormGetValues

An optimized helper for reading form values. The difference between watch and getValues is that getValues will not trigger re-renders or subscribe to input changes.

Props

NameTypeDescription
fieldNamesundefinedReturns the entire form values.
stringGets the value at path of the form values.
string[]Returns an array of the value at path of the form values.
configdirtyFieldsbooleanSince v7.63.0 Returns only dirty fields.
touchedFieldsbooleanSince v7.63.0 Returns only touched fields.
Examples

The example below shows what to expect when you invoke getValues method.

<input {...register("root.test1")} />


<input {...register("root.test2")} />
NameOutput
getValues(){ root: { test1: '', test2: ''} }
getValues("root"){ test1: '', test2: ''}
getValues("root.test1")''
getValues(["root.test1", "root.test2"])['', '']
getValues(undefined, { dirtyFields: true }){ root: { test1: '' } } — only fields present in formState.dirtyFields (e.g. after editing test1) are included
getValues(undefined, { touchedFields: true }){ root: { test1: '' } } — only fields present in formState.touchedFields (e.g. after blurring test1) are included
RULES
  • It will return defaultValues from useForm before the initial render.
  • getValues returns the raw field values. The data passed to your handleSubmit callback can differ: with a resolver it's the resolver's output (with any transforms or coercion applied), and disabled fields are left out.
  • getValues doesn't subscribe to changes, so it won't re-render your component. To render a value, use useWatch or watch.

Examples

CodeSandbox TS
import { useForm } from "react-hook-form"


type FormInputs = {
  test: string
  test1: string
}


export default function App() {
  const { register, getValues } = useForm<FormInputs>()


  return (
    <form>
      <input {...register("test")} />
      <input {...register("test1")} />


      <button
        type="button"
        onClick={() => {
          const values = getValues() // { test: "test-input", test1: "test1-input" }
          const singleValue = getValues("test") // "test-input"
          const multipleValues = getValues(["test", "test1"]) // ["test-input", "test1-input"]
        }}
      >
        Get Values
      </button>
    </form>
  )
}

Tips

  • To compare fields inside a validation rule, use the second argument of validate instead of getValues. It gets the current form values:

    register("confirmPassword", {
      validate: (value, formValues) =>
        value === formValues.password || "Passwords do not match",
    })

  • Do not mutate the object that getValues returns. Nested objects are shared with the form's internal state, so changing them can change form values without updating the form state. Copy the value first, or use setValue.

  • Use getValues in event handlers, for example to build a preview or to save a draft on click. In those places you need the latest values once, not a subscription.

Troubleshooting

A value shown with getValues doesn't update as the user types

Why it happens

getValues reads the current values once and does not subscribe to changes, so the component does not re-render when the input changes.

Fix

To render a value, use useWatch (or watch), which re-renders when the value changes. Keep getValues for event handlers.