fix(react-form): prevent array field re-render when child property changes

[tt-a1i]

Summary

• Fix array fields with mode="array" incorrectly re-rendering when a property on any array element is mutated
• This was a regression introduced in v1.27.0 by the React Compiler compatibility changes (Fix react compiler #1893)

Problem

As reported in #1925, starting from v1.27.0, when working with a form.Field that uses mode="array", when any child Field under the array Field is changed, the entire array Field re-renders.

Root Cause

In the React Compiler fix (#1893), a new reactiveStateValue subscription was added:

const reactiveStateValue = useStore(fieldApi.store, (state) => state.value)

This subscribes to the entire state.value. For array fields, when any child property changes, the array reference changes, causing reactiveStateValue to change, which triggers extendedFieldApi recreation and component re-render.

Solution

Make the reactiveStateValue subscription aware of mode:

const reactiveStateValue = useStore( fieldApi.store, (opts.mode === 'array' ? (state) => Object.keys((state.value as unknown) ?? []).length : (state) => state.value) as (state: typeof fieldApi.state) => TData | number, )

For mode="array":

• reactiveStateValue now tracks only the array length
• The state.value getter returns the actual value from fieldApi.state.value
• This ensures re-renders only occur when items are added/removed, not when properties change

Test Plan

• Added test case: should not rerender array field when child field value changes
• All existing tests pass (79 tests in react-form, 403 tests in form-core)

Fixes #1925

[changeset-bot]

🦋 Changeset detected

Latest commit: 63f5615

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 13 packages

Name	Type
@tanstack/react-form	Patch
@tanstack/react-form-nextjs	Patch
@tanstack/react-form-remix	Patch
@tanstack/react-form-start	Patch
@tanstack/form-core	Patch
@tanstack/angular-form	Patch
@tanstack/vue-form	Patch
@tanstack/solid-form	Patch
@tanstack/svelte-form	Patch
@tanstack/form-devtools	Patch
@tanstack/lit-form	Patch
@tanstack/react-form-devtools	Patch
@tanstack/solid-form-devtools	Patch

Not sure what this means? Click here to learn what changesets are.

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

[crutchcorn]

Makes perfect sense to me! Thank you for this!

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 63f5615

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

---

☁️ Nx Cloud last updated this comment at 2025-12-15 11:47:06 UTC

[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-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@1930 

@tanstack/form-core

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

@tanstack/form-devtools

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

@tanstack/lit-form

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

@tanstack/react-form

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

@tanstack/react-form-devtools

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

@tanstack/react-form-nextjs

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

@tanstack/react-form-remix

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

@tanstack/react-form-start

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

@tanstack/solid-form

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

@tanstack/solid-form-devtools

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

@tanstack/svelte-form

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

@tanstack/vue-form

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

commit: 63f5615

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 54.11%. Comparing base (6892ed0) to head (63f5615).
⚠️ Report is 98 commits behind head on main.

Additional details and impacted files

@@ Coverage Diff @@ ## main #1930 +/- ## =========================================== - Coverage 90.35% 54.11% -36.25%  =========================================== Files 38 18 -20 Lines 1752 231 -1521 Branches 444 34 -410 =========================================== - Hits 1583 125 -1458  + Misses 149 94 -55  + 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.