memo và useMemo là hai Hook hữu ích trong React Native giúp tối ưu hóa hiệu suất bằng cách ghi nhớ (memoization) các giá trị và tránh render lại các component không cần thiết. Tuy nhiên, chúng có những điểm khác biệt về cách sử dụng và chức năng.
Bài viết này sẽ so sánh chi tiết về memo và useMemo, bao gồm ưu điểm, khuyết điểm và ví dụ cụ thể để giúp bạn lựa chọn công cụ phù hợp cho từng trường hợp.
- memo:
memo là Higher-Order Component (HOC) giúp ghi nhớ kết quả render của một component. Khi props của component không thay đổi, memo sẽ ngăn chặn việc render lại component, giú
Ưu điểm:
- Dễ sử dụng, chỉ cần wrap component bằng memo.
- Hiệu quả cao trong việc ngăn chặn render lại component không cần thiết.
- Tăng hiệu suất ứng dụng, đặc biệt hữu ích với các component có render phức tạp.
Khuyết điểm:
- Chỉ so sánh props shallowly (so sánh mức độ đầu tiên). Nếu props là object hoặc array, thay đổi bên trong object/array không được memo nhận biết, dẫn đến render lại component dù không cần thiết.
- Không thể kiểm soát chi tiết việc render lại component.
- Khó sử dụng với các component có logic render phức tạp.p cải thiện hiệu suất.
Ví dụ:
- useMemo:
useMemo là Hook giúp ghi nhớ giá trị trả về của một hàm. Khi các dependencies của useMemo không thay đổi, giá trị trả về sẽ được lưu trữ và sử dụng lại, tránh việc tính toán lại hàm.
Ưu điểm:
- Linh hoạt hơn memo, cho phép ghi nhớ giá trị trả về của bất kỳ hàm nào.
- So sánh dependencies chi tiết, đảm bảo chỉ tính toán lại hàm khi cần thiết.
- Dễ dàng kiểm soát việc render lại component bằng cách sử dụng dependencies.
Khuyết điểm:
- Cấu trúc cú pháp phức tạp hơn memo.
- Yêu cầu lập trình viên hiểu rõ về dependencies để sử dụng hiệu quả.
Ví dụ:
So sánh ưu điểm và khuyết điểm
| Tính năng | memo | useMemo |
| Dễ sử dụng | Dễ sử dụng | Khó sử dụng hơn |
| Hiệu quả | Hiệu quả cao | Hiệu quả cao |
| Kiểm soát render | Ít kiểm soát | Dễ dàng kiểm soát |
| So sánh props | Shallow comparison | Deep comparison |
| Phù hợp với | Component có render phức tạp | Hàm tính toán phức tạp |
Lựa chọn memo và useMemo thế nào cho hợp lý?
- Sử dụng memo: khi bạn muốn ngăn chặn render lại component dựa trên props thay đổi.
- Sử dụng useMemo: khi bạn muốn ghi nhớ giá trị trả về của một hàm tính toán phức tạp.
Có thể thấy, memo và useMemo là hai công cụ hữu ích giúp tối ưu hóa hiệu suất trong React Native. Lựa chọn công cụ phù hợp cho từng trường hợp sẽ giúp bạn cải thiện hiệu suất ứng dụng và nâng cao trải nghiệm người dùng.
Lưu ý:
- Bài viết này chỉ tóm tắt những điểm chính về memo và useMemo. Bạn có thể tham khảo tài liệu chính thức của React Native để hiểu rõ hơn về cách sử dụng và các trường hợp ngoại lệ.
- Việc sử dụng memo và useMemo cần được cân nhắc kỹ lưỡng để tránh ảnh hưởng đến logic ứng dụng.
Giảng viên Nguyễn Ngọc Chấn
Bộ môn CNTT
FPT Polytechnic TP HCM
