react-final-form
🏁 High performance subscription-based form state management for React
A tiny React library for managing form state where each field only re-renders when its own data changes, keeping large forms fast even with dozens of inputs and supporting sync and async validation.
React Final Form is a JavaScript library for managing form state in React applications. It acts as a thin wrapper around a separate library called Final Form, which handles the underlying state logic using what is called the Observer pattern. The core idea is that each input or component in a form subscribes to only the parts of the form state it actually needs, so only those components re-render when that portion of the state changes. This is different from approaches where any change to the form causes the entire form to re-render, which can slow things down in large or complex forms.
The library adds no extra production dependencies beyond React and its companion library, Final Form. The package weighs about 3 kilobytes when compressed, which is small by library standards. It supports synchronous and asynchronous form validation, and is available through npm for installation into any React project. The subscription model means you can have a form with dozens of fields where only the one field the user just changed updates on screen, rather than the entire page.
The README for this repository is short and mostly serves as a pointer to external documentation. The full guide, including examples, a getting-started walkthrough, a complete API reference, and a FAQ, lives on the Final Form project website. There is also a migration guide in the repository for developers upgrading from version 6 to version 7, which introduced TypeScript-specific breaking changes.
This library is a tool for developers, not end users. If you are building a React web application and need to handle forms with many fields or complex validation rules without running into performance issues, this library is designed for that use case. The project is open source and was sponsored by Sencha, a company that builds enterprise web app frameworks.
Where it fits
- Build a React form with many fields where only the actively-edited field re-renders, eliminating full-form re-renders on every keystroke
- Add asynchronous validation to a React form that checks against an API while the user fills in a field
- Upgrade a form from React Final Form v6 to v7 and resolve TypeScript breaking changes using the included migration guide