Load More Component In ReactJS - A Recursive Approach

The problem…

During a project, we thought of creating a page which scrolls infinitely, i.e whenever the bottom of the page is reached, we load the next page and so on.

Initially we explored some similar open-source Components, but there was a common thing in all the available Components - they concat the data of each page and render them all cumulatively. Say for example, if the first page contains 20 items and a request is made for the next page. The data now contains 40 items which are rendered. With the 5th page’s request, 100 items are rendered (80 previous items and 20 new items). The re-rendering of the previous 80 items are redundant and unnecessary.

So that’s where we decided to create our own Component which handles this problem and is also multi-purpose through different combinations of props.

The solution…

After scratching our heads for a week and trying out different things, finally we came across React’s Recursive Components. There was an instinct that it could solve our problem. As the name suggests, a component rendered within the same component is called Recursive Component. With recursion, we achieved minimal re-rendering while loading the next pages.

Visualization of the solution…

Component’s Integration

<RecursivePagination 
    paginationEntityIds = {a plain array}
    getNextPageData = {data provider function}
    uniqueId = {unique identifier}
    nextButtonLabel = {button text}
    preCallback = {function to call before loading}
    postCallback = {function to call after loading}
    isAutoLoad = {next page to be loaded lazily}
    bottomOffset = {offset of autoloading}
    LazyComponent={<YourComponent {...props} ></RecursivePagination>}
/>

Props Details