Form not populating with defaultState after re-render

[MikeW90]

CodeSandbox: https://codesandbox.io/s/react-hook-form-reset-demo-fg9f3?file=/src/index.js

In the linked toy example, an API call to return some default user name values is simulated. The values are stored in a state atom called userInputState, which is passed down to a child form (using react-hook-form) as "initialState." The form uses initialState for defaultValues, and when it is changed a useEffect calls reset() on the data. This works for the first mounting of the form.

After submission, the form state is updated and you are taken to a new component view. The form state looks correct by this point. However, if you click the BACK button and the first page with the form is shown a second time, the (new) default values do not populate.

Any assistance in correctly using defaultValues and reset would be appreciated. Thanks in advance.

[bluebill1049]

useEffect(() => reset(defaultValues))?

[MikeW90]

Hi Bill, maybe I did not understand this but using useEffect(() => reset(initialValues))

results in a infinite loop of state updates and also prevents me from editing the text fields' contents.

[bluebill1049]

useEffect(() => reset(defaultValues), [reset])

[MikeW90]

OK, I have added that line in there but now the form field values in the DOM do not match the form state (initial values) at all, even on the first render.

What I am trying to do is make the form update with new default values when the initialState prop changes. That would just be one render per prop change, and the form would work normally after that update.

Updated code sandbox with your useEffect recommendation:
https://codesandbox.io/s/react-hook-form-reset-demo-fg9f3?file=/src/index.js.

[bluebill1049]

ok, let me explain:

1. if your default value is ready at the initial component to mount, then use defaultValues
2. if data coming async, you can use useEffect with reset to update the form defaultValues

I recommend you build a simple codesandbxo with above behaviour first.

[bluebill1049]

Nice! 🙏

[dazes97]

Thank you, it worked for me

[amanzrx4]

Hey @bluebill1049 is there any value to update the defaultValue of a controller after a fetch, like in this case updating the default value wont cause a re-render. My use case is Mui Select component where the default state of the select comes after a fetch & it should be shown as selected, right now i've to use setValue with isDirty false.

[hussamkhatib]

Hey @amanzrx4,
This https://github.com/orgs/react-hook-form/discussions/2282#discussioncomment-2888306 seems to answer your question.

[amanzrx4]

Thanks but too late @hussamkhatib
I remember i solved it by changing my approach, i'd update the value after fetch

[makivlach]

In my case, I was populating an object with default values at useEffect and passing to down to the useForm(). My mistake was, that the data were prepared at the second's render.

[bluebill1049]

yes, useEffect((reset({...})) => [reset])

defaultValues is made for the first render, just like input's defaultValue

[mcollins2-quantium]

Hi @bluebill1049, I may be missing something here but is it possible to refresh the cache for defaultValues?

When my component re-renders on subsequent renders I would like the form to populate with the new prop values but not to trigger a watch call.

i.e watch is only triggered on user changes but the form is kept in sync with prop values

[mcollins2-quantium]

For anyone in a similar situation I got around this by assigning a changing key to the instance of the component

[anricoj1]

I still feel like this question isn't answered.....or I feel as though this needs better DX. Just spent way too long trying to figure out why I couldn't submit one form, then submit another.

Turns out you either bite the full page refresh bullet or you have to call

form.reset({
// all form values here
})

This works fine for small forms I guess, but definitely needs some improvement. defaultValues should be used when form.reset() is called.

[Schaitanya535]

I don't think above solutions adequately answer the problem, the best way to deal with this issue is by using values prop.

The values prop will react to changes and update the form values, which is useful when your form needs to be updated by external state or server data.

Check this documentation example for more details.

[himanshu-relata]

How to handle the case when the data is fetched using rtk query and am feeding the function into default values. Default values does support async operations, right?

[himanshu-relata]

How does react hook form updates when async default values are fetched successfuly?