issue: useWatch does not return default value when Component is dynamically rendered

[Muffinmann]

Version Number

^7.41.0

Codesandbox/Expo snack

https://codesandbox.io/s/react-hook-form-v7-usewatch-forked-evult8?file=/src/index.js

Steps to reproduce

1. Go to the 'Dependencies' setting in Codesanbox
2. Choose version 7.40.0
3. both useWatch return {"firstName": "john", "lastName": "doe"}
4. Now choose any version above (including) 7.41.0
5. the second useWatch return [null, null]

Expected behaviour

the second useWatcher returns the same default value as the first one.

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

[Muffinmann]

My use case is that I have a complex form where the relations among some field components are fetched from the database. These field components are rendered only after they have finished fetching. Otherwise, they will display a loading status.

[bluebill1049]

This is related to the subscription execution order.

https://react-hook-form.com/api/usewatch/

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

[Muffinmann]

Hi Bill, thank you for your reply.

However, I don't understand why the problem is related to the execution order. The early return ensures that form inputs are only rendered once the watcherSetting state is set. In this case, the execution order of these two forms should be the same.
If it is the problem of execution order, it can not explain why this problem does not happen in versions before 7.41.0.

However, based on my observations, '_state.mount' is set to true after the first render. This causes useWatch in the second form to look up values only in '_formValues' instead of looking up values in its defaultValue as well. This seems inconsistent with the documentation:

The initial return value from useWatch will always return what's inside of defaultValue or defaultValues from useForm.

I would expect the return value fallback to 'defaulValue' in useWatch when global 'defaultValues' in useForm is not provided, and I believe this was possible before 7.41.0.

[bluebill1049]

After the components component, we will return formValues instead of defaultValues. Once useEffect is invoked, we will mark the component has mounted and hence return formValues. Feel free to check the commit history, it would have been fix an existing bug instead change the watch return behaviour.

[sepsol]

@bluebill1049 Is this documented anywhere?

[shamseerahammedm]

@bluebill1049

when useWtach is used for wathing multiple values it doesnt return defaultvalue in first render, even when supplied
in this xample 3firstname and 3lastname returns undefined

https://codesandbox.io/p/sandbox/rfh-usewatch-multiple-fields-z2h2rt?file=%2Fsrc%2FApp.js