How to create load more logic in React

#react #html #javascript #css

So usually we prefer to use load more logic using the backend api where we pass the skip value and it will return us the next set of data but what if we want to implement same logic in frontend for some specific cases. In this article we will gonna learn how to create load more logic in React.

Checkout this better way of pagination in backend.

Problem

Let’s assume we have an Array of 100 objects in frontend and we want to display only n items at a time and next set of data will be loaded on l*oad more* button click.

We usually do that thing using the backend where we passes the skip value and it will return us the next set of data but now we want to do same thing in our React Frontend.

Solution

First of all we will gonna have few variable for our load more logic.

The length of our data is specified using the LENGTH.

const LENGTH = 50;

After that I created an Array DATA of length LENGTH.

const DATA = [ ...Array(LENGTH).keys() ];

Then a random image for showing in UI i.e IMAGE_SRC.

const IMAGE_SRC="https://source.unsplash.com/random";

Limit will be 10. i.e LIMIT

const LIMIT = 10;

const LENGTH = 50;
const DATA = [ ...Array(LENGTH).keys() ];
const IMAGE_SRC="https://source.unsplash.com/random";
const LIMIT = 10;

Now we will gonna write few states.

We also gonna use slice and concat from lodash for simplicity.

To check we have more records or not.

const [showMore,setShowMore] = useState(true);

Initial render list

const [list,setList] = useState(slice(DATA, 0, LIMIT));

For managing the index.

const [index,setIndex] = useState(LIMIT);

Our load more logic will gonna do the following things.

It will update the index by adding LIMIT to it.
Check for we have more records or not.
Gonna update our list by adding next set to our Array.

  const loadMore = () =>{
    const newIndex = index + LIMIT;
    const newShowMore = newIndex < (LENGTH - 1);
    const newList = concat(list, slice(DATA, index, newIndex));
    setIndex(newIndex);
    setList(newList);
    setShowMore(newShowMore);
  }

Our Render method will gonna return list of images and a load more button.

   <div className="App">
      <div className="image-container">
      {list.map(()=><img src={IMAGE_SRC} alt="random"/>)}
      </div>
      {showMore && <button onClick={loadMore}> Load More </button>}
    </div>

Our full component will gonna look like this.

import React,{useState} from "react";
import {
  slice, concat, 
} from 'lodash';

import "./styles.css";

const LENGTH = 50;
const DATA = [ ...Array(LENGTH).keys() ];
const IMAGE_SRC="https://source.unsplash.com/random";
const LIMIT = 10;

export default function App() {
  const [showMore,setShowMore] = useState(true);
  const [list,setList] = useState(slice(DATA, 0, LIMIT));
  const [index,setIndex] = useState(LIMIT);

  const loadMore = () =>{
    const newIndex = index + LIMIT;
    const newShowMore = newIndex < (LENGTH - 1);
    const newList = concat(list, slice(DATA, index, newIndex));
    setIndex(newIndex);
    setList(newList);
    setShowMore(newShowMore);
  }
  return (
    <div className="App">
      <div className="image-container">
      {list.map(()=><img src={IMAGE_SRC} alt="random"/>)}
      </div>
      {showMore && <button onClick={loadMore}> Load More </button>}
    </div>
  );
}

You will gonna see output similar to this.

Our React Frontend load more logic is ready.

Top comments (3)

Shubham Verma • Dec 29 '21

Great article.
There is one logical error. For array of length 9 and LIMIT 4, the last element whould be missed.
newShoreMore would be <=
const newShowMore = newIndex <= (LENGTH - 1);