React NativeremoveClippedSubviews là prop của ScrollView/FlatList, mặc định false iOS và true Android. Khi bật, RN tách (detach) native view ra khỏi view hierarchy khi nó scroll khuất khỏi viewport, gắn lại khi scroll vào.
Lợi:
- Giảm số UIView/Android.View trong tree → giảm work cho compositor mỗi frame.
- List rất dài (>50 items mỗi viewport) thấy FPS scroll cải thiện 5–15%.
Trade-off / bug:
- Image trắng: Image sẽ unload khi clipped → khi scroll lại, ảnh phải reload từ cache. Nếu cache miss (vd remote URL không có disk cache), thấy flash trắng.
- Animation reset: Animated value gắn vào view bị clipped sẽ pause/reset.
- TextInput focus: input bị clipped có thể mất focus khi scroll.
- Layout glitch: trên Android cũ (<8.0), đôi khi item bị "ghost" hoặc layout shift sai.
Đo cụ thể:
1. React DevTools Profiler hoặc Systrace — đo render time mỗi commit.
2. So sánh peak memory giữa on/off → nếu chênh nhỏ, không đáng tắt feature ổn định.
3. Test scroll fast trên device thật + ảnh remote → nếu thấy flash, tắt và tìm cách khác (thay FlatList bằng FlashList).
Khuyến nghị: mặc định true Android cho list lớn; false cho list có TextInput hoặc animation chạy. Trên 2026 với New Architecture + Fabric, prop này ít cần thiết hơn vì Fabric quản lý view tree hiệu quả hơn.
removeClippedSubviews is a ScrollView/FlatList prop, defaulting to false on iOS and true on Android. When enabled, RN detaches native views from the hierarchy as they scroll out of the viewport and re-attaches them on the way in.
Wins:
- Fewer UIViews/Android.Views in the tree → less compositor work per frame.
- Very long lists (50+ items per viewport) see 5–15% scroll FPS gains.
Trade-offs / bugs:
- White images: images unload when clipped — if the cache misses on re-attach (e.g. remote URL without disk cache), you see a white flash.
- Animation reset: Animated values bound to a clipped view pause/reset.
- TextInput focus: a clipped input can lose focus on scroll.
- Layout glitches: older Android (<8.0) sometimes shows ghost rows or layout shift.
How to measure:
1. React DevTools Profiler or Systrace — render time per commit.
2. Compare peak memory on/off → if the gap is small, do not give up stability.
3. Fast-scroll on a real device with remote images — if you see flashes, turn it off and try a different approach (swap FlatList for FlashList).
Recommendation: keep the default true on Android for large lists; false for lists with TextInput or running animations. With the New Architecture + Fabric in 2026, this prop matters less because Fabric manages the view tree more efficiently.