How to cause re-render on setValue in FormContext

[Nav-2d]

Hello,

I am struggling to re-render when I am using setValue to dynamically set the value of a registered field.

I have created the below sandbox to showcase the issue: https://codesandbox.io/s/react-hook-form-v7-form-context-forked-ojp8ee?file=/src/Test.js

In Test.js, I have a radio group which has a handleChange to switch type and value attributes. I can see the updated value in the input box but for the p it never updates the values.

I am confused what I am missing. I did add shouldDirty: true as well as mentioned here: https://react-hook-form.com/api/useform/setvalue

Any help appreciated

[bluebill1049]

if you want to subscribe to value update, you can use watch/useWatch.

[leapful]

@Nav-2d : API "setValue" will try to avoid re-rendering by only updating real DOM input element. If you want to watch on change of input value, you can use "watch" on the field name to trigger re-rendering.

Working demo: https://codesandbox.io/s/react-hook-form-v7-form-context-forked-1tl18z?file=/src/Test.js

[jainaks01-bh]

I am facing issue where if I use

useWatch({control})

to watch all of form data, then when form data changes, this component having the useWatch is not re-rendering.