Form React chuẩn chỉnh: Zod & React Hook Form

Form là yếu tố cốt lõi của các sản phẩm B2B SaaS.

Hầu hết các lập trình viên đều xây dựng form sai cách. Họ sử dụng các controlled components. Điều này có nghĩa là họ liên kết mọi input với một hook useState.

Điều này gây ra các vấn đề về hiệu năng.

Nếu form của bạn có 20 trường, việc gõ một chữ cái sẽ kích hoạt việc re-render toàn bộ form. Gõ một cái tên có 10 chữ cái sẽ buộc phải re-render toàn bộ 10 lần. Điều này khiến ứng dụng của bạn chạy chậm trên các thiết bị cấu hình thấp.

Việc kiểm tra dữ liệu (validation) thủ công cũng là một vấn đề. Viết các câu lệnh "if" cho mọi trường dữ liệu rất lộn xộn và thiếu tính an toàn của TypeScript.

Bạn cần một cách tiếp cận tốt hơn.

Hãy sử dụng React Hook Form và Zod để khắc phục điều này.

React Hook Form sử dụng các uncontrolled inputs thông qua HTML refs. Dữ liệu được lưu trữ trong DOM. Form chỉ re-render khi thực sự cần thiết, chẳng hạn như khi có lỗi xuất hiện.

Zod đảm nhận việc validation. Nó định nghĩa chính xác cấu trúc (shape) của dữ liệu của bạn.

Dưới đây là quy trình làm việc:

  1. Định nghĩa một Zod schema. Đây đóng vai trò là nguồn sự thật duy nhất (single source of truth). Nó cung cấp cả runtime validation và các kiểu dữ liệu TypeScript.

  2. Sử dụng zodResolver. Điều này giúp kết nối React Hook Form với Zod schema của bạn.

  3. Sử dụng hàm register. Hàm này kết nối các input của bạn với form mà không gây ra việc re-render liên tục.

Lợi ích mang lại:

  • Không có độ trễ khi nhập liệu. Các form lớn vẫn hoạt động mượt mà.
  • An toàn về kiểu dữ liệu (Type safety). Dữ liệu của bạn khớp với các kỳ vọng của API.
  • Ít code hơn. Bạn không còn phải viết logic validation thủ công nữa.

Đừng cố gắng "đấu tranh" với React state nữa. Hãy sử dụng refs và schemas để xây dựng các form chuyên nghiệp.

Nguồn: https://dev.to/iprajapatiparesh/bulletproof-react-forms-zod-react-hook-form-205j