Hi all,
Another UI thread, after Path off styled-components. Same shape: a runtime dependency comes out rather than a tool being swapped. This one has merged too.
What formik is
formik is a form state library for React. It holds a form's values, tracks which fields have been touched, runs the validation, and hands a component back one field's value, error and setter.
Why leave
It is pinned at 2.4.9 and has been quiet a long time, which is a poor thing to have under every form in a product that is otherwise moving forward. The question was never whether to leave, but whether leaving was tractable.
What the UI actually used
formik was present as an import in 183 files, which is the number that makes leaving sound expensive. It is the wrong one to count. Across the whole tree it was imported under twelve names, and only five of those were runtime:
- The form root
useFielduseFormikContextwithFormik- One
Field, in a test
The other seven were types, and types cost nothing to replace.
What the application asked of those five was little enough:
- No
validationSchema and no yup
- No field arrays
- Nothing reading
isSubmitting
Validation was already plain functions in util/validators with one signature. That is what made a replacement worth costing out: 681 lines stand where the library did.
The order, which was the point
Four steps, in this order:
- The contract, written against formik so it described what was there, not what was wanted.
- The layer, held to that contract and nothing else.
- The field components, which could move while the forms above them were still formik ones.
- The form roots, and last the bridge that had let the two coexist.
The risk was never the API. It was the behaviour the API implies and nothing states: when a validator runs, when a field counts as touched, what a pristine form says about itself when a required field is empty. While the tree held both, every test in the contract ran twice, once against each, and a difference in either direction failed.
What the measurement got wrong
Three things, each found by running the suite rather than reading it:
- Field names are not all flat. The first count missed the ones built from a template.
- A change event carries more than a value. One form was caught sending
0 for 134.
- The form root takes more than two props. The pattern that said otherwise stopped too early.
One more was mine rather than a miss: validation read the current values from inside a state updater that also set errors, which is a setState during render. React said so on the Login form, and it was right.
How it is checked
The layer has to satisfy every behaviour in the contract, and then three checks answer the rest:
- The UI suite fails on nothing the commit before it did not.
- The end-to-end tests pass against a build with no formik in it.
node_modules/formik does not exist.
Thanks for reading.
Pull requests
