🚀 New React Challenge: Infinite Scroll

"Load more" buttons are the easy way out. Real feeds — Twitter, Instagram, your chat app — load the next page the moment you scroll near the bottom. That magic is the Intersection Observer API, and it's much cleaner than the old scroll-listener + throttle dance.

This challenge gets you building an infinite scroll list of Rick & Morty characters with React 19's Suspense-driven use() fetching already in place. Your job: make the next page fetch itself.

---

🧩 Overview

Build an infinite scroll list of Rick and Morty characters using the Intersection Observer API — the next page is fetched automatically when a sentinel element enters the viewport, building on an existing use() + Suspense data-fetching setup.

👉 https://www.reactchallenges.com/challenges/infinite-scroll

---

✅ Requirements

• Keep the starter's use() + Suspense first-page fetch as the starting point
• Follow the API pagination and read the next page URL from data.info.next
• Load the next page automatically when the user scrolls to the bottom — no button
• Trigger the load from a sentinel element observed by the Intersection Observer
• Append new characters to the existing list instead of replacing them
• Show a loading indicator while the next page is being fetched
• Hide the loading indicator once the page finishes loading
• Show an end-of-list message when there are no more pages
• Stop fetching once the end is reached — no requests when info.next is null
• Disconnect the observer when the component unmounts

---

💡 Notes

• App is fully wired: title, layout, and the Suspense fallback are done — all your work happens inside Characters().
• The components file is read-only, and the API follows the classic { info: { next, prev }, results: [...] } Rick & Morty response shape.
• Watch out: a couple of tests pass with the starter code simply because nothing fetches yet — they only start validating real behavior once your observer is in place.

---

🧪 Tests

1. renders the app title
2. shows skeleton while loading
3. renders first-page characters after loading
4. observes the sentinel element
5. loads the next page when the sentinel enters the viewport
6. appends characters instead of replacing them
7. loads the third page on repeated intersections
8. shows a loading indicator while fetching the next page
9. hides the loading indicator once the next page loads
10. shows end of list when there are no more pages
11. does not fetch again once the end is reached
12. disconnects the observer on unmount

---

Infinite scroll is one of those tasks that shows up again and again in frontend interviews and real products.

🔥 Start the Challenge Now