react-hook-form V7：卸载其注册组件后未清除值

Question

In V6 when I toggled a component off, using the watch method, the component will be unmounted and so will any sibling that depends on the unmounted components' value:

For example:

• We have three components <ComponentA /> , <ComponentB /> and <ComponentC /> .
• When <ComponentA /> equals 'Yes', <ComponentB/> is rendered.
• When <ComponetB /> equals 1 or 2, <ComponentC /> is rendered.
• Finally, if I change <ComponentA /> to 'No' <ComponentB /> and <ComponentC /> will be unmounted and their values will be cleared.

Working example here https://codesandbox.io/s/mui-rfhv6-001-xy39c

On the other hand, in V7 when I change <ComponentA /> to 'No', <ComponentB /> is unmounted but its value is not cleared. Therefore, <ComponentC /> is not unmounted.

Working example here: https://codesandbox.io/s/mui-rhfv7-001-rpg21

I have tried setting shouldUnregister: true as shown below but, still get the same behavior.

const { control, watch, handleSubmit } = useForm({
  mode: "all",
  shouldUnregister: true
});

What am I missing?

Answer 1

It's a breaking change from version 7. From the migration guide :

Important: input value and reference will no longer get removed after unmount.

The solution is to detect when the component should be unmounted and call unregister() to clear the field manually:

const { ...props, unregister } = useForm();

useEffect(() => {
  if (watchRadio !== "Yes") {
    unregister("numOfSup");
  }
}, [watchRadio, unregister]);

You can see the issue about the subject here . Search for shouldUnregister to see the relevant info.

Live Demo

Answer 2

Thank you @NearHuscarl

Also, I found a simpler way to fix the issue with the help of the one of react-hook-form creators. Upgrading its version. In my case I was using version 7.0.5 and upgraded to 7.3.5.

The benefit of this approach is that you don't have to detect when the component should be unmounted and call unregister() to clear the field manually.

FYI, for future reference, here is the working CSD:

Live Demo 2