Infinite search scrolling

I have created a infinite scrolling search results page with Algolia react instance search following https://www.algolia.com/doc/guides/building-search-ui/resources/ui-and-ux-patterns/in-depth/infinite-scroll/react/?language=javascript#retrieve-more-results

I have configured my app to load 12 results initially. And loading new another 12 when the scrolling reach the intersection tag.

onSentinelIntersection = entries => {
const { hasMore, refine, refineNext } = this.props;

entries.forEach(entry => {
  if (entry.isIntersecting && hasMore) {
   refineNext();
  }
});

};

My problem is that for first scroll it works fine. Initially it loads 12 results, then on scroll 24 results are displaying. After I have reach 24 results Intersection Observer starts a loop, loading first 12 results, then 24 results and 36 results. I have more than 100 results instead of stopping at 36 results it keep looping.

Has anyone ever experience this kind of behavior? any guesses one what’s happening?

Thanks in advance

Hi @nethanjana
Have you checked our codesandbox?

I appreciate if you can come up with a reproducible example based on that.
It will help me understand your issue correctly :slight_smile:

Let me know how it goes.

1 Like

Hi @eunjae.lee

Thanks for the quick response. With the sand box I have figured the error in my implementation. The way I have integrated the infinite scrolling, it unmount the component while calling the refine(). Therefore the intersection observer gets unregistered each time. Causing weird behavior. Thanks for the tip.

Nethanjan