Skip to main content
Problem 18

Infinite Scroll Feed

HARDBUILD
React+4

Build an infinite scroll feed in React. You are given fetchPage(page: number): Promise<{ id: number; title: string }[]>. Fetch page 1 on mount and render each item as data-testid="feed-item". Wrap the feed in data-testid="feed-container" with a fixed height and overflow-y: auto. When the user scrolls within 200px of the bottom, fetch the next page and append results. Show data-testid="loading-indicator" while a fetch is in flight. Stop fetching when a page returns an empty array. Never fetch two pages simultaneously.

Examples
Example 1
Input
`fetchPage(3)` resolves with `[]`
Output
No further fetches are made even if the user keeps scrolling
Constraints
  • Do not prefetch — only fetch when the scroll threshold is crossed
  • The container must have a fixed pixel height set via inline styles or CSS
Follow-up

How would you handle the case where `fetchPage` rejects? Add an error state with a retry button that re-fetches the failed page without losing the items already loaded.

Hints
Console output will appear here...