Controlled Component là gì trong React? Nêu điểm khác biệt với Uncontrolled Component.

Controlled Component (Component được kiểm soát) là component mà giá trị của các form element (như <input>, <textarea>, <select>) được kiểm soát hoàn toàn bởi React state.

• Thay vì để DOM tự quản lý trạng thái, React state sẽ là "source of truth" (nguồn chân lý duy nhất).
• Mỗi khi người dùng gõ phím, một sự kiện onChange sẽ được gọi để cập nhật state, và prop value của input sẽ phản ánh state đó.

// Ví dụ Controlled Component:
function ControlledInput() {
  const [text, setText] = useState("");
  return <input value={text} onChange={(e) => setText(e.target.value)} />;
}

Khác biệt với Uncontrolled Component:
- Uncontrolled Component lưu trữ trạng thái trực tiếp trong DOM thật. Bạn dùng ref để trích xuất giá trị từ DOM khi cần (vd: khi submit form).
- Khi nào dùng: Controlled Component được khuyến nghị trong hầu hết trường hợp vì nó cho phép bạn validate dữ liệu realtime, vô hiệu hóa nút submit, và định dạng input dễ dàng. Uncontrolled Component thường dùng khi tích hợp với thư viện non-React hoặc khi cần xử lý form cực kỳ lớn mà không muốn re-render liên tục.