Build a Virtualized List with react-window (Fixed Size)

Question

Accepted Answer

**Requirements**
- Render a list of 100,000 items (e.g. 10k contacts) with fixed row height (e.g. 48px) inside a scrollable container of height 400px.
- Only mount DOM nodes for visible rows + overscan (e.g. 5 items above/below).
- Support dynamic data, scrollToIndex(index), and keyboard navigation (↑/↓).
- Show a scrollbar that reflects the full list height.

**Architecture**
```
outer div (overflow:auto, height:400) -> inner spacer (height = itemCount * rowHeight)
                                        -> absolute positioned visible slice (top = startIndex * rowHeight)
```
- Compute `startIndex = floor(scrollTop / rowHeight)`, `visibleCount = ceil(containerHeight / rowHeight) + overscan*2`.
- Slice `items.slice(startIndex, endIndex)` and render with `transform: translateY(offset)`.
- Or use `react-window` `FixedSizeList` — same math under the hood with `itemSize` + `itemCount`.

**What interviewers look for:** windowing math, spacer vs translate, overscan trade-off, memoizing row (`

Build a Virtualized List with react-window (Fixed Size)

Understand the problem

Attempt it yourself

Study the solution

Solution ready — 2 min read

Join the discussion

Discussion (0)

KEEP THE
STREAK ALIVE.

Understand the problem

Attempt it yourself

Study the solution

Solution ready — 2 min read

Join the discussion

Discussion (0)

KEEP THESTREAK ALIVE.

KEEP THE
STREAK ALIVE.