Build a Variable-Size Virtualized Feed (Dynamic Heights)

Q: Build a Variable-Size Virtualized Feed (Dynamic Heights)

**Target Audience:** React developers who can already build a fixed-height virtualized list (if not, start with [Build a Virtualized List](/interview-question/build-a-virtualized-list)) and now face rows whose height is only known after rendering. **Difficulty:** Hard > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. The jsdom output in the Verified section comes from running the solution on React 19.3.1 with a fake layout engine and a hand-flushed ResizeObserver stub (jsdom has neither); the real numbers come from the same code in headless Chromium 141, including a control run with anchoring switched off. ## 1. Why This Even Matters — A Story First Imagine a bookshelf where every book has a different thickness, and a friend asks you to keep exactly the books in front of their eyes on the shelf while they walk past. With identical books you could compute "book number 312 is in front of you" from the distance walked. With mixed thickness

The problem

Question presented to candidate: "Our social feed has 10,000 posts and every post is a different height: short text, long text with a Show more button, some with a photo. We cannot know the heights before the browser renders them. Build a virtualized feed that only mounts what is on screen, keeps the scrollbar roughly right, and does not make the post you are reading jump when posts above it get measured."

Requirements:

Load 10,000 posts from a simulated API, then render them in a 600px scroll box with only the visible posts (plus 3 of overscan) mounted.
Use an estimated height (120px) for posts that have never been rendered, measure each mounted post, and cache the real height by post id.
Find the first visible post from scrollTop efficiently, without walking 10,000 heights on every scroll.
When a post above the viewport changes height (first measurement, an image, a font), keep the content under the reader still.
Posts longer than 160 characters show a "Show more" toggle; expanding re-measures the post and pushes the ones below down.
Use the ARIA feed pattern: role="feed", articles with aria-posinset and aria-setsize.

What a strong answer should cover:

Why fixed-size maths fails, and the replacement: a prefix-sum array of offsets built from measured or estimated heights, searched with binary search.
Measurement with ResizeObserver on each mounted row (initial notification plus later changes), keyed by item id, using border-box size so padding is included.
Scroll anchoring: when a row above the first visible row changes by delta, add delta to scrollTop before paint, and set overflow-anchor: none so the browser does not also correct.
Where the work runs (layout effect or post-render hook) so the correction happens before the user sees a frame.
Trade-offs: estimate quality versus scrollbar jitter, measuring cost, and what libraries (react-window 2 dynamic heights, TanStack Virtual, react-virtuoso) do.

Clarifying questions expected:

"Can posts change height after they render, for example images loading or Show more?"
"Does the feed grow at the top (new posts) or only at the bottom?"
"Do we need jump-to-post, and how exact must it be for unmeasured posts?"

Code / implementation expected: Yes. A feed component with a height cache, prefix sums, binary search, a measuring row and the anchoring correction. A brief mention of library equivalents is enough.

React
Virtualization
Variable Size
AutoSizer

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: React developers who can already build a fixed-height virtualized list (if not, start with Build a Virtualized List) and now face rows whose height is only known after rendering. Difficulty: Hard

How to read this doc: Plain language first, then 📌 Interview term: callouts. The jsdom output in the Verified section comes from running the solution on React 19.3.1 with a fake layout engine and a hand-flushed ResizeObserver stub (jsdom has neither); the real numbers come from the same code in headless Chromium 141, including a control run with anchoring switched off.

1. Why This Even Matters — A Story First

Imagine a bookshelf where every book has a different thickness, and a friend asks you to keep exactly the books in front of their eyes on the shelf while they walk past. With identical books you could comp

The solution is hidden so you can try first

13 min read · 9 sections

React solution

Every file of the working solution. Open it in the playground to run and change it.

ReactComplete solution

Open in playground

import { useCallback, useEffect, useState } from "react";
import { fetchFeed } from "./src/api/api";
import VirtualFeed from "./src/components/VirtualFeed";

export default function App() {
  const [posts, setPosts] = useState(null);
  const [expanded, setExpanded] = useState(() => new Set());

  useEffect(() => {
    let alive = true;
    fetchFeed(10000).then((data) => alive && setPosts(data));
    return () => {
      alive = false;
    };
  }, []);

  const toggle = useCallback((id) => {
    setExpanded((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  }, []);

  return (
    <main className="feed-app">
      <h1>Variable-height feed</h1>
      {posts === null ? (
        <p className="feed-status" role="status" data-testid="loading">
          Loading feed...
        </p>
      ) : (
        <VirtualFeed
          posts={posts}
          height={600}
          estimate={120}
          overscan={3}
          expanded={expanded}
          onToggle={toggle}
        />
      )}
    </main>
  );
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.