Controlled và uncontrolled component khác nhau thế nào?

Phân biệt theo nơi giữ giá trị của form input:

• Controlled: React state là nguồn sự thật duy nhất. Input nhận value={state} và cập nhật qua onChange. React kiểm soát mọi lần gõ.
• Ưu: dễ validate tức thời, disable nút, format khi gõ, đồng bộ nhiều field.
• Nhược: mỗi phím gõ là một lần re-render (thường không đáng ngại).
• Uncontrolled: DOM tự giữ giá trị; React đọc khi cần qua ref (inputRef.current.value). Dùng defaultValue cho giá trị khởi tạo.
• Ưu: ít code, ít re-render; hợp form đơn giản, tích hợp thư viện non-React, hoặc <input type="file"> (luôn uncontrolled).

Khuyến nghị: mặc định dùng controlled cho hầu hết form vì kiểm soát và validate tốt hơn; chọn uncontrolled khi cần tối giản hoặc truy cập DOM trực tiếp.

Lưu ý: một input đừng để lẫn value và defaultValue — chọn một kiểu.