How to Create Dynamic Pagination in ReactJS [Step-by-Step with GitHub]?

If you’ve ever scrolled endlessly through a huge product list, blog, or data table then you know how frustrating it can get.

Static lists in web apps not only harm user experience but also negatively impact app performance, especially as data volumes increase.

That’s where dynamic pagination in ReactJS comes in.

With smart React pagination, you can break large datasets into manageable chunks, reduce loading time, and give users a faster, cleaner, and more intuitive experience.

Whether you’re building a dashboard or a content-heavy site, implementing dynamic pagination in React is a game-changer for both performance and usability.

In this blog, we’ll show you exactly how to create a dynamic, reusable ReactJS pagination component complete with code, and a GitHub link you can clone right away.

What is Pagination and Why Does it Matter in React Apps?

Pagination is the process of dividing content into discrete pages.

It’s widely used in web development to improve data handling and navigation, especially when working with large datasets.

In React apps, pagination helps:

• Improve performance by loading only limited data at once.
• Simplify UI and user interaction.
• Manage API calls efficiently (when working with backend data).

This tutorial focuses on client-side pagination in React, which is perfect when you’re working with local arrays or API data fetched in bulk.

If you’re looking for a beginner-friendly React pagination tutorial, you’re in the right place.

Learn about the difference between ReactJs vs JavaScript.

How Many Types of Pagination in React?

When building a paginated system in React, you’ll generally come across these two types:

1. Static Pagination

• Loads predefined pages or sets of data. Not flexible for dynamic content or APIs.

2. Dynamic Pagination

Adjusts in real-time based on data length, user interaction, or API responses. Ideal for scalable apps.

You’ll also see pagination categorized based on data source:

• Client-side pagination in React: Best when all data is available at once (e.g., from a local array).
• Server-side pagination: Useful when data is fetched from APIs in chunks, especially for huge datasets.

In this blog, we’ll focus on building dynamic pagination in ReactJS using a reusable ReactJS pagination component that works smoothly with your front-end data.

How to Set Up the React Project?

Before we jump into building the pagination, let’s set up a clean React environment.

Whether you’re a developer working on a dashboard or an entrepreneur validating an MVP, this setup will help you create your own React pagination component quickly.

Tools You’ll Need:

• ReactJS: The core framework for building UI components.
• Npm: Node package manager for installing
• Code editor: We recommend VS Code.

Basic Project Setup

          
           npx create-react-app react-pagination-demo
           cd react-pagination-demo
           npm start
          
        

No external dependencies are needed for this React pagination example code, we’ll build everything from scratch to keep it lightweight and flexible.

A Step-by-Step Guide to Create Dynamic Pagination in ReactJS

Here’s how to create a simple yet dynamic pagination in ReactJS using hooks and clean UI logic.

This section walks you through step-by-step, perfect for beginners and business dev teams alike.

Step 1: Display a Sample Dataset

In App.js, create an array of data (could be replaced with API later):

          
           const data = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`);
          
        

Step 2: Create a Reusable Pagination Component

Create a new file: Pagination.js

          
           import React from 'react';
 
            const Pagination = ({ totalPages, currentPage, onPageChange }) => {
              const pages = [...Array(totalPages).keys()].map(num => num + 1);
            
              return (
              <div className="pagination">
                {pages.map(page => (
                  <button
                    key={page}
                    onClick={() => onPageChange(page)}
                    className={page === currentPage ? 'active' : ''}
                  >
                    {page}
                  </button>
                ))}
              </div>
              );
            };
            export default Pagination;
          
        

This is a clean, modular React pagination component that you can reuse across projects.

Step 3: Manage Page State in App.js

          
            import React, { useState } from 'react';
            import Pagination from './Pagination';
            
            const App = () => {
              const data = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`);
              const itemsPerPage = 10;
              const [currentPage, setCurrentPage] = useState(1);
            
              const lastItem = currentPage * itemsPerPage;
              const firstItem = lastItem - itemsPerPage;
              const currentItems = data.slice(firstItem, lastItem);
            
              const totalPages = Math.ceil(data.length / itemsPerPage);
            
              return (
              <div>
                <h1>ReactJS Pagination Example</h1>
                <ul>
                  {currentItems.map((item, idx) => (
                    <li key={idx}>{item}</li>
                  ))}
                </ul>
            
                <Pagination
                  totalPages={totalPages}
                  currentPage={currentPage}
                  onPageChange={setCurrentPage}
                />
              </div>
              );
            };
            export default App;
          
        

This is a complete React pagination tutorial with code, ideal for dynamic lists.

Optional Styling

In App.css, you can add basic styles:

          
           .pagination button {
              margin: 0 5px;
              padding: 5px 10px;
              border: none;
              background: lightgray;
              cursor: pointer;
            }
            
            .pagination .active {
              background: #007bff;
              color: white;
            }
          
        

Now you have a fully functioning ReactJS pagination example with GitHub-ready structure.

Explore the Dynamic Pagination in ReactJS Code on GitHub.

Tips to Make Pagination SEO + UX Friendly

Pagination isn’t just about breaking up content, it can also impact search visibility and accessibility.

Here are a few expert tips to take your ReactJS pagination to the next level:

• Add page numbers in URLs: Helps with SEO and browser history.
• Use lazy loading: Load only the necessary data as users scroll or click.
• Make it accessible: Add keyboard navigation and ARIA roles.

By implementing these best practices, your app’s SEO pagination ReactJS setup will not only rank better but also deliver a smoother pagination UX in React.

Learn to migrate React App to Next.Js.

Why Choose Seven Square for ReactJs Pagination and Frontend Development?

At Seven Square Tech, we’ve helped dozens of startups and enterprises to improve their web apps with high-performance ReactJS features including custom pagination components.

Whether you need client-side pagination, dynamic pagination React components, or complete ReactJS frontend solutions, our developers build efficient, scalable, and SEO-friendly systems that are ready for real-world challenges.

• Custom React Components: From dashboards to product listings, we develop modular and scalable frontend components for all use cases.
• API Integration Ready: Smooth pagination with APIs using ReactJS + Axios or fetch, supporting both client-side and server-side pagination.
• Enterprise-Grade Solutions: Trusted by startups & growing companies for ReactJS UI/UX enhancements and frontend transformation.
• Flexible Engagement Models: Hire our dedicated ReactJS developers or partner with us for full-cycle frontend app development.

Want to get a Fully-Featured ReactJs app? Contact Us Now!

What Are the Common Pagination Use Cases in Real-World React Apps?

Pagination is everywhere, especially in data-driven apps.

Here are some practical examples where you can apply React pagination to improve both UX and performance:

• Admin dashboards: For listing users, transactions, logs, etc.
• E-commerce product listings: Paginate thousands of items efficiently.
• Blog/article pages: Let users browse posts page by page.

Whether you’re working on B2B tools or public-facing apps, these React pagination use cases show how important this feature is in modern development.

Most ReactJS real apps use pagination to keep the UI clean and responsive.