issue: calling setValue from useEffect does not trigger useWatch

[loun4]

Version Number

7.25.0

Codesandbox/Expo snack

https://codesandbox.io/s/react-hook-form-js-forked-lbhoo?file=/src/App.js

Steps to reproduce

1. Go to Codesandbox
2. See the value of name on initial render (null instead of foo)

Expected behaviour

Calling setValue from an effect should update useWatch values.

What browsers are you seeing the problem on?

No response

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[Moshyfawn]

Consider lifting setValue out of the child or switch the order of <ComponentA /> and <ComponentB /> around, so that the component using useWatch is before the setValue call. It's the expected behavior. See Rules section of RHF useWatch docs section:

useWatch execution order matters, which means if you are update form value before the subscription is in place, then the value update will be ignored.

setValue('test', 'data');
useWatch({ name: 'test' }); // ❌ subscription is happened after value update, no update received

useWatch({ name: 'example' }); // ✅ input value update will be received and trigger re-render
setValue('example', 'data'); 

[hokwanhung]

Thanks for the answer! This saves much debugging time for me.

[bluebill1049]

thanks @Moshyfawn! that's correct. you are truly an expert on this lib.

[loun4]

Okay, useWatch et setValue should be used together at the same level.
Thanks.

[Moshyfawn]

Okay, useWatch et setValue should be used together at the same level.

Not necessarily. Just make sure useWatch is called earlier than setValue

[loun4]

The codesandbox is updated to show a different case https://codesandbox.io/s/react-hook-form-js-forked-lbhoo?file=/src/App.js

ComponentB is now rendered into ComponentA, the subscription in the parent ComponentA is happened before the value update in ComponentB .
Any idea why the value is not updating in the parent ?

[bluebill1049]

children component will be invoked before parent component. At the end of the day, it's all to do with the function execution order.

[Moshyfawn]

Refer to this StackOverflow answer for some additional info

[terry623]

Is there any eslint rule that could prevent this?