react-hook-form V7: value is not cleared after unmounting its registered component

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?

https://stackoverflow.com/questions/67327916/react-hook-form-v7-value-is-not-cleared-after-unmounting-its-registered-compone April 30, 2021 at 11:42AM