Controlled vs Uncontrolled Forms in React: Modern Form Management with Hooks

This article explores the differences between controlled and uncontrolled forms in React, and how modern form management can be achieved using hooks. It begins by explaining that forms are one of the most commonly used elements in web development, and discusses how controlled and uncontrolled forms work in React.

The article then delves into the characteristics and use cases of controlled forms, which are forms where the value of the form elements is controlled by the React component's state or props. It explains that the form element's value is stored in the component's state, allowing for easy access, validation, and submission. The article also provides an example of a controlled form implementation using React hooks.

Next, the article covers uncontrolled forms, which are forms where the value of the form elements is not controlled by the React component's state or props, but rather by the DOM. It explains that uncontrolled forms use refs to get the form element's value, and do not require manual state updates. The article provides an example of an uncontrolled form implementation using React hooks.

The article then compares the differences between controlled and uncontrolled forms, highlighting their respective advantages and disadvantages. It discusses aspects such as value management, validation and real-time updates, overall form control, data flow, code complexity, DOM update performance, and use cases.

The article then discusses the advantages of using hooks to manage form state, using the example of the transition from antd3 to antd4. It explains how antd3 used a higher-order component (HOC) to wrap the form, storing all control values in the HOC's state. However, this approach had performance issues, as any change in a single form control would cause all child components to re-render.

In contrast, antd4 uses a Context to wrap the form, and creates a FormStore instance when useForm() is called. It uses useRef to cache all form values, and defines methods for setting and getting values. This approach improves performance by only updating the components that depend on the changed form values.

The article then introduces react-hook-form, which takes a different approach to form management. Instead of using controlled forms, react-hook-form uses React's useRef and useReducer to handle form data state, rather than using useState to track form data changes. This approach provides the benefits of uncontrolled forms, such as improved performance and simpler code.

The article provides a simple example of using react-hook-form, and explains why it can be considered an uncontrolled form. It shows that the register function returned by react-hook-form does not include a value field, meaning that the form control's value is not controlled by the component's state. Instead, the state is stored within the control itself, and updates to the control only affect its own rendering.

The article concludes by mentioning that react-hook-form implements a subscription pattern to handle different scenarios, allowing for efficient form management.