Trung BìnhReact Native iconReact Native

`FlatList` vs `SectionList` vs `ScrollView` — khi nào chọn cái nào?

ScrollView: render toàn bộ children ngay lập tức. Dùng cho UI ngắn (form, profile screen), không có pattern data-driven. Chậm và tốn memory với list >20 items.

FlatList: virtualized list — chỉ render items đang visible + windowSize buffer. Lazy mount và unmount khi scroll qua. API: data, renderItem, keyExtractor. Dùng cho list đồng nhất một loại item (chat, feed).

SectionList: như FlatList nhưng có header/footer cho từng section. Data shape [{ title, data: [...] }]. Dùng cho contact list, settings có grouping.

Hậu quả nếu chọn sai:
- ScrollView 1000 items: app freeze 5–10s lúc mount, RAM spike, scroll lag.
- FlatList với initialNumToRender={1000}: tương đương ScrollView, mất ý nghĩa virtualize.
- Lồng FlatList trong ScrollView: VirtualizedList warning, virtualization không hoạt động (parent extend chiều cao vô hạn). Nếu cần list trong scroll, dùng <FlatList ListHeaderComponent={...} ListFooterComponent={...}>.

Xem toàn bộ React Native cùng filter theo level & chủ đề con.

Mở danh sách React Native