Infinite Scroll with React InstantSearch
This version of React InstantSearch has been deprecated in favor of the latest version of React InstantSearch.
An “infinite list” is a common way of displaying results. It’s especially well-suited to mobile devices and has two variants:
- Infinite hits with a “See more” button at the end of a batch of results. Implement this with InstantSearch’s
infinite-hitswidget. - Infinite scroll uses a listener on the scroll event (called when the user has scrolled to the end of the first batch of results). The following guidance implements such an infinite scroll. Find the complete example on GitHub.
If there are no hits, you should display a message to users and clear filters so they can start over.
Display a list of hits
The first step is to render the results with the useInfiniteHits() connector. There’s an external Hit component, but it’s not the point of this guide. The intent is to keep the code simple.
Read more about connectors in the customizing widgets guide.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import React, { Component } from 'react';
import { connectInfiniteHits } from 'react-instantsearch-dom';
import Hit from './Hit';
class InfiniteHits extends Component {
render() {
const { hits } = this.props;
return (
<div className="ais-InfiniteHits">
<ul className="ais-InfiniteHits-list">
{hits.map(hit => (
<li key={hit.objectID} className="ais-InfiniteHits-item">
<Hit hit={hit} />
</li>
))}
</ul>
</div>
);
}
}
export default connectInfiniteHits(InfiniteHits);
Track the scroll position
Once you have your results, the next step is to track the scroll position to determine when the rest of the content needs to be loaded (using the Intersection Observer API). Use the API to track when the bottom of the list (the “sentinel” element) enters the viewport. You can reuse the same element across different renders. The Web Fundamentals website discusses the use of this API in more detail.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
class InfiniteHits extends Component {
sentinel = null;
render() {
const { hits } = this.props;
return (
<div className="ais-InfiniteHits">
<ul className="ais-InfiniteHits-list">
{hits.map(hit => (
<li key={hit.objectID} className="ais-InfiniteHits-item">
<Hit hit={hit} />
</li>
))}
<li
className="ais-InfiniteHits-sentinel"
ref={c => (this.sentinel = c)}
/>
</ul>
</div>
);
}
}
This implementation uses the Intersection Observer API. To support Internet Explorer 11 you need a polyfill for
IntersectionObserver. A browser API is used in the example, but you can apply the concepts to any infinite scroll library.
Once you have the ref of the “sentinel” element, create the Intersection Observer instance to observe when the element enters the page. Update the Intersection Observer’s options object to adjust this code to your needs.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
class InfiniteHits extends Component {
onSentinelIntersection = entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// In that case, you can refine
}
});
};
componentDidMount() {
this.observer = new IntersectionObserver(this.onSentinelIntersection);
this.observer.observe(this.sentinel);
}
render() {
const { hits } = this.props;
return (
<div className="ais-InfiniteHits">
<ul className="ais-InfiniteHits-list">
{hits.map(hit => (
<li key={hit.objectID} className="ais-InfiniteHits-item">
<Hit hit={hit} />
</li>
))}
<li
className="ais-InfiniteHits-sentinel"
ref={c => (this.sentinel = c)}
/>
</ul>
</div>
);
}
}
Clear the observer once the component is unmounted.
1
2
3
4
5
6
7
8
9
class InfiniteHits extends Component {
componentWillUnmount() {
this.observer.disconnect();
}
render() {
// ...
}
}
Retrieve more results
Now that you can track when you reach the end of the results, use the refineNext function inside the callback function onSentinelIntersection. Only trigger the function when there are still results to retrieve. For this use case, the connector provides a prop hasMore that indicates if you still have results.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
class InfiniteHits extends Component {
onSentinelIntersection = entries => {
const { hasMore, refineNext } = this.props;
entries.forEach(entry => {
if (entry.isIntersecting && hasMore) {
refineNext();
}
});
};
render() {
// ...
}
}
Show more than 1,000 hits
To ensure excellent performance, the default limit for the number of hits you can retrieve for a query is 1,000.
1
2
3
$index->setSettings([
'paginationLimitedTo' => 1000
]);
Increasing the limit doesn’t mean you can go until the end of the hits, but just that Algolia will go as far as possible in the index to retrieve results in a reasonable time.
