Virtualized Lists

keyExtractor returns a unique, stable string for each FlatList item; the list uses it as the React key and to cache that cell's measurements. Without it, FlatList tries item.key, then item.id, then falls back to the index and warns about missing keys.

Passing onRefresh makes a React Native FlatList add a standard RefreshControl; refreshing is the controlled boolean that shows the indicator. Set refreshing true when the reload starts and false when it ends, and replace the first page rather than appending.

A React Native SectionList takes sections: an array of objects, each with a required data array plus any fields you add, such as title. renderItem receives item, index within its section, section and separators; renderSectionHeader and renderSectionFooter receive the section.

FlatList is a PureComponent, so it skips re-rendering when its props are shallowly equal. If renderItem depends on state outside data, such as a selected id, pass that state as extraData so the list re-renders and rows see the change.

FlatList's onEndReached fires once per content length while the list sits near its end, so a mounting footer, settling row heights or scrolling out and back re-fires it. Guard the loader with a synchronous in-flight ref and a hasMore flag.

windowSize sets how many viewport lengths of rows stay mounted (default 21); initialNumToRender sets how many rows the first render mounts (default 10); maxToRenderPerBatch caps the new rows added per incremental batch (default 10).

The fling outruns the fill rate: rows beyond the render window are empty spacers until JavaScript renders the next batch. Lighter rows, getItemLayout, larger batches and a wider window help, costing JavaScript-thread time and memory.

In a React Native FlatList, ItemSeparatorComponent renders between items but not above the first or below the last; ListHeaderComponent and ListFooterComponent render before and after all items and scroll with them; ListEmptyComponent renders when data is empty.

When a FlatList re-renders, every mounted cell calls renderItem again, which can mean hundreds of rows. Wrapping the row in React.memo lets rows with unchanged props skip rendering, so one updated item re-renders one row.

FlashList's getItemType(item, index) labels each item with a type, and cells are recycled only between items of the same type. Without it, a sponsored-banner cell can be reused for a listing card, forcing React to rebuild its subtree.

FlashList v2 runs only on the New Architecture, measures rows itself so estimatedItemSize and the other size estimates are gone, turns MasonryFlashList into a masonry prop, types refs as FlashListRef, and enables maintainVisibleContentPosition by default.

With numColumns above 1, a React Native FlatList groups items into row views of that many items, filling rows left to right. It cannot be combined with horizontal, and changing numColumns after mount throws; change the list's key to remount it instead.

An inverted React Native FlatList flips its scroll container with a -1 scale transform and flips every cell back, so data[0] renders at the bottom. The logical end is the visual top, so onEndReached loads older comments.

stickySectionHeadersEnabled defaults to true on iOS and false on Android, following each platform's convention. Set it explicitly on the React Native SectionList to get the same behaviour on both, and give headers an opaque background.

getItemLayout returns each row's length and offset from the data, so FlatList can skip measuring rendered cells and size spacers exactly. It suits rows whose sizes are known in advance; wrong offsets cause jumping content and misplaced scrollToIndex targets.

removeClippedSubviews detaches native views outside the viewport from the native hierarchy to cut drawing work. FlatList defaults it to true on Android and false on iOS; transforms or absolute positioning can make visible content disappear.

FlashList reuses a mounted cell for a new listing, and useState's initial value is read only at mount, so the previous listing's favourite flag survives. Derive the flag from data, or use useRecyclingState keyed on item.id.

FlatList only knows the offsets of rows it has measured. scrollToIndex to an unmeasured row throws unless getItemLayout or onScrollToIndexFailed is set; the failure callback lets you scroll near the row and retry once it renders.

The late page-3 response lands after the refresh has reset the feed, so stale stories are appended to a fresh page 1 and the page cursor skips ahead. Tag requests with a generation counter, drop mismatches, and block paging while refreshing.

Flatten grouped data into one array of header and item rows when the target list has no sections API, such as FlashList, or you want one index space. You then branch in renderItem, keep keys distinct and compute stickyHeaderIndices yourself.

scrollToLocation({sectionIndex, itemIndex}) converts the pair into a flattened index where every section also has a header and footer slot, so itemIndex 0 lands on the section header. With sticky headers it adds the header height to viewOffset for itemIndex above 0.

In FlashList v2, overrideItemLayout sets layout.span for an item, so a featured listing can fill two columns of a numColumns grid. Use the masonry prop when cells have different heights and columns should grow independently instead of in aligned rows.

In a React Native SectionList, ItemSeparatorComponent renders between items within a section only, while SectionSeparatorComponent renders before a section's first item and after its last. Both receive highlighted, section and leading/trailing item and section props when passed as components.

A scroll view keeps its offset from the top, so rows inserted above push the story being read downward. maintainVisibleContentPosition makes React Native shift the offset so the first visible row at or after minIndexForVisible stays put.