ReactControlled component là component mà giá trị input được quản lý bởi React state thông qua value và onChange — cho phép kiểm soát hoàn toàn dữ liệu và validate real-time. Uncontrolled component dùng ref để lấy giá trị trực tiếp từ DOM khi cần, ví dụ lúc submit form — đơn giản hơn nhưng ít kiểm soát hơn.
Trong thực tế, controlled component phù hợp cho form phức tạp cần validate, format hoặc hiển thị điều kiện. Uncontrolled component phù hợp cho form đơn giản hoặc khi tích hợp với thư viện bên ngoài không hỗ trợ React state.
A controlled component has its input value managed by React state via value and onChange — giving you full control over the data and enabling real-time validation.
- An uncontrolled component uses a ref to read the value directly from the DOM on demand (e.g., at submit time) — simpler but less control.
- In practice: controlled components are better for complex forms needing validation, formatting, or conditional display.
- Uncontrolled components are fine for simple forms or when integrating with third-party libraries that don't support React state.