Pagination in React: A Reusable Component for Large Datasets

Pagination is essential for efficiently handling large datasets by breaking them into smaller, manageable chunks. It improves user experience by enabling users to navigate content one page at a time.

---

What is a Pagination Component?

A Pagination Component in React enables:

• Displaying page numbers for navigation.
• Navigating between pages using Previous and Next buttons.
• Dynamically rendering data corresponding to the active page.

---

Why Use Pagination?

Pagination is crucial when dealing with large datasets because:

• It reduces rendering time and minimizes browser memory usage.
• It improves user experience by displaying only a subset of data at a time.
• It simplifies navigating through large amounts of content.

---

How to Implement Pagination in React

The implementation involves three components:

1. App Component: Acts as the entry point and renders the ParentComponent.
2. Parent Component: Manages the state of the current page and determines which data to display.
3. Pagination Component: Handles navigation logic, such as generating page numbers and managing button interactions.

---

Step-by-Step Implementation

1. Pagination Component

The Pagination component generates page numbers and provides navigation buttons. It accepts the following props:

• totalItems: Total number of items to paginate.
• itemsPerPage: Number of items per page.
• currentPage: Currently active page.
• onPageChange: Callback function to handle page changes.

import React from 'react';

const Pagination = ({ totalItems, itemsPerPage, currentPage, onPageChange }) => {
  const totalPages = Math.ceil(totalItems / itemsPerPage); // Calculate total pages
  const pageNumbers = Array.from({ length: totalPages }, (_, index) => index + 1); // Generate page numbers

  return (
    <nav>
      <ul style={{ display: 'flex', listStyle: 'none', padding: 0 }}>
        {/* Previous Button */}
        <li>
          <button
            onClick={() => onPageChange(currentPage - 1)}
            disabled={currentPage === 1} // Disable on the first page
          >
            Previous
          </button>
        </li>

        {/* Page Numbers */}
        {pageNumbers.map((number) => (
          <li key={number} style={{ margin: '0 5px' }}>
            <button
              onClick={() => onPageChange(number)}
              style={{
                padding: '5px 10px',
                backgroundColor: currentPage === number ? 'lightblue' : 'white', // Highlight current page
              }}
            >
              {number}
            </button>
          </li>
        ))}

        {/* Next Button */}
        <li>
          <button
            onClick={() => onPageChange(currentPage + 1)}
            disabled={currentPage === totalPages} // Disable on the last page
          >
            Next
          </button>
        </li>
      </ul>
    </nav>
  );
};

export default Pagination;

---

2. Parent Component

The ParentComponent manages the currentPage state and determines the data to display based on the selected page.

import React, { useState, useEffect } from 'react';
import Pagination from './Pagination';

const ParentComponent = () => {
  // Mock Data
  const items = Array.from({ length: 50 }, (_, index) => `Item ${index + 1}`);
  const itemsPerPage = 5;

  // State
  const [currentPage, setCurrentPage] = useState(1);
  const [currentItems, setCurrentItems] = useState([]);

  // Update Current Items When Page Changes
  useEffect(() => {
    const endIndex = currentPage * itemsPerPage;
    const startIndex = endIndex - itemsPerPage;
    setCurrentItems(items.slice(startIndex, endIndex));
  }, [currentPage, items]);

  // Handle Page Change
  const handlePageChange = (pageNumber) => {
    if (pageNumber >= 1 && pageNumber <= Math.ceil(items.length / itemsPerPage)) {
      setCurrentPage(pageNumber);
    }
  };

  return (
    <div>
      <h1>Pagination Example</h1>

      {/* Render Current Items */}
      <ul>
        {currentItems.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>

      {/* Render Pagination Component */}
      <Pagination
        totalItems={items.length}
        itemsPerPage={itemsPerPage}
        currentPage={currentPage}
        onPageChange={handlePageChange}
      />
    </div>
  );
};

export default ParentComponent;

---

3. App Component

The App component serves as the entry point and renders the ParentComponent.

import React from 'react';
import ParentComponent from './ParentComponent';

const App = () => {
  return (
    <div>
      <h1>React Pagination</h1>
      <ParentComponent />
    </div>
  );
};

export default App;

---

Explanation of the Code

Pagination Component:

• Total Pages: Computed by dividing the total items by items per page and rounding up.
• Navigation Buttons:
  • Previous and Next buttons allow navigation between pages.
  • Page numbers enable direct access to specific pages.
  • Current page is highlighted for better UX.
• Disable Conditions: Buttons are disabled if the user is on the first or last page.

Parent Component:

• State Management:
  • currentPage: Tracks the active page.
  • currentItems: Holds the items to display for the current page.
• Dynamic Data Slicing: useEffect recalculates currentItems whenever currentPage changes.
• Handle Page Changes: Updates the currentPage when a user interacts with the pagination controls.

App Component:

• Renders the ParentComponent, acting as the starting point of the application.

---

Output

When this code is executed:

• The data is displayed in pages, with each page containing the specified number of items (itemsPerPage).
• The Pagination component dynamically renders the page numbers and navigation buttons.
• Users can click on Previous, Next, or specific page buttons to update the displayed data.

---

When to Use This Pattern

• Displaying large datasets, such as product lists, user directories, or search results.
• Scenarios where efficient rendering and better UX are necessary.

---

Summary

• What: A reusable Pagination Component in React for handling large datasets efficiently.
• Why: Improves performance by reducing the data displayed at once and enhancing navigation.
• How: Combines state management (useState and useEffect) with navigation logic in the Pagination component.
• When: Use whenever data needs to be split across multiple pages for better rendering and user experience.

---