How do you prevent duplicate loading in infinite scroll?
Use a loading flag: if (loading || !hasMore) return. Set loading to true before fetching, and false after. This prevents multiple simultaneous fetches when the sentinel is visible.
Verify This Answer
Cross-check this information using these trusted sources:
More FAQs in How to Build Infinite Scroll in an Interview
Use IntersectionObserver on a sentinel element at the bottom of the list. When the sentinel is visible, fetch more data and append. Use loading and hasMore flags to prevent duplicate loads and stop when done. Use rootMargin for pre-loading.
IntersectionObserver is more efficient. Scroll events fire on every pixel of scroll, causing performance issues. IntersectionObserver only fires when the target enters or leaves the viewport, with no manual calculations needed.
Use a hasMore flag. When the API returns an empty array, set hasMore to false. The loadMore function checks this flag and returns early. Update the sentinel text to 'No more items'.
Still have questions?
Browse all our FAQs or reach out to our support team