How would you render a list of 10,000 items efficiently?
Quick answer
Use virtualization (windowing): render only the rows visible in the viewport, recycling them on scroll. Libraries: react-window, @tanstack/react-virtual.
In detail
Rendering thousands of DOM nodes is slow regardless of React. Virtualization keeps the DOM tiny by mounting only the ~visible rows plus a small buffer and translating them as you scroll, so performance is independent of total data size. Combine with stable keys, memoized rows, and pagination/infinite scroll for the data layer.
import { FixedSizeList } from 'react-window';
<FixedSizeList height={500} itemSize={40} itemCount={items.length} width="100%">
{({ index, style }) => <div style={style}>{items[index].name}</div>}
</FixedSizeList>Why interviewers ask this: A go-to scaling question at product companies.
This is 1 of 118+ questions in the React Interview Kit
Get every question with detailed answers, follow-ups and real code — plus coding challenges and a last-minute revision sheet. One-time payment, instant access.
⚡ Get the React Interview Kit → ₹399