FlashList vs FlatList: Kỹ thuật tăng 500% tốc độ cuộn danh sách trong React Native

Khi hiển thị một danh sách gồm hàng ngàn sản phẩm hay bài viết trong React Native, component FlatList mặc định rất dễ gặp hiện tượng **xuất hiện các ô khoảng trắng (Blank Spaces)** khi người dùng cuộn nhanh. Thư viện FlashList do Shopify phát triển giải quyết triệt để vấn đề này với tốc độ cuộn **nhanh gấp 5 lần (500%)**!

1. Tại sao FlatList mặc định lại bị chậm?

Khi cuộn qua một phần tử, FlatList sẽ **hủy bỏ (Unmount) phần tử cũ và khởi tạo (Mount) một phần tử mới hoàn toàn**. Việc liên tục Mount/Unmount phần tử làm luồng JS Thread bị quá tải ➔ Xuất hiện khoảng trắng nhảy giật.

2. Bí thuật Cell Recycling của FlashList (Shopify)

FlashList áp dụng kỹ thuật Cell Recycling (Tái sử dụng ô hiển thị) tương tự như RecyclerView trên Android native hay UICollectionView trên iOS. Thay vì hủy bỏ ô cũ, FlashList giữ nguyên khung phần tử và **chỉ thay thế dữ liệu bên trong**, giúp tiết kiệm 80% chi phí khởi tạo DOM!

3. Thay thế FlatList bằng FlashList chỉ trong 1 phút

Cú pháp của FlashList giống hệt 100% so với FlatList, bạn chỉ cần thay đổi tên component và thêm prop estimatedItemSize:

import { FlashList } from '@shopify/flash-list';

export default function ProductList({ products }) {
  return (
    <FlashList
      data={products}
      renderItem={({ item }) => <ProductCard product={item} />}
      estimatedItemSize={100} // Chiều cao ước tính của 1 ô
    />
  );
}

4. 3 Lưu ý khi dùng FlashList để đạt hiệu năng tối đa

• Khai báo estimatedItemSize chính xác: Giúp FlashList tính toán vùng đệm dành chỗ chuẩn xác.
• Tránh tạo inline function trong renderItem: Bọc item component bằng React.memo.
• Tránh sử dụng prop keyExtractor tùy tiện: Để FlashList tự quản lý key tái sử dụng.

Kết luận

Thay thế FlatList bằng FlashList là bước nâng cấp đơn giản nhất mang lại hiệu năng cuộn danh sách thần tốc cho ứng dụng React Native. Uwmee Software chuẩn hóa 100% hiển thị danh sách app React Native bằng Shopify FlashList. Đọc thêm bài viết tối ưu hiệu năng ứng dụng di động.