Infinite scroll loads more posts as the user scrolls down.
Implementation approach:
Detect when user nears bottom (Intersection Observer)
Fetch next page using cursor
Append new posts to state
Update cursor for next fetch
Code pattern:
const observer = new IntersectionObserver(entries => {
if (entries[0].isIntersecting && hasMore) {
fetchMorePosts(cursor);
}
});
observer.observe(sentinelRef.current);
Handle edge cases: Loading state, errors, no more content.