load-more-reactjs-component

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…

Installation

npm i recursive-load-more-reactjs --save

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} />}
/>

Props Details

Prop	Description	Type	Default value	Is it required?
LazyComponent	It is the page’s Component which we need to repeat.	React Component	-	Yes
paginationEntityIds	This prop is an array of page IDs/page numbers.	Plain array	Empty array	Yes
getNextPageData	API call for the next page is made in this function. It returns a Promise.	Function	-	Yes
nextButtonLabel	It’s the label of the next button.	String	‘Load More’	No
uniqueId	Unique identifier for the Component.	String	-	No
preCallback	A callback which is called just before making an API call for the next page.	Function	-	No
postCallback	A callback which is called just after the API call is resolved.	Function	-	No
isAutoLoad	A flag which tells the component to load the next page automatically when bottom is reached keeping a margin.	Boolean	False	No
bottomOffset	It’s the margin to keep when the isAutoLoad prop is set to true.	String	‘100px’	No