issue: form.reset(values) ignores undefined values

[andykog]

Version Number

7.51.2

Codesandbox/Expo snack

https://codesandbox.io/p/sandbox/react-hook-form-reset-undefined-w3p8ks

Steps to reproduce

Initialize the form with some values or defaultValues:

const userProfileForm = useForm({
  values: { revision: 5, firstName: 'a', image: {url: 'https://image.png'} },
})

Assume that the data was re-fetched from server and the form needs to be reset to reflect the actual state (in this scenario the profile image was removed on another device):

userProfileForm.reset({revision: 6, firstName: 'a' }); // <- image was removed

Result: the image value wasn't reset.

Additional info: it used to work fine in version 7.21.0

Workaround 1: replace all undefined values with null when calling reset:

userProfileForm.reset(_.defaultsDeep(newUserProfile, {image: null}))

Workaround 2: call reset with and without arguments multiple times (you can try to press buttons in the pvovided codesandbox a few times, eventually it will reset lastname), this behaviour is inconsistent.

Discussion

Expected behaviour

It should reset the form state completely to match the provided object without “merging” it with the previous values.

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[bluebill1049]

we don't support undefined value, you can find similar rule for other hook such as useController defaultValue or defaultValues

[andykog]

@bluebill1049 Would be useful if there was a way to reset form state completely. Also I think reset behaviour should be consistent (see my comment about workaround 2) it shouldn't behave differently depending on how many time it was invoked.

[bluebill1049]

• reset() // would reset your form with defaultValues which you have supplied to useForm
• reset({ ... }) // would reset whatever you have supplied in the reset payload

hook form supports both with or without defaultValues, which is convenient but you have to choose your impl here as well. I would consider to always supply reset with payload to update your form.

https://react-hook-form.com/docs/useform/reset

[andykog]

@bluebill1049 neither reset() nor reset({ test: 'test' }) will remove other values that already exist in the form state (e.g. image: {}, doesn't matter if you initialise form with or without defaultValues. This is shown in my codesandbox.

[AlevtinaLeytland]

Is there some decision?