Build an infinite-scroll feed

Loading problem workspace…

Build an infinite-scroll feed · UIHero

Build an infinite-scroll feed

Load cursor-based feed pages as a sentinel enters the viewport without duplicate requests or items.

MediumReact Data Fetching

45 min0% acceptance

Description

Build an InfiniteScrollFeed that renders an initial page, observes a terminal sentinel, and appends later pages. It must tolerate repeated observer notifications, overlapping item IDs, request failures, and unmounts without corrupting the feed.

Requirements

The solution exports the required InfiniteScrollFeed API from the editable module.
Initial page works deterministically for the documented normal, boundary, and repeated-use scenarios.
Sentinel load works deterministically for the documented normal, boundary, and repeated-use scenarios.
Single flight works deterministically for the documented normal, boundary, and repeated-use scenarios.
Append deduplicate works deterministically for the documented normal, boundary, and repeated-use scenarios.
Terminal state works deterministically for the documented normal, boundary, and repeated-use scenarios.
Subscriptions, timers, observers, and global listeners are released when they are no longer needed.

Overlapping pages

Input

Page one ends with item b; page two starts with item b

Expected output

Item b appears once and later unique items are appended

Explanation

Stable IDs prevent duplicate rows when an API returns overlapping cursor windows.

Constraints

Use IntersectionObserver rather than scroll polling
Never issue more than one page request at a time
Abort or ignore work after unmount

Hints

Hint 1

Model loading, next cursor, and terminal state separately.

Hint 2

Guard the observer callback before starting a request because one intersection may produce several notifications.

Hint 3

Append through an ID-aware merge and disconnect the observer once no next cursor remains.

ReactIntersectionObserverpagination

Loading problem workspace…