Philosophy

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.

Talk

In this talk, I explain the journey through Redux Form to the conception and creation of React Final Form.

Next Generation Forms with React Final Form – React Alicante 2018, Alicante, Spain

Goals

Final Form strives to meet the following goals:

Framework Agnostic

Final Form is framework agnostic, meaning that the core form state management engine is entirely self contained in pure javascript with zero dependencies.

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.

Strongly Typed

Final Form provides strong typing via both Flow and Typescript to allow you to catch common bugs at coding time.

Modularity

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

Final Form also has zero dependencies. A form library shouldn't require that you install lodash.

High Performance

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.