React Native: What are VirtualizedList and FlatList internals in React Native?

VirtualizedList — base class for FlatList and SectionList.

How it works:

• Only renders visible items.
• Uses a window for offscreen items.
• Recycles components.
• Lazy loads data.

Window size:

• windowSize — number of items to render (visible + offscreen).
• Default: 21 (10 above + 10 below + 1 visible).
• Higher = more memory, smoother scroll.
• Lower = less memory, potential blank areas.

Key internal mechanisms:

1. Cell measurement via onLayout.
2. Spacer cells for virtualization.
3. Cell recycling via ListEmptyComponent.
4. Batch rendering via maxToRenderPerBatch.

1<FlatList
2  data={items}
3  renderItem={renderItem}
4  windowSize={5}          // 5 screens worth
5  maxToRenderPerBatch={10} // items per batch
6  updateCellsBatchingPeriod={50} // ms between batches
7  removeClippedSubviews={true}
8/>