Build a Variable-Size Virtualized Feed (Dynamic Heights)

Question

Accepted Answer

**Requirements**
- Same 100k list but each row has variable height (text + optional image). Container height 600px.
- Measure each rendered row with `ResizeObserver` and cache heights in `Map<index, height>`.
- Estimate unmeasured rows (e.g. 80px avg) and correct scrollbar as measurements arrive.
- Support `VariableSizeList` from react-window or `react-virtuoso` out-of-the-box.

**Architecture**
- `heightCache` + `estimatedHeight`. `getItemSize(i) => cache.get(i) ?? estimated`.
- Cumulative offsets via prefix sum; binary search to find startIndex from scrollTop.
- On `ResizeObserver` callback, update cache and recompute total height; if delta, adjust scroll.

**What interviewers look for:** dynamic measurement, cache invalidation, binary search over offsets, jank-free correction, `AutoSizer` to fill parent.

**Reference implementation**
```jsx
import { VariableSizeList } from "react-window";
import AutoSizer from "react-virtualized-auto-sizer";

function useHeightCache(estimated = 80)

Build a Variable-Size Virtualized Feed (Dynamic Heights)

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.