How to prevent setValue from rerendering the whole form for field registered dynamically?

[Drakota]

Hi everyone, I'm trying to use setValue and register inside dynamically rendered elements, I've made a quick codesandbox to illustrate my issue. I have an input inside a component that registers a custom made input that uses setValue and uses that value elsewhere in the same component. My codesandbox works great and when I submit my form I do have access to all my values, but the problem is when enabling Highlight updates when components render. like this:

I've noticed that the whole form is rerendering when setValue is called for any input, I was wondering if there was a way to achieve what I'm trying to do without rerendering the whole form, only the component that is watching what's modified.

[bluebill1049]

The re-render is caused by your watch const item = watch(${id}, {});

[Drakota]

Sure, but I need the watch to display something when it's modified. In my example, I'm modifying my input and I want it to display the text.

[bluebill1049]

then you will have to use useWatch which will be released as part of V6, watch will trigger re-render at form or hook level.

[Drakota]

Looks promising will check it out in rc, thank you!