Uncontrolled Components

Introduction

In the last lesson you built controlled components, where React state is the single source of truth for every keystroke. That pattern is powerful, but it is not the only way to work with form inputs. React also supports uncontrolled components, where the DOM itself keeps track of the current value, and you only reach in and read it when you actually need it.

Uncontrolled components can feel like a step backward if you have just gotten comfortable with state-driven forms, but they exist for good reasons. Some inputs — like file pickers — must be uncontrolled. Others are simply overkill to wire up to state when all you need is the value at submit time. This lesson shows you how uncontrolled components work, how to read their values with useRef, and how to decide between the two approaches.

What is an Uncontrolled Component?

An uncontrolled component is a form element — usually an <input>, <textarea>, or <select> — that manages its own value internally, the same way it would in plain HTML. React does not set the value prop and does not re-render on every keystroke. Instead, the DOM node itself holds the current value, exactly like it always has since before React existed.

To get at that value, you attach a ref to the element. Whenever you need the current value — typically when the user submits a form — you read it directly off the DOM node through the ref, rather than from a piece of React state.

Reading Values with useRef

The useRef Hook creates a mutable object with a .current property that persists across renders. When you pass a ref to an element's ref attribute, React sets ref.current to that actual DOM node once it is mounted. From there, you can read properties like .value the same way you would with plain JavaScript DOM APIs.

import { useRef } from 'react';

function NameField() {
  const nameRef = useRef(null);

  function handleClick() {
    alert(`Current value: ${nameRef.current.value}`);
  }

  return (
    <div>
      <input ref={nameRef} type="text" defaultValue="" />
      <button onClick={handleClick}>Show Value</button>
    </div>
  );
}

export default NameField;

Current value: Amol

When Uncontrolled Inputs Make Sense

Uncontrolled components are not "wrong" or old-fashioned — they are simply the right tool for specific situations. Reach for them when you do not need to react to every keystroke.

File Inputs Must Be Uncontrolled

An <input type="file"> is a special case: its value is set by the user through the operating system's file picker, and for security reasons the browser never lets JavaScript set that value programmatically. Because React cannot control the value, file inputs are always uncontrolled — you read the selected file(s) through a ref instead.

import { useRef } from 'react';

function AvatarUploader() {
  const fileRef = useRef(null);

  function handleUpload() {
    const file = fileRef.current.files[0];
    if (file) {
      console.log(`Selected file: ${file.name}`);
    }
  }

  return (
    <div>
      <input type="file" ref={fileRef} accept="image/*" />
      <button onClick={handleUpload}>Upload</button>
    </div>
  );
}

export default AvatarUploader;

Selected file: profile.png

Controlled vs Uncontrolled

Both approaches are valid; the table below summarizes the key differences to help you decide which one fits a given field.

Example: An Uncontrolled Form

Here is a small sign-up form where every field is uncontrolled. Values are only read once, when the form is submitted.

import { useRef } from 'react';

function SignupForm() {
  const emailRef = useRef(null);
  const passwordRef = useRef(null);

  function handleSubmit(e) {
    e.preventDefault();
    const formData = {
      email: emailRef.current.value,
      password: passwordRef.current.value,
    };
    console.log(formData);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input ref={emailRef} type="email" placeholder="Email" defaultValue="" />
      <input ref={passwordRef} type="password" placeholder="Password" defaultValue="" />
      <button type="submit">Sign Up</button>
    </form>
  );
}

export default SignupForm;

{ email: 'amol@example.com', password: '••••••••' }

Common Mistakes

Best Practices

Frequently Asked Questions

Key Takeaways

Summary

Uncontrolled components hand value-tracking back to the DOM, and you read the current value through a ref whenever you actually need it — typically on submit. This trades some of the fine-grained control of state-driven forms for simplicity, and it is required for inputs like file pickers.

You now know both major approaches to handling form input in React and when each one fits. Next, you will step away from forms and start exploring how to style your components, beginning with a survey of all the major styling approaches available in React.