Ask ChatGPT or Claude for "a list of products in React Native" and you'll get a FlatList that works. Scroll it with 500 items on a mid-range Android phone, though, and you'll see blank rows, jumpy scrolling and dropped frames.

The model isn't wrong. It just wasn't asked for speed. Here are the four fixes I ask for every time, and the prompt I paste with my component.

1. A stable keyExtractor , not the index

< FlatList data = { products } keyExtractor = { ( item ) => item . id } renderItem = { renderItem } />

Enter fullscreen mode

Exit fullscreen mode

AI often leaves the key out, or falls back to the index. When items are inserted, removed or re-sorted, index keys make React re-render rows that didn't change, and row state can end up attached to the wrong item.

2. A memoized row and a stable renderItem

const ProductRow = React . memo ( function ProductRow ({ item }: { item : Product }) { return ( < View style = { styles . row } > < Text style = { styles . title } > { item .…