What are controlled and uncontrolled components in React?

When working with form inputs in React, you will often hear the terms Controlled Components and Uncontrolled Components. These refer to how the form data is handled.

---

1. Controlled Components:

A controlled component is a component where React controls the form input elements through state.

Key Points:

• Form data is handled by React state.
• Input value is controlled by state, and every change updates the state.
• You always know the current value of the input because it’s stored in state.

Example:

javascriptCopyEditimport { useState } from 'react';

function ControlledComponent() {
  const [name, setName] = useState('');

  const handleChange = (e) => {
    setName(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Submitted: ${name}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={name} onChange={handleChange} />
      <button type="submit">Submit</button>
    </form>
  );
}

How It Works:

• value={name} → The input’s value is set by state.
• onChange={handleChange} → Updates state whenever the input value changes.

Advantages:

• Easy to manage and validate input values.
• Can manipulate input values programmatically.
• Recommended in React as the standard approach.

---

2. Uncontrolled Components:

An uncontrolled component is a component where the form input is handled by the DOM itself, not React state.

Key Points:

• Form data is handled by the DOM, not React state.
• Access the value using ref when needed.
• React is not aware of the input’s current value until you manually read it.

Example:

javascriptCopyEditimport { useRef } from 'react';

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

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Submitted: ${inputRef.current.value}`);
  };

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

How It Works:

• ref={inputRef} → Creates a reference to the input element.
• Access value with inputRef.current.value when needed (e.g., on form submission).

Advantages:

• Useful when integrating with non-React libraries.
• Can be simpler for non-interactive inputs (e.g., forms that don’t need real-time validation).

---

Key Differences:

Feature	Controlled Components	Uncontrolled Components
Value Handling	Controlled by React state.	Controlled by the DOM.
Input Value Access	From state.	Using ref.
Real-time Updates	Yes, re-rendered on every change.	No, React doesn’t track input value.
Validation	Easier (using state).	Requires manual handling.
Recommended?	Yes, preferred in React applications.	Sometimes, for specific cases like file uploads or third-party libraries.

---

When to Use Each:

Use Case	Best Choice
Form with validation, dynamic updates	Controlled Component.
Simple form, no state needed	Uncontrolled Component.
Third-party libraries, file inputs	Uncontrolled Component.

---

Key Takeaways:

• Controlled Components → React state controls input.
• Uncontrolled Components → DOM controls input; React accesses it via ref.
• Controlled is generally preferred in React, except for special cases like file uploads.

---

Let me know if you need more examples or help with React concepts! 😊🚀