Repository navigation
Field value change in FormGroup causes all fields in FormGroup to re-render #2377
Description
Describe the bug
When using a FormGroup, changing the value of a single field within the group causes the entire FormGroup and all its child components to re-render, even if those components don't use or reference the changed field. This differs from the behavior of standalone Field components, where only the specific field re-renders when its value changes.
Your minimal, reproducible example
https://codesandbox.io/p/devbox/floral-dust-hlznnr?workspaceId=ws_C5KaZaVHbgfPuxgKAM9hsh
Steps to reproduce
- Preview the provided codesandbox which is based on the "React Example: Multi Step Wizard" example code.
- Type in a value into one of the form fields of step 1.
- View the console output or use the React dev tools setting "Highlight updates when components render" to see which components will re-render.
Expected behavior
Similar to how individual Field components only re-render when their own value changes, a FormGroup should ideally only re-render the specific field that changed, not all child components within the group. This would allow heavy/complex components within a FormGroup to avoid unnecessary re-renders.
How often does this bug happen?
Every time
Screenshots or Videos
Platform
OS: All platforms
Browser: All browsers
Version: N/A
TanStack Form adapter
react-form
TanStack Form version
1.33.5
TypeScript version
No response
Additional context
No response
Activity
tevinch commentedon Sep 10, 2026
I reproduced the extra sibling renders with
@tanstack/react-form1.33.5 and React 19.3.0. An application-level workaround is to put the field list behind a memo boundary while keeping the bound field component and field definitions stable.The group still needs to react to its values and metadata. Passing the changing group object into the memoized child defeats the boundary; instead, pass a stable renderer built from
form.Fieldand immutable definitions. Each actual field keeps its own subscription, so typing, errors and declared linked-field validation still update. Keep any reactive group summary outside that boundary.I put together a small MIT example with source, a comparison and tests. With related validation off, changing the first name updates the unrelated last-name view in the original panel but does not add commits to that view in the isolated panel. With linked validation enabled, the last-name error intentionally updates when the first name changes. The example also exercises reset, disabled props, switching groups and submission.
This does not stop
FormGroupitself from rendering or patch the library. It may be useful for keeping expensive field subtrees out of unrelated group updates; changing definitions or renderer identity should still refresh them.fix(react-form): track read FormGroup state
fix(preact-form): track read FormGroup state
fix(react-form): track read FormGroup state
fix(preact-form): track read FormGroup state
fix(react-form): track read FormGroup state
fix(preact-form): track read FormGroup state
max-te commentedon Oct 9, 2026
The FormGroup API redesign in V2 should fix this, and I don't expect my PR #2404 to get much traction. Until then you can help yourself with a short custom useFormGroup hook which does not subscribe the state and use useSelector on any state you read: https://github.com/proxy/gist.github.com/max-te/eb988098f47eaae71a421daf0a774d2b