Introduction: Why Uncontrolled Components Matter

In React, form inputs are often managed through controlled components, where React’s useState manages the form's state. But sometimes, you just need a quick, lightweight form without extensive state handling. This is where uncontrolled components come in.

Uncontrolled components allow you to access form values directly using refs, bypassing the need to synchronize input fields with React state. They’re perfect for simple forms or when integrating non-React libraries.

Let’s break down how uncontrolled components work, when to use them, and how they differ from controlled components.

What Is an Uncontrolled Component?

An uncontrolled component is a form input element in React where the DOM maintains the state, not React. Instead of tracking the input value via useState, you access it using refs.

Basic Structure:

<input type="text" ref={inputRef} />

You then access the value using inputRef.current.value.

⚙️ Setting Up: How to Create an Uncontrolled Component

✅ Step 1: Import and Use useRef

import React, { useRef } from 'react';

function SimpleForm() {
  const inputRef = useRef(); // Create a reference to the input element

✅ Step 2: Connect Ref to the Input

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={inputRef} placeholder="Enter your name" />
      <button type="submit">Submit</button>
    </form>
  );
}

✅ Step 3: Handle Form Submission

  const handleSubmit = (e) => {
    e.preventDefault(); // Prevent default page reload
    alert(`Submitted value: ${inputRef.current.value}`);
  };

✅ Full Working Example: React Uncontrolled Form

import React, { useRef } from 'react';

function UncontrolledForm() {
  const nameRef = useRef(null);
  const emailRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    const name = nameRef.current.value;
    const email = emailRef.current.value;

    alert(`Name: ${name}, Email: ${email}`);
    // You can also send these values to an API
  };

  return (
    <div style={{ maxWidth: '400px', margin: 'auto' }}>
      <h2>Uncontrolled Component Example</h2>
      <form onSubmit={handleSubmit}>
        <input type="text" placeholder="Name" ref={nameRef} />
        <input type="email" placeholder="Email" ref={emailRef} />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default UncontrolledForm;

This form works without using useState, and the values are accessed directly through DOM references.

Controlled vs Uncontrolled Components

Tips & Common Pitfalls

✅ Best Practices

• Use refs only when necessary—prefer controlled components for complex forms.

• Always check if ref.current exists before accessing .value.

• Combine with form libraries that work better with refs (e.g., Formik has support for both).

• Use defaultValue instead of value for pre-filling inputs in uncontrolled components.

❌ Common Pitfalls

When to Use Uncontrolled Components

Use uncontrolled components when:

• You don’t need to respond to every keystroke.

• You’re working with third-party form libraries or legacy code.

• You need simple form inputs with minimal state logic.

• You’re building one-off forms or quick prototypes.

Useful APIs and Hooks for Uncontrolled Components

• useRef() – Creates a mutable ref object.

• ref.current – Accesses the DOM node.

• defaultValue – Sets initial value for an input.

• formRef.reset() – Resets a form to initial values.

Conclusion: Controlled Isn’t Always Necessary

Uncontrolled components offer a simpler and faster way to handle forms in React when you don’t need real-time validation or input tracking. They reduce boilerplate and are perfect for quick forms or basic use cases.

Key Takeaways:

• Use ref and defaultValue for uncontrolled components.

• Great for lightweight, non-complex forms.

• Prefer controlled components when state or validation is needed.