Infinite Scroll
Problem statement
Infinite Scroll is the feed pattern behind Twitter, Instagram, Facebook, and Reddit — content loads automatically as the user scrolls down, eliminating the friction of manual pagination. Your task is to implement an infinite scroll list in React that fetches the next page of data when the user approaches the bottom, shows a loading indicator during fetches, and stops loading when all data has been fetched.
The core of this question is the Intersection Observer API — a browser-native API that fires a callback when a target element enters or exits the viewport. You'll place a sentinel element (an invisible div) at the bottom of the list, and observe it. When it becomes visible, you fetch the next page. This approach is dramatically more performant than the scroll event listener alternative, which fires hundreds of times per second and requires expensive getBoundingClientRect() calls.
Your implementation should handle race conditions (preventing duplicate fetches), clean up the observer on unmount, show an end-of-feed message when all data is loaded, and work correctly with React's strict mode double-invocation.
Requirements & constraints
- Render a list of items fetched page-by-page from a data source
- Automatically fetch the next page when the user scrolls near the bottom
- Use the Intersection Observer API (not scroll events) for scroll detection
- Show a loading spinner while a fetch is in progress
- Show an 'End of feed' message when all data has been loaded
- Prevent duplicate fetches if the observer fires while a request is already in flight
- Clean up the IntersectionObserver on component unmount
How to approach Infinite Scroll
The strategy an interviewer expects you to reach for.
Problem Understanding Before writing any code, explain the architectural choice upfront: Intersection Observer over scroll events. This is the most important technical decision in this component, and saying it immediately tells the interviewer you know the modern, performant approach.
The full solution is part of HelloFrontend Pro
The question above is free to read in full. Upgrade to unlock the interactive workspace and the senior-level walkthrough that go with it.
- Live React sandbox pre-wired for this component
- Time-boxed checkpoints that mirror a real 45-minute round
- Interviewer scoring criteria and a full reference implementation
Already a member? Log in to open the workspace.