The following React tutorial builds up on Paginated List in React - Build a powerful Component (Part I) . The series of tutorials goes beyond the basic React components that you encounter in other React tutorials.
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.
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.
Now itâs about implementing the functionality that the List fetches more paginated lists on scroll.
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.
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.
If you are not familiar with higher order components, as in the first part of the series, I can recommend to read the gentle introduction to higher order components .
The List component becomes simple again. In addition, it doesnât need lifecycle methods anymore and can be refactored to a functional stateless component again.
Finally you can use the automatic infinite scroll instead of the manual paginated list.
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.
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.
You can continue with the third part of the React tutorial series: Advanced List in React - Build a powerful Component (Part III) .