Accessing form error array using form.useStore and destructuring can cause react update depth issue

[craigbehnke]

Describe the bug

When using destructuring, the form.useStore hook returns an error array that appears to change on every render. This then causes a react update depth issue.

Your minimal, reproducible example

https://stackblitz.com/edit/tanstack-form-oryfsj?file=README.md

Steps to reproduce

1. Access the errors array using destructuring, like so:

 const {errors}: {errors: ValidationError[]} = form.useStore(state => ({
    errors: state.errors
  }))

2. Use the errors array as a dependency to a react hook, such as useEffect or useMemo
3. Observe that this react hook is perpetually called.

Please see the provided repro.

Expected behavior

As a user, I want the error array to be updated only when the error array changes.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• OS: MacOS
• Browser: Chrome/Safari
• Typescript/React

TanStack Form adapter

react-form

TanStack Form version

v0.29.1

TypeScript version

5.5.4

Additional context

No response