Virtualized List

Render a list of 100 items — each labelled "div 1", "div 2" … "div 100". The items are revealed in batches as the user scrolls, using an IntersectionObserver sentinel at the bottom of the list rather than a scroll listener.

Requirements

Render 100 items, each showing the label "div N" (1-indexed)
Start with a small batch and reveal more as a bottom sentinel scrolls into view
Use an IntersectionObserver attached to a sentinel element (no scroll listener)
Stop revealing once all 100 items are shown

Key Patterns

IntersectionObserversentinel refbatch reveal

Important

Interview Tip

Be clear on the tradeoff: this observer "reveal" approach still MOUNTS every revealed node, so the DOM keeps growing — fine for 100 items. True virtualization (react-window / react-virtuoso) keeps a roughly constant number of nodes in the DOM regardless of list size by only rendering the rows in (and just around) the viewport — mention it as the answer for thousands of items.

Showing 20 / 100 divs. Scroll inside the box to reveal more.

div 1#1

div 2#2

div 3#3

div 4#4

div 5#5

div 6#6

div 7#7

div 8#8

div 9#9

div 10#10

div 11#11

div 12#12

div 13#13

div 14#14

div 15#15

div 16#16

div 17#17

div 18#18

div 19#19

div 20#20