Chuyên sâu Form: Controlled vs Uncontrolled Components

Phân tích ưu/nhược điểm, khi nào dùng useRef vs useState và các bế tắc (Issues) của Form truyền thống.

Core Mental Model

Controlled Form = React giữ quyền kiểm soát State ở từng keystroke. Uncontrolled Form = Trình duyệt (DOM) giữ quyền kiểm soát value, React chỉ đọc qua useRef.

Key Takeaways & Principles

Controlled Component (useState + onChange): Phù hợp cho realtime input validation, dynamic field masking, dependent inputs. Nhược điểm: Re-render component ở MỌI phím gõ.

Uncontrolled Component (useRef + FormData): giá trị nằm trong DOM nên mỗi phím gõ không tự lên lịch React render. Phù hợp khi chỉ cần đọc dữ liệu lúc submit; live validation và đồng bộ UI sẽ khó hơn.

Bế tắc của Form truyền thống: (1) Form lớn 100 inputs bị giật lag re-render; (2) Xử lý pending status thủ công tốn code; (3) Server validation error mapping phức tạp; (4) Không có JS thì form hỏng.

Giải pháp React: Dùng Form Actions + useActionState kết hợp ưu điểm của cả 2 mô hình!

React Component Architecture & Forms

intermediate

18 phút

#Forms

#Controlled

#Uncontrolled