Configuration for pagination and intersection
Object containing ref callback for the last element
Automatically loads more content when the last element becomes visible. Uses IntersectionObserver for efficient scroll detection.
Features:
function ItemList({ items, hasMore, fetchMore }) {
const { lastElementRef } = useInfiniteScroll({
hasNextPage: hasMore,
isFetchingNextPage: false,
fetchNextPage: fetchMore,
});
return (
<ul>
{items.map((item, i) => (
<li
key={item.id}
ref={i === items.length - 1 ? lastElementRef : null}
>
{item.name}
</li>
))}
</ul>
);
}
Hook for implementing infinite scroll with Intersection Observer.