All You Need to Know About Pagination in React JS

React pagination is a functionality employed by applications to present data in a sequential manner across multiple pages. Pagination solves this problem by breaking the data into pages, allowing users to navigate the information incrementally. In this blog, we will explore the fundamentals of pagination in ReactJS and unlock the secrets of efficient data pagination in ReactJS!

Table of Content:

• What is Pagination in ReactJS?
• Why is Pagination Important? 
• How to Implement Pagination in React?
• ReactJS Pagination Example
• Conclusion

Start learning React from scratch watch our React JS Full Course:

What is Pagination in ReactJS?

Pagination in ReactJS refers to dividing a large set of data into smaller, more manageable portions or pages. It allows users to navigate through these pages, typically by providing links or buttons to access the previous or next data page.

In React, pagination is often implemented by creating a component that receives the total number of items and the number of items to be displayed per page as props. The component calculates the total number of pages using these values and keeps track of the current page.

The component updates the current page when the user interacts with the react pagination component by clicking on a page number or the next/previous buttons. It triggers a re-render, displaying the relevant data for that page.

This approach helps enhance performance by loading and rendering only a subset of data at a time rather than loading the entire dataset upfront. It also provides a better user experience by simplifying navigation through large sets of information.

Become an expert in React by learning from experts through our React JS Course.

Why is Pagination Important? 

Pagination is an essential feature in web development for several reasons. Below, we point out some of the reasons why pagination is important.

• Enhances Performance: It enhances performance by dividing extensive data sets into smaller, more manageable portions or pages. This helps reduce load time and bandwidth consumption, as only a subset of data is loaded and displayed simultaneously.
• Improves User Experience: Pagination improves user experience by simplifying navigation through large datasets. Users can easily browse through different data pages using intuitive page numbers or navigation buttons. This makes it easier for users to find the information they are looking for without overwhelming them with excessive data on a single page.
• Efficient Use of Screen: Pagination allows for the efficient use of screen real estate. By displaying a limited number of items per page, developers can design clean, organized, and easily read interfaces. It also enables responsive design, making adapting the user interface to different screen sizes and devices easier.
• Manages Calculations: In ReactJS, implementing pagination can be done by creating a component that calculates the total number of pages based on the total number of items and the desired items per page. The component can then handle user interactions and update the current page, triggering the rendering of the relevant data.

Kick start your learning journey of React.Js visit ReactJS Tutorial.

How to Implement Pagination in React?

To implement pagination in ReactJS, follow the steps below. This is a simple approach that you can customize and enhance based on your specific requirements:

Step 1: Install the Required Dependencies

Start by creating a new React project or navigating to your existing React project directory. Open a terminal and install the following dependencies:

npm install react react-dom

Step 2: Create a react Pagination Component
Create a new file called Pagination.js in your React project’s components folder. Open the file and add the following code:

import React from 'react';
const Pagination = ({ currentPage, totalPages, onPageChange }) => {
  const getPageNumbers = () => {
    const pageNumbers = [];
    for (let i = 1; i <= totalPages; i++) {
      pageNumbers.push(i);
    }
    return page numbers;
  };
  return (
    <div className="pagination">
      {currentPage > 1 && (
        <button onClick={() => onPageChange(currentPage - 1)}>
          &laquo; Prev
        </button>
      )}
      {getPageNumbers().map((page) => (
        <button
          key={page}
          onClick={() => onPageChange(page)}
          className={currentPage === page ? 'active' : ''}
        >
          {page}
        </button>
      ))}
      {currentPage < totalPages && (
        <button onClick={() => onPageChange(currentPage + 1)}>
          Next &raquo;
        </button>
      )}
    </div>
  );
};
export default Pagination;

Step 3: Use the react Pagination Component

In your desired component where you want to implement pagination, import the Pagination component. Use it in your component’s render function like this:

import React, { useState } from 'react';
import Pagination from './components/Pagination';
const YourComponent = () => {
  const [currentPage, setCurrentPage] = useState(1);
  const totalPages = 10; // Total number of pages
  const handlePageChange = (page) => {
    setCurrentPage(page);
    // Add your logic here to fetch data for the new page
  };
  return (
    <div>
      {/* Render your content */}
      <h1>Your Content</h1>
      {/* Render the Pagination component */}
      <Pagination
        currentPage={currentPage}
        totalPages={totalPages}
        onPageChange={handlePageChange}
      />
    </div>
  );
};
export default YourComponent;

Step 4: Style the react Pagination Component

Customize the pagination component by adding CSS classes or utilizing a CSS-in-JS solution like styled-components.

This is a basic implementation of pagination in ReactJS. You can customize it further by adding additional features.

*Note- Ensure that you have the necessary dependencies installed and utilize the provided code as a guide for implementing pagination in ReactJS.

Get ready for your next React interview by going through the most asked React Interview Questions.

ReactJS Pagination Example

Here is a detailed example of ReactJS pagination:

import React, { useState } from 'react';
const Pagination = ({ totalItems, itemsPerPage }) => {
  const [currentPage, setCurrentPage] = useState(1);
  const totalPages = Math.ceil(totalItems / itemsPerPage);
  const handlePageChange = (pageNumber) => {
    setCurrentPage(pageNumber);
  };
  return (
    <div>
      {/* Render page numbers or navigation buttons */}
      {/* Handle click event to update current page */}
      {/* Render data for the current page */}
    </div>
  );
};
export default Pagination;

In this example, the ‘Pagination’ component receives the total number of items and the number of items to be displayed per page as props. It uses the ‘useState’ hook to manage the current page state and calculates the total number of pages using the ‘Math.ceil’ function. The component can then handle page change events and render the relevant data based on the current page.

Go through these Android Developer Interview Questions to excel in your interview.

Conclusion

By implementing pagination, developers can provide a seamless and organized browsing experience. We explored a practical example of ReactJS pagination, demonstrating its usage in a real-world scenario. With the step-by-step guide on implementing pagination in React, you now have the knowledge and tools to incorporate this valuable feature into your projects. Pagination is essential to web development because it empowers users and improves overall site usability.