Uncontrolled Components in React Explained - useRef

Learn Uncontrolled Components in React with practical examples. Understand useRef, defaultValue, file uploads, controlled vs uncontrolled components, and React form handling.

Uncontrolled Components in React: Managing Form Data with Refs

Forms are a fundamental part of almost every web application.

Examples include:

• Login forms
• Registration forms
• Contact forms
• Search bars
• Checkout forms

In React, there are two common ways to handle form data:

• Controlled Components
• Uncontrolled Components

Most React tutorials focus heavily on controlled components, but understanding uncontrolled components is equally important because they can simplify certain use cases and improve performance in specific scenarios.

In this guide, you'll learn what uncontrolled components are, how they work, and when you should use them in React applications.

Prerequisites

Before learning Uncontrolled Components, make sure you understand:

• React Components
• React State
• React Hooks

These concepts will help you understand how uncontrolled components work.

What Are Uncontrolled Components?

An uncontrolled component is a form element that manages its own state inside the DOM instead of using React State.

React does not control the input value directly.

Instead, React accesses the value only when needed using a Ref.

Example:

  import { useRef } from "react";

function LoginForm() {

  const inputRef =
    useRef(null);

  function handleSubmit() {

    console.log(
      inputRef.current.value
    );

  }

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

      <button
        onClick={handleSubmit}
      >
        Submit
      </button>
    </>
  );
}
  

The input value is stored in the DOM, not in React State.

Why Are They Called Uncontrolled?

Consider a normal HTML input:

  <input type="text">
  

The browser automatically manages the input value.

When using uncontrolled components, React allows the browser to continue managing that value.

React only reads the value when required.

Controlled vs Uncontrolled Components

Controlled Component

React controls the input value.

  const [name, setName] =
  useState("");

<input
  value={name}
  onChange={(e) =>
    setName(e.target.value)
  }
/>
  

Uncontrolled Component

The DOM controls the input value.

  const inputRef =
  useRef();

<input
  ref={inputRef}
/>
  

React reads the value only when necessary.

Why Use Uncontrolled Components?

Uncontrolled components can be useful because:

• less code
• fewer state updates
• improved performance in large forms
• easier integration with non-React libraries

For simple forms, they can be very convenient.

Using useRef with Uncontrolled Components

The most common approach uses:

  useRef()
  

Example:

  const inputRef =
  useRef(null);
  

Attach it:

  <input
  ref={inputRef}
/>
  

Read value:

  console.log(
  inputRef.current.value
);
  

Simple Login Form Example

  import { useRef } from "react";

function LoginForm() {

  const emailRef =
    useRef(null);

  const passwordRef =
    useRef(null);

  function handleSubmit() {

    const email =
      emailRef.current.value;

    const password =
      passwordRef.current.value;

    console.log(email);
    console.log(password);

  }

  return (

    <>
      <input
        ref={emailRef}
        type="email"
      />

      <input
        ref={passwordRef}
        type="password"
      />

      <button
        onClick={handleSubmit}
      >
        Login
      </button>
    </>

  );
}
  

The form values are accessed only when the user submits the form.

Using defaultValue

Uncontrolled components use:

  defaultValue
  

instead of:

  value
  

Example:

  <input
  defaultValue="Sachin"
/>
  

This sets the initial value without controlling the input.

File Upload Example

One common use case for uncontrolled components is file uploads.

Example:

  const fileRef =
  useRef(null);

function handleUpload() {

  console.log(
    fileRef.current.files[0]
  );

}
  

Input:

  <input
  type="file"
  ref={fileRef}
/>
  

File inputs are naturally uncontrolled in React.

Behind the Scenes

Controlled Component:

  Input

↓

React State

↓

Component Re-Render

↓

UI Update
  

Uncontrolled Component:

  Input

↓

DOM Stores Value

↓

React Reads Value
When Needed
  

This reduces React's involvement in form management.

Real Project Usage

Search Forms

For simple search functionality:

  const searchRef =
  useRef(null);
  

Read value when the user clicks Search.

File Upload Systems

Commonly used for:

• profile images
• documents
• videos
• PDFs

Third-Party Integrations

Useful when integrating:

• jQuery plugins
• external form libraries
• browser APIs

Common Real-World Use Cases

Uncontrolled Components are commonly used for:

• file uploads
• search bars
• simple contact forms
• quick form submissions
• third-party library integrations

When NOT to Use Uncontrolled Components

Avoid uncontrolled components when:

• real-time validation is required
• form values affect UI instantly
• dynamic form updates are needed
• application state depends on form data

Example:

  <h1>{name}</h1>
  

If UI updates based on user input, controlled components are usually a better choice.

Common Beginner Mistakes

Using value Without State

Incorrect:

  <input
  value="Sachin"
/>
  

The input becomes read-only.

Use:

  defaultValue="Sachin"
  

for uncontrolled inputs.

Forgetting useRef

Without a Ref:

  <input />
  

React has no easy way to access the value later.

Mixing Controlled and Uncontrolled Logic

Avoid:

  <input
  value={name}
  ref={inputRef}
/>
  

Choose one approach.

Overusing Uncontrolled Components

For complex forms, controlled components often provide better control and validation.

Uncontrolled Components Interview Questions

1. What is an uncontrolled component in React?
2. How is it different from a controlled component?
3. Why is useRef commonly used with uncontrolled components?
4. What is defaultValue?
5. Why are file inputs typically uncontrolled?
6. When should you use uncontrolled components?
7. When should you avoid uncontrolled components?

Watch Full Uncontrolled Components Tutorial

If you prefer video learning, watch the complete tutorial below where we build forms, file uploads, and practical examples using uncontrolled components.

Watch the Full Uncontrolled Components Tutorial

This tutorial demonstrates how uncontrolled components work behind the scenes.

Controlled vs Uncontrolled Components

Both approaches are valuable depending on the use case.

Build Something

Practice by creating:

• Login Form
• Registration Form
• Search Bar
• Resume Upload Form
• Profile Picture Upload System

These projects will help reinforce uncontrolled form handling.

Production Tip

Professional React developers usually:

• use uncontrolled components for file uploads
• use controlled components for validation-heavy forms
• avoid mixing both approaches
• choose the simplest solution for the use case

Understanding both patterns helps you make better architectural decisions.

Why Uncontrolled Components Matter

Uncontrolled components allow the browser to manage form state while React accesses values only when necessary.

This approach can simplify form handling and reduce unnecessary state management in specific scenarios.

Conclusion

Uncontrolled Components are form elements whose values are managed by the DOM instead of React State.

By using useRef , developers can access form values when needed without triggering React re-renders on every keystroke.

While controlled components are more common, understanding uncontrolled components helps you build more efficient and flexible React applications.