Implementing infinite scroll with IntersectionObserver

Scenario

Context A social feed loads 20 posts at a time and must automatically load the next page when the user scrolls near the bottom. The Problem The team is using a scroll event listener on the window to detect the bottom of the page, which fires hundreds of times per scroll and causes jank. Constraints Replace the scroll listener with an IntersectionObserver targeting a sentinel element at the list bottom. Manage the observer lifecycle inside a useEffect. Append new results to the existing list without replacing it. Expected Deliverable A React infinite scroll implementation using IntersectionObserver, with correct observer cleanup and accumulative page data management.

Targeted skills