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+.