Build an infinite scroll list in React that loads more products as the user scrolls, without clicking a next page. Ignore CSS; focus on functionality.

To implement infinite scroll in React, keep a state array for products and a page counter. Render the list using map. Attach a scroll event listener to the container or use the IntersectionObserver API to detect when the user reaches the bottom. When the bottom is reached, increment the page counter and fetch the next batch of products from the API. Append the new products to the existing array. Use a loading flag to prevent duplicate requests while a fetch is in progress. Clean up the event listener or observer in useEffect’s cleanup function. Complexity: each fetch is O(k) where k is the page size; rendering is O(n) for n total items. This approach keeps the UI responsive and scales to large datasets.