Core concepts
Rendering lists, keys & virtualization
Keys, why index keys break, and rendering huge lists efficiently.
Render collections with .map() returning one element each; each needs a stable, unique key so reconciliation can match elements across renders.
Keys are coat-check tickets; hand out seat numbers (indexes) instead and shuffling the queue gives people the wrong coats.
Key concepts
1
Using the array index as a key breaks on insert/reorder: React reuses the wrong DOM node, so input values and focus jump to the wrong row. Use a real id from your data.
array index
2
For very large lists, rendering thousands of nodes is slow — virtualization (react-window/react-virtual) renders only the visible window, keeping the DOM tiny.
very large listsvirtualization
3
Pitfall: generating keys with Math.random() — a new key every render forces full remounts. Interview angle: "what actually goes wrong with index keys?" — give the checkbox-in-a-reordered-list example; state attaches to position, not identity.
Pitfall:Interview angle:Math.random()
jsx
import { FixedSizeList } from 'react-window';
<FixedSizeList height={400} itemCount={rows.length} itemSize={36} width="100%">
{({ index, style }) => (
<div style={style} key={rows[index].id}>{rows[index].name}</div>
)}
</FixedSizeList>