Infinite Scroll with React-Query and Intersection Observer

Introduction

Infinite scrolling is always an important UIUX element to give reader an immersive experience on long list of articles. This not only helps readers to discover more content in your website, but it also helps to reduce bounce rate of the reader. Without further ado, let’s jump into this!

Showcase

With this implementation, first you will see a loading indicator when initially load for data. Then when you scroll to bottom, it will auto load more data until no more data can be fetched.

How it works?

We will need 2 packages for this. one is react-query, another one is react-intersection-observer (optional — just want a simpler implementation rather than using native way)

yarn add @tanstack/react-query
yarn add react-intersection-observer

then, we will need to fetch data from our external APIs. For this use case, I am using newsapi.org to fetch all the articles with the keyword searched.

For infinite scrolling, useInfiniteQuery is required. Below is the explanation for each params

• queryKey : key of the query
• queryFn : query function that needed to be executed.
• initialPageParam : initial page number (can be anything, but for this usecase, page number will do)
• getNextPageParam : next page params configuration. Return undefined will indicated that no next page available. This function will receive 2 params, which is lastPage and allPages . lastPage is the last page that fetched by the query, and allPages is all pages that being fetched.

By default, react-query will store all data is the form of array, hence we will need to flatten the array by ourselves. Above are the variables for getting loading state and the final data.

By this stage, you will be able to fetch the correct data with proper loading state. However, how about infinite scrolling?

Infinite Scrolling

For infinite scrolling, we will be needed useInView from react-intersection-observer. Basically, what this does is to automatically fetch next page data when it reaches the 0.9 threshold. In useEffect, you can see there is several checking such as error, loading or empty state before we fetch for next page data.

Combined with the article listing as above, we can set a empty span , using this as the invisible element in the UI. When useInView is 90% reaching this span, it will automatically fire the load next function instead of we manually triggering this.

Besides, the loading and error state is also stated in the code snippets above.

Conclusion

This implementation of infinite scrolling is pretty straightforward, but it is also essential for my fulltime works. How is the real world example that we implemented this into our production-ready project.

XUAN.COM.MY - 马来西亚最全面的中文资讯网站

Gempak - Portal Hiburan No 1 Malaysia!

You can see the articles are infinite scrollable, and these awesome features help to reduce the readers’ bounce rate and make them more focus on the quality content.

Again, thanks for reading this and see you in the next articles!