Repository navigation
Field with mode="array" does not re-render after swapValues / moveValue since version 1.27.4 #2018
Description
Describe the bug
When using Field with mode="array", calling swapValues or moveValue updates the internal form state, but the component does not re-render.
In the example below, the fruits array is updated internally, but field.state.value does not reflect the change in the render output until another event triggers a re-render.
const defaultValues = {
fruits: ["apple", "banana", "cherry"],
};
const form = useForm({
defaultValues,
});
return (
<form.Field name="fruits" mode="array">
{(field) => (
<div>
<pre>{JSON.stringify(field.state.value, null, 2)}</pre>
<button onClick={() => field.swapValues(0, 2)}>
array move
</button >
</div>
)}
</form.Field>
);Your minimal, reproducible example
https://codesandbox.io/p/sandbox/black-bush-7dnvmp
Steps to reproduce
-
Render an
Fieldwithmode="array". -
Call
swapValuesormoveValueon the field. -
The array value updates internally but the UI does not re-render.
Expected behavior
Calling swapValues or moveValue should trigger a re-render and update field.state.value accordingly.
How often does this bug happen?
Every time
Screenshots or Videos
tanstack-form-array-bug.mp4
Platform
WSL2 Ubuntu 24.04
Browser: Chrome 144.0.7559.110
TanStack Form adapter
react-form
TanStack Form version
1.28.0
TypeScript version
No response
Additional context
No response
Reacted by Tai Vo, Edgar Rodriguez and acidMyke
Activity
taivo commentedon Feb 15, 2026
Seeing the same thing in @tanstack/solid-form 1.28.2
taivo commentedon Feb 17, 2026
Looks like this has been fixed in
v1.28.3. The form's internal state is now consistent withfield().state.valuewhen swapArray is called.viniciusbitt commentedon Feb 17, 2026
I tried using version @tanstack/react-form@1.28.3, but it doesn’t seem to be working:
codesandbox
taivo commentedon Feb 17, 2026
I guess my issue turned out to be a bit different from yours. Mine was in solidjs. I'm pretty sure I've done nothing other than updating to 1.28.3 to get things working as expected.
For your case, I think you've encountered the reactivity caveat mentioned here. This makes sense since the reference to
defaultValue,form, as well as the props passed toform.Fieldremain unchanged even though the internal form state changed. Thus React itself doesn't have a reason to re-render the component.I've modified your example here slightly to get re-rendering to work. Alternatively, you can also wrap your JSX in a
<form.Subscribe>viniciusbitt commentedon Feb 17, 2026
In my case, the unexpected behavior happens specifically with
field.swapValuesandfield.moveValue. With methods likepushValue,insertValue,removeValue, etc., the component re-renders as expected, so you don't need aform.Subscribe.[-]Field with `mode="array"` does not re-render after `swapValues` / `moveValue`[/-][+]Field with `mode="array"` does not re-render after `swapValues` / `moveValue` after version `1.27.3`[/+]viniciusbitt commentedon Feb 17, 2026
I confirm that this issue was introduced in version
1.27.4, specifically in this PR: #1930[-]Field with `mode="array"` does not re-render after `swapValues` / `moveValue` after version `1.27.3`[/-][+]Field with `mode="array"` does not re-render after `swapValues` / `moveValue` since version 1.27.4[/+]JeremiahPinto commentedon Feb 23, 2026
Facing the same issue with
field.moveValueon@tanstack/react-form v1.28.3. The form re-renders on first change and then no longer updates UIfix(react-form): re-render mode="array" fields after swapValues/moveV…