React Challenge: Build a Virtualized List That Renders Only Visible Rows

A new coding challenge on ReactChallenges.com tasks developers with building a virtualized list that efficiently renders 10,000 contacts without mounting all DOM nodes at once. The exercise requires rendering only the rows visible within the scroll viewport, plus a small overscan buffer above and below, using fixed row heights and windowing calculations. Participants must implement the logic in App.tsx, tracking scrollTop and clientHeight to dynamically compute which rows to mount and unmount as the user scrolls. The scrollable container should reflect the full dataset height so the scrollbar behaves naturally across all 10,000 entries. The challenge is designed to teach core virtualization concepts — including useLayoutEffect and derived rendering — that underpin popular long-list libraries.