Making Paginations with React and TypeScript

In this article, I will show you how to create a pagination in your React and Typescript app. We will be building a blog with the post data being fetched from JSONPlaceholder.

But first

What is pagination and why do we use it?

To keep things simple, pagination is a way of splitting large amounts of information into smaller, easier to manage chunks, typically displayed across multiple pages.

We use pagination to

• Make content more manageable: Instead of showing everything at once, pagination divides content into smaller sections, making it easier for users to browse through.
• Improve loading times: By loading only a portion of the content at a time, pagination reduces the initial load times of a page, making it faster for users to access information.
• Enhance user experience: Pagination helps users navigate through content more easily, improving overall usability and making it simpler to find what they're looking for.

Now that we know what pagination is, lets build our own!

Note: Due to the scope of the article, I'll only strictly speak on the pagination logic. I won't be covering how I made my custom components or hooks. However, the code is available to view in the accompanying live demo.

Starting Setup

Here is what we're starting with

• We get our post data from useFetchPosts
• The post data gets mapped, deconstructed and then gets passed to a Post component to be rendered

At this point, you should see 100 posts on the page.

Creating The Dropdown To Specify Amount Of Posts Per Page

Now we need to figure out a way to specify how many posts to show.

First, we create a state to store the itemsPerPage value using useState.

Then we create an array to store the options for the numbers per page.

We then create a Dropdown that renders the options and updates the itemsPerPage value when an option is selected.

Creating the pagination

Before creating the custom Pagination component, we first have to create some variables for it to use

• currentPage with useState to keep track of what page the user is currently on
• totalPosts which is the total amount of post entries in the post array returned by useFetchPosts
• lastItemIndex is used to specify the index of the last item to be shown. We obtain that value by multiplying the currentPage value by the itemsPerPage value. For example, if we're displaying 25 items per page and currently on the second page, 25 x 2 equals 50. Therefore, the last item to be shown has an index of 50.
• firstItemIndex is used to specify the first item to be shown. The value is obtained by subtracting the lastItemIndex by the itemsPerPage. Going by the previous numbers, our last lastItemIndex values was 50 and our itemsPerPage value is 25 thus our firstItemIndex value to be 25.
• shownPosts then takes both the firstItemIndex value and the lastItemIndex value and splices posts to create a new array which rendered instead of posts. Going by the previous example, shownPosts is now an new array containing all the elements from post between and including the 25th and 50th index.

We then also create a paginate variable that simply updates the currentPage value.

We can now finally create our Pagination component.

• totalPosts is divided by itemsPerPage and rounded up the nearest whole number the provide the total amount of pagination pages. The value is stored in totalPages

• pageNumbers is a array containing page numbers that start from 1 to the value of totalPages. For example, if totalPages is 5, pageNumbers will return [1,2,3,4,5].
• We then use the pageNumbers array and map it to create the pagination buttons with each entry being its own button. Each button has paginate attached as an onClick function which accepts the page number as an argument. When clicked, currentPage will update which then also update shownPosts, giving the app a new set of posts to render.

Here is the final code with the Pagination component

Consider this: while the current solution is effective for managing smaller datasets, imagine the impact of fetching thousands of entries at once. Not only does this lead to potential slowdowns, but it also results in a subpar user experience. A more efficient approach would involve fetching only the posts required for the current page, rather than loading everything at once. This not only enhances performance but also ensures a smoother browsing experience for users.

Here is the full live demo in action

Let me know what think and what other topics to cover in my article!