Infinite Scroll with Search UI React

Search Search UI React
1

Recently, someone sent me a Slack message asking how to fetch search results when scrolling to the bottom of a page, rather than using a pagination component. This method is commonly referred to as infinite scroll. I put together this Code Sandbox that demonstrates how to accomplish infinite scroll with Search UI React.

I want to highlight a few key points about this implementation:

  • Rather than use the VerticalResults component that is tightly coupled with the Search Headless vertical results, I am mapping over results stored in the component state.
  • When you set a function as an event listener using addEventListener , the function will use the state and props that were present at the time it was created. Therefore, to ensure that the event listener function has access to the latest state and props, I am using a technique called “closing over” the state and props using the useCallback hook.
  • searchLoading needs to be added to the useCallback dependency array to ensure that the same page of results are not fetched twice
2

That’s helpful… Is there any other solution that can be used to implement and achieve the same.

3

If you are using the Search React SDKs, I would recommend something similar to this approach. This is because the Search state managed by the library only stores the results of the most recent search so you need to copy the results to component state if you want to display more than one page of results at once.

Your other option would be to call the Search API directly with the Search JS client but this will mean implementing all custom state management and UI component solutions.

4

That makes sense. I understand its not available now but Is there any possibilities for getting more than 50 result in response for displaying all available locations at ones. let’s say on initial/first load.
So when user will land on locator, all locations pins they will be able to get that time.