In this implementation we are making use of the useSWRInfinite hook from swr, a light weight client side data fetching library.

All the data is fetched on the client in the WithUseSWRLoadMore component.

useSWRInfinite accepts two params. The first param is a function that receives the page index starting from 0 and the data of the previous fetch call. The function needs to return a url based on those two info which will then be passed to the the second param which is also a function that actually fetches your data. If the function first param returns null then, no data will be fetched.

The response of all those data call can be accessed as an array of those responses in the data value returned by the useSWRInfinite hook. You also get the isLoading and isValidating status with which you can control the UI by showing loaders whenever necessary.

We make use of react-intersection-observer to observe the end of product list upon which we increment the page size for next fetch.

SWR handles the caching of our client side data fetch. If you soft navigate and return to this page, you will see all the previously loaded products instantly.

You can learn more about infinite loading with useSWRInfinite via given links.