Virtualized List
Render 10,000 items efficiently by only mounting the rows visible in the viewport. The dataset and row component are ready — implement the virtualization logic.
Total items: 10,000Rendered: 15
1
User 1
user1@example.com · Engineer
2
User 2
user2@example.com · Designer
3
User 3
user3@example.com · Product Manager
4
User 4
user4@example.com · Data Scientist
5
User 5
user5@example.com · DevOps
6
User 6
user6@example.com · QA Engineer
7
User 7
user7@example.com · Tech Lead
8
User 8
user8@example.com · Intern
9
User 9
user9@example.com · Engineer
10
User 10
user10@example.com · Designer
11
User 11
user11@example.com · Product Manager
12
User 12
user12@example.com · Data Scientist
13
User 13
user13@example.com · DevOps
14
User 14
user14@example.com · QA Engineer
15
User 15
user15@example.com · Tech Lead
Row template preview
1
User 1
user1@example.com · Engineer
The key idea: the outer div scrolls over a tall inner div (total height), but you only render a small window of items positioned with position: absolute and top: index * ITEM_HEIGHT. Listen to onScroll to recalculate which items are visible. Check the TODOs in the code.