Handling Forms in React: Controlled, Uncontrolled & React Hook Form

Forms in React are deceptively simple at first glance, but as your application grows, managing their state, validation, and submission can quickly become complex. In this post, we’ll start with the basics of controlled and uncontrolled forms, discuss the benefits of using a form library, and provide a practical example using React Hook Form.

---

Controlled vs. Uncontrolled Components

In React, there are two main approaches to handling form inputs: controlled and uncontrolled.

Controlled Components

A controlled component is where the React component fully manages the input’s state. This means that the value of an input field is tied to a state variable, and any change is handled through onChange.

Example:

1import { useState, FormEvent } from "react";
2
3function ControlledForm() {
4

Pros:

• Full control over the input value.
• Easy to perform validations or manipulate the value.

Cons:

• Can get verbose with many fields.
• State management can become tedious for large forms.

Uncontrolled Components

Uncontrolled components rely on the DOM to manage the input state. You use ref to access the current value when needed.

Example:

1import { useRef, FormEvent } from "react";
2
3function UncontrolledForm() {
4

Pros:

• Less boilerplate for simple forms.
• No need to manage state for each input.

Cons:

• Harder to perform validations or react to input changes dynamically.
• Not ideal for complex forms.

Why Use a Dedicated Form Library?

For anything beyond the simplest forms, managing state, validation, errors, and submission manually becomes cumbersome. This is where form libraries shine. They provide:

• Built-in validation handling.
• Easy error messaging.
• Reduced boilerplate and cleaner code.
• Better performance for large forms.

Two of the most popular React form libraries are:

1. React Hook Form – Lightweight, performs well with uncontrolled inputs, minimal re-renders.
2. Formik – Mature, great for controlled components, extensive ecosystem.

Both have their strengths, but in modern React projects, React Hook Form is often preferred for its simplicity and performance.

Example: React Hook Form

Here’s how you can handle a simple form with React Hook Form:

Example:

1import { useForm, SubmitHandler } from "react-hook-form";
2
3interface FormValues {
4  name

Why this works well:

• Minimal state management – React Hook Form handles input refs internally.
• Built-in validation with error messages.
• Works seamlessly with large forms without performance penalties.

Conclusion

While React’s controlled and uncontrolled components provide the foundation for handling forms, using a dedicated form library like React Hook Form can drastically reduce complexity and improve maintainability. For small forms, controlled or uncontrolled components may be sufficient, but as your app grows, a library will save you time and prevent headaches.