How to Implement Pagination in React Using React Hooks
Web applications manage large amounts of data. For instance, e-commerce applications display billions of data in a way that is both organized and visually appealing. Essentially, the data needs to be presented in a manner that is easy for users to understand and navigate.
However, rendering all the data on a single page can lead to performance issues, slower loading times, and poor user experiences. For this reason, implementing pagination logic can significantly alleviate these problems.
In React, you can opt to utilize pre-built components provided by pagination libraries, alternatively, you can build a custom pagination system using React hooks.
Implementing Client-Side Pagination
There are two ways to implement pagination in applications: client-side and server-side pagination. Nonetheless, regardless of the format you choose, the underlying concept remains the same. Client-side pagination involves handling the pagination logic on the client side, within the user’s browser.
You can implement client-side pagination using various techniques. These techniques include:
Implementing Page-Based Pagination Using React Hooks
To get started, create a React project. You can either use thecreate-react-app JavaScript command to set up a basic React applocally orutilize Vite to scaffold a React projecton your machine.
This tutorial has utilized Vite, you’re able to find this project’s code in thisGitHub repository.
After setting up your React project, let’s proceed with implementing page-based paginationusing React Hooks.
Configuring the Dataset
Ideally, you would typically fetch and display data from a database. However, for this tutorial, you will fetch data from a dummyJSONPlaceholder APIinstead.
In thesrcdirectory, create a newcomponents/paginationfile, and add the following code.
In this particular case, the rendered list consists of two hundred to-dos. However, in real-world scenarios, applications will manage large amounts of data. Displaying all this data on a single web page can result in performance issues, such as slow-loading times and overall poor application performance.
To address this, it would be suitable to incorporate pagination functionality to ensure each page contains a limited number of items that users can access separately by using the navigation buttons.
This approach allows users to navigate through the data in a more manageable and organized manner, improving the overall performance and user experience of the application.
Implementing Pagination Logic for Displaying a Limited Number of Items Per Page
To determine which to-do items will render on each page, we need to implement the necessary logic. However, before proceeding, it is essential to determine the total number of pages required based on the available to-do items.
To achieve this, you can add the following code to thePaginationcomponent:
The code snippet above, iterates through thedataarray, calculating the total number of pages needed by dividing the length of thedataarray by the desired number of items per page—the initial number of items per page is set to five in theitemsPerPagestate.
Nonetheless, you can update this number as required to test out the logic. Lastly, each page number is then added to thepagesarray. Now, let’s implement the logic for displaying a number of items per page.
This code determines the to-dos to render on the browser page based oncurrentPageanditemsPerPagevariables—it extracts the corresponding indexes for the set of to-dos from the data array using the slice method. The indexes are then used to retrieve the specific to-dos that belong to the desired page.
Now, to display the to-dos, update thedisplayDatafunction by passing thepageItemsas a parameter. Here’s an updated version of the code:
By making this update, thedisplayDatafunction will render a limited number of to-do items appropriately, reflecting the current page.
Streamlining Page Access and Navigation With Navigation Buttons
To ensure users easily navigate and access content on different pages, you need to add previous and next buttons, as well as, buttons that specify the specific page numbers.
First, let’s implement the logic for the page number buttons. In thePaginationcomponent, add the code below.
ThehandleClickfunction triggers when a user clicks a page number button. This action then updates thecurrentPagestate variable with the selected page number.
TherenderPageNumbersvariable utilizes themapmethod to iterate over thepagesarray and dynamically generates list items representing each page number. It applies conditional logic to determine which page numbers to render based on the defined maximum and minimum page numbers' limits.
Finally, add the code for the next and previous buttons.
To render the navigation buttons, update the JSX elements as follows:
Once the component renders, it will display the page numbers, previous and next buttons, and the corresponding data items for the current page.
Choosing Between Pagination Libraries and Custom Pagination Systems
When it comes to deciding between using pagination libraries or building a custom pagination system, the choice depends on various factors. Pagination libraries, such as react-paginate, provide pre-built components and functionality, allowing for quick and straightforward implementation.
On the other hand, building a custom pagination system using React hooks offers more flexibility and control over the pagination logic and user interface. The decision will ultimately depend on your specific needs and preferences.
Pagination is a useful technique that most data-heavy apps can benefit from. The react-paginate library helps you simplify this process.
The fix was buried in one tiny toggle.
One casual AI chat exposed how vulnerable I was.
Windows is great, but adding this makes it unstoppable.
Your phone’s camera app doesn’t show this, so it’s easy to miss.
It’s not super flashy, but it can help to keep your computer up and running.
