T
TanStackthis hour
yelping-magenta

How to update defaultValues?

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).
Anton
StackBlitz
TSForm reset issue - StackBlitz
Next generation frontend tooling. It&#39;s fast!
5 Replies
deep-jade
deep-jadethis hour
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
yelping-magenta
yelping-magentaOPthis hour
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..
deep-jade
deep-jade23h ago
well, suspense with a key would cause visual flicker if you have the useQuery in the parent, you could keep previous data on refetches to make the changes visually unnoticeable
yelping-magenta
yelping-magentaOP21h ago
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 🙂
deep-jade
deep-jade19h ago
hmmm … not sure then. That was my assumption until now. Then again, I rarely use suspense

Did you find this page helpful?