In React, form elements such as input, textarea, and select need a way to manage user-entered data. React provides two approaches for handling form inputs: controlled components and uncontrolled components. Choosing the right approach affects how predictable, maintainable, and scalable your application becomes.

Controlled Components

Controlled components are form elements whose values are controlled by React state. This means the source of truth for the input value is the component’s state, not the DOM. Whenever the user types or interacts with the input, an event handler updates the state, and React re-renders the input with the updated value.

Basic example of a controlled component:

import { useState } from "react";

function ControlledInput() {
  const [value, setValue] = useState("");

  return (
    <input
      type="text"
      value={value}
      onChange={e => setValue(e.target.value)}
      placeholder="Type something"
    />
  );
}

Here, the input value is always synchronized with the state. This approach allows real-time validation, conditional rendering, and dynamic UI updates.

Advantages of controlled components include predictable behavior, easy validation, and better integration with application logic. They are ideal for complex forms, live previews, and dynamic input handling.

Uncontrolled Components

Uncontrolled components rely on the browser’s DOM to manage input values. Instead of storing the value in React state, a reference is used to access the input value when needed. This approach is closer to traditional HTML form handling.

Basic example of an uncontrolled component:

import { useRef } from "react";

function UncontrolledInput() {
  const inputRef = useRef();

  function handleSubmit() {
    console.log(inputRef.current.value);
  }

  return (
    <>
      <input ref={inputRef} type="text" />
      <button onClick={handleSubmit}>Submit</button>
    </>
  );
}

Uncontrolled components require less code and can be useful for simple forms or when performance is a concern. However, they offer less control and are harder to validate or synchronize with UI changes.

Key Differences Between Controlled and Uncontrolled Components

Controlled components use React state to manage input values, while uncontrolled components let the DOM handle the data. Controlled components update on every input change, whereas uncontrolled components access values only when required. Controlled components are more predictable and easier to debug, while uncontrolled components are simpler but less flexible.

Real-World Scenario

In a real-world application such as a user registration or resume builder form, controlled components are typically used to validate inputs, show error messages, and update previews in real time. Uncontrolled components may be used for simple search fields or file uploads where full control is not required.

Important Notes and Best Practices

Use controlled components for most form-related use cases, especially when validation, conditional logic, or real-time feedback is needed. Uncontrolled components should be limited to simple or performance-sensitive scenarios. Avoid mixing both approaches in the same form unless there is a clear reason.

In summary, controlled components provide full control and predictability, while uncontrolled components offer simplicity and minimal state management. Understanding both approaches helps developers choose the right form-handling strategy for different React applications.