What are Uncontrolled Components in React?

This article provides a clear and concise guide to uncontrolled components in React. You will learn what they are, how they differ from controlled components, how to implement them using React Refs, and the specific use cases where they are the best choice for form handling in your web applications.

In React, an uncontrolled component is a component where the form data is handled by the DOM itself, rather than by the React state. Instead of writing an event handler for every state update, you use a ref to pull the values directly from the DOM when you need them, such as when a user clicks a submit button.

How Uncontrolled Components Work

In a standard controlled component, React state serves as the “single source of truth.” In contrast, uncontrolled components rely on the DOM to maintain the state of form inputs.

To access the value of an input in an uncontrolled component, you use the useRef hook. You attach a ref attribute to the HTML input element, which gives you direct access to the DOM node.

Here is a basic example of an uncontrolled component:

import React, { useRef } from 'react';

function UncontrolledForm() {
  const inputRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    alert('A name was submitted: ' + inputRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" ref={inputRef} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

export default UncontrolledForm;

In this example, the input field is not synchronized with any React state. The value is only read once the user submits the form, using inputRef.current.value.

Controlled vs. Uncontrolled Components

• Controlled Components: Every state mutation has an associated handler function. The input value is always driven by the React state, making it easy to validate input on every keystroke, enforce specific formats, or conditionally disable buttons.
• Uncontrolled Components: The DOM handles the input state. You query the DOM for the current value only when you need it. This requires less code for simple forms and behaves more like traditional HTML form handling.

Setting Default Values

Since uncontrolled components do not use React state to set values, you cannot use the standard value attribute (as this would make the input read-only). Instead, React provides the defaultValue attribute. This allows you to specify an initial value that the user can still edit.

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

When to Use Uncontrolled Components

While controlled components are generally recommended for most forms in React, uncontrolled components are highly useful in specific scenarios:

1. File Inputs: In React, the HTML <input type="file" /> is always an uncontrolled component because its value is read-only and can only be set by a user, not programmatically.
2. Simple Forms: For very basic forms with no real-time validation requirements, uncontrolled components reduce the boilerplate code of writing state variables and change handlers.
3. Third-Party DOM Libraries: If you are integrating React with non-React libraries or legacy code that directly manipulates the DOM, uncontrolled components simplify the integration.