This part of the series will show you how to build an infinite scroll in React. So far, your List component is able to opt-in two functionalities: showing a loading indicator and fetching more list items by using a More button. While the More button fetches manually more items, the infinite scroll should fetch more items once the user scrolled to the end of the list.

In this part of the series, both functionalities, the manual and automatic retrieval, should be opt-in exclusively. In the third part of the series you will learn how to combine both enhancements in one advanced List component with error and fallback handling.

Infinite Scroll in React

The infinite scroll requires you to use lifecycle methods in the List component. These lifecycle methods are used to register the event listeners that trigger on scrolling. First, let’s refactor the List component from a functional stateless component to a React ES6 class component. Otherwise we would not be able to access the lifecycle methods.

There are two registered event listeners now. First, when the component mounted, the onScroll() method is registered as callback for the scroll event. Second, the same method gets unregistered when the component unmounts.

The onScroll() class method itself is responsible to execute the onPaginatedSearch() method that fetches the next page, the next subset, of the whole list. But it comes with two conditions: First, it only executes when the user reached the bottom of the page. Second, it executes only when there is already an initial list.

Infinite Scroll as Higher Order Component in React

Again, as for the paginated list in the first part of the tutorial series, you can extract the functionality to a higher order component. You can already see all the parts of the List component that could move into the HOC: all those that you have added to the List component in the last step.

Now, the two HOCs, paginated list and infinite scroll, can be opted-in exclusively to substitute the functionalities of manual and automatic retrieval of the next page of the list. Both can be combined with the loading indicator HOC though.

Too many Request on Infinite Scroll

There is one flaw in the infinite scroll higher order component. It executes too often, once the user reached the bottom of the page. But it should only execute once, wait for the result, and then be allowed to trigger again when the user reaches the bottom of the page.

Now the loading state prevents too many requests. Only when there is no pending request, the scroll event will trigger.

The upcoming and last part of this series will show you how to combine both functionalities, the paginated list and the infinite scroll, to make it a great user experience. A little hint: one of the two can be used as fallback when there was an erroneous request. Other platforms, such as Twitter and Pocket, are using this approach for an improved UX.