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

[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