How to load more search results when scrolling down the page in React.js?

This is called infinite scroll. If you don't wanna build this from the scratch, you can use external libs:

https://www.npmjs.com/package/react-infinite-scroller

https://www.npmjs.com/package/react-infinite-scroll-component

If you wanna build it yourself, you can follow these tutorials:

https://alligator.io/react/react-infinite-scroll/

https://upmostly.com/tutorials/build-an-infinite-scroll-component-in-react-using-react-hooks


Without plugins:

componentWillMount(){
  window.addEventListener('scroll', this.loadMore);
}

componentWillUnmount(){
    window.removeEventListener('scroll', this.loadMore);
}

loadMore(){
    if (window.innerHeight + document.documentElement.scrollTop === document.scrollingElement.scrollHeight) {
        // Do load more content here!
    }
}