What is Pagination in React?
In React, pagination is about showing only a segment of data at one time. This approach is key for handling lots of data smoothly. React is a popular JavaScript library for building user interfaces, and it works well with pagination to make web applications more efficient and user-friendly.
React's component-based architecture means we can create a reusable pagination component. This component can be used in different parts of an application wherever we have long lists of data, like a list of posts on a social media feed or products on an e-commerce site. The idea is to load and display just a small chunk of this data at a time.
Using pagination in React helps in managing and presenting data effectively. It ensures that the web application remains fast and responsive, as only a limited amount of data is processed and rendered at any given time. This makes the application more scalable and improves the user experience by reducing load times and saving bandwidth.
Basic Pagination Example
Let's start with a simple example of how to set up basic pagination in a React application. Imagine we have a list of items, and we want to display only 10 items at a time on our page.
First, we need to create a React component that will display our items. In this component, we will keep track of the current page number and the total number of items to display per page.
Here's a basic outline of what our pagination component might look like in code:
import React, { useState } from 'react';
const PaginationExample = ({ items, itemsPerPage }) => {
const [currentPage, setCurrentPage] = useState(1);
// Calculate the total number of pages
const totalPages = Math.ceil(items.length / itemsPerPage)
// Get the items for the current page
const currentItems = items.slice(
(currentPage - 1) * itemsPerPage,
currentPage * itemsPerPage
);
return (
<div>
{/* Display the current items */}
{currentItems.map((item, index) => (
<div key={index}>{item}</div>
))}
{/* Pagination controls */}
<div>
{/* Previous Page Button */}
{currentPage > 1 && (
<button onClick={() => setCurrentPage(currentPage - 1)}>
Previous
</button>
)}
{/* Next Page Button */}
{currentPage < totalPages && (
<button onClick={() => setCurrentPage(currentPage + 1)}>
Next
</button>
)}
</div>
</div>
);
};
export default PaginationExample;
In this example, items is the list of all items we want to paginate, and itemsPerPage is the number of items to show on each page. The useState hook keeps track of the current page. We calculate the total number of pages by dividing the total number of items by the number of items per page and rounding up to the nearest whole number. The slice method is used to grab only the items for the current page based on the currentPage and itemsPerPage.
How to Implement Pagination in React?
Implementing pagination in a React application involves a few steps. We'll break it down to make it simple to follow. The goal here is to create a component that can be used to paginate any list of data you might have.
Step 1: Setting Up State
First, we use the useState hook to set up state variables. We'll need one for the current page and maybe another for the number of items per page if that might change.
const [currentPage, setCurrentPage] = useState(1);
const [itemsPerPage, setItemsPerPage] = useState(10); // Example: 10 items per page
Step 2: Splitting the Data
We need to split our list of data based on the current page and the number of items per page. We use the array's slice method for this.
const indexOfLastItem = currentPage * itemsPerPage;
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
const currentItems = items.slice(indexOfFirstItem, indexOfLastItem);
Step 3: Creating the Pagination Controls
We'll need buttons or links for navigating between pages. At a minimum, you'll want "Previous" and "Next" buttons, but you might also want individual page numbers.
<div>
{currentPage > 1 && (
<button onClick={() => setCurrentPage(currentPage - 1)}>Previous</button>
)}
{currentPage < totalPages && (
<button onClick={() => setCurrentPage(currentPage + 1)}>Next</button>
)}
</div>
Step 4: Rendering the Current Items
Now, we render the currentItems to display the data for the current page.
<div>
{currentItems.map((item, index) => (
<div key={index}>{item}</div>
))}
</div>
Complete Example
Combining all these steps, here's a simplified version of a pagination component in React:
import React, { useState } from 'react';
const PaginationComponent = ({ items }) => {
const [currentPage, setCurrentPage] = useState(1);
const itemsPerPage = 10;
const totalPages = Math.ceil(items.length / itemsPerPage);
const indexOfLastItem = currentPage * itemsPerPage;
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
const currentItems = items.slice(indexOfFirstItem, indexOfLastItem);
return (
<div>
{currentItems.map((item, index) => (
<div key={index}>{item}</div>
))}
<div>
{currentPage > 1 && (
<button onClick={() => setCurrentPage(currentPage - 1)}>
Previous
</button>
)}
{currentPage < totalPages && (
<button onClick={() => setCurrentPage(currentPage + 1)}>Next</button>
)}
</div>
</div>
);
};
export default PaginationComponent;
In this component, items is the complete list of data you want to paginate. The component calculates the total pages, determines the range of items for the current page, and sets up buttons for navigating between pages. This setup ensures that your application can handle large lists of data efficiently, improving the user experience by reducing load times and making the data easier to browse.
Props
In React, "props" is short for properties. They are a way of passing data from parent to child components. Think of props like parameters we use in functions; they help us give components the info they need to work properly.
When it comes to pagination in React, props play a crucial role. They allow us to make our pagination component reusable in different parts of our application. For example, we might have a list of products on one page and a list of blog posts on another. We can use the same pagination component for both lists by passing different data through props.
Here are some common props we might use in a pagination component:
-
items: The full list of items we want to paginate.
-
itemsPerPage: How many items we want to show on each page.
-
currentPage: The current page number that the user is viewing.
-
setCurrentPage: A function to update the current page number.
Using props, we can make our pagination component flexible and adaptable to different situations. Here's an example of how we might use props in our pagination component:
<PaginationComponent
items={products}
itemsPerPage={10}
currentPage={currentPage}
setCurrentPage={setCurrentPage}
/>
In this example, products is an array of items we want to paginate, 10 is the number of items per page, currentPage is a state variable tracking the current page, and setCurrentPage is a function to update this state. By passing these as props, our pagination component knows exactly what to display and how to behave, making it a powerful and versatile tool in our React applications.
Frequently Asked Questions
Can pagination be used with any type of data?
Yes, pagination can work with various types of data, such as lists of users, products, blog posts, or search results. As long as the data can be organized in a list, it can be paginated.
Is pagination better than infinite scroll?
It depends on the context. Pagination is great for data that users might want to reference or jump between, like search results or e-commerce products. Infinite scroll is more suited to content consumption, like social media feeds, where users are likely to keep scrolling without needing to go back.
How does pagination improve website performance?
Pagination limits the amount of data loaded and displayed at once, reducing server load and page rendering times. This leads to quicker load times and a smoother user experience, especially for data-heavy applications.
Conclusion
In this article, we have learned pagination in React, starting from what pagination is to implementing it with a basic example. We've covered how to set up pagination in a React application, step by step, and discussed the role of props in making our pagination component reusable across different parts of an application.
You can refer to our guided paths on the Coding Ninjas. You can check our course to learn more about DSA, React Js Course, DBMS, Competitive Programming, Python, Java, JavaScript, etc. Also, check out some of the Guided Paths on topics such as Data Structure and Algorithms, Competitive Programming, Operating Systems, Computer Networks, DBMS, System Design, etc., as well as some Contests, Test Series, and Interview Experiences curated by top Industry Experts.
27+ registered 
