Form Handling in React JS: A Complete Guide to Controlled vs Uncontrolled Components

Introduction

Working with forms in React may appear simple in the beginning, however it isn’t until you dig deeper until you see two important methods. Form handling in React JS is an essential skill every developer needs to learn. Whether you are building login forms, contact pages, or complex inputs from users, knowing how to handle those values is key.

In this article, we will look at two main concepts:

• Controlled Components
• Uncontrolled Components

There will be code examples, and situations for their use in this blog to help you understand when and how to use a controlled component vs uncontrolled component.

What is Form Handling in React?

In regular HTML, form elements like input, textarea and select have their own internal state. In React, form elements either:

– Rely fully on React to control them, using state (controlled components).

– Rely on the DOM to control it, by way of ref (uncontrolled components).

React grants you total control of your UI, and form handling is no different.

Want to See React Form Handling in Action?

If you prefer learning through visuals and real-time coding, don’t miss my YouTube video where I’ve explained Form Handling in React JS with live examples and a fun, beginner-friendly approach.
👉 Watch Now: ReactJS Form Handling (Controlled & Uncontrolled Explained)

This video covers everything from this blog and more — including common form validation mistakes and real-world scenarios. Definitely worth a watch if you’re building forms in React!

Controlled Components in React

With a controlled component, the form data is handled by the React component through state. The React state becomes the “single source of truth” for the value in the input.

Code Example: Controlled Input

import React, { useState } from 'react';

function ControlledForm() {
const [name, setName] = useState('');

const handleSubmit = (e) => {
e.preventDefault();
alert(Submitted Name: ${name});
};

return (
<form onSubmit={handleSubmit}>
<label>
Name:
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</label>
<button type="submit">Submit</button>
</form>
);
}

import React, { useState } from 'react';

function ControlledForm() {
const [name, setName] = useState('');

const handleSubmit = (e) => {
e.preventDefault();
alert(Submitted Name: ${name});
};

return (
<form onSubmit={handleSubmit}>
<label>
Name:
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</label>
<button type="submit">Submit</button>
</form>
);
}

How it Works:

• useState stores the input value.
• Every keystroke updates the state via onChange.
• The value of the input is tied to the state.

Pros of Controlled Components:

• Easy validation
• Easy to disable/enable fields
• One-way data flow ensures better control

Cons:

• A lot of boilerplate code
• Might feel verbose for simple forms

Uncontrolled Components in React

In an uncontrolled component, the form data is handled by DOM, not React. We reference the form value using refs.

It mimics how forms behave in vanilla JS

🛠 Code Example: Uncontrolled Input

import React, { useRef } from 'react';

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

const handleSubmit = (e) => {
e.preventDefault();
alert(Submitted Name: ${inputRef.current.value});
};

return (
<form onSubmit={handleSubmit}>
<label>
Name:
<input type="text" ref={inputRef} />
</label>
<button type="submit">Submit</button>
</form>
);
}

import React, { useRef } from 'react';

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

const handleSubmit = (e) => {
e.preventDefault();
alert(Submitted Name: ${inputRef.current.value});
};

return (
<form onSubmit={handleSubmit}>
<label>
Name:
<input type="text" ref={inputRef} />
</label>
<button type="submit">Submit</button>
</form>
);
}

How it Works:

• We use useRef to directly reference the input DOM node.
• On submission, we access the input value with inputRef.current.value.

Pros of Uncontrolled Components:

• Less code and simpler for quick tasks
• Closer to traditional HTML form handling

Cons:

• Harder to validate in real-time
• No instant state update
• Not ideal for dynamic forms

Controlled vs Uncontrolled — What Should You Use?

My Suggestion:

• Use Controlled Components when:
  • You need validation, instant feedback, or dynamic rendering.
• Use Uncontrolled Components when:
  • You’re building simple or legacy forms or working with file uploads.

Bonus: Handling File Inputs

File inputs in React don’t work well as controlled components. That’s because you can’t set the value of a file input from code (for security reasons).

Here’s how to handle it using refs:

function FileUploader() {
const fileInputRef = useRef();

const handleUpload = (e) => {
e.preventDefault();
const file = fileInputRef.current.files[0];
console.log(file);
};

return (
<form onSubmit={handleUpload}>
<input type="file" ref={fileInputRef} />
<button type="submit">Upload</button>
</form>
);
}

function FileUploader() {
const fileInputRef = useRef();

const handleUpload = (e) => {
e.preventDefault();
const file = fileInputRef.current.files[0];
console.log(file);
};

return (
<form onSubmit={handleUpload}>
<input type="file" ref={fileInputRef} />
<button type="submit">Upload</button>
</form>
);
}

Best Practices for React Form Handling

1. Use Controlled Components for anything interactive.
2. Debounce input changes if you’re syncing with backend or large forms.
3. Use validation libraries like Formik or React Hook Form for complex forms.
4. Use useRef smartly — especially for third-party integrations or file inputs.
5. Avoid unnecessary state — keep only what you need.

Conclusion

Forms are an important part of any web app, and in React you have total control over how they behave. How you do it (controlled vs. uncontrolled) depends on your use case. By now you should have a good grasp of both and their advantages and disadvantages as well as how to implement both with React. When starting, use controlled components if you want to have predictable, maintainable form components. Use uncontrolled components when you just need a simple form, or don’t need anything more than direct DOM access.

🔍 FAQ

👉 What is the difference between controlled and uncontrolled components in React?

Controlled components rely on React state, while uncontrolled components rely on the DOM and refs.

👉 Which one is better for forms in React?

Controlled components are generally better for dynamic forms, validation, and maintaining a single source of truth.

👉 Can I mix controlled and uncontrolled components?

Yes, but do it carefully. Mixing them can make state management tricky and unpredictable.

Want to Build Real Projects with React + MERN?

Once you’re confident with form handling, it’s time to put those skills to work. Check out my curated list of real-world MERN stack projects that can boost your resume and help you land a developer job in 2025.

🔥 Read the blog: 20 MERN Stack Projects That Will Help You Get Hired in 2025

From simple user dashboards to full-scale admin panels, these projects will test your React form handling skills in real applications. Highly recommended!