Pagination in React Tutorial with React Query, Hooks Examples

This pagination in React tutorial gives two full examples with React hooks and React Query. You will learn how to display pages of query data, numbered buttons, and create next page, previous page, first page and last page functions for navigation.

⭐ Become a full-stack web dev with Zero To Mastery Courses:

Pagination in React Tutorial with React Query, Hooks Examples

(00:00) Intro
(00:33) Welcome
(00:43) Installing dependencies
(01:32) Tutorial Pace
(02:02) Begin Example #1: Axios
(03:50) React hooks only, Basic API
(04:37) Post component
(04:51) useEffect
(05:38) Complete Example1 component
(07:16) Check Example #1 functionality
(08:57) Begin Example #2
(09:17) User component
(09:40) More useful API data
(10:55) Axios instance #2
(11:53) Example #2 imports
(12:37) React Query: useQuery
(14:01) React Query: isPreviousData and keepPreviousData
(15:19) More Example2 component
(18:47) PageButton component
(19:39) Example2 JSX
(20:05) Example #2 functionality
(21:03) Change next & previous to first & last
(21:57) Test the new functions

📚 Tutorial References:

🔗 ES7 React JS Snippets Extension for VS Code:

🔗 React Dev Tools Extension for Chrome:

📚 General React References:

✅ Follow Me:

Was this React Pagination tutorial helpful? If so, please share. Let me know your thoughts in the comments.

#react #pagination #tutorial

[raymondmichael]

Dude now you're becoming my addiction.
Please more examples with redux-toolkit,
I'm watching your Playlist this whole week

[bakaryditdadadrame]

Thank you very much, you're one of the best teachers and coders on YouTube. You're a pro coder, your content helped me a lot. God bless you, Dave!!!

[evgeniy]

Thanks man! Best pagination performance I've found on youtube.

[Pareshbpatel]

An excellent illustration of using Pagination of API Data, with and without react-query. Concise, yet comprehensive Thanks, Dave

{2022-11-17}

[nicholasbrown]

I have been waiting for videos like this. I wish you could do videos on key functionalities in React like Search, Pagination etc. Great work Dave!

[nixonlim]

Thank you for making this! I love react query, one of my favourite react library out there! I hope you can make a tutorial about react table library soon...

[ahmad-murery]

Hello,

On example#2 at 16:47 we can benefit from Array.from() method to create pageArray range like this:
const pageArray = Array.from({length:user.total_pages}, (_, i) => i+1)
or

const pageArray = Array.from(Array(user.total_pages), (_, i) => i+1)

also, when clicking first/last buttons the first/last page number didn't highlighted,
maybe we can set a "selected" class on page buttons according to the page number came back from the api

Thanks Dave, that was awesome video as usual,

[aileenchan]

Thank you for always sharing great content! : )

[santosh_ksh]

Awesome man. It really helped me to glide smoothly.

[WildHowlYT]

Great job, there is always something to learn about React 💙

[Andreas-oqgz]

Your content is beneficial for me. thank you so much, Dave!
if you don't mind can you create a tutorial for pagination using rtk query? Thank you

[vincent]

hello dave, as usual your content is beyond my expectation 😉😍`
oh yeah, regarding react query, in general can you say that the concept and implementation that RQ has, is the same or even exceeds redux?
because I see that RQ is very popular and in demand by many users, especially about the infiniteScroll 💪🔥

[usamasaleem]

Your content is very awesome and advanced. I have one request can you please make a react query series and some advanced topics like AWS, Remix, Redis, GraphQL, Microservices, Microfrontend, React Advanced Code Structure and also some Advanced React Native. I know it takes a lot of time. When you have time so please make the videos on mentioned topics it's very helpful for us

And once again thanks for the awesome content.

[varileshtlesht]

Thnx Dave, great explanation.
Are you planing on releasing Typescript videos? Ore some kind of MERN project with redux and Typescript?

[biLLie_wiLLie]

Should the backend give client paginated data? Is it good if you get 100k users list and make pagination in react?

[divewithsk]

in example 2 i am getting blank screen in console this error is coming how to solve this error..

//Uncaught Error: No QueryClient set, use QueryClientProvider to set one//

[RdozeTV]

Can you please use typescript next time. Javascript is obsolete no one using that

[maximodakila]

Oh please, be a grown up and use typescript