DEV Community

React: Creating a Custom Hook for Pagination

Sebastian on March 01, 2020

In this article, we will implement a generic, reusable pagination mechanism. We will achieve this by implementing our own custom hook. Wh...
Collapse
 
leotocca profile image
Leonardo Toccaceli • Edited

Hi, Sebastian!

Got a quick question on the actual usage of the Hook (amazing work by the way).

I have used the hook as is used in the codesandbox example available in one of the comments of this post.

The problem I'm facing is that in the codesandbox example the app works with data that is available right away -it's stored in a json file within the project-, so it's accessible during the initial render. I am working with data fetched from an API that is then stored in a redux store. On the first render the data is not available.

I am getting completely logical errors about reading and accessing data in a variable that holds undefined as a value until the request to the server is done, answered and stored.

I have been trying to think of a work around using the currentData() method, or trying to serve a different component until the data is populated but I get errors about rendering more hooks than the initial render (as the hooks should be on the top level and I would achieve this behaviour with and if/else statement).

Do you have any idea on how could I use this hook with async data? Been thinking about it for a while now but couldn't figure it out.

Thanks in advance!

Collapse
 
leotocca profile image
Leonardo Toccaceli

For anyone reading this question, I could figure out how to solve this issue with a simple feature. I added an empty array as a default parameter to the "data" parameter in the Hook.

function usePagination(data = [], itemsPerPage) { ... }
Enter fullscreen mode Exit fullscreen mode
Collapse
 
rvasquez profile image
Rogger Vasquez

Posting your own solution to helps other that may face the same issue deserves recognition. Thank you!

Collapse
 
codenamejason profile image
Jaxcoder

One thing I think some users would like to see is how you implemented this in your application. I use pagination code very similar and avoid Redux as well and was curious how you were using the pagination and how big is your data-set you are using with it?

Collapse
 
admantium profile image
Sebastian

Hi Jax, I'm using it for the board game search component and user timeline entries. When searching for a board game, some queries return more than 30 games. With the pagination hook, I neatly divide them into buckets of 10 game to show in a table.

Collapse
 
nodefiend profile image
chowderhead

a code implementation of how you use it would be helpful :D

Thread Thread
 
macoacero profile image
Maco Acero
Collapse
 
trangtt1054 profile image
trang-1054

Exactly what I'm looking for. Thanks man, such a big help!

Collapse
 
sachin7 profile image
Sachin Yadav

Thank You Sebastian this helped me alot

Collapse
 
fiaz_com profile image
fiaz ahmed

Hi,@admantium great post about usePagination custom-hooks .can you please help how to use it in a table which shows list of items. regards
fiaz ahmed ranjha

Collapse
 
jmanuelsc profile image
jmanuelsc

Hi, I'm new in React, I start with one Api in REact , redux , hooks , but how can insert your Code in mi list code .map() , I use Thunk too. Sorry my english is horrible , I'm from Perú. Thanks

Collapse
 
v3nt profile image
v3nt

nice - where do you set itemsPerPage?