final-form/react-final-form

★ 7,436JavaScriptAudience · developerComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((react-final-form))
    What it does
      Manages form state
      Selective re-renders
      Sync and async validation
    How it works
      Observer pattern
      Per-field subscriptions
      Final Form core library
    Setup
      npm install
      No extra dependencies
      3KB compressed
    Audience
      React developers
      Frontend engineers

mindmap root((react-final-form)) What it does Manages form state Selective re-renders Sync and async validation How it works Observer pattern Per-field subscriptions Final Form core library Setup npm install No extra dependencies 3KB compressed Audience React developers Frontend engineers

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Build a React form with many fields where only the actively-edited field re-renders, eliminating full-form re-renders on every keystroke

USE CASE 2

Add asynchronous validation to a React form that checks against an API while the user fills in a field

USE CASE 3

Upgrade a form from React Final Form v6 to v7 and resolve TypeScript breaking changes using the included migration guide

Tech stack

JavaScriptReactTypeScript

Getting it running

Difficulty · easy Time to first run · 30min

Full API docs, examples, and getting-started guide live on the Final Form website, not in this repository.

In plain English

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.

Copy-paste prompts

Prompt 1

Using react-final-form, show me how to create a sign-up form with 5 fields where each field subscribes only to its own state so changing one field does not re-render the others.

Prompt 2

How do I add async validation in react-final-form that checks if an email address is already registered by calling my API endpoint?

Prompt 3

I am upgrading from react-final-form v6 to v7. What TypeScript-specific breaking changes do I need to handle according to the migration guide?

Prompt 4

How do I install react-final-form via npm and wrap an existing React form component to manage its state with minimal boilerplate?

Open on GitHub → Explain another repo

← final-form on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.