react-hook-form: Unregistered defaultValues don't show up onSubmit
First off, thanks for this library, it’s been incredibly helpful.
Describe the bug
When I declare an initial value, I expect the entire initial value, plus the fields edited by the form, to be returned by onSubmit. However, only the fields registered by useForm show up in onSubmit. I’m coming from useState, where all state merges with initial state, so I might be misinterpreting the intent of defaultValues.
To Reproduce Steps to reproduce the behavior:
- Create a form with default values
- Register only one of the fields corresponding to the default value
- Log the result of
onSubmit, notice that both fields aren’t there.
Codesandbox link (Required)
https://codesandbox.io/s/react-hook-form-defaultvalues-v6-forked-41fpm?file=/src/index.js
In this example, the firstName field is registered by an input, lastName is not. Both are provided in default value. onSubmit logs only the first name field, but it ignores lastName.
Expected behavior
I expect onSubmit to return a mutated version of the defaultValues, including fields that never get registered by react-hook-form.
Additional context
My guess is that the behavior I’m describing here is intended by the library.
Here is my use case: I want to let a user edit their profile. The first step is to fetch a user’s profile from the server. I set this value as the defaultValues. Next, I want to let them edit just a few fields, like name, and media.images[0]. Once they do that, I want to return the full profile object to the server, and use that as the new profile.
Since I have many nested fields, I have to figure out a way to deep merge the defaultValues with the value this library returns onSubmit, and it’s a bit messy. With useState, this isn’t necessary, since it edits the initialState directly.
What do you suggest I do for this use case?
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Reactions: 1
- Comments: 21 (9 by maintainers)
No problem, and thanks for the suggestion with the new feature addition. I’ll try it out next time!
Thanks @nandorojo for the answer, although i kind does not agrees with part “especially field arrays”, I think react hook form’s field array is special and solve different problems.
mapeach time when user typing.also took a quick look at your example above again, you are using RC version of v6. I did what i suggested to @schickling above, looks like it’s working ok for this particular example which you have posted, but i wouldn’t say it will solve all the problems 😃 hopefully this clear a few things up, again right tool for the right job.
glad you find it useful, have you tried to include those values in the
defaultValues, and setshouldUnregister: false, maybe it would work for your “use case”.Thanks for the thread above. Very useful as I was running into the same problem. Until there is some kind of “better solution” I resorted to merge the registered and unregistered values in my
handleSubmitcallback.formValueswill do a shallow merge withdefaultValuesFor more details, take a look at the RFC: https://github.com/react-hook-form/react-hook-form/discussions/3714
Agreed. I’m not disparaging the quality of this library at all - it’s really impressive work. But for the specific use case of mutating your original state with dynamic fields, Formik is a better fit. You lose the benefits of performance from this library, of course. But it reduces the need to find a way to deep-merge objects when that’s needed.
For example, if I had an original list of images in a nested field and then removed 2, how would I merge that to send back to the server? It wasn’t entirely clear to me, since I wasn’t registering all the fields.
Ultimately, I preferred the React-like nature of maintaining a single source of truth with Formik. But it’s likely that my need to edit an entire document from a database isn’t that common.
Also, for anyone else that comes across this issue: React hook form is maintained far better than Formik. I wish it were built for my use case, because overall, it’s a much better library.
@schickling if you’re going to merge on submit, I recommend keeping your form very flat. Merging arbitrary nested values, especially field arrays, isn’t meant for this library. Formik is a better solution for this case.
Got it, I understand, and I know that each approach has its trade-offs. It looks like RHF won’t be able to do it for my use case. It’s a bummer, since it’s a great package, but I suppose I misunderstood the approach it had. Thanks again.