jaredpalmer / jaredpalmer/formik

Optimizing validation for FastFields

Open
#1,007 6 comments 9 reactions 0 assignees View on GitHub
stale
Dominant language
TypeScript
Stars
34.3k
Forks
2.8k
PR merge metrics
No merged PRs in 30d

Description

## 🚀 Feature request

### Current Behavior
Currently `FastField` does rendering optimization, but still its `onChange` handler triggers validation for the whole `validationSchema`, which can be costly for really huge forms.

### Desired Behavior
It would be perfect if `onChange` and `onBlur` of `FastField` could validate only slice of `validationSchema`

### Suggested Solution
`yup.reach` is the answer - https://github.com/jquense/yup#yupreachschema-schema-path-string-value-object-context-object-schema Fast fields could call a new Formik method, which validates only schema corresponding to a given `FastField`. For instance, `` could do `schema.reach('someName.nested')` and use this for validation instead of validating the whole schema. Then, the validation result could be merger with Formik errors.

### Who does this impact? Who is this for?
All users caring for the best possible form performance, who use Formik together with Yup, especially for big forms.

### Describe alternatives you've considered
I have really big dynamic forms, sometimes +100 fields and I tried `FastField` - it is better now but for such a big form it is Yup which becomes a bottleneck - each key stroke validates 100+ fields, which could be especially costly for more expensive validators.

Alternatively I could use Field level validation, but I really like to keep validation logic only in yup, it is easy to test then and also it nicely keep good separation between yup and formik. Also, I dont like to repeat myself defining `initialValue` and `schema.cast()` does this automatically form me (provided I have all fields defined inside schema, not as field validators)

### Additional context

N/A

Contributor guide

Open the contributing guide

Research direction

Start at FastField's onChange and onBlur validation paths, then trace the Formik method that currently validates the whole validationSchema. Compare the requested nested schema-path validation and error merging behavior; done means FastField can validate only its relevant schema slice without losing other Formik errors.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.