fix(react-form): Make form.options reactive by adding getter

[swushi]

Summary

Fixes an issue where form.options.defaultValues was not reactive when initializing a form with async data.

Problem

When using useForm() with async data:

const { data } = useAsyncApiData();

const form = useForm({
  defaultValues: data ?? { foo: '' },
})

// When data loads, `form.state.values` updates correctly,
// but form.options.defaultValues is stale (i.e. `{ foo: '' }`)
const hasChanges = form.state.values.foo !== form.options.defaultValues.foo; // incorrectly true

Root Cause

The options object was captured in the useMemo closure and never updated when formApi.options changed, even though formApi.update() was called in the effect lifecycle.

Solution

Added a getter for options (similar to the existing state getter) to ensure the latest options are always returned:

get options() {
  return formApi.options
},

This follows the same pattern as the state getter, as mentioned in the existing comment: "We must add all getters from core's FormApi here, as otherwise the spread operator won't catch those"

Related Discussion

https://canary.discord.com/channels/719702312431386674/1471891391348215972

[changeset-bot]

⚠️ No Changeset found

Latest commit: 29a65ed

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[pkg-pr-new]

More templates

• @tanstack/form-example-angular-array
• @tanstack/form-example-angular-large-form
• @tanstack/form-example-angular-simple
• @tanstack/form-example-angular-standard-schema
• @tanstack/form-example-lit-array
• @tanstack/form-example-lit-simple
• @tanstack/form-example-lit-standard-schema
• @tanstack/form-example-lit-ui-libraries
• @tanstack/form-example-react-array
• @tanstack/form-example-react-compiler
• @tanstack/form-example-react-devtools
• @tanstack/form-example-react-dynamic
• @tanstack/field-errors-from-form-validators
• @tanstack/form-example-react-large-form
• @tanstack/form-example-react-next-server-actions
• @tanstack/form-example-react-next-server-actions-zod
• @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-devtools
• @tanstack/form-example-solid-large-form
• @tanstack/form-example-solid-simple
• @tanstack/form-example-solid-standard-schema
• @tanstack/form-example-svelte-array
• @tanstack/form-example-svelte-large-form
• @tanstack/form-example-svelte-simple
• @tanstack/form-example-svelte-standard-schema
• @tanstack/form-example-vue-array
• @tanstack/form-example-vue-simple
• @tanstack/form-example-vue-standard-schema

@tanstack/angular-form

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

@tanstack/form-core

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

@tanstack/form-devtools

npm i https://pkg.pr.new/@tanstack/form-devtools@2044

@tanstack/lit-form

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

@tanstack/react-form

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

@tanstack/react-form-devtools

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

@tanstack/react-form-nextjs

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

@tanstack/react-form-remix

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

@tanstack/react-form-start

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

@tanstack/solid-form

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

@tanstack/solid-form-devtools

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

@tanstack/svelte-form

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

@tanstack/vue-form

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

commit: 1c2ea86

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 29a65ed

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

---

☁️ Nx Cloud last updated this comment at 2026-03-02 16:29:13 UTC

[sentry]

Codecov Report

❌ Patch coverage is 0% with 2 lines in your changes missing coverage. Please review.
✅ Project coverage is 57.08%. Comparing base (6892ed0) to head (29a65ed).
⚠️ Report is 141 commits behind head on main.

Files with missing lines	Patch %	Lines
packages/react-form/src/useForm.tsx	0.00%	2 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##             main    #2044       +/-   ##
===========================================
- Coverage   90.35%   57.08%   -33.28%     
===========================================
  Files          38       18       -20     
  Lines        1752      240     -1512     
  Branches      444       36      -408     
===========================================
- Hits         1583      137     -1446     
+ Misses        149       91       -58     
+ Partials       20       12        -8     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.