Controlled vs Uncontrolled Components with useRef0%
Multi-Input Forms with Dynamic State Handlers

Controlled vs Uncontrolled Components with useRef

Beginner12 min read•Updated: Jul 11, 2026
Study MaterialsCheatsheet

Controlled vs Uncontrolled Components with useRef

1. Two Philosophical Approaches to Form Inputs

In web development, form elements like <input>, <textarea>, and <select> maintain their own internal state inside the browser's Document Object Model as users type.

React offers two primary architectural patterns to handle form inputs:

  1. 1
    Controlled Components: React state (useState) is the single source of truth. Every input value is pushed into state via onChange, and read from state via value.
  2. 2
    Uncontrolled Components: The browser DOM itself holds the source of truth. React reads values only when needed (such as upon form submission) using a useRef reference.
Output
Controlled Component (React is Single Source of Truth):
[Keystroke] ──> [onChange fires] ──> [setVal(e.target.value)] ──> [Re-render] ──> [value={val}]
 
Uncontrolled Component (DOM is Source of Truth):
[Keystroke] ──> [DOM updates internally (Zero re-renders!)]
[Submit Click] ──> [inputRef.current.value read once]

2. Implementing Controlled Components

JSX
import React, { useState } from 'react';
 
export default function ControlledSearch() {
const [query, setQuery] = useState('');
 
return (
<div>
<input
type="text"
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder="Type to search..."
/>
<p>Instant Character Count: {query.length}</p>
</div>
);
}

Why use Controlled Components?

  • Instant Validation: Validate input on every keystroke (e.g. enforcing password rules or phone formatting).
  • Dynamic UI Responses: Enable or disable submit buttons based on current field values.
  • Enforcing Input Formats: Convert text to uppercase automatically as the user types.

3. Implementing Uncontrolled Components with useRef

When you don't need real-time keystroke tracking and want to maximize performance in massive forms, useRef provides direct access to the underlying DOM node:

JSX
import React, { useRef } from 'react';
 
export default function UncontrolledRegistration() {
const nameRef = useRef(null);
const emailRef = useRef(null);
const fileRef = useRef(null);
 
const handleSubmit = (e) => {
e.preventDefault();
 
// Read values directly from DOM nodes upon submission
const studentName = nameRef.current.value;
const studentEmail = emailRef.current.value;
const attachedFile = fileRef.current.files[0];
 
console.log('Submitting:', { studentName, studentEmail, attachedFile });
};
 
return (
<form onSubmit={handleSubmit} className="uncontrolled-form">
<div>
<label>Name:</label>
{/* defaultValue sets initial value without controlling updates */}
<input type="text" ref={nameRef} defaultValue="Deepak" />
</div>
 
<div>
<label>Email:</label>
<input type="email" ref={emailRef} placeholder="email@example.com" />
</div>
 
<div>
<label>Certificate Upload:</label>
{/* File inputs in HTML are ALWAYS uncontrolled! */}
<input type="file" ref={fileRef} />
</div>
 
<button type="submit">Submit Record</button>
</form>
);
}

4. Special Case: HTML File Inputs <input type="file" />

In HTML, file inputs are strictly read-only for JavaScript security reasons (scripts cannot programmatically set a user's file path).

Because their value cannot be set via value={...}, file inputs in React must always be uncontrolled components accessed via useRef!

Interactive Quiz

Practice Quiz

Question 1
What is the defining characteristic of a Controlled Component in React?
Question 2
How does an Uncontrolled Component store and track its form data?
Question 3
Why MUST <input type="file" /> elements always be treated as uncontrolled in React?
Question 4
What prop is used to set the initial starting text of an uncontrolled input without controlling subsequent typing?
Question 5
When should an engineer prefer controlled components over uncontrolled components?
Next Lesson

Multi-Input Forms with Dynamic State Handlers

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Lifecycle Equivalents: Mount, Update, and UnmountMulti-Input Forms with Dynamic State Handlers

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext