TanStack / TanStack/form

Field value change in FormGroup causes all fields in FormGroup to re-render

Open
#2,377 1 comment 0 reactions 0 assignees View on GitHub

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
  1. Preview the provided codesandbox which is based on the "React Example: Multi Step Wizard" example code.
  2. Type in a value into one of the form fields of step 1.
  3. 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
Image
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.