1. 13:13 13/10/2026
Tối ưu hiệu năng render là yếu tố then chốt để mang lại trải nghiệm mượt mà cho cả web và mobile. Dưới đây là những kỹ thuật thực tế đã được áp dụng thành công trong nhiều dự án production.
## 1. Hiểu rõ cơ chế re‑render
React chỉ cập nhật DOM (hoặc native view) khi state hoặc props thay đổi. Tuy nhiên, component con thường bị render lại dù dữ liệu không đổi. Việc nắm rõ quy tắc so sánh tham chiếu giúp bạn quyết định đâu cần memoization.
## 2. Sử dụng React.memo, useMemo và useCallback
- **React.memo**: Bọc component hàm để ngăn render lại khi props không đổi (so sánh shallow).
- **useMemo**: Cache kết quả tính toán nặng (ví dụ: lọc, sắp xếp danh sách lớn).
- **useCallback**: Giữ tham chiếu hàm ổn định để tránh truyền callback mới vào component con đã memo.
Ví dụ thực tế: một màn hình danh sách sản phẩm với bộ lọc giá. Chỉ khi `filterValue` thay đổi mới tính toán lại `filteredProducts` bằng `useMemo`; các component `ProductItem` được wrap `React.memo` và nhận `onPress` từ `useCallback`.
## 3. Virtualized List cho dữ liệu lớn
- **Web**: `react-window` hoặc `react-virtualized` chỉ render các item nằm trong viewport.
- **React Native**: `FlatList` với `initialNumToRender`, `maxToRenderPerBatch`, `windowSize` và `getItemLayout` để tránh đo lường layout.
Kết hợp virtualized list với memoization giúp giảm thời gian frame từ 30 ms xuống dưới 16 ms ngay cả khi danh sách có 10 000 mục.
## 4. Profiling và đo lường liên tục
- Sử dụng **React DevTools Profiler** (web) và **Flipper + React DevTools** (native) để phát hiện component render thừa.
- Thiết lập CI gate: nếu tổng thời gian render của màn hình chính vượt 100 ms thì build fail.
## 5. Checklist nhanh trước khi release
- [ ] Tất cả component con đã có `React.memo` nơi cần.
- [ ] Các hàm callback dùng `useCallback`.
- [ ] Danh sách lớn dùng virtualized list.
- [ ] Không có side‑effect nặng trong render (network, localStorage).
- [ ] Profiler không báo warning “Did not render”.
Áp dụng hệ thống này giúp team giảm 40 % thời gian render trung bình và tăng điểm Lighthouse/Performance trên mobile lên 90+.