FlatList data, renderItem, and keyExtractor

WHAT THIS TESTS Whether you know FlatList's essential API and the role keys play in React's reconciliation, especially for a virtualized, frequently updated list.

A GOOD ANSWER COVERS The data prop is the array of items to render. The renderItem prop is a function that receives an object containing the current item and its index and returns the element for that row. The keyExtractor prop returns a unique, stable string for each item, typically item.id. React uses these keys to identify which elements correspond across renders. With stable keys it can reuse existing rows, move them when order changes, and only re-render what actually changed, preserving each row's internal state. Without unique keys, or with index-based keys, React matches by position; when items are inserted, removed, filtered, or reordered, state and views attach to the wrong items, causing flicker, incorrect content, and unnecessary remounts.

COMMON WRONG ANSWERS Using the array index as the key on a list that can change order or length, which is the classic bug. Returning a non-unique value, leading to React warnings and reconciliation errors. Forgetting keyExtractor entirely when items lack a key property. Putting heavy computation in keyExtractor; it should be cheap and pure.

LIKELY FOLLOW-UPS What goes wrong concretely if you use index as a key in a deletable list? How does keyExtractor interact with item recycling in virtualization? What if your data items genuinely have no unique id?

ONE CONCRETE EXAMPLE A todo list renders with keyExtractor returning item.id. The user deletes the second of five todos. Because keys are stable ids, React removes exactly that row and the others keep their checkbox state. If keyExtractor had returned the index, React would treat the deletion as the last row vanishing and shift content up, so a checked box could appear on the wrong todo and an input could keep stale text.