How to update defaultValues?

[obsidian ivy]

I have two components: one of them is a list of entries, and the other one is details of the selected entry. It accepts id of the selected entry as a prop, loads existing values with TSQuery, and uses them as defaultValues.

Simple reproduction:
https://stackblitz.com/edit/vitejs-vite-ainjeqwv?file=src%2FApp.tsx

I change locale in the details component from default ("Ja") to different one ("En"), then switch to another entry in the list component.
The locale value resets to default one, "Ja", (because of form.reset()), but somehow, the fields inside the <form.Subscribe> are now having values of the previous locale ("En").
i.e. the locale field shows the correct, default locale (Ja), but values of the dependent fields are actually are from different locale - the locale that was previously selected in the previous entry (En).

[inner river]

defaultValues don‘t update after the form has been touched. The idea is that a user‘s changed values shouldn‘t be deleted afterwards

if you want to force changes (ditch all of the user‘s data), you could use a component key of the selected id. That forces the whole component to be recomputed, including resetting the form

you‘ll probably want the useQuery outside of it in that case, but hopefully that makes sense

[obsidian ivy]

Thank you! I changed to <Details key={selectedId} id={selectedId} /> and it works.
Is there's reason for wanting to move useQuery outside the component? In the real project I use useSuspenseQuery, so I wanted to just wrap the entire component into Suspense..

[inner river]

well, suspense with a key would cause visual flicker

[inner river]

if you have the useQuery in the parent, you could keep previous data on refetches to make the changes visually unnoticeable

[obsidian ivy]

I mean key on the component, not on the Suspense itself, like this:
<Suspense> <Details key={selectedId} id={selectedId} /> </Suspense>
For that I can see, there is no flicker, even with throttling the network..
But it's getting little off-topic 🙂