Resetting array fields does not trigger full 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 form.reset({ fieldName: arr }) to set the state of an array mode field to an array with fewer elements than the field's defaultValue, the elements defaultValue[arr.length] through defaultValue[defaultValue.length - 1] will still render.
Example:
- defaultValue = [1, 2, 3]
- form.reset({ fieldName: [4] })
- rendered values: 4, 2, 3.
Notes:
- This only applies if the value of
fieldNamehas not been altered since the initial page load. If you alter the value (e.g. by adding another element) before resetting, the reset value will be properly rendered. - The actual state of the form is correctly updated by the reset. You can see in my provided code that if you click reset, then submit, the submitted value is as expected (and the form re-renders to show the correct state).
Your minimal, reproducible example
https://codesandbox.io/p/sandbox/36vt5h
Steps to reproduce
In the example sandbox, click the reset button and observe that 3 elements are still rendered instead of one.
Expected behavior
Only the elements present in the value passed to reset should render.
How often does this bug happen?
Every time
Screenshots or Videos
No response
Platform
- OS: macOS
- Browser: chrome
TanStack Form adapter
React
TanStack Form version
1.33.0
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 minimal reproducible CodeSandbox and trace the React form adapter's reset and array-field rendering behavior. Reproduce the reset from [1, 2, 3] to [4], then verify that only the reset value renders while submission state remains correct.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100