# final-form/react-final-form

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/final-form-react-final-form).**

7,440 stars · 493 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/final-form/react-final-form
- Homepage: https://final-form.org/react
- awesome-repositories: https://awesome-repositories.com/repository/final-form-react-final-form.md

## Description

react-final-form is a React form state management library that provides a framework for declarative form validation and the orchestration of dynamic input fields. It utilizes a subscription-based state manager to trigger interface updates only for the specific fields that change during user input, which optimizes rendering by limiting unnecessary component re-renders.

The library functions as a dynamic input field orchestrator, allowing users to add, remove, or reorder lists of form fields. It manages complex form state through a system that supports conditional field rendering and real-time synchronization with external state stores.

The project covers a broad capability surface including client-side data validation for individual fields and entire records, as well as input data formatting to maintain consistent data quality. It further supports dynamic form generation and automatic data persistence based on user interaction.

## Tags

### User Interface & Experience

- [React Form Libraries](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/form-handling/react-form-libraries.md) — Provides a comprehensive React library for managing form state, validation, and dynamic field rendering.
- [Formatted Input Fields](https://awesome-repositories.com/f/user-interface-experience/formatted-input-fields.md) — Transforms user text into standardized formats during entry or upon field exit to ensure data consistency. ([source](https://github.com/final-form/react-final-form/tree/main/examples))
- [Dynamic Form Generation](https://awesome-repositories.com/f/user-interface-experience/forms/dynamic-form-generation.md) — Creates complex input sets where fields are dynamically added, removed, or shown based on user selections.
- [Input Data Formatting](https://awesome-repositories.com/f/user-interface-experience/input-data-formatting.md) — Transforms raw user text into standardized formats during entry to maintain consistent data quality.

### Data & Databases

- [Field Validation](https://awesome-repositories.com/f/data-databases/field-validation.md) — Checks individual field values against defined rules to prevent invalid data entry before submission. ([source](https://github.com/final-form/react-final-form/tree/main/examples))
- [Cross-Field Validators](https://awesome-repositories.com/f/data-databases/field-validation/cross-field-validators.md) — Checks all fields within a record simultaneously to ensure logical consistency across multiple related input values. ([source](https://github.com/final-form/react-final-form/tree/main/examples))
- [Real-time Data Synchronization](https://awesome-repositories.com/f/data-databases/real-time-data-synchronization.md) — Links form input state to external stores to ensure data is synchronized as the user types.

### Software Engineering & Architecture

- [Centralized State Stores](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/layering-presentation/application-layer-architectures/state-management-architectures/centralized-state-stores.md) — Implements a centralized state store that serves as the single source of truth for all form values and validation states.
- [Asynchronous Validators](https://awesome-repositories.com/f/software-engineering-architecture/custom-validation-rules/asynchronous-validators.md) — Supports asynchronous validators that prevent the main input thread from blocking during complex validation checks.
- [External Store Synchronization](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/layering-presentation/application-layer-architectures/state-management-architectures/external-store-synchronization.md) — Links internal form data to external state managers to maintain a global store in real time. ([source](https://github.com/final-form/react-final-form/tree/main/examples))

### Web Development

- [Client-Side Input Validators](https://awesome-repositories.com/f/web-development/client-side-input-validators.md) — Verifies data integrity and performs cleansing on the frontend before data is transmitted to the server.
- [Form Data Validation](https://awesome-repositories.com/f/web-development/form-data-validation.md) — Provides a framework for defining declarative field-level and form-wide validation rules to ensure data consistency.
- [Form State Management](https://awesome-repositories.com/f/web-development/form-state-management.md) — Tracks user input, validation status, and submission lifecycles across complex form structures. ([source](https://github.com/final-form/react-final-form#readme))
- [Form State Subscriptions](https://awesome-repositories.com/f/web-development/form-state-subscriptions.md) — Employs a subscription-based state management system to trigger updates only for specific fields, optimizing render performance.
- [Dynamic Field Arrays](https://awesome-repositories.com/f/web-development/dynamic-field-arrays.md) — Provides utilities for managing lists of inputs that can be dynamically added, removed, or reordered.
- [Dynamic Field Management](https://awesome-repositories.com/f/web-development/dynamic-field-management.md) — Manages lists of inputs that users can add or remove dynamically using array-based data structures. ([source](https://github.com/final-form/react-final-form/tree/main/examples))
- [Conditional Field Visibility](https://awesome-repositories.com/f/web-development/form-field-state-management/conditional-field-visibility.md) — Shows or hides specific input fields based on the current values of other fields within the form. ([source](https://github.com/final-form/react-final-form/tree/main/examples))

### Networking & Communication

- [State Synchronization](https://awesome-repositories.com/f/networking-communication/real-time-web-communication/state-synchronization.md) — Provides real-time synchronization of form interface states with external state management structures.

### Part of an Awesome List

- [Form Management](https://awesome-repositories.com/f/awesome-lists/devtools/form-management.md) — Subscription-based state management for forms.