Is it legal to pass values without defaultValues into useForm?

[helmax-y]

I have the following use-case of RHF:
I get server response data -> populate form with it -> when background refetch happens, I want values to be updated

According to documentation values option is what I need. My understanding is that values can replace defaultValues, because I don't see a reason why both of them are required. In most (all?) cases they are going to be the same, when form is mounted.
However it looks like my understanding of API if wrong, because server value is not being set into an input by RHF, and additionally there is a console warning: "A component is changing an uncontrolled input to be controlled".

Please have a look at this example and explain what is wrong with it. Thanks
https://codesandbox.io/p/devbox/sweet-gauss-9dz8v2?workspaceId=ws_7utnuTbc7cQ8JFovfmcXNp

[aniruddhaadak80]

@helmax-y (FYI)
RHF follows the "Uncontrolled" philosophy by default. If defaultValues is not provided (or empty), inputs start uncontrolled.
If you later supply values from async data, RHF attempts to update them. If you are rendering <input> without defaultValue initially, React warns when it becomes controlled.
Fix: Ensure defaultValues matches the shape (even if empty strings) or use reset(data) in a useEffect instead of relying on the values prop if the transition is causing re-render thrashing.

[helmax-y]

@aniruddhaadak80 yes, I can reset form in useEffect each time my server data updates, but sync via useEffect is not considered best practice, and I thought values option is added exactly to replace that sync pattern. Isn't it an issue that values option, which immediately contains data, doesn't populate a form?
Even if I add defaultValues: { firstName: '' }, as was suggested, doesn't make my server data appear in the form

[BrendanC23]

This can be done using just values without useEffect. See this CodeSandbox. If values is initially undefined, you will need to provide defaultValues. See this CodeSandbox for an example that does not include defaultValues.

You're CodeSandbox is using a really old version of RHF (version 7.4.1 from 2021). The CodeSandboxes above use the latest version 7.71.2 and everything works as expected. When the server data is changed, the form updates to reflect the new values.

[helmax-y]

@BrendanC23 yes, now looks logical and as expected, thanks for having a look!
I created my sandbox based on the one from new issue template, so probably should be updated

[BrendanC23]

I made a discussion about that awhile ago. Hopefully they'll be able to update the templates to always pull the latest version.

https://github.com/orgs/react-hook-form/discussions/12740

[helmax-y]

@BrendanC23 however there is one more issue I want to clarify about (this is actually what I originally faced with in my app)

Here I took your CodeSandbox and only added 1 additional option shouldUnregister. Please open it and try to submit a form
Is this a bug?

[BrendanC23]

I'm not too familiar with shouldUnregister, but that seems like a bug to me. If you click "submit" immediately and the input still has the original value from values, the form doesn't submit. If you manually type something in the field, the submisison goes through.

If defaultValues is provided without values, everything works as expected and the submission succeeds. See this CodeSandbox.

I would recommend filing a new issue for this.