2022-03-11
4459
#react
Sampath Gajawada
96445
Mar 11, 2022 â‹… 15 min read

React pagination from scratch using hooks

Sampath Gajawada I'm a full-stack developer who always wishes to implement new and challenging elements in my daily life. Currently, my focus is on React and Vue.

Recent posts:

Frontend Devs Aren't Lazy, They're Burnt Out

Frontend developers are burned out, not lazy

Shipping modern frontends is harder than it looks. Learn the hidden taxes of today’s stacks and practical ways to reduce churn and avoid burnout.

Shalitha Suranga
Sep 15, 2025 â‹… 4 min read

Can native web APIs replace custom components in 2025?

Learn how native web APIs such as dialog, details, and Popover bring accessibility, performance, and simplicity without custom components.

Daniel Schwarz
Sep 12, 2025 â‹… 9 min read
too many tools: How to manage frontend tool overload

Too many tools: How to manage frontend tool overload

Read about how the growth of frontend development created so many tools, and how to manage tool overload within your team.

Shalitha Suranga
Sep 11, 2025 â‹… 12 min read
shruti kapoor the modern ai stack

What you actually need to build and ship AI-powered apps in 2025

Discover what you actually need to build and ship AI-powered apps in 2025, with tips for which tools to choose and how to implement them.

Shruti Kapoor
Sep 10, 2025 â‹… 10 min read
View all posts

3 Replies to "React pagination from scratch using hooks"

  1. Hi, This is great article about pagination.
    What if, we wanted to show the button to show last page and first page

  2. Hi, Although the approach for creating pagination is great and easy. I’m bit concerned about what will happen if current page won’t load then we will end up showing current page on UI but with the old data.

    IMHO It would be great if we just set current page once page data is fetched. and in next and previous calls we just increment and decrement current page with a local variable.

  3. There is bug with the code on github
    fetch(`https://api.instantwebtools.net/v1/passenger?page=${currentPage}&size=5`) instead of
    fetch(`https://api.instantwebtools.net/v1/passenger?currentPage=${currentPage}&size=5`)
    in teh file Passenger.js

Leave a Reply