Best approach to applying values loaded asychronously?

[raulfelix]

Say I have a form and the values for the form will be retrieved from an API.

What is the best approach to setting the form values? Should we use setValue?

Here is an example which I think used to work in previous versions. The name field is set in the form as a defaultValue but after it is loaded the field is not refreshed to reflect the loaded value.

https://codesandbox.io/s/empty-tree-qff1x?file=/src/App.js

[bluebill1049]

hey @raulfelix, it's better to use reset() API

useEffect(() => {
  reset(values);
}, [values])

[mitchconquer]

I have tried that but the problem is that if the user makes a change and navigates away and back to the form, the updated values from after the reset are not shown because I rely on the defaultValue property to display field updates. Maybe this is not a correct use of RHF.

[bluebill1049]

is the form gets unmounted when user navigate away?

[mitchconquer]

The inputs do, yes.

[bluebill1049]

that's the problem, you will need to store those values in a state lib. so they don't get unregistered when unmount.

[mitchconquer]

Ok, I see. I noticed it worked if I didn't reset first (ie: set the values by iterating through and using setValue) but reset was preferable because I wanted to get the validation result before I rendered the form.

But I think it's stretching the library beyond its intended use case so I will use state for this form.

Thanks so much for the support!

[kkfuri]

Is it safe to use the reset() API in the useEffect dependency list, following the react-hooks/exhaustive-deps?

useEffect(() => {
    reset(values);
  }, [values, reset]);

[bluebill1049]

yes reset is memoed inside hookform

[kkfuri]

Thank you! 😁

[caiorios]

Can I use reset() multiple times inside a form? In my case I keep my form components separate, each one of them having it's own logic for async load.

[bluebill1049]

yes :)

[caiorios]

Thank you!