Làm sao để hiển thị một danh sách dài mượt mà trên di động?

Đừng bao giờ render toàn bộ các dòng cùng lúc bằng ScrollView và map. Hãy dùng danh sách ảo hoá (virtualized list) chỉ mount các dòng gần vùng nhìn thấy.

Trong React Native, đó là FlatList, hoặc FlashList để tái sử dụng view tốt hơn.

Mẹo tinh chỉnh

• Dùng keyExtractor ổn định (id của item, không phải index).
• Giữ mỗi dòng nhẹ: bọc bằng React.memo và tránh tạo hàm hay style inline mới cho từng dòng.
• Cung cấp getItemLayout hoặc chiều cao cố định khi biết trước kích thước dòng, để danh sách khỏi phải đo.
• Điều chỉnh windowSize, initialNumToRender và maxToRenderPerBatch theo nội dung của bạn.
• Dùng ảnh đúng kích thước và có cache, vì ảnh lớn là nguyên nhân phổ biến gây giật.
• Phân trang bằng onEndReached, tránh tải hàng nghìn item.

Hãy kiểm chứng bằng performance monitor hoặc profiler trên thiết bị tầm trung thật, không chỉ trên simulator.