Render a list of 100,000 rows

Hard40 minFree, no account

Windowing is the easy part. Variable heights and keyboard access are where it goes wrong.

The question

Build a scrollable list that renders 100,000 rows without the page becoming unusable.

Then handle rows of different, unknown heights.

<VirtualList items={items} renderRow={(item) => <Row {...item} />} />

// 100,000 items. Scrolling must stay at 60fps.
// Phase two: each row is 40–200px and you do not know until it renders.

40:00Commit to an answer before you open the solution. Reading it first teaches you to recognise good answers, which is not the skill being tested.

Stuck?

0 of 3 hints taken

The worked solution

written by a person · not a grade

Score yourself

0 of 5 marked

Windowed correctly with a spacer and overscan25
Used transform and frame-throttled scroll handling15
Measured and cached variable heights without O(n²) recomputation25
Handled scroll anchoring when estimates are corrected20
Honest about the accessibility and find-in-page cost15

We run no AI here and nothing on this page grades you. The score is yours, and the useful number is the one you get on the same problem a month from now, cold.

kept in this browser only