Document version 7.6.0 as a breaking change

Is your feature request related to a problem? Please describe. There’s a breaking change that occurred after the release of version 7.6.0. I suspect it is related to https://github.com/react-hook-form/react-hook-form/pull/5069 where we add default values to register even if their corresponding fields are not rendered.

Previously, if we wanted to manually track fields that were not rendered in the HTML, we’d do something like this

const { register } = useForm({
  defaultValues: {
    manuallyTracked: true,
  },
});

useEffect(() => {
  register('manuallyTracked');
}, []);

// some functions modifying manuallyTracked state

return (
  <html-without-input-named-manually-tracked />
)

With the release of version 7.6.0, we no longer need to call register() to manually track fields which is great! However, doing so may result in unexpected bugs. In my case, an empty array was becoming an empty object.

Describe the solution you’d like Document this change and the fact we no longer need nor should call register() to manually register inputs.

Describe alternatives you’ve considered Downgrading the library version 😂

Additional context N/A

[mrlubos]

Thanks for putting up all the investigation in the codesandboxes above, looks like it’s an edge case that I didn’t consider carefully enough for inputs that you want to update manually without an actual input. As I explained in the other issue, react hook form can’t predict if it’s a single input or array of inputs.

Here are a couple workaround for such use cases:

• Letting hook form know that its a single input and assign it with value [7.8.0 (which will release this weekend)] https://codesandbox.io/s/awesome-mestorf-9bktk?file=/src/App.tsx

React.useEffect(() => {
  register("array", { value: getValues("array") });
}, [register, getValues]);

• set shouldUnregister: true, so it’s more close to native form behavior, the input value will get removed after unmount and defaultValues will not be automatically registered. https://codesandbox.io/s/eager-darkness-l8rw4?file=/src/App.tsx

const { control, getValues, handleSubmit, register, watch } = useForm<
  FormValues
>({
  defaultValues,
  shouldUnregister: false
});

• unregister input and then setValue to reset the entire field input.

unregistre('array');
setValue('array', [1,2,3]);

I hope the above can solve your problem. In the meantime, I will still try to figure a solution for custom array-like inputs (which doesn’t contain a real input) with auto register in the coming releases.

Thank you! I think the second approach with shouldUnregister will work as it should essentially be the behaviour prior to 7.6.0, right? Either way I tested it and it appears to work as expected. Thanks again

[mrlubos]

Hey @bluebill1049, just wanted to provide you with an update. I was able to isolate the issue related to removing the register() call in my code. The bug was in my application, so nothing to fix in react-hook-form. Thank you for your fast responses and continued maintenance of this library!