1. 12:59 12/10/2026
Hiệu năng là yếu tố quyết định trải nghiệm người dùng trên cả web và mobile. Dưới đây là ba kỹ thuật cốt lõi bạn có thể áp dụng ngay hôm nay để giảm thiểu render không cần thiết và tăng tốc độ tải trang.
1. Memoization với React.memo, useMemo và useCallback
- React.memo: Bọc component con để chỉ render lại khi props thay đổi thực sự. Ví dụ: const UserCard = React.memo(({name, avatar}) => …).
- useMemo: Cache kết quả tính toán nặng (ví dụ: lọc danh sách 10 000 mục) để tránh chạy lại mỗi lần render cha.
- useCallback: Giữ tham chiếu hàm ổn định, tránh tạo hàm mới khiến component con bị re‑render.
Lưu ý: Chỉ dùng khi profiling cho thấy bottleneck; lạm dụng sẽ tăng bộ nhớ.
2. Virtualization (danh sách ảo) cho dữ liệu lớn
- Web: react-window hoặc react-virtualized render chỉ các item nằm trong viewport. Ví dụ: FixedSizeList với height=600, itemCount=5000, itemSize=50.
- React Native: FlashList (từ @shopify/flash-list) thay thế FlatList, tự động đo lường và reuse view, giảm GC spikes.
Kết quả: Thời gian render danh sách 5 000 mục giảm từ ~1.2 s xuống <200 ms.
3. Lazy Loading và Code Splitting
- Web: React.lazy + Suspense cho route hoặc component nặng (biểu đồ, editor). Kết hợp với dynamic import của Webpack/Vite để tách bundle.
- React Native: Sử dụng react-native-dynamic-import hoặc Expo Router lazy routes. Chỉ tải bundle khi màn hình được điều hướng tới.
Mẹo: Preload các route quan trọng (dashboard, profile) bằng link rel=preload hoặc useEffect gọi import() khi app idle.
Checklist nhanh trước khi deploy:
- Chạy React DevTools Profiler, tìm component render >16 ms.
- Áp dụng React.memo cho các component pure.
- Thay FlatList bằng FlashList nếu danh sách >200 item.
- Tách bundle theo route, đo lường First Contentful Paint (FCP) và Time to Interactive (TTI).
Áp dụng ba kỹ thuật trên theo thứ tự ưu tiên: memoization → virtualization → lazy loading. Bạn sẽ thấy cải thiện rõ rệt về độ mượt và thời gian tải mà không cần thay đổi kiến trúc tổng thể.