FSD Frontend System Design

Part V — The Craft · Lesson 10.7

Infinite Scroll

In one lineA sentinel element triggers the next page, and virtualization stops the DOM from growing forever.

Where you've seen itA social feed that scrolls beautifully for two minutes and then starts stuttering on every frame.

  • Time18 min
  • DiagramSentinel + viewport window + virtualization
  • Chapter10 · Low Level Design

Diagram

diagram
THE SENTINEL — an empty div that says "load more"

  ┌─────────────────────────┐
  │  item 18                │
  │  item 19                │  viewport
  │  item 20                │
  ├─────────────────────────┤
  │  item 21                │  ← rendered, below the fold
  │  ▁▁▁ sentinel ▁▁▁       │  ← IntersectionObserver fires here
  └─────────────────────────┘     rootMargin: '400px' means it
                                  fires BEFORE the user arrives

  No scroll event listeners. No getBoundingClientRect in a loop.
diagram
VIRTUALIZATION — render the window, not the list

  WITHOUT                      WITH
  ┌──────────────┐             ┌──────────────┐
  │ 2,000 <li>   │             │ spacer div   │  height = 1,200 × 80px
  │ in the DOM   │             ├──────────────┤
  │              │             │ item 41      │  ← ~15 nodes rendered
  │ memory: 1GB  │             │ item 42      │
  │ scroll: 12fps│             │ item …       │
  │              │             ├──────────────┤
  │              │             │ spacer div   │  height = remaining
  └──────────────┘             └──────────────┘
                                memory: flat · scroll: 60fps
diagram
THE STATE MACHINE — every path needs a UI

  [idle] ──sentinel visible──► [loading] ──ok────► [idle]
     ▲                              │              (append page,
     │                              │               cursor = next)
     │                              ├──error──► [error] ──retry──┐
     │                              │                            │
     │                              └──empty──► [end]  ◄──────────┘
     │                                          "No more results"
     └── guard: never fire while already loading

How it works

  1. Use IntersectionObserver on a sentinel with a rootMargin so the next page starts before the user hits the bottom.
  2. Guard against double-firing — the observer can trigger repeatedly while a request is in flight.
  3. Paginate by cursor, not offset (10.11) — new items arriving at the top will shift offsets and duplicate rows.
  4. Virtualize past a few hundred items with react-window or TanStack Virtual; without it, DOM size is the bottleneck.
  5. Preserve scroll position on back-navigation by caching the loaded pages and the offset (6.9).
js
useEffect(() => {
  const io = new IntersectionObserver(([entry]) => {
    if (entry.isIntersecting && !loading && hasMore) loadNext();
  }, { rootMargin: '400px' });
  io.observe(sentinelRef.current);
  return () => io.disconnect();
}, [loading, hasMore]);

Trade-offs

Infinite scrollPagination
Effortless browsing, mobile-friendlyDeep-linkable, position obvious
Footer unreachableFooter reachable
Harder to return to an item"Page 4" is a real address
Needs virtualization to stay fastDOM stays small naturally

Accessibility (8.3): announce loaded batches via a polite live region, never move focus on load, and provide a "Load more" button as a keyboard-operable alternative — a keyboard user cannot trigger a scroll sentinel easily.

Interview angle

"Build an infinite feed. What breaks first?"

  • The DOM: without virtualization, memory and scroll performance degrade after a few hundred items.
  • Offsets: with items being inserted at the top, offset pagination duplicates and skips — use cursors.
  • Then the details that get skipped: the double-fire guard, the end state, scroll restoration, and a keyboard-accessible load-more.

Recap

  • IntersectionObserver on a sentinel with rootMargin, guarded against double-firing.
  • Virtualize once lists get long — that's the actual scaling limit.
  • Cursor pagination, scroll restoration, and a keyboard alternative are what separate a demo from a feature.