🚀 𝗡𝗲𝘄 𝗥𝗲𝗮𝗰𝘁 𝗖𝗵𝗮𝗹𝗹𝗲𝗻𝗴𝗲: Virtualized List

Dealing with a massive list of thousands of rows can be a challenge, especially when using React. When the list grows to such an extent, mounting all 10,000 DOM nodes at once can become unmanageable. The remedy lies in rendering only the rows that fit on the screen at any given time. This is where virtualized lists come into play.

The task at hand is to create a virtualized list of 10,000 contacts that only mounts the rows visible in the scroll viewport, along with a small overscan. This involves using fixed row heights and windowing math to achieve the desired functionality. You can find more information on this challenge at https://www.reactchallenges.com/challenges/virtualized-list.

The requirements for this challenge are clear: render a virtualized directory of 10,000 contacts, mount only a small window of rows, and ensure that scrolling through the entire dataset is possible. It's crucial to size the scrollable area to encompass the full dataset, so the scrollbar spans the entire list. When rows leave the viewport, they should be unmounted, and the ones that enter should be mounted in their place.

Keep a few overscan rows above and below the visible window to prevent flickering. Display the first and last mounted rows in a stats line, indicating the range, for instance, "Showing X–Y of 10000".

Each contact's name and email should be displayed in its respective row. The key logic should be encapsulated within the App.tsx file. Track the scroll position using scrollTop, measure the viewport's clientHeight, and compute the range of rows to mount. Ensure that the range is clamped to prevent overscan from rendering rows before the first or after the last contact.

To test this implementation, the app title should render correctly. Only a small window of rows should mount, not the entire dataset. The first contacts should render when the app loads. The scrollable area should be sized to the full dataset, showing the first and last rendered rows in the stats. When scrolling, more rows should be rendered than can fit on the screen, demonstrating the overscan.

The window should move downward when scrolling, and return to the first rows when scrolling back to the top. The last contact should render when scrolled to the bottom, and overscan rows should be mounted above the visible window without rendering any rows above the first one. This challenge provides a hands-on approach to understand virtualization from scratch, practicing windowing math, useLayoutEffect, and derived rendering to ensure your lists no longer freeze.