TanStackT
TanStack5mo ago
5 replies
verbal-lime

Unnecessary rerendering of fields caused by validation libs

I noticed some unexpected rerendering and wanted to know if this is the intended behavior. In the Form Composition example, when you continuously type into any field, it only ever rerenders that field. Even when others fields are still invalid.
https://tanstack.com/form/latest/docs/framework/react/examples/large-form

However, this is not the case for the Standard Schema example. When you continuously type into field1, field2 will also rerender while it is invalid. If you make field2 valid and go back to typing in field1, then field2 no longer rerenders. This behavior is the same no matter which validation lib you switch between.
https://tanstack.com/form/latest/docs/framework/react/examples/standard-schema

In both examples, the only validators option is being set is for the useForm hook, specifically validating on
onChange
events only. I suspect the reason for this difference in rerendering behavior is due to Form Composition validations returning string | undefined vs. Standard Schema validations returning StandardSchemaV1Issue | undefined. And we are not using deep equality on the StandardSchemaV1Issue objects?

Is there anything that can be done to reducing the rerendering without setting validations on each field one-by-one?
Was this page helpful?