Field with `mode="array"` does not re-render after `swapValues` / `moveValue` since version 1.27.4

[viniciusbitt]

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

1. Render an Field with mode="array".

2. Call swapValues or moveValue on the field.

3. 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

[taivo]

Seeing the same thing in @tanstack/solid-form 1.28.2

[taivo]

Looks like this has been fixed in v1.28.3. The form's internal state is now consistent with field().state.value when swapArray is called.

[viniciusbitt]

Looks like this has been fixed in v1.28.3. The form's internal state is now consistent with field().state.value when swapArray is called.

I tried using version @tanstack/react-form@1.28.3, but it doesn’t seem to be working:

codesandbox

[taivo]

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 to form.Field remain 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]

In my case, the unexpected behavior happens specifically with field.swapValues and field.moveValue. With methods like pushValue, insertValue, removeValue, etc., the component re-renders as expected, so you don't need a form.Subscribe.

[viniciusbitt]

I confirm that this issue was introduced in version 1.27.4, specifically in this PR: #1930

[JeremiahPinto]

Facing the same issue with field.moveValue on @tanstack/react-form v1.28.3. The form re-renders on first change and then no longer updates UI