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.

Controlled Component:
- The value of form elements (<input>, <select>, etc.) is fully controlled by React State.
- It requires a value prop and an onChange event handler to update the state.
- Pros: It is easy to perform real-time validation as the user types, format the input (masking), or conditionally disable submit buttons.
- React recommends this approach for most use cases.

Uncontrolled Component:
- The form data is handled by the DOM itself (like traditional HTML).
- Instead of state, you use a ref (useRef) to pull (read) the values directly from the DOM only when needed (e.g., on form submit).
- Pros: Requires less code, easier to integrate with non-React libraries (like jQuery plugins), and is suitable for very simple forms that do not need complex real-time validation.