Writing React lists that stay fast
Three habits that keep long lists smooth: stable keys, cheap rows, and rendering only what is visible.
Long lists are where a small inefficiency turns into a visible stutter. Here is what I check first.
Use stable keys
A key tells React which row is which. An array index works until the list is reordered, then state jumps to the wrong row.
jsx
{items.map((item) => (
<Row key={item.id} item={item} />
))}
Keep rows cheap
- Move formatting out of render when the input has not changed.
- Memoize rows that receive the same props most of the time.
- Avoid creating new objects or functions inside the loop.
Render only what is visible
Past a few hundred rows, virtualization wins. Libraries such as TanStack Virtual keep the DOM small while the list feels endless.
Measure before optimizing. The React profiler shows which row actually re-renders.