# React Final Form — High-Performance Subscription-Based Form State

> Build complex React forms with zero re-renders on field change using a subscription-based state management approach.

## Install

Save as a script file and run:

# React Final Form — High-Performance Subscription-Based Form State

## Quick Use
```bash
npm install final-form react-final-form
```
```jsx
import { Form, Field } from 'react-final-form'

const MyForm = () => (
  <Form onSubmit={values => console.log(values)}>
    {({ handleSubmit }) => (
      <form onSubmit={handleSubmit}>
        <Field name="email" component="input" placeholder="Email" />
        <button type="submit">Submit</button>
      </form>
    )}
  </Form>
)
```

## Introduction
React Final Form is a form state management library for React that uses a subscription-based model to minimize re-renders. It builds on the framework-agnostic Final Form core, giving React developers fine-grained control over which form-state changes trigger component updates.

## What React Final Form Does
- Manages form state (values, errors, touched, dirty, submitting) outside of React
- Re-renders only the fields that subscribe to the specific state they need
- Supports synchronous, asynchronous, and field-level validation
- Handles arrays of fields, dynamic form shapes, and wizard-style multi-step flows
- Provides a declarative API through `<Form>` and `<Field>` render-prop components

## Architecture Overview
Final Form is the headless core library that holds all form state in a plain JavaScript object. React Final Form is a thin React binding that connects components to this store via subscriptions. Each `<Field>` subscribes only to the state slices it renders (value, error, touched), so unrelated changes do not cause re-renders. The core is framework-agnostic and weighs under 6 KB gzipped.

## Self-Hosting & Configuration
- Install both packages: `npm install final-form react-final-form`
- Wrap your form JSX in the `<Form>` component with an `onSubmit` handler
- Register inputs with `<Field>` and pass `name`, `component`, and optional `validate`
- Use decorators or mutators for advanced patterns like auto-save or calculated fields
- Works with any UI library; no built-in HTML or CSS opinions

## Key Features
- Subscription-based updates avoid unnecessary re-renders on large forms
- Zero dependencies beyond Final Form core and React
- Built-in support for field arrays, record-level validation, and submission errors
- Mutators API for extending form behavior (e.g., setValue, setFieldTouched)
- Hooks API (`useField`, `useForm`, `useFormState`) alongside render props

## Comparison with Similar Tools
- **React Hook Form** — hook-first API with uncontrolled inputs; React Final Form uses controlled inputs with subscriptions
- **Formik** — similar controlled-input model but re-renders the entire form on state change by default
- **Redux Form** — stores form state in Redux, adding overhead; React Final Form keeps state in its own lightweight store
- **TanStack Form** — newer framework-agnostic form library with headless design

## FAQ
**Q:** Is React Final Form still maintained?
A: The library is stable and widely used. Updates are less frequent as the API is considered feature-complete.

**Q:** How does it avoid re-renders?
A: Each field subscribes to specific state keys. A change to field A does not re-render field B unless B subscribes to the same state.

**Q:** Can I use hooks instead of render props?
A: Yes. `useField`, `useForm`, and `useFormState` hooks are available as alternatives.

**Q:** What is the bundle size?
A: The React binding is under 4 KB gzipped; the Final Form core adds about 5 KB.

## Sources
- https://github.com/final-form/react-final-form
- https://final-form.org/react

---
Source: https://tokrepo.com/en/workflows/asset-cda9d268
Author: Script Depot