Build Infinite Scroll | Interview Question

Q: Build Infinite Scroll

**Target Audience:** React developers new to infinite scrolling who know useState and useEffect and want to build it from first principles with a scroll listener. **Difficulty:** Medium > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. The Verified output was produced by running the solution on React 19.3.1 under StrictMode in jsdom, with the scroll container given a fixed clientHeight and a content-based scrollHeight by the driver, because jsdom has no layout. The API is simulated in the file (a Promise with a 400ms timer, no network). ## 1. Why This Even Matters — A Story First Think of a conveyor-belt sushi restaurant. The chef does not put the whole menu on the belt at once; he watches the plates in front of you and, when the last few are nearly gone, puts out another batch. He also does not put out a second batch while the first is still being plated, and when the kitchen runs out

The problem

Question presented to candidate: "We have an articles page that loads 20 items at a time from a paginated API. Instead of a Next button, load the next page automatically when the user scrolls close to the bottom of the list. Show a loading state, stop when there is nothing left, and make sure we never fire the same request twice."

Requirements:

A 420px scroll container; page 1 loads on mount; each page has 20 items, 95 items in total (simulated API, 400ms per request).
When the user scrolls within 200px of the bottom, fetch the next page and append it.
Never start a second request while one is in flight, however many scroll events fire.
Show "Loading more..." while fetching, a Retry button when a request fails (the simulated API fails page 3 once), and "You have reached the end" after the last page.
If a page does not fill the container, keep loading, because the user cannot scroll to trigger it.
Expose the busy state to assistive technology.

What a strong answer should cover:

The near-bottom check: scrollHeight - scrollTop - clientHeight < threshold, and why a threshold beats waiting for exactly zero.
A synchronous in-flight guard (a ref or plain variable), not only a loading state that updates on the next render.
Page cursor state (nextPage or null), append-only updates, and a clean end state.
Error handling with a manual retry, and not retrying automatically on every scroll.
The auto-fill case for tall screens, and the effect cleanup or unmount guard so a late response does not update an unmounted component (including React StrictMode's double effect).
Passive listeners, and when IntersectionObserver would be the better tool.

Clarifying questions expected:

"Does the list scroll inside a container or with the whole page?"
"Is the API page-number or cursor based, and can items shift between pages?"
"How long will the list get, and do we need to virtualize later?"

Code / implementation expected: Yes. A list component with the scroll handler, a fetch function guarded against duplicates, loading, error and end states, using a simulated API.

React
IntersectionObserver
Async

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: React developers new to infinite scrolling who know useState and useEffect and want to build it from first principles with a scroll listener. Difficulty: Medium

How to read this doc: Plain language first, then 📌 Interview term: callouts. The Verified output was produced by running the solution on React 19.3.1 under StrictMode in jsdom, with the scroll container given a fixed clientHeight and a content-based scrollHeight by the driver, because jsdom has no layout. The API is simulated in the file (a Promise with a 400ms timer, no network).

1. Why This Even Matters — A Story First

Think of a conveyor-belt sushi restaurant. The chef does not put the whole menu on the belt at once; he watches the plates in front of you and, when the last few are nearly gone, puts out another batch. He also does not put out a second batch while the first is still being pl

The solution is hidden so you can try first

10 min read · 9 sections

React solution

Every file of the working solution. Open it in the playground to run and change it.

ReactComplete solution

Open in playground

import InfiniteList from "./src/components/InfiniteList";

export default function App() {
  return (
    <main className="is-app">
      <h1>Infinite scroll (scroll listener)</h1>
      <InfiniteList />
    </main>
  );
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.