Infinite scrolling is a web-design technique that loads content continuously as the user scrolls down the page, eliminating the need for pagination. More contents are then loaded once the user scrolls down the page. These contents are often loaded asynchronously by making a request to the server responsible for providing the content. This is one way to improve the user experience on a website, but if you do it wrong, it can give a bad experience too.
Infinite scrolling technically comprises adding a scroll
event listeners to the window object or a certain div, determine when the scroll has reached the bottom of the div and then perform actions.
In this tutorial, I will explain two methods of implementing infinite scroll in React. The first method comprises implementing everything from the ground up while the second method uses an already available infinite scroll library/component.
A basic understanding of React is needed to follow through this tutorial.
As mentioned earlier, infinite scroll is about attaching event listeners to DOM elements while watching for when the scrollbar hits the bottom of the div.
Look at the render function of this Component below:
https://gist.github.com/eefcccc6e9944e9c416c8f66e0806a4c
Say you want to load more li
items into the ul
tag each time the div with the class App
gets to the end of the div, how do you tackle this problem?
First, notice that there is a reference to the div called myscroll
which makes it possible to access the element in React using this.refs.myscroll
.
Declare an initial state in the constructor:
https://gist.github.com/bba7bf6a45031821e2d10f62383ad227
Here, you declared two states called items
and loading
. The items hold the number of items available to be shown as li
tags while the loading state will show when the infinite loader is fetching more items.
Next, create a function that renders all items:
https://gist.github.com/55de6f13a7e6d3acefc4ce2870913030
This function loops through the number of items present and create a li
tag showing the item number. Now, update your render function to display these items:
https://gist.github.com/c5066ded8653591376c04ab568db3e92
What you have is a normal component that shows a couple li
's showing the items number. How do you add infinite scroll to this component? remember the ref
which is called myscroll
? You get to use it now. Define the ComponentWillMount
method:
https://gist.github.com/9d95f854d03cb1ef70a83d836d7617e1
In the method above, a scroll listener was added to the myscroll
ref which references the div being targeted. Here you used the scrollTop
property of the element to get the scroll position (which is relative to the top of the window) and then added it to the clientHeight
property (the height of the document). Next, a check is made to see if the sum of those two properties is greater than or equal to the height of the scrollbar. If the assumption is true, then the bottom of the div has been reached. A new function called loadMore
(Which will be created next) is then fired.
Here is what the loadMore
function looks like:
https://gist.github.com/508ffc273baac6f984cba5148003d97c
In this method, the loading
is first set to true
, so the loading div is shown. Next, a timeout function is called, after which the items are increased by 20
and the loading
state is set back to false. The reason for the timeout, however, is to cause a little delay. In your application, you probably want to make a fetch or
axios
call to your server and then change state. But yes, no matter your use case, the concept remains the same.
Here is what the final component should look like:
https://gist.github.com/1ec6094ae987381115d668032d8f52e2
While the first method has shown how easy it is to implement infinite scroll in React applications, you might not be so contempt to implement event listeners yourself. You might also just want a solution that already works where you like plug and play. That’s okay, I got you covered.
For this purpose, you can use React-infinite-scroller
which is available here. It is a useful library. Let me give you an example of how it can be used:
https://gist.github.com/62bd5bebb84c651fd95a17c971c45f55
Looking at the code above, notice it looks similar to the previous method? What are the main differences of this code from the one in the previous method?
- Here, there is no event listener being attached.
- Here, no reference to the div was made, as it wasn't needed.
- No loading state was defined. Instead, there is
hasMoreItems
which is used to tell the Infinite scroll component to detach the event listener. - An alteration to the
loadMore
function, which sets thehasMoreItems
state to false once the items his 200.
In this tutorial, you have seen two different methods how to implement Infinite scroll in React applications. For those of you who want to get involved in writing the event listeners yourself, you have seen how simple and easy it is. For those who also do not want to get involved in attaching the event listeners, you have also seen a method which will work for you. Have any comments or observations? Let’s talk in the comments.