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:

Effective rendering with Selective SSR in TanStack Start

TanStack Start’s Selective SSR lets you control route rendering with server, client, or data-only modes. Learn how it works with a real app example.

Amazing Enyichi Agu
Sep 8, 2025 â‹… 10 min read
How Cursor Project Rules Can Improve Next.js App Development

How Cursor Project Rules Can Improve Next.js App Development

Learn how Cursor project rules streamline Next.js apps with automated conventions, consistent components, and faster developer onboarding.

Muhammed Ali
Sep 8, 2025 â‹… 4 min read
do not vibe code your backend

Don’t vibe code your backend: The hidden dangers of BaaS

Explore the hidden dangers of BaaS, and how frontend-focused teams can use BaaS platforms without suffering from their major risks.

Peter Aideloje
Sep 4, 2025 â‹… 6 min read
Don’t Let AI Erase The Next Generation Of Dev Leaders

Don’t let AI erase the next generation of dev leaders

As AI tools take over more routine coding work, some companies are cutting early-career dev roles — a short-sighted move that could quietly erode the next generation of tech leaders if we aren’t careful.

Jack Herrington
Sep 4, 2025 â‹… 6 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