New prop enabled for conditionally running the useForm-hook

[aleehedl]

When rendering an edit form, a typical pattern for me is that I use useQuery (from Tanstack) to load the existing data and feed it into react-hook-form as default values. But because the defaultValues is only read once (on mount), I have to use the reset function when the useQuery has finished loading.

export default function EditForm() {
  const { data, isLoaded } = useQuery(...{
    onSuccess: (response) => {
      reset({...response});
    },
  });
  const { register, reset } = useForm();
  return (
    <form>
       <input {...register(...)} />
    </form>
  )
}

What I would like to do instead is to be able to use the defaultValues directly on the useForm call and disable the useForm before useQuery has finished loading, maybe like this:

export default function EditForm() {
  const { data, isLoaded } = useQuery(...);
  const { register } = useForm({
    defaultValues: data,
    enabled: Boolean(isLoaded)
  });
  return (
    <form>
       <input {...register(...)} />
    </form>
  )
}

Would something like this be possible? I'm not sure how the register function an others should behave when the useForm is not enabled.

[Moshyfawn]

Using the reset method is the recommended pattern to "re-init" your form with new values.

[bluebill1049]

I would command that above as well, even tho we have a long discussion before #2335