Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProCall a loader when a sentinel at the end of a list scrolls near the view, again after each load while it is still visible, and stop when there is no more.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it for feeds, search results and logs that load another page as the person reaches the end.
Do not use it as the only way to reach the next page, or for content with a footer people need to reach. Offer a visible Load more button as well. For numbered pages use usePagination.
import { useInfiniteScroll } from "@/hooks/use-infinite-scroll"const { sentinelRef } = useInfiniteScroll({ onLoadMore: fetchNextPage, hasMore, loading })
<ul>{items}</ul>
<div ref={sentinelRef} />useInfiniteScroll(options): { sentinelRef }
| Option | Type | Default | Description |
|---|---|---|---|
onLoadMore | () => void | - | Called when more should load. The newest is used. |
hasMore | boolean | - | False when everything is loaded; stops observing. |
loading | boolean | false | While true nothing is requested (no double loads). |
rootMargin | string | "200px" | Start loading this far before the end. |
root | Element | null | null | A scroll container; null is the viewport. |
Attach sentinelRef to an empty element after the last item. When a load finishes and the sentinel is still in view (a short page), the loader is called again until the view is full or hasMore is false. Without IntersectionObserver nothing loads automatically, so keep the Load more button.
Infinite scroll is hard for keyboard and screen reader users, who cannot reach a footer and lose their place. Provide a Load more button, announce how many items were added in a polite live region, and keep focus on the item they were on.
The hook ships with renderHook tests (use-infinite-scroll.test.ts) covering its behaviour, cleanup on unmount and server-safe defaults. It is safe to render on the server.