Skip to content
React Hook Form
Star

resetDefaultValues

Update the baseline defaults without resetting current values.

View MarkdownOpen in ChatGPTOpen in Claude

</> resetDefaultValues: UseFormResetDefaultValues Since v7.77.0

Update defaultValues and recompute dirtyFields/isDirty against the new baseline without modifying the current form values. This is useful when a form disables submission while !isDirty — after a successful async submission you can advance the baseline to the submitted values so that only post-submit edits are considered dirty.

Props

NameTypeDescription
valuesobjectThe new default values to establish as the baseline. Recommended to provide the full object.
optionskeepDirtybooleanWhen set to true, existing dirtyFields state is preserved as-is rather than recomputed against the new baseline.
keepIsValidbooleanWhen set to true, validation is not re-run after the baseline update and isValid remains unchanged.
RULES
  • Current form values (what the user has typed) are never modified by this method — only the internal baseline used to compute dirty state changes.
  • dirtyFields and isDirty are recomputed against the new baseline unless keepDirty is set.

Examples

After Async Submission

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


interface FormValues {
  firstName: string
  lastName: string
}


export default function App() {
  const {
    register,
    handleSubmit,
    resetDefaultValues,
    formState: { isDirty },
  } = useForm<FormValues>({
    defaultValues: { firstName: "", lastName: "" },
  })


  const onSubmit = async (data: FormValues) => {
    await saveToServer(data)
    // Advance the baseline to the submitted values.
    // isDirty will now only be true if the user edits after this point.
    resetDefaultValues(data)
  }


  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName")} />
      <input {...register("lastName")} />
      <button type="submit" disabled={!isDirty}>
        Save
      </button>
    </form>
  )
}
import { useForm } from "react-hook-form"


export default function App() {
  const {
    register,
    handleSubmit,
    resetDefaultValues,
    formState: { isDirty },
  } = useForm({
    defaultValues: { firstName: "", lastName: "" },
  })


  const onSubmit = async (data) => {
    await saveToServer(data)
    // Advance the baseline to the submitted values.
    // isDirty will now only be true if the user edits after this point.
    resetDefaultValues(data)
  }


  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName")} />
      <input {...register("lastName")} />
      <button type="submit" disabled={!isDirty}>
        Save
      </button>
    </form>
  )
}

With Options

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


export default function App() {
  const { register, resetDefaultValues } = useForm({
    defaultValues: { firstName: "", lastName: "" },
  })


  const handleServerUpdate = (serverValues) => {
    resetDefaultValues(serverValues, {
      keepDirty: true, // preserve existing dirty tracking
      keepIsValid: true, // skip re-validation
    })
  }


  return (
    <form>
      <input {...register("firstName")} />
      <input {...register("lastName")} />
      <button
        type="button"
        onClick={() =>
          handleServerUpdate({ firstName: "Jane", lastName: "Doe" })
        }
      >
        Load server values
      </button>
    </form>
  )
}

Tips

  • Use resetDefaultValues for an autosave form. After each save, move the baseline to the saved values, so isDirty shows only the changes that have not been saved yet. The user can keep typing, and the inputs are not touched.
  • Pass the values that were actually saved, for example the server response, and not the current form values. If the user typed while the request was in flight, those changes then stay dirty.
  • To also clear errors, touched fields, and submission state, use reset instead.