Pagination is a common requirement in many web applications, where data is displayed in chunks or pages. In this blog post, we’ll learn how to create a custom React hook called usePagination that encapsulates the pagination logic and provides an easy-to-use interface for paginated data.

Table of Contents

• Introduction
• Implementing the usePagination Hook
• Using the usePagination Hook
• Conclusion

Introduction

Pagination involves dividing a large set of data into smaller, more manageable chunks. It allows users to navigate through different pages of data, improving the overall user experience. In React, we can create a reusable hook that handles the pagination logic and provides the necessary information to render paginated data.

Implementing the usePagination Hook

Let’s start by creating a usePagination hook. We’ll use the useState hook to manage the current page, the useEffect hook to fetch paginated data, and additional state variables for controlling the pagination.

import { useState, useEffect } from 'react';

const usePagination = (initialPage = 1, pageSize = 10) => {
  const [currentPage, setCurrentPage] = useState(initialPage);
  const [totalPages, setTotalPages] = useState(0);
  const [isLoading, setIsLoading] = useState(true);
  const [data, setData] = useState([]);

  useEffect(() => {
    // Fetch paginated data based on the current page and pageSize
    const fetchPaginatedData = async () => {
      setIsLoading(true);
      try {
        // Perform API call or fetch data from a source
        // based on your application's requirements
        // ...
        // Set the fetched data and total pages
        setData(/* Fetched paginated data */);
        setTotalPages(/* Total number of pages */);
      } catch (error) {
        // Handle error if any
      } finally {
        // Mark loading as complete
        setIsLoading(false);
      }
    };

    fetchPaginatedData();
  }, [currentPage, pageSize]);

  return {
    currentPage,
    totalPages,
    isLoading,
    data,
    goToPage: setCurrentPage,
  };
};

In the usePagination hook, we define the currentPage, totalPages, isLoading, and data state variables. We also define a goToPage function that allows us to navigate to a specific page.

Using the usePagination Hook

To use the usePagination hook, we can simply import it and call it within our components. Here’s an example of applying the hook to display paginated data:

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

const PaginatedData = () => {
  const { currentPage, totalPages, isLoading, data, goToPage } = usePagination();

  if (isLoading) {
    return <div>Loading...</div>;
  }

  return (
    <>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>

      <div>
        <button onClick={() => goToPage(currentPage - 1)} disabled={currentPage === 1}>
          Previous
        </button>
        <span>Page {currentPage} of {totalPages}</span>
        <button onClick={() => goToPage(currentPage + 1)} disabled={currentPage === totalPages}>
          Next
        </button>
      </div>
    </>
  );
};

export default PaginatedData;

In this example, we render the paginated data and provide navigation buttons to move between pages. The goToPage function is used to update the current page when the previous or next buttons are clicked.

Conclusion

In this blog post, we have learned how to create a custom usePagination hook for implementing pagination logic in React. This hook provides a simple way to paginate data and manage the current page, total pages, and loading state. By abstracting the pagination logic into a reusable hook, we can easily incorporate pagination into any React application. Happy coding!

#seo #reactjs