Quay lại danh sách case study
Quản lý trạng thái form phức tạp trên giao diện
Xây dựng logic validate và quản lý state cho form đăng ký nhiều bước.
Bối cảnh
Phát triển tính năng đăng ký tài khoản gồm 3 bước với nhiều trường nhập liệu có điều kiện phụ thuộc lẫn nhau.
Vấn đề cần xử lý
Mã nguồn bị rối do quản lý quá nhiều state riêng lẻ bằng useState trong React, dẫn đến việc render lại không cần thiết và khó validate dữ liệu.
Hướng xử lý đề xuất
Tập trung hóa state của form vào một đối tượng duy nhất, sử dụng useReducer hoặc thư viện hỗ trợ form để quản lý dữ liệu và logic validate rõ ràng hơn.
Câu trả lời mẫu khi phỏng vấn
Em nhận thấy việc dùng quá nhiều state riêng lẻ rất khó kiểm soát khi form lớn. Em sẽ gom chúng lại thành một object state hoặc dùng hook chuyên dụng để quản lý, đồng thời tách logic validate ra các hàm thuần túy để dễ kiểm thử.
Trade-off
Việc gom chung state có thể làm component render lại toàn bộ form nếu không tối ưu hóa bằng React.memo hoặc chia nhỏ component hợp lý.
Kết quả kỳ vọng
Mã nguồn gọn gàng hơn 40%, dễ dàng thêm mới các trường dữ liệu ở các phiên bản sau mà không sợ ảnh hưởng đến logic cũ.
Bài học khi trả lời phỏng vấn
Quản lý state trên client cần có chiến lược rõ ràng từ đầu để tránh tình trạng prop drilling và hiệu năng bị suy giảm.