Fields re-render twice on each keystroke, based on validation state

[aditya-lenze]

Describe the bug

While trying out the Simple example on the website in the docs, as well as locally, I stumbled upon the following behavior, which I am finding difficult to reason about:

• If there is a validation defined on the Field, it renders once on each onChange, as long as the data is invalid.
  • Once the data becomes valid, it starts rendering twice on each keystroke.
• If there is no validation defined, the Field renders twice on each keystroke.

Please note that:

• React.strictMode, which runs all effects twice, is not used.
• Renders are measured using a simple RenderCount component and console.log, both of which are in the CSB link below.
• This is issue is not linked to the number of inputs. For example, even with 3, 4, 5 inputs, the re-render occurs twice.

CSB details:

• Contains two fields, firstName and lastName.
• firstName has no validation defined.
• lastName has a validation of minimum length: 5.

Your minimal, reproducible example

https://codesandbox.io/p/sandbox/great-yonath-3z6vqt

Steps to reproduce

1. Go to the CSB link.
2. Try typing a firstName, observe the render count and console.logs. They should increment by two each time.
3. Try typing a lastName. As long as it is invalid and error message is displayed, it will render once on each keystroke. Once length > 5, and input is valid, it will start re-rendering twice.

Expected behavior

• I would expect that the inputs are re-rendered only once on each keystroke, instead of two.
• This problem becomes peculiar when paired with validation, i.e., the issue happens only if the field is valid or no validation defined.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• OS: Windows
• Browser: Chrome
• Version: 131.0.6778.265

TanStack Form adapter

react-form

TanStack Form version

0.41.3

TypeScript version

No response

Additional context

No response

[MVaik]

It seems like invalid state prevents the second render because FieldApi.validate returns early, which leaves out the isFormValidating state changes in validateAsync.