Infinite Scroll

Build a scrollable list that automatically fetches and appends more items when the user reaches the bottom — without a "Load More" button.

Requirements

Render an initial batch of items on mount
When the user scrolls to the bottom, automatically load the next batch
Show a loading spinner while data is being fetched
Stop loading when all data has been fetched (hasMore = false)
Simulate an async API call with setTimeout (no real endpoint needed)

Key Patterns

IntersectionObserveruseRef (sentinel element)useEffect (observer setup)Loading statehasMore flag

Important

Interview Tip

Place an invisible sentinel <div> at the bottom of the list. Attach an IntersectionObserver to it. When the sentinel enters the viewport, trigger loadMore(). Disconnect the observer in the cleanup function to avoid memory leaks.

0 / 60 items loaded. Scroll inside the box.