Tối ưu hiệu suất React với useMemo
Khi xây dựng ứng dụng React, việc tối ưu hiệu suất thường bị xem nhẹ — cho đến khi ứng dụng của bạn bắt đầu chậm lại. Một vấn đề phổ biến là việc tính toán tốn kém xảy ra trên mỗi lần render, ngay cả khi chúng không cần thiết.
Trong bài viết này, tôi sẽ cho bạn thấy một ví dụ thực tế về cách useMemo có thể giúp tối ưu hóa ứng dụng của chúng ta qua việc so sánh hai thành phần:
- Không dùng useMemo ❌ → Lọc xảy ra trên mỗi lần render
- Có dùng useMemo ✅ → Lọc chỉ xảy ra khi tìm kiếm thay đổi
🐢 Không dùng useMemo
Dưới đây là một ví dụ đơn giản với 5,000 người dùng và một thanh tìm kiếm.
Mỗi lần chúng ta gõ gì đó hoặc thậm chí nhấn một nút không liên quan đến tìm kiếm, React sẽ chạy lại logic lọc trên tất cả 5,000 người dùng.
👉 Hãy thử nhấn nút Tăng Số Lượng — mặc dù nó không liên quan đến tìm kiếm, nhưng bộ lọc vẫn chạy lại, lãng phí tài nguyên CPU.
⚡ Có dùng useMemo
Bây giờ, hãy tối ưu hóa nó với useMemo.
Chúng ta sẽ ghi nhớ danh sách đã lọc để React chỉ tính toán lại khi tìm kiếm thay đổi, không phải khi trạng thái không liên quan (số lượng) thay đổi.
👉 Bây giờ, hãy mở bảng điều khiển và thử lại. Bạn sẽ thấy “Đang lọc người dùng…” chỉ được ghi lại khi bạn thay đổi đầu vào tìm kiếm, không khi bạn nhấn nút. 🎉
🧠 Khi nào nên sử dụng useMemo
✅ Tính toán tốn kém (như lọc, sắp xếp, tính toán phức tạp)
✅ Khi bạn nhận thấy việc render lại tác động đến hiệu suất
✅ Đối với danh sách, bảng hoặc các thành phần có nhiều tìm kiếm
⚠️ Đừng lạm dụng — chính useMemo cũng thêm một chút chi phí. Hãy sử dụng ở những nơi bạn biết việc tính toán lại là tốn kém.
🚀 Điểm mấu chốt
Với chỉ một hook (useMemo), chúng ta đã tránh được những tính toán không cần thiết và làm cho ứng dụng của mình hiệu quả hơn.
Các tối ưu hóa hiệu suất như thế này có thể có vẻ nhỏ, nhưng ở quy mô lớn (dữ liệu lớn, giao diện nặng), chúng tạo ra sự khác biệt lớn.
💡 Còn bạn thì sao? Bạn đã từng gặp vấn đề về hiệu suất trong các ứng dụng React của mình chưa? useMemo hoặc useCallback đã giúp bạn khắc phục chúng như thế nào?
👇 Hãy chia sẻ suy nghĩ của bạn trong phần bình luận!
Thực hành tốt nhất
- Giảm thiểu sử dụng useMemo: Chỉ sử dụng khi cần thiết để tránh chi phí tính toán không cần thiết.
- Theo dõi hiệu suất: Sử dụng các công cụ phân tích để theo dõi hiệu suất ứng dụng và xác định các điểm nghẽn.
Cạm bẫy thường gặp
- Lạm dụng useMemo: Sử dụng quá nhiều có thể gây ra hiệu suất kém hơn do chi phí tính toán.
- Không cập nhật dependencies: Đảm bảo rằng các dependencies trong useMemo được cập nhật đúng cách để tránh lỗi.
Mẹo nâng cao hiệu suất
- Sử dụng useCallback kết hợp: Kết hợp useMemo với useCallback để tối ưu hóa các hàm xử lý sự kiện.
- Giảm số lượng render: Sử dụng React.PureComponent hoặc React.memo để ngăn chặn render không cần thiết.
Giải quyết sự cố
- Không thấy cập nhật: Kiểm tra xem dependencies đã được thiết lập đúng chưa.
- Thời gian render lâu: Xem xét tối ưu hóa các thành phần khác trong ứng dụng.
FAQ
- useMemo có phải là tiêu chuẩn trong mọi ứng dụng không?
Không, chỉ nên sử dụng khi cần thiết và khi có tính toán tốn kém. - Có thể sử dụng useMemo trong các thành phần lớp không?
Không, useMemo chỉ có thể được sử dụng trong các thành phần hàm.
