Controlled vs Uncontrolled components khác nhau như thế nào?

Controlled Component (Được kiểm soát):
- Giá trị của form elements (<input>, <select>, v.v.) được kiểm soát hoàn toàn bởi React State.
- Cần có prop value và sự kiện onChange để cập nhật state.
- Ưu điểm: Dễ dàng thực hiện validate dữ liệu ngay lúc người dùng đang gõ (real-time validation), định dạng input (masking), hoặc vô hiệu hóa nút submit.
- React khuyến nghị sử dụng cách này trong hầu hết trường hợp.

Uncontrolled Component (Không được kiểm soát):
- Giá trị của form được lưu trữ bởi chính cấu trúc DOM (giống như HTML truyền thống).
- Bạn không dùng state, mà sử dụng ref (useRef) để "kéo" (read) giá trị ra từ DOM khi cần (ví dụ: lúc bấm nút Submit).
- Ưu điểm: Viết code ngắn gọn hơn, dễ tích hợp với các thư viện không phải React (như jQuery plugin), phù hợp cho các form cực kỳ đơn giản không cần validate phức tạp.