Frontendx
README.md
SOLUTION.md
main.tsxentry
App.tsx
App.css
index.html
vite.config.ts
Installed
react@^19.2.0
react-dom@^19.2.0

Implement List Virtualization with Vanilla JavaScript — Efficient Long-List Rendering Using Scroll Event and IntersectionObserver

Prompt

Implement list virtualization (windowing) from scratch in plain Vanilla JavaScript without any library. Render only the visible items of a very large list (e.g., 10,000 items) plus a small buffer. Implement two approaches: (1) Scroll Event method — use the windowing technique to calculate which items fall within the visible viewport range and render only those, maintaining full scroll height via a tall placeholder; (2) IntersectionObserver method — use chunk-buffer technique to lazy-load batches of items as they approach the viewport. Both methods accept item-height, items-array, buffer-size, and a render-callback as arguments. Expose scrollToIndex(index) for programmatic scrolling and a destroy() method for cleanup. This was asked in Arctic-Wolf's SDE2 interview, Tekion's senior frontend interview, UIPath's SDE2 interview, and Headouts SDE3 interview.

Render only items in the visible range plus a buffer above and below.
Test Results

Implement List Virtualization with Vanilla JavaScript — Efficient Long-List Rendering Using Scroll Event and IntersectionObserver

Implement list virtualization (windowing) from scratch in plain Vanilla JavaScript without any library. Render only the visible items of a very large list (e.g., 10,000 items) plus a small buffer. Implement two approaches: (1) Scroll Event method — use the windowing technique to calculate which items fall within the visible viewport range and render only those, maintaining full scroll height via a tall placeholder; (2) IntersectionObserver method — use chunk-buffer technique to lazy-load batches of items as they approach the viewport. Both methods accept item-height, items-array, buffer-size, and a render-callback as arguments. Expose scrollToIndex(index) for programmatic scrolling and a destroy() method for cleanup. This was asked in Arctic-Wolf's SDE2 interview, Tekion's senior frontend interview, UIPath's SDE2 interview, and Headouts SDE3 interview.