For several years, I (@erikras) actively maintained the first big form library in the React community, Redux Form. During those years, I learned many lessons, about open source and React, and saw hundreds of forms use cases from around the world. As Redux Form grew in popularity (and bundle size), I received a lot of feedback from the community. Final Form is my answer the concerns of the community.
In this talk, I explain the journey through Redux Form to the conception and creation of React Final Form.
Final Form strives to meet the following goals:
Since its release, the community have built companion libraries on top of Final Form to work with React, Vue, Web Components, and more.
Because of its framework independence, Final Form could potentially outlast whatever frontend framework you are currently using. Take React Hooks, for example; Hooks were introduced after Final Form was released, reimagining component state management. Only the wrapper for React, React Final Form, had to be modified to support the new Hooks philosophy.
Just because some forms can be complex doesn't mean that your users should need to download all that code for a simple form! Final Form and React Final Form, break out complex functionality into separate packages, so the form state management core doesn't get bloated by complicated use cases. This allows you to build the form library you need for every use case.
Also, this allows for...
Minimal Bundle Size
Just because some forms can be complex doesn't mean that your users should need to download all that code for a simple form! Final Form breaks out complex functionality into separate packages, so the form state management core doesn't get bloated by complicated use cases.
Final Form also has zero dependencies. A form library shouldn't require that you install
Final Form utilizes the well-known Observer pattern to subscribe to updates about specific portions of state.
If you're familiar with Redux, it's a little bit like how you can use "selectors" in Redux to specify exactly which "slice" of state you want your component to be notified about.
The result is that you can streamline your form for maximum performance.