What React skills does "Build a Virtualized List" practice?

This challenge practices: useState, useRef, useCallback, scroll math, performance. It is rated hard difficulty and takes approximately 35 minutes.

What are the hints for "Build a Virtualized List"?

Calculate startIndex and endIndex from scrollTop divided by ITEM_HEIGHT Use a spacer div with height = totalItems * itemHeight to maintain scroll size Position each visible item absolutely with top = index * ITEM_HEIGHT

hard35 min

Build a Virtualized List

Build a virtualized list that efficiently renders only the visible items in a scrollable container. Given a list of 10,000 items, only the items currently in the viewport (plus a small buffer) should be rendered as DOM elements. This tests your understanding of scroll calculations and performance optimization.

Skills

useStateuseRefuseCallbackscroll mathperformance

Tests

Renders only a small subset of 10,000 items
Shows correct items for current scroll position
Updates visible items on scroll
Container has correct total scrollable height
Items are positioned correctly using absolute positioning

Your Code

Loading editor...