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

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

Access the errors array using destructuring, like so:

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

Use the errors array as a dependency to a react hook, such as useEffect or useMemo
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

I also get this almost every time I use form.useStore((state) => state.values) really not ideal.

did u find a fix or any way around it, its causing issues for me and I'm on a deadline lol

I believe I used form.useField() for each prop

I'm sorry but const errors = form.useStore((state) => state.errors) seems to be working fine, I think I don't understand where's the problem.

What feature are you trying to implement?

@Balastrong

@Balastrong It's been a bit, but what I was trying to achieve was to have 1 hook that would return the errors and other properties, i.e.

// My one hook to rule them all
const {isValid, isPristine, isSubmitted, isSubmitting,errors} = form.useStore(
        state => ({
            canSubmit: state.canSubmit,
            isPristine: state.isPristine,
            isSubmitted: state.isSubmitted,
            isSubmitting: state.isSubmitting,
            errors: state.errors
        })
    )

Because of this bug (and after a extended debugging session) I had to split it into 2 different hook calls so that it would work:

// The main hook
const {isValid, isPristine, isSubmitted, isSubmitting} = form.useStore(
        state => ({
            canSubmit: state.canSubmit,
            isPristine: state.isPristine,
            isSubmitted: state.isSubmitted,
            isSubmitting: state.isSubmitting
        })
    )
// The separate error hook to bypass the bug
const errors = form.useStore(state => state.errors)

Ok! I don't have a ready answer sadly, but I understood the issue, thanks :D

This is a complex issue that is understandably a major headache for our users.

While researching a fix, we've also found an issue with how we handle derived state: #1036

Needless to say, we're working on a broader scope fix to this problem rather than a band-aid. This starts with:

TanStack/store#40
And #1038 (via dogfooding TanStack/store#40 )

This might be a larger body of work than anticipated, so please standby while we work hard on making this a reality

Happy to report that we've achieved a fix in the #1038 branch 🎉

We'll work on having this fix out soon

This should be resolved as of v0.41.0: https://github.com/TanStack/form/releases/tag/v0.41.0

Navigation Menu

Repository navigation

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

Describe the bug

Your minimal, reproducible example

Steps to reproduce

Expected behavior

How often does this bug happen?

Screenshots or Videos

Platform

TanStack Form adapter

TanStack Form version

TypeScript version

Additional context

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Describe the bug

Your minimal, reproducible example

Steps to reproduce

Expected behavior

How often does this bug happen?

Screenshots or Videos

Platform

TanStack Form adapter

TanStack Form version

TypeScript version

Additional context

Activity

jackcoup commented on Oct 26, 2024

SiddOnKeys commented on Nov 3, 2024

jackcoup commented on Nov 3, 2024

Balastrong commented on Nov 4, 2024

craigbehnke commented on Nov 4, 2024

Balastrong commented on Nov 4, 2024

crutchcorn commented on Nov 25, 2024

crutchcorn commented on Dec 28, 2024

crutchcorn commented on Dec 29, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions