https://github.com/final-form/react-final-form

🏁 High performance subscription-based form state management for React
https://github.com/final-form/react-final-form

asynchronous form form-validation forms react state-management subscription validation

Last synced: 5 months ago
JSON representation

🏁 High performance subscription-based form state management for React

• Host: GitHub
• URL: https://github.com/final-form/react-final-form
• Owner: final-form
• License: mit
• Created: 2017-11-22T22:26:16.000Z (about 8 years ago)
• Default Branch: main
• Last Pushed: 2023-05-20T18:33:37.000Z (over 2 years ago)
• Last Synced: 2025-04-30T10:35:55.972Z (9 months ago)
• Topics: asynchronous, form, form-validation, forms, react, state-management, subscription, validation
• Language: JavaScript
• Homepage: https://final-form.org/react
• Size: 7.22 MB
• Stars: 7,400
• Watchers: 77
• Forks: 488
• Open Issues: 390
• Metadata Files:
  • Readme: README.md
  • Contributing: .github/CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Code of conduct: .github/CODE_OF_CONDUCT.md

Awesome Lists containing this project

• awesome-react-components - react-final-form - Subscription-based form state management (Code Design / Form Logic)
• awesome-react - react-final-form - Subscription-based form state management.  (UI Components / Form Components)
• awesome-react-components - react-final-form - Subscription-based form state management (Code Design / Form Logic)
• awesome-react-components - react-final-form - Subscription-based form state management (Code Design / Form Logic)
• fucking-awesome-react-components - react-final-form - Subscription-based form state management (Code Design / Form Logic)
• awesome-react-components - react-final-form - Subscription-based form state management (Code Design / Form Logic)
• awesome-react-render-props - react-final-form - based form state management for React (Components / Forms)
• Awesome-JavaScript-Libraries - **React Final Form**
• awesome-learning-resources - react-final-form - High performance subscription-based form state management for React (Uncategorized / Uncategorized)
• awesome-list - react-final-form - based form state management for React | final-form | 6615 | (JavaScript)
• awesome-react - react-final-form - High performance subscription-based form state management for React ` 📝 19 days ago` (React [🔝](#readme))
• awesome-react - Final Form 🏁
• stars - final-form/react-final-form - 🏁 High performance subscription-based form state management for React (JavaScript)
• awesome-react-cn - react-final-form - High performance subscription-based form state management for React (Uncategorized / Uncategorized)
• StarryDivineSky - final-form/react-final-form - final-form 是一个高性能的 React 表单状态管理库，采用订阅式设计模式，专注于为复杂表单提供高效、灵活的解决方案。该项目通过订阅机制仅在表单数据变化时触发更新，避免了不必要的全量渲染，从而显著提升性能，尤其适合处理大型或复杂表单场景。其核心特性包括轻量级设计（无额外依赖）、支持嵌套字段、内置验证机制以及与 React 生态的无缝集成。开发者可通过声明式 API 定义表单结构，利用 `form` 组件和 `Field` 组件实现数据绑定，同时支持自定义验证规则、错误提示及异步操作处理。 项目采用发布-订阅模式管理表单状态，通过 `useSubscription` 等钩子实现细粒度更新，确保组件只在相关数据变化时重新渲染。其设计强调灵活性，允许开发者按需扩展功能，例如通过 `Form` 组件包裹表单，利用 `onChange`、`onSubmit` 等生命周期钩子控制流程。同时，react-final-form 与 React 的上下文（Context）机制深度结合，通过 `FormProvider` 提供全局状态管理，简化了跨组件的数据共享。 该项目适用于需要高性能表单处理的场景，如动态表单、多步骤表单或包含复杂验证逻辑的表单。其优势在于平衡性能与功能，既避免了传统表单库（如 Formik）可能带来的性能损耗，又提供了比 Redux Form 更简洁的 API。开发者可通过官方文档快速上手，项目维护活跃，社区支持完善。总体而言，react-final-form 为 React 开发者提供了一个高效、可扩展且易于集成的表单管理方案，特别适合对性能要求较高的应用场景。 (前端开发框架及项目 / React工具库)
• awesome - react-final-form - 🏁 High performance subscription-based form state management for React (JavaScript)
• awesome-react-render-props - react-final-form - based form state management for React (Components / Forms)

README

          
# 🏁 React Final Form

[![React Final Form](banner.png)](https://final-form.org/react)

[![Backers on Open Collective](https://opencollective.com/final-form/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/final-form/sponsors/badge.svg)](#sponsors) [![NPM Version](https://img.shields.io/npm/v/react-final-form.svg?style=flat)](https://www.npmjs.com/package/react-final-form)

[![NPM Downloads](https://img.shields.io/npm/dm/react-final-form.svg?style=flat)](https://www.npmjs.com/package/react-final-form)

[![Build Status](https://travis-ci.org/final-form/react-final-form.svg?branch=master)](https://travis-ci.org/final-form/react-final-form)

[![codecov.io](https://codecov.io/gh/final-form/react-final-form/branch/master/graph/badge.svg)](https://codecov.io/gh/final-form/react-final-form)

[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

✅ Zero dependencies (that affect your bundle size)

✅ Only peer dependencies: React and

[🏁 Final Form](https://github.com/final-form/final-form#-final-form)

✅ Opt-in subscriptions - only update on the state you need!

✅ 💥 [**3.0k gzipped**](https://bundlephobia.com/result?p=react-final-form) 💥

---

[](https://www.sencha.com/)

### React Final Form is sponsored by [Sencha](https://www.sencha.com/).

Comprehensive JS framework and UI components for building enterprise-grade web apps.

---

## 💬 [Give Feedback on React Final Form](https://goo.gl/forms/dxdfxKNy64DLb99z2) 💬

In the interest of making 🏁 React Final Form the best library it can be, we'd love your thoughts and feedback.

[Take a quick survey](https://goo.gl/forms/dxdfxKNy64DLb99z2).

---

React Final Form is a thin React wrapper for [Final Form](https://final-form.org), which is a subscriptions-based form state management library that uses the [Observer pattern](https://en.wikipedia.org/wiki/Observer_pattern), so only the components that need updating are re-rendered as the form's state changes.

## [Getting Started](https://final-form.org/docs/react-final-form/getting-started)

## [Philosophy](https://final-form.org/docs/react-final-form/philosophy)

## [Examples](https://final-form.org/docs/react-final-form/examples)

## [API](https://final-form.org/docs/react-final-form/api)

## [FAQ](https://final-form.org/docs/react-final-form/faq)