Understanding Controlled and Uncontrolled Forms in React: Ant Design, Hooks, and React‑Hook‑Form

The form element is one of the most frequently used components in web development, and its relationship with front‑end interfaces is inseparable. This article introduces how controlled and uncontrolled forms are used in React , and how modern hooks can manage form state.

2. Differences Between Controlled and Uncontrolled Forms

2.1 Characteristics and Scenarios of Controlled Forms

Controlled forms keep the value of each form element inside the component’s state (or props ), allowing direct access, validation, and real‑time error feedback.

Typical scenarios include forms that require input validation, real‑time value reflection, or dynamic interaction with other components.

import React, { useState } from 'react';

function ControlledForm() {
  const [phone, setPhone] = useState('');
  const handlePhoneChange = (e) => {
    setPhone(e.target.value);
  };
  const handleSubmit = (e) => {
    e.preventDefault();
    // handle submit logic
  };
  return (
Phone:
Submit
);
}

export default ControlledForm;

2.2 Characteristics and Scenarios of Uncontrolled Forms

Uncontrolled forms let the DOM store the element values; React accesses them via ref without keeping them in state .

They are suitable for simple forms that do not require extensive validation or real‑time processing.

import React, { useRef } from 'react';

function UncontrolledForm() {
  const nameInputRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    const name = nameInputRef.current.value;
    // handle submit logic
  };

  return (
Name:
Submit
);
}

export default UncontrolledForm;

2.3 Comparison Table

Feature

Controlled Form

Uncontrolled Form

Value Management

🙆 Value stored in component

state

, easy to access and manipulate.

🙅 Value retrieved via

ref

, dependent on component lifecycle.

Validation & Real‑time

🙆 Supports real‑time validation and processing.

🙅 Not convenient for real‑time validation.

Overall Form Control

🙆 Provides fine‑grained control over form data.

🙅 Limited control.

Data Flow

🙆 Can trigger other component updates based on field values.

🙅 Relies on

ref

, not aligned with React’s data‑flow philosophy.

Code Complexity

🙅 More code for state handling, especially in complex forms.

🙆 Less code; quicker to implement simple forms.

DOM Update Performance

🙅 Frequent

setState

may cause performance issues.

🙆 Uses

defaultValue

, rendered once, reducing re‑renders.

Typical Use Cases

Best practice for most scenarios.

Simple implementations.

3. Advantages of Managing Forms with Hooks

Example: differences between Ant Design 3 and Ant Design 4.

Ant Design 3

Uses a Higher‑Order Component (HOC) to wrap the form. All control values are stored in a top‑level state , causing every child component to re‑render whenever any field changes, which wastes performance.

Ant Design 4

Adopts Context to wrap the form and creates a FormStore via useForm() . The store is cached with useRef , so it is instantiated only once regardless of render cycles. Each Field can call forceUpdate() when necessary, avoiding unnecessary whole‑form re‑renders.

// rc-form-field
// Field.tsx
public reRender() {
  if (!this.mounted) return;
  this.forceUpdate();
}
...
public onStoreChange: FieldEntity['onStoreChange'] = (prevStore, namePathList, info) => {
  // ... handling different actions like 'remove', 'setField', 'dependenciesUpdate'
  // Calls this.reRender() when appropriate
};

In rc-form-field , useRef caches the form state, and updates are triggered only by specific actions ( setField , shouldUpdate , dependenciesUpdate ), preventing excessive re‑renders compared to the HOC‑based approach of Ant 3.

4. The Unconventional react‑hook‑form

Unlike the controlled approach of rc‑field‑form , react‑hook‑form uses useRef and useReducer instead of useState to manage form data, achieving non‑controlled performance with concise code.

import React from "react";
import { useForm } from "react-hook-form";

function MyForm() {
    const onSubmit = (data) => {
      console.log(data);
    };
    const { register, handleSubmit, formState: { errors } } = useForm();
    return (
{errors.firstName &&
First name is required.
}
{errors.lastName &&
Last name is required.
}
Submit
);
}

The register function does not expose a value field; the input’s value lives inside the DOM node, making the form effectively uncontrolled while still providing validation and submission handling through the library’s internal mechanisms.

Overall, the article demonstrates how React developers can choose between controlled, uncontrolled, and hook‑based form strategies, weighing factors such as validation needs, performance, code complexity, and compatibility with UI libraries like Ant Design.