React · Exercise 6 of 6 Previous
Advanced
Virtualise a 10,000-row list
The list renders all 10,000 rows into #list (a 200px scroll box), which is slow. Every row is exactly 30px tall.
Render only the rows inside the visible window plus a few extra (fewer than 40 .row elements at any time), each positioned at its real offset inside a spacer that is 10000 × 30 px tall, so the scrollbar still has its full size.
Update the visible rows from #list's onScroll (scrollTop). Keep each row's text (Row N), its class row and its aria-setsize/aria-posinset attributes.
What Check tests
- Fewer than 40 rows are in the DOM
- The list is still 300,000px tall (honest scrollbar)
- Scrolling to 3000px shows Row 101 to Row 106
- Scrolling to the bottom shows Row 10000
- Rows keep aria-setsize="10000" and their position
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.