1. 16:06 10/10/2026
Khi phát triển các ứng dụng đa nền tảng với React, việc chia sẻ logic xử lý upload file thường là một thách thức. Bằng cách kết hợp React Hook Form để quản lý biểu mẫu, React Query để đồng bộ hóa dữ liệu và Context API để cung cấp trạng thái chung, bạn có thể tạo ra một quy trình upload file thống nhất, dễ kiểm thử và bảo trì cho cả Web và Mobile.
## 1. Thiết lập biểu mẫu với React Hook Form
- Sử dụng `useForm` để khai báo các schema validation phù hợp với từng nền tảng.
- Xác định một component `UploadField` bao bọc `input type="file"` với `register` từ React Hook Form.
- Tận dụng tính năng `watch` để theo dõi file được chọn và hiển thị tên file hoặc hình xem trước trong thời gian thực.
## 2. Tạo một Context chung
```js
const UploadContext = createContext();
const UploadProvider = ({ children }) => {
const [files, setFiles] = useState([]);
const [progress, setProgress] = useState(0);
const [error, setError] = useState(null);
const uploadFile = async (file) => { /* gọi API */ };
return (
<UploadContext.Provider value={{ files, progress, error, uploadFile }}>
{children}
</UploadContext.Provider>
);
};
```
Cả React Web và React Native đều có thể sử dụng `UploadContext.Consumer` hoặc hook tùy chỉnh (`useUpload`) để truy cập trạng thái upload.
## 3. Đồng bộ hóa với React Query
- Xác định một query key chung như `[upload, id]` để theo dõi danh sách file đã upload.
- Sử dụng `useMutation` để thực hiện các thao tác CRUD; React Query sẽ tự động cập nhật cache và đồng bộ UI trên cả hai nền tảng.
- Tận dụng `onSuccess` để thêm file mới vào danh sách hiện tại và hiển thị thông báo thành công.
## 4. Tích hợp với React Native
- Thay thế `input` HTML bằng `TouchableOpacity` + `DocumentPicker` hoặc `ImagePicker`.
- Sử dụng lại `UploadField` đã được tạo sẵn; chỉ cần điều chỉnh các phương thức xử lý sự kiện nền tảng.
- Triển khai progress bar bằng cách sử dụng `Animated` (Web) hoặc `ProgressBarAndroid` (Native).
## 5. Mẹo bảo trì
- Tách biệt các hàm helper upload thành một module riêng để dễ dàng thay đổi API.
- Viết các unit test cho mutation và context, đảm bảo logic hoạt động giống nhau trên cả hai nền tảng.
- Sử dụng các biến môi trường để trỏ đến cùng một endpoint backend.
Bằng cách áp dụng cách tiếp cận này, bạn sẽ giảm đáng kể mã lặp lại, tăng tốc độ phát triển và mang lại trải nghiệm upload file mượt mà, nhất quán cho người dùng trên mọi thiết bị.