When building forms or managing user inputs in React, you can choose between controlled and uncontrolled components. Each approach offers unique benefits and is suitable for specific scenarios. This guide will break down the differences, provide practical examples, and help you decide which pattern to use in your projects.

What Are Controlled Components? 🧠

A controlled component is an input element whose value is controlled by React state. The input’s state is bound to a state variable, and any updates are managed through React's onChange handler.

How It Works:

• The value of the input is always derived from React state.
• Changes to the input are handled by updating the state, triggering a re-render.
• This gives you full control over the input's behavior, making it ideal for form validation, dynamic inputs, and complex UI logic.

Example of a Controlled Component:

import { useState } from "react";

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

  return (
    <div>
      <input
        type="text"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder="Enter discount code (e.g., 123FV)"
      />
      <p>Entered code: <b>{value}</b></p>
    </div>
  );
};

Pros of Controlled Components:

• ✅ Data Flow Control: React state is always in sync with the input.
• ✅ Validation and Formatting: Easily enforce rules and formats as the user types.
• ✅ Predictable Behavior: Ideal for forms with complex interactions or validation.

Cons of Controlled Components:

• ❌ Performance Concerns: Overusing state updates can lead to performance issues if not optimized.
• ❌ Verbose Code: Managing state and events can lead to more boilerplate code.

What Are Uncontrolled Components? 🎯

An uncontrolled component maintains its internal state using the DOM instead of React state. Instead of React’s onChange, you access the input value using a ref.

How It Works:

• Input elements handle their own state internally.
• You can access the input's value using refs (useRef in React).
• Useful when you need a quick and lightweight approach for simple forms or non-critical inputs.

Example of an Uncontrolled Component:

import { useRef } from "react";

export const UncontrolledInput = () => {
  const inputRef = useRef<HTMLInputElement>(null);

  const handleSubmit = () => {
    if (inputRef.current) {
      alert(`New product added: ${inputRef.current.value}`);
    }
  };

  return (
    <div>
      <input
        ref={inputRef}
        type="text"
        placeholder="Product name (e.g., Pineapple)"
      />
      <button onClick={handleSubmit}>Add to Cart</button>
    </div>
  );
};

Pros of Uncontrolled Components:

• ✅ Simplicity: Ideal for simple forms or where input values are only needed on submit.
• ✅ Less Code: No need to manage state or handle events manually.
• ✅ Performance: Avoids unnecessary re-renders, as the state is managed by the DOM.

Cons of Uncontrolled Components:

• ❌ Limited Control: Difficult to enforce validation or formatting in real-time.
• ❌ Manual Syncing: Requires refs and manual value extraction, which can lead to inconsistent states.

Controlled vs. Uncontrolled Components: Key Differences

1. State Management:

• Controlled: Uses React state (useState) to manage input values.
• Uncontrolled: Uses refs (useRef) to access the DOM element directly.

2. Use Cases:

• Controlled: Ideal for forms, real-time validation, and complex interactions.
• Uncontrolled: Great for simple inputs or when only the final value is needed (e.g., file uploads, simple forms).

3. Performance:

• Controlled: May trigger more re-renders, especially with complex state management.
• Uncontrolled: Generally faster, as the state is not tied to the React component lifecycle.

4. Validation & Formatting:

• Controlled: Easier to validate and format input as the user types.
• Uncontrolled: Requires manual validation, often during form submission.

When to Use Each Approach? 🤔

Use Controlled Components When:

• You need real-time validation (e.g., checking password strength).
• The form involves dynamic input fields (e.g., adding/removing inputs dynamically).
• You need to synchronize input state with external state or Redux.

Use Uncontrolled Components When:

• Input values are only needed at submission (e.g., simple search bars).
• You are working with file uploads (<input type="file" />).
• You need a performance boost for simple inputs that do not affect the UI state.

Conclusion: Choose Wisely for Your Use Case 🧠

Controlled and uncontrolled components in React offer different benefits depending on your application's needs. Controlled components provide greater control and validation capabilities, while uncontrolled components offer simplicity and performance benefits.

When building complex forms with React, controlled components usually provide the most flexibility. However, for simple forms or inputs with minimal interaction, uncontrolled components can help reduce code complexity and improve performance.

In future posts, we'll dive deeper into advanced form handling techniques, custom hooks, and validation strategies to help you build robust and user-friendly forms.

Additional Resources 📚

• Controlled vs. Uncontrolled Components in React