Vì sao FlatList với 10k items vẫn mượt? Tinh chỉnh `windowSize`/`maxToRenderPerBatch`/`getItemLayout` ra sao?

FlatList virtualize: chỉ mount items hiện đang trong "window" (vùng nhìn thấy + buffer hai phía), unmount items ngoài window khi scroll. Memory ổn định không phụ thuộc tổng số item.

Tham số quan trọng:

• windowSize (default 21): số "screenful" được render. 21 nghĩa là 1 screen visible + 10 screen trên + 10 screen dưới. Giảm xuống 5–10 cho list rất dài (10k+) → tiết kiệm RAM.

• maxToRenderPerBatch (default 10): số item render mỗi batch khi scroll. Tăng (15–20) cho hardware mạnh → giảm trắng khi scroll nhanh; giảm (5) cho hardware yếu → giữ FPS scroll.

• initialNumToRender (default 10): item render lúc mount đầu. Set bằng số item visible thực tế trên màn hình tiêu chuẩn.

• getItemLayout: nếu mọi item cao bằng nhau, cung cấp function:

getItemLayout={(_, index) => ({ length: 80, offset: 80 * index, index })}

→ FlatList biết offset trước khi render → scroll đến index xa, jump nhanh, không lag.

• removeClippedSubviews (default false iOS, true Android): unmount khỏi native view tree khi scroll qua. Đôi khi gây bug ảnh trắng — test kỹ.

Pattern thực tế: với list dài, cân nhắc thay bằng @shopify/flash-list — recycler view, performance gấp 2–3 lần FlatList trên list 10k+.

FlatList virtualizes: it mounts only items inside the "window" (visible area + buffer on each side) and unmounts items outside as you scroll. Memory is roughly constant regardless of total item count.

Key knobs:

• windowSize (default 21): number of "screenfuls" rendered. 21 means 1 visible screen + 10 above + 10 below. Drop to 5–10 for very long lists (10k+) to save RAM.

• maxToRenderPerBatch (default 10): items rendered per batch while scrolling. Raise (15–20) on strong hardware to reduce white-space during fast scroll; lower (5) on weak hardware to keep scroll FPS.

• initialNumToRender (default 10): items mounted on first paint. Match the count actually visible on a typical screen.

• getItemLayout: if every item has equal height, provide:

getItemLayout={(_, index) => ({ length: 80, offset: 80 * index, index })}

Now FlatList knows offsets before rendering — scrollToIndex on far rows is instant.

• removeClippedSubviews (default false iOS, true Android): detaches off-screen rows from the native view tree. Sometimes causes white-image glitches — test carefully.

Real-world pattern: for very long lists, consider @shopify/flash-list — a recycler view that is 2–3x faster than FlatList on 10k+ items.