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-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.
- Keep
Appas the default exported React component with the providedfetchPageprop. - Fetch page 1 on mount.
- Render a fixed-height
feed-containerwithoverflow-y: auto. - Render one
feed-itemper loaded item. - When scrolled within 200px of the bottom, fetch the next page and append its results.
- Show
loading-indicatorwhile a fetch is in flight. - Stop fetching after a page returns an empty array and never fetch two pages simultaneously.
`fetchPage(3)` resolves with `[]`
No further fetches are made even if the user keeps scrolling
- 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
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.
Keep moving through related react problems and build a stronger search-friendly practice loop around this topic.
View track →