{"id":14859,"library":"rc-field-form","title":"React Performance First Form Component","description":"rc-field-form is a foundational and performance-optimized React component library designed for building highly customizable forms. It offers a low-level API for form state management, field registration, and validation without dictating specific UI or design patterns, making it adaptable for various React environments, including React Native. The current stable version, 2.7.1, is part of the broader react-component ecosystem. While this specific package has seen less frequent direct updates recently, the underlying project shows continuous development through related components like `@rc-component/form`, which receives frequent patch and minor versions for bug fixes and feature enhancements. Key differentiators include its 'performance first' philosophy, flexible API for integrating custom UI components, and robust validation capabilities powered by `@rc-component/async-validator`.","status":"active","version":"2.7.1","language":"javascript","source_language":"en","source_url":"https://github.com/react-component/field-form","tags":["javascript","react","react-component","react-form","form","typescript"],"install":[{"cmd":"npm install rc-field-form","lang":"bash","label":"npm"},{"cmd":"yarn add rc-field-form","lang":"bash","label":"yarn"},{"cmd":"pnpm add rc-field-form","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React applications, providing core React functionalities.","package":"react","optional":false},{"reason":"Peer dependency for rendering React components in a browser environment.","package":"react-dom","optional":false},{"reason":"Used internally for powerful and flexible form validation rules.","package":"@rc-component/async-validator","optional":true}],"imports":[{"note":"Primary way to import the main Form component and the Field component for form elements. ESM is preferred.","wrong":"const Form = require('rc-field-form');\nconst Field = Form.Field;","symbol":"Form, Field","correct":"import Form, { Field } from 'rc-field-form';"},{"note":"Imports the React Hook for programmatic control over form instances. Must be called inside a functional component.","wrong":"const { useForm } = require('rc-field-form');","symbol":"useForm","correct":"import { useForm } from 'rc-field-form';"},{"note":"Imports the List component, typically used as `Form.List` within the Form, for managing dynamic arrays of fields.","wrong":"import { FormList } from 'rc-field-form';","symbol":"List","correct":"import { List } from 'rc-field-form';"},{"note":"For TypeScript users, these types provide definitions for the form instance and field data structures, crucial for type-safe form manipulation.","symbol":"FormInstance, FieldData","correct":"import type { FormInstance, FieldData } from 'rc-field-form';"}],"quickstart":{"code":"import React from 'react';\nimport Form, { Field, useForm } from 'rc-field-form';\n\ninterface LoginFormValues {\n username?: string;\n password?: string;\n remember?: boolean;\n}\n\nconst Input = ({ value = '', ...props }: React.InputHTMLAttributes) => (\n \n);\n\nconst DemoForm: React.FC = () => {\n const [form] = useForm();\n\n const onFinish = (values: LoginFormValues) => {\n console.log('Form submission successful:', values);\n alert(`Submitted: ${JSON.stringify(values, null, 2)}`);\n };\n\n const onFinishFailed = (errorInfo: any) => {\n console.error('Form submission failed:', errorInfo);\n };\n\n return (\n \n

Login

\n
\n \n \n \n \n
\n
\n \n \n \n \n
\n
\n \n \n \n \n
\n \n \n );\n};\n\nexport default DemoForm;\n","lang":"typescript","description":"This example demonstrates a basic login form with input fields, validation, initial values, and submission handling using `rc-field-form` components and the `useForm` hook."},"warnings":[{"fix":"Consult the official GitHub repository (react-component/field-form) for clarity on whether `rc-field-form` or `@rc-component/form` is the intended package for new projects and active development. Plan for potential migration if `rc-field-form` is deprecated in favor of `@rc-component/form`.","message":"There is significant confusion regarding the package name and versioning. The npm package is `rc-field-form` at version `2.7.1`, but recent release notes provided specifically refer to `@rc-component/form` (e.g., v1.8.1). This indicates a potential package rename, a shift to a monorepo structure where `@rc-component/form` is the primary active development, or that `rc-field-form` might be considered legacy or a wrapper. Developers should verify the official GitHub repository for the most current and actively maintained package name and usage instructions to avoid using an unmaintained version.","severity":"breaking","affected_versions":"All"},{"fix":"Ensure your project's `react` and `react-dom` dependencies are updated to versions `>=16.9.0`.","message":"`rc-field-form` specifies `react@>=16.9.0` and `react-dom@>=16.9.0` as peer dependencies. Running with older versions of React or ReactDOM will lead to runtime errors, particularly with the `useForm` hook and other React features introduced in 16.9.0.","severity":"gotcha","affected_versions":"All"},{"fix":"If you need to retain field values even after the `Field` component is unmounted, explicitly set `
` or add `preserve={true}` to individual `Field` components.","message":"By default, the `Form` component does not preserve field values when a `Field` component is unmounted (e.g., due to conditional rendering or dynamic lists). The `preserve` prop on `Form` defaults to `false`.","severity":"gotcha","affected_versions":"All"},{"fix":"Always upgrade to the latest stable version of `rc-field-form` and ensure its internal `@rc-component/form` dependency (if directly managed) is up to date to benefit from all bug fixes, particularly those related to `onValuesChange` and form data consistency.","message":"Previous versions (e.g., `@rc-component/form` prior to 1.5.0) contained bugs where `onValuesChange` did not correctly merge values, especially in complex or nested form structures. While fixed in more recent updates, ensure your `rc-field-form` version is compatible with these fixes if you rely on `onValuesChange` for reactive logic.","severity":"gotcha","affected_versions":"<2.7.1"},{"fix":"Ensure that `const [form] = useForm();` is invoked directly within the body of your functional component, not within any logic that could conditionally prevent its execution or alter its call order.","message":"The `useForm` hook, like all React Hooks, must adhere to the Rules of Hooks. It must only be called at the top level of a functional component or a custom hook, not inside loops, conditional statements, or nested functions.","severity":"gotcha","affected_versions":"All"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Relocate the `useForm()` call to the top level of your functional component or custom hook to comply with React's Rules of Hooks.","cause":"The `useForm` hook was called outside of a React functional component, within a loop, a conditional statement, or a regular JavaScript function.","error":"Error: Invalid hook call. Hooks can only be called inside of the body of a function component."},{"fix":"Verify that your `react` and `react-dom` versions satisfy the peer dependency requirements (`>=16.9.0`). Ensure that `Form` and `Field` components are imported correctly and rendered within a valid React functional component.","cause":"This usually indicates an issue with the React context setup, often when `rc-field-form`'s components are rendered in an invalid React tree or if `react` / `react-dom` peer dependencies are not met.","error":"TypeError: Cannot read properties of undefined (reading 'Provider')"},{"fix":"Review the `rules` prop on your `Field` components. If `initialValues` are being used, ensure they satisfy any `required` constraints. Adjust `validateTrigger` if validation should only occur on specific events (e.g., 'onBlur', 'onSubmit').","cause":"A `Field` component's `rules` prop with `required: true` is failing validation, possibly on initial render or due to an empty input.","error":"Validation failed: Please input your username!"},{"fix":"Double-check that the `name` prop on all `Field` components precisely matches the keys you expect in your form's value object. Provide `initialValues` to ensure all fields have a default presence in the form state.","cause":"The `name` prop of a `Field` component is incorrect, missing, or the corresponding field is not present in the form's current values object when `onFinish` or `onValuesChange` is triggered.","error":"TypeError: Cannot destructure property 'someField' of 'values' as it is undefined."},{"fix":"Use the provided TypeScript types, such as `FormInstance` and `FieldData`, correctly. When calling form methods or passing props, ensure the object structure aligns with the library's type definitions. Utilize generic types for `useForm` where `T` is your form's value interface.","cause":"This TypeScript error often occurs when incorrectly typing objects passed to `FormInstance` methods like `setFields` or when interacting with `Field` props without respecting the defined types.","error":"Argument of type '{ name: string; }' is not assignable to parameter of type 'FieldData'."}],"ecosystem":"npm"}