fix(react): form.reset not working inside of onSubmit

[harry-whorlow]

Relates to #1490, #1485 and potentially #1487.

This appears to stem from the react adapter as Angular, Vue and Core all seem to work as intended.

Reset will work correctly initially then on next pass wipe the previous state. Curiously this seems to only be the case in the onSubmit handler.

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 4205b90.

Command	Status	Duration	Result
nx affected --targets=test:sherif,test:knip,tes...	❌ Failed	2m 6s	View ↗
nx run-many --target=build --exclude=examples/**	✅ Succeeded	<1s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-05-15 09:47:31 UTC

[pkg-pr-new]

More templates

• @tanstack/form-example-angular-array
• @tanstack/form-example-angular-simple
• @tanstack/form-example-lit-simple
• @tanstack/form-example-lit-ui-libraries
• @tanstack/form-example-react-array
• @tanstack/form-example-react-compiler
• @tanstack/field-errors-from-form-validators
• @tanstack/form-example-react-large-form
• @tanstack/form-example-react-next-server-actions
• @tanstack/form-example-react-query-integration
• @tanstack/form-example-remix
• @tanstack/form-example-react-simple
• @tanstack/form-example-react-standard-schema
• @tanstack/form-example-react-tanstack-start
• @tanstack/form-example-react-ui-libraries
• @tanstack/form-example-solid-array
• @tanstack/form-example-solid-simple
• @tanstack/form-example-svelte-array
• @tanstack/form-example-svelte-simple
• @tanstack/form-example-vue-array
• @tanstack/form-example-vue-simple

@tanstack/angular-form

npm i https://pkg.pr.new/@tanstack/angular-form@1494

@tanstack/form-core

npm i https://pkg.pr.new/@tanstack/form-core@1494

@tanstack/lit-form

npm i https://pkg.pr.new/@tanstack/lit-form@1494

@tanstack/react-form

npm i https://pkg.pr.new/@tanstack/react-form@1494

@tanstack/solid-form

npm i https://pkg.pr.new/@tanstack/solid-form@1494

@tanstack/vue-form

npm i https://pkg.pr.new/@tanstack/vue-form@1494

@tanstack/svelte-form

npm i https://pkg.pr.new/@tanstack/svelte-form@1494

commit: 4205b90

[bpinto]

I'm not sure if this is the proper fix, but this fixes the newly added test without introducing other test failures.

Test is failing given opts doesn't contain the latest defaultValues as the latest values were passed via reset and not via props, therefore calling update(opts) here is actually overriding the new default values set via reset().

diff --git a/packages/react-form/src/useForm.tsx b/packages/react-form/src/useForm.tsx
index 729064ab..dd7a012c 100644
--- a/packages/react-form/src/useForm.tsx
+++ b/packages/react-form/src/useForm.tsx
@@ -210,13 +210,5 @@ export function useForm<
 
   useStore(formApi.store, (state) => state.isSubmitting)
 
-  /**
-   * formApi.update should not have any side effects. Think of it like a `useRef`
-   * that we need to keep updated every render with the most up-to-date information.
-   */
-  useIsomorphicLayoutEffect(() => {
-    formApi.update(opts)
-  })
-
   return formApi
 }

[harry-whorlow]

@bpinto thanks for taking a look into this, I was rather busy over the weekend, so it's super appreciated!

hmm thats, interesting... I'll shoot crutch corn a message since he authored the code, but you are correct it dose pass the tests, though to play devils advocate we are lacking framework specific tests so it might be breaking something. 😊

Once again thanks for the investigation!

[edit] So to me removing the update(ops) won't work as we need to update the opts passed to form if they change. It's really a question as to what is causing the re-render of the form.

[LeCarbonator]

these lines changing this.options appear to be the cause. Commenting them out makes the test pass.

Of course it breaks everything else, but perhaps this could help with resolving this.