Form phức tạp (20+ fields), cách tổ chức state hiệu quả?

Với form nhiều fields, giải pháp tối ưu nhất là dùng React Hook Form vì nó hoạt động theo cơ chế uncontrolled components, chỉ re-render field nào thay đổi thay vì toàn bộ form — performance tốt hơn đáng kể so với controlled approach.

Kết hợp Zod schema để validate type-safe, cấu hình bằng pattern useForm({ resolver: zodResolver(schema) }) và bọc trong FormProvider để các nested components truy cập form state dễ dàng. Nếu form quá dài nên chia thành sections hoặc multi-step wizard, mỗi step validate riêng trước khi cho chuyển sang step tiếp theo.

Trong trường hợp cần logic state phức tạp hơn như conditional fields phụ thuộc lẫn nhau, có thể kết hợp thêm useReducer để quản lý các business rules.