Skip to main content
ELYTE
HardFrontendBuild

Infinite Scroll Feed

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-...

Start problemBrowse all problems

What you will practice

TypeScriptReactReact PatternsPerformanceAsync Patterns

Requirements

  • Keep `App` as the default exported React component with the provided `fetchPage` prop.
  • Fetch page 1 on mount.
  • Render a fixed-height `feed-container` with `overflow-y: auto`.
  • Render one `feed-item` per loaded item.
  • When scrolled within 200px of the bottom, fetch the next page and append its results.
  • Show `loading-indicator` while a fetch is in flight.
  • Stop fetching after a page returns an empty array and never fetch two pages simultaneously.

Starter files

App.tsxEditable starter

What the judge checks

  • Runs in the react environment with the react-testing-library runner.
  • Uses a 8000ms judge budget.
  • Requires test IDs: feed-container.
  • Checks repeated UI regions: feed-item.
  • Provides APIs: fetchPage.
  • Behavior rules include: Initial Items Rendered, Scroll Triggers Next Page, End Of Feed Stops Loading.

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

Example behavior

Input
`fetchPage(3)` resolves with `[]`
Output
No further fetches are made even if the user keeps scrolling

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.