**Giới thiệu** Khi phát triển ứng dụng React trên nhiều nền tảng, việc đảm bảo tính nhất quán trong xác thực dữ liệu người dùng là một thách thức phổ biến. Quy trình validation riêng biệt trên Web và Native không chỉ làm tăng khối lượng code mà còn dễ dẫn đến sai sót. Trong bài viết này, chúng ta sẽ khám phá cách xây dựng một hệ thống validation duy nhất, có thể tái sử dụng cho cả React Web và React Native, giúp tiết kiệm thời gian và nâng cao độ tin cậy của ứng dụng. **Tại sao nên đồng bộ hóa validation?** - **Một nguồn chân lý duy nhất**: Quy tắc validation được lưu trữ ở một nơi, loại bỏ sự không đồng bộ. - **Bảo trì dễ dàng**: Thay đổi quy tắc một lần sẽ ảnh hưởng đến tất cả các nền tảng. - **Kiểm thử nhất quán**: Bạn có thể viết các unit test chạy được cho cả hai môi trường. **Các bước thực hiện** 1. **Định nghĩa schema validation** Sử dụng một thư viện như Yup hoặc Zod để tạo ra một schema duy nhất. Ví dụ: ```ts const schema = z.object({ email: z.string().email("Email không hợp lệ"), password: z.string().min(8, "Mật khẩu phải có ít nhất 8 ký tự"), }); ``` Schema này có thể được import ở cả file code Web lẫn Native. 2. **Tạo custom hook cho validation** ```ts function useFormValidation<T>(schema: z.Schema<T>) { const [errors, setErrors] = useState<Partial<T>>({}); const validate = (data: unknown) => { const result = schema.safeParse(data); if (result.success) { setErrors({}); return true; } else { setErrors(result.error.flatten().fieldErrors as Partial<T>); return false; } }; return { errors, validate }; } ``` Hook này hoạt động giống nhau trên cả hai nền tảng, giúp logic validation được tập trung. 3. **Tích hợp với thư viện điều khiển biểu mẫu** - **Web**: Sử dụng React Hook Form, kết hợp với `watch` để validate thời gian thực. - **Mobile**: Sử dụng `React Native Hook Form` (hoặc các thư viện điều khiển native tương đương), áp dụng hook validation tương tự. 4. **Hiển thị lỗi một cách thống nhất** Tạo một component hiển thị lỗi có thể tái sử dụng, ví dụ `<FieldError>`. Component này nhận `error` từ state validation và hiển thị thông báo phù hợp với từng nền tảng. 5. **Kiểm thử** Viết các test cho schema và hook validation. Vì schema là chung, bạn chỉ cần một bộ test cho cả hai nền tảng, sau đó import chúng vào các file test riêng biệt của Web và Native. **Ví dụ thực tế** Một ứng dụng đăng ký người dùng sử dụng schema trên, custom hook `useFormValidation`, và component `<FieldError>` sẽ hiển thị lỗi ngay lập tức khi người dùng nhập sai email hoặc mật khẩu, bất kể họ đang sử dụng trình duyệt hay thiết bị di động. **Lời khuyên thực tế** - **Tận dụng TypeScript**: Việc sử dụng generic cho hook validation giúp type-safe trên cả hai nền tảng. - **Tách biệt UI và logic**: Giữ cho component hiển thị lỗi độc lập với logic validation để dễ dàng thay đổi giao diện sau này. - **Document rõ ràng**: Thêm ghi chú trong file README về vị trí lưu trữ schema và cách import nó. **Kết luận** Bằng cách đồng bộ hóa validation thông qua một schema chung, custom hook, và component hiển thị lỗi, bạn có thể giảm đáng kể khối lượng code lặp lại, tăng tốc độ phát triển, và đảm bảo trải nghiệm người dùng mượt mà trên mọi nền tảng.