React · Advanced Patterns

Uncontrolled Components

Learn when and how to use uncontrolled components where the DOM handles form data instead of React state.

Find videos you like?

Save to resource drawer for future reference!

What are Uncontrolled Components?

DOM manages the state

An uncontrolled component stores its own state internally in the DOM. You access the value using a ref when needed!

✅ Use Cases

• File inputs
• Simple forms
• Integrating with non-React code
• Performance optimization

⚠️ Limitations

• No real-time validation
• Less control over input
• Can't conditionally disable
• Harder to test

Example: Basic Uncontrolled

Using refs to access values

Uncontrolled Form - Live Demo

Type and submit! No re-renders until you click submit

Frontend

function UncontrolledForm() {
  const nameRef = React.useRef();
  const emailRef = React.useRef();
  const [submitted, setSubmitted] = React.useState(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    const data = {
      name: nameRef.current.value,
      email: emailRef.current.value
    };
    setSubmitted(data);
  };

  const handleReset = () => {
    nameRef.current.value = '';
    emailRef.current.value = '';
    setSubmitted(null);
  };

  return (
    <div className="uncontrolled-form">
      <h2>⚡ Uncontrolled Form</h2>
      <p className="subtitle">DOM manages state, React reads on submit</p>
      
      <form onSubmit={handleSubmit}>
        <div className="form-group">
          <label>Name</label>
          <input
            ref={nameRef}
            defaultValue="John Doe"
            placeholder="Enter name"
          />
        </div>
        
        <div className="form-group">
          <label>Email</label>
          <input
            ref={emailRef}
            defaultValue="john@example.com"
            placeholder="Enter email"
          />
        </div>

        <div className="button-group">
          <button type="submit" className="submit-btn">
            Submit Form
          </button>
          <button type="button" onClick={handleReset} className="reset-btn">
            Reset
          </button>
        </div>
      </form>

      {submitted && (
        <div className="submitted-data">
          <strong>📤 Submitted Data:</strong>
          <pre>{JSON.stringify(submitted, null, 2)}</pre>
          <p className="note">💡 Values accessed only on submit!</p>
        </div>
      )}
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<UncontrolledForm />);

Live Preview

Loading preview...

Perfect for File Inputs

File inputs must be uncontrolled

File Upload (Must be Uncontrolled)

javascript

File inputs cannot be controlled

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

  const handleSubmit = (e) => {
    e.preventDefault();
    const file = fileInputRef.current.files[0];
    console.log('File:', file.name);
  };

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

Console Output

// File inputs MUST be uncontrolled

// Security: Cannot set file value programmatically

❯Select file and submit:

❯File: photo.jpg

❯✅ Only way to handle files in React

Controlled vs Uncontrolled

When to use each

Feature	Controlled	Uncontrolled
Data source	React state	DOM
Access value	From state	From ref
Re-renders	On every change	Only on submit
Validation	Real-time ✅	On submit only
Best for	Most forms	File inputs, simple forms

Key Takeaways

Use Refs

Access DOM values directly with useRef

File Inputs

Must be uncontrolled for security reasons

Less Re-renders

Better performance for simple cases

Use Sparingly

Prefer controlled for most forms

When to Use!

Use uncontrolled for file inputs and simple forms. For everything else, prefer controlled components!

Previous Topic

Controlled Components

Master controlled component patterns, form handling, and validation strategies.

Next Topic

Lifting State Up

Advanced state sharing patterns, sibling communication, and state architecture.

Ask a Question

Have a question about Uncontrolled Components? Ask our AI assistant.

🔐 Login to use AI Assistant

React · Advanced Patterns

Uncontrolled Components

Learn when and how to use uncontrolled components where the DOM handles form data instead of React state.

Find videos you like?

Save to resource drawer for future reference!

What are Uncontrolled Components?

DOM manages the state

An uncontrolled component stores its own state internally in the DOM. You access the value using a ref when needed!

✅ Use Cases

• File inputs
• Simple forms
• Integrating with non-React code
• Performance optimization

⚠️ Limitations

• No real-time validation
• Less control over input
• Can't conditionally disable
• Harder to test

Example: Basic Uncontrolled

Using refs to access values

Uncontrolled Form - Live Demo

Type and submit! No re-renders until you click submit

Frontend

function UncontrolledForm() {
  const nameRef = React.useRef();
  const emailRef = React.useRef();
  const [submitted, setSubmitted] = React.useState(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    const data = {
      name: nameRef.current.value,
      email: emailRef.current.value
    };
    setSubmitted(data);
  };

  const handleReset = () => {
    nameRef.current.value = '';
    emailRef.current.value = '';
    setSubmitted(null);
  };

  return (
    <div className="uncontrolled-form">
      <h2>⚡ Uncontrolled Form</h2>
      <p className="subtitle">DOM manages state, React reads on submit</p>
      
      <form onSubmit={handleSubmit}>
        <div className="form-group">
          <label>Name</label>
          <input
            ref={nameRef}
            defaultValue="John Doe"
            placeholder="Enter name"
          />
        </div>
        
        <div className="form-group">
          <label>Email</label>
          <input
            ref={emailRef}
            defaultValue="john@example.com"
            placeholder="Enter email"
          />
        </div>

        <div className="button-group">
          <button type="submit" className="submit-btn">
            Submit Form
          </button>
          <button type="button" onClick={handleReset} className="reset-btn">
            Reset
          </button>
        </div>
      </form>

      {submitted && (
        <div className="submitted-data">
          <strong>📤 Submitted Data:</strong>
          <pre>{JSON.stringify(submitted, null, 2)}</pre>
          <p className="note">💡 Values accessed only on submit!</p>
        </div>
      )}
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<UncontrolledForm />);

Live Preview

Loading preview...

Perfect for File Inputs

File inputs must be uncontrolled

File Upload (Must be Uncontrolled)

javascript

File inputs cannot be controlled

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

  const handleSubmit = (e) => {
    e.preventDefault();
    const file = fileInputRef.current.files[0];
    console.log('File:', file.name);
  };

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

Console Output

// File inputs MUST be uncontrolled

// Security: Cannot set file value programmatically

❯Select file and submit:

❯File: photo.jpg

❯✅ Only way to handle files in React

Controlled vs Uncontrolled

When to use each

Feature	Controlled	Uncontrolled
Data source	React state	DOM
Access value	From state	From ref
Re-renders	On every change	Only on submit
Validation	Real-time ✅	On submit only
Best for	Most forms	File inputs, simple forms

Key Takeaways

Use Refs

Access DOM values directly with useRef

File Inputs

Must be uncontrolled for security reasons

Less Re-renders

Better performance for simple cases

Use Sparingly

Prefer controlled for most forms

When to Use!

Use uncontrolled for file inputs and simple forms. For everything else, prefer controlled components!

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Controlled Components

Lifting State Up

Building Your Learning Module...

Uncontrolled Components

Uncontrolled Form - Live Demo

Use Refs

File Inputs

Less Re-renders

Use Sparingly

When to Use!

Controlled Components

Lifting State Up

Uncontrolled Components

Uncontrolled Form - Live Demo

Use Refs

File Inputs

Less Re-renders

Use Sparingly

When to Use!