Error using useState & form.setFieldValue

[Shubham Sinha]

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

App.tsx has code that errors out and WorkingApp.tsx has code that works. Line no 77 has a useState and a fetch call in useEffect block. When setting the state the issue occurs. When state is not set the issue doesn't happen.

[Toma]

I don't think you should set the "touch" value to true when you update the field value.

[Toma]

Also, this has nothing to do with the problem, but you can simplify this part of the code quite a bit : https://stackblitz.com/edit/vitejs-vite-8rec7z?file=src%2FApp.tsx

Check this out : https://react.dev/learn/you-might-not-need-an-effect

[Shubham Sinha]

I don't think you should set the "touch" value to true when you update the field value.

I'm setting the touch to true because submit button relies on form being touched. So basically when api call is made and options are selected based on results from api, I want the submit button to get enabled.

Let me know if there's an alternative way.

[Toma]

I don't think you should set the "touch" value to true when you update the field value.

I'm setting the touch to true because submit button relies on form being touched. So basically when api call is made and options are selected based on results from api, I want the submit button to get enabled.

Let me know if there's an alternative way.

Ok I see, in any case I think there's a bug, it shouldn't crash like this, you should be able to find alternative solutions in the meantime. Maybe you should use arrays for the dog and cat fields.

[Corbin Crutchley]

TBH this code is doing nothing what I'd expect to see in a TanStack Form usage. Everything from the inline useEffects to the setFieldValue seems very anti-TanStack FWIW.

You're also likely to run into substantial performance problems with putting code into a form.Subscribe rather than using a useStore from the form.

Here's your code sample fixed to follow the expected patterns from TanStack form:

https://stackblitz.com/edit/vitejs-vite-9un3dx?file=src%2FApp.tsx

setFieldValue is very brittle at the moment, mostly because it's not really meant to be exposed for 99.9999999% of edgecases, and I've yet to find an edgecase where setFieldValue makes any sense to me, so I don't know what scenarios to fix.

Closing, as the fix for this particular usage lies in userspace, not library code

[Shubham Sinha]

TBH this code is doing nothing what I'd expect to see in a TanStack Form usage. Everything from the inline useEffects to the setFieldValue seems very anti-TanStack FWIW.

You're also likely to run into substantial performance problems with putting code into a form.Subscribe rather than using a useStore from the form.

Here's your code sample fixed to follow the expected patterns from TanStack form:

https://stackblitz.com/edit/vitejs-vite-9un3dx?file=src%2FApp.tsx

setFieldValue is very brittle at the moment, mostly because it's not really meant to be exposed for 99.9999999% of edgecases, and I've yet to find an edgecase where setFieldValue makes any sense to me, so I don't know what scenarios to fix.

Closing, as the fix for this particular usage lies in userspace, not library code

Got it. Thanks for the code sample.

Everything from the inline useEffects to the setFieldValue seems very anti-TanStack FWIW. When trying out for the first time, people don't write the most efficient code. Maybe you should include anti-patterns in the documentation or label issues like this one when you release 1.0.

[Corbin Crutchley]

Maybe you should include anti-patterns in the documentation

This is actually brilliant and solves a lot of problems I think we're having with a fair number of uses I've seen. I hadn't considered that - will do and thanks for your suggestion ☺️