What are controlled and uncontrolled components in React?

✅ Controlled Components

• Form elements like <input>, <textarea>, and <select> whose values are controlled by React state.
• React handles the form data via useState or this.state.

const [name, setName] = useState('');
<input value={name} onChange={(e) => setName(e.target.value)} />

✅ Uncontrolled Components

• Form elements manage their own state internally using the DOM, accessed via ref.

const inputRef = useRef();
<input ref={inputRef} />
<button onClick={() => alert(inputRef.current.value)}>Submit</button>

🔍 Key Difference

• Controlled = React manages state.
• Uncontrolled = DOM manages state (via ref).

Use controlled when validation or React-based state logic is needed.