Đồng bộ hóa logic giữa React Web và React Native có thể là một thách thức, đặc biệt khi bạn muốn chia sẻ các tính năng như xác thực form, upload file hoặc trạng thái toàn cục. Cách tiếp cận đơn giản và hiệu quả là kết hợp một custom hook với một lớp trạng thái tập trung. Phương pháp này giúp giữ cho code của bạn sạch sẽ, dễ kiểm thử và có thể tái sử dụng trên cả hai nền tảng. 1. Xác định lớp trạng thái chung Bạn có thể sử dụng React Context kết hợp với một custom hook để cung cấp một provider duy nhất. Điều này cho phép bất kỳ component nào cũng có thể truy cập vào trạng thái chung mà không cần truyền prop qua nhiều cấp. 2. Xây dựng custom hook Tạo một hook như useSharedState. Hook này sẽ đọc từ context và cung cấp các hàm setter, đồng thời chấp nhận một key duy nhất để quản lý nhiều trạng thái trong cùng một store. 3. Triển khai provider Bọc ứng dụng của bạn trong SharedStateProvider. Provider này sẽ lưu trữ trạng thái trong một biến ref hoặc một bộ lưu trữ đơn giản như Zustand nếu bạn cần persistence. Điều này đảm bảo rằng cả React Web và React Native đều sử dụng cùng một instance. 4. Sử dụng hook trong cả hai nền tảng Trong component web: const [value, setValue] = useSharedState('myKey'); Trong component native: const [value, setValue] = useSharedState('myKey'); Cả hai đều nhận được cùng một trạng thái được đồng bộ hóa, bất kể nền tảng. 5. Thêm type an toàn với TypeScript Xác định một interface cho shape trạng thái và sử dụng Generic types cho key để TypeScript có thể kiểm tra kiểu dữ liệu trong cả hai ứng dụng. 6. Ví dụ thực tế: Xác thực form sử dụng hook để quản lý trạng thái xác thực form: const [formState, setFormState] = useSharedState('formErrors'); // Cập nhật khi người dùng nhập liệu const handleChange = (field, error) => { setFormState(prev => ({ ...prev, [field]: error })); }; Cả React Web và React Native đều có thể truy cập vào cùng một đối tượng formState mà không cần sử dụng các giải pháp riêng biệt. 7. Lời khuyên thực tế - Giữ cho logic của hook độc lập với nền tảng để bạn có thể tái sử dụng nó trên cả web và native. - Sử dụng các thư viện kiểm thử theo ngữ cảnh (ví dụ: React Testing Library) để kiểm thử hook trên cả hai nền tảng. - Tránh việc đồng bộ hóa quá nhiều trạng thái; chỉ chia sẻ những gì thực sự cần thiết để giữ cho hiệu suất ở mức cao. - Khi bạn cần các tác vụ bất đồng bộ như upload file, hãy sử dụng một custom hook như useUploadTask, hook này có thể được gọi từ cả React Web và React Native. Bằng cách áp dụng mẫu thiết kế này, bạn sẽ đơn giản hóa đáng kể quy trình phát triển đa nền tảng, giảm thiểu code trùng lặp và đảm bảo trải nghiệm người dùng nhất quán trên tất cả các ứng dụng của mình.