Field value change in FormGroup causes all fields in FormGroup to re-render
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 6.7k
- Forks
- 682
- Avg merge
- 5d 18h
- Merged PRs (30d)
- 7
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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the provided CodeSandbox, based on the “React Example: Multi Step Wizard,” and reproduce the behavior while watching the console or React DevTools update highlights. Trace the FormGroup and child-field rendering path; done means changing one field updates that field without re-rendering unaffected child components.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100