This post is not a battle royal or a straw man debate where one library stands victorious at the end. No, both Formik and Final Form do forms quite well and evidently with incredibly similar APIs. Their differences do not become apparent until you dive into the philosophies behind the development of each.
Checkout the source code and play with the app if you are curious.
The primary guiding principle behind Formik was to keep it simple. Consequently, this constraint resulted in no external state management, no subscriptions or observables and no re-inventing the wheel - it simply uses React. Therefore, if you have a problem understanding Formik then you probably have a problem understanding React.
Since Formik is built with React, it naturally takes advantage of builtin performance optimizations. Should you really need it (e.g. gigantic forms with > 70 fields), React’s
shouldComponentUpdate lifecycle method can be indirectly used through the special
<FastField /> component.
Final Form is based on the Observer pattern, so observers can subscribe to receive updates for either form or field state changes. By default, like Formik, it subscribes to all form updates. It keeps state out of React, and then uses React context to hook in to the tree with react-final-form as previously mentioned.
It is not clear to me how subscription based performance enhancements compare with React’s reconciliation algorithm since I could not find any thoroughly detailed assessments. Therefore, I remain skeptical until proven otherwise.
Formik capitalizes on the powerful, and popular validation library Yup. Yup’s builder pattern makes building validation schemas a breeze and less error prone. You can also bring your own validation (BYOV) if Yup is not sufficient for your particular use case.
Sadly, unlike Formik, Final Form subscribes to the BYOV philosophy. This is where I feel that the library missed an opportunity to save developers from themselves. Form libraries (in my opinion) are supposed to help with validation not skimp on it.
Formik → Apache 2.0
React Final Form → MIT
Minified + gzipped:
As previously stated, the two libraries are quite similar so it really comes down to a simple question: which one does your your team prefer?