Simple Frontend Pagination | React

In this video we will implement some custom pagination in React to get a certain number of fetched posts per page. We will be using the useState and useEffect hooks as well.
Code:
github.com/bradtraversy/simpl...
Sponsor: Freelancer Bundle (Use "brad25" for 25% off)
studywebdevelopment.com/freel...
💖 Become a Patron: Show support & get perks!
/ traversymedia
Website & Udemy Courses
www.traversymedia.com
Follow Traversy Media:
/ traversymedia
/ traversymedia
/ traversymedia

[@michelezucca5819]

This is like the easiest and most simple way of paginating with React I've seen, much better than many other tutorials, hats off Brad you're always the man

[@niklausmikaelson7332]

Wierd logic

[@WorldXKIZOation]

Even in 2022, This Tutorial is still REALLY HELPFUL! Brad, your videos are such a HUGE help. THANK YOU!!

[@oussemamiled4545]

brad, i really don't have much time but when you post a video, like it's a must watch

[@joejorgensen4509]

This was possibly the best coding tutorial I've ever watched. I've been browsing google for hours just trying to find a decent tutorial and this was easily the best, super straight and to the point and great at explaining everything thats going on. Thank You!

[@pavleta777]

Thank you, Brad! This tutorial was extremely useful! I was struggling with Material UI as beginner in React but you made building pagination to look so easy and clean! You thought me so much and I am very grateful to everything you do for us! Much love!

[@RobertTodar]

I love these short and simple lessons. I learned so much from this. Thank you!

[@vince9593]

Great video TM. You explain things so clearly with additional 'why we do this...' thrown in which gives context rather than just running through lines of code. Thanks !

[@denniszenanywhere]

Waking up with a new Brad video is the best. Thanks!

[@farhan787]

I can't thank you enough Brad, THAAAAAANNNNNNKKKKKKKKKKKSSSSSSSSSSS. a lot for this, I needed to implement it in one of my project on my new job and I'm not good at frontend but because of you, I was able to implement it ❤️❤️❤️❤️

[@igoralves1925]

i've searching about it for a few hours, I watched some video and read some blogs but your content was the only one that really helped me . Thanks !

[@pam_prunelle1693]

With your tutos, I progressed, raised my level. A big thank-you Brad Traversy

[@Gogetta94]

I began taking his class in udemy about a month ago and I will take his courses ever since. great teacher of mine

[@rez41]

This is great. I'm just getting to grips with React and hooks so this was perfect - I may even use pagination in my next project now. Thanks Brad

[@narendrajoshi5460]

Thank you so much Brad. I was the guy who asked for this video..Thank you again for your work..you are my god and my inspiration

[@AbdulelahAlJeffery]

Traversy Media is the new Khan Academy for all things web .. excellent job Brad!

[@romanpabianczyk8870]

Bullshit. This code doesn't work for me.

[@avthreek]

@@romanpabianczyk8870 yeah, it only does for small amount of results. Not for thousands as Brad said in the end.

[@yusuffakhreddin263]

@@avthreek do you know why ?

[@avthreek]

@@yusuffakhreddin263 it is easier to fetch small amount of results when needed, rather than getting ALL the results and paginating them on the front end. For example my table have millions of rows and those rows have even more results attached in foreign tables. So loading them All is very expensive in a loading time and size and it is also unnecessary if user wants to get for example second page results and he will never reach third page. For such large data we paginate on the back end and retrieve pieces of data.

[@yusuffakhreddin263]

@@avthreek thank you

[@diegogimbernat9253]

Dude, I'm putting an altar of you next to my desk, it's official. U are such a great teacher, thanks for all the great content.

[@viktoriazubchenko5428]

wow! Thank you for your video, it was so helpful for me, not only as pagination tutorial, but also as a short lesson about how cool hooks are.

[@aurimasrimkus4705]

This is just amazing, so simple and works like a charm!

[@shivanimathur1356]

Thank you for making this so easy, I've been hitting my head on pagination for 3 days

[@kimmotech]

Thanks a lot man, this really helped me understand how pagination works and now I have a full component I can always reuse

[@tomasliendo3127]

Incredible tutorial :D , well explained step by step and not skipping anything, the truth has helped me a lot, thanks for the time! Greetings from Argentina.

[@dzajakeks5539]

Okay this one really helped, thank you. Even after 4 years, your content is helpful

[@HermesNautico]

Thanks, Brad. This was my first intro to pagination. I tried another instructor but he uses 'lodash' for something you made so simple.

[@Buffnerd_i]

Kind of amazed by how easy this was, ty Brad!

[@Mathis-zk7uq]

Thank you very much :) Can't wait for the full stack video !!!

[@IsaacAsante17]

You actually listened to the request from your users. You really care about your viewers! 😃

[@arifeljutviovska7672]

Man I love you I was searching everywhere for this and it works thank you so much

[@kaytiwari6018]

Phenomenal video, that was crystal clear. Thanks for posting the code too, I'm gonna practice with the Json file. I have a react technical interview coming up so thanks so much for this.

[@Colstonewall]

Just what I needed and wanted. Thank you Brad!

[@madeinbalcony7237]

this is worth not skipping ads. as always, thanks brad :D

[@roman_mf]

Thank you so much Brad! Exactly what I was looking for. This approach was super useful for my own project.

[@rodolfoleal7295]

Just used it on my project. Thank you very much Brad!

[@julielesage960]

Perfect clear and simple, up to date code, and I love your voice ! many thanks

[@ericmomoh7927]

Finally I saw i pagination tutorials that doesn't use a paginated library. Perfect to learn how that really works with actual code.

[@Hashmimohammed]

Transforming many lives with your work. You Rock

[@hn031]

Thanks man. I'm at point in a project where I had to chose which pagination to use. The data coming from the backend is already paginated, but I don't like that a new request had to be sent to the backend each time a new page is requested; I consider this too much load. Then I didn't want to use a package to paginate my data. What I'm left with is to learn how to do the pagination; you just helped out. Thanks a lot . You're saving tons of life and jobs.

[@TheNikola2910]

This helped me get a job! Thank you so much Brad!

[@shauntonesify]

I love you Brad, you saved my life again on another project.

[@aaronkagandev]

Dude you're a G. This is by far the cleanest way i've seen so far

[@BadtzCarol]

Thank you so much for the awesome tutorial! Now I have a pagination component that can use in every project

[@karma_yogi_42]

what a life saver! thanks needed this for a interview assignment!

[@patineira1323]

Simple but solves the need it. Amazing your explanation, thank you so much!

[@kevinurielfonseca]

Exactly what I was looking for, thanks!

[@edwardhui6274]

Straight on point! Great tutorial for pagination on front-end side!

[@markkatona4501]

this video was really helpful, I saw many of them about pagination, but this is a quality content, thank you so much :D

[@nakimapi]

What a great video! Exactly what I was looking for!

[@coolpriyanks]

simple and to the point video. Thank you for making it!

[@parasarora5869]

loved it !!...wanted to learn this for a long time 😄 thank uuu

[@yutamatsumoto7234]

just what I needed the most. thank you for the excellent job!

[@francisfernando4605]

Very easy to understand. Great tutorials. Thank you so much

[@kingofgods898]

Exactly what I was looking for, thank you!

[@manasiroy9510]

Who dislikes this amazing video? This is very very helpful. I just love it.

[@emreaka3965]

They should comment that why did not they dislike the video for. ^^

[@randolphperkins6584]

Great video! I completed this tutorial, and I am looking forward to watching a pagination lesson using the back end. Thank you!

[@GabrielRamirez-rm7qh]

PSA: If using this pagination component inside of a route ,the anchor tag will navigate you away from your route and throw an error. The "!# href is a hack to trigger javascript while avoiding side effects. It can work in some cases but is not semantically correct . The fix for this, and semantically correct option would be to simply remove the href attribute and use a button tag instead of an anchor tag.

[@luizadinizmendesmonteirolu2515]

you saved my fucking life i was having a fucking meltdown

[@dannonabiola8709]

Thanks

[@sir0co]

Nice tip bro, helped me out with that one appreciate it!

[@karryljadeobidos343]

You can also try href="#!" but as you've said, it's still not semantically correct.

[@abc911ish]

U U a a real one thanks

[@josuedanielflores2008]

So useful, thanks for creating this kind of content!

[@gsalazarmusic]

Dude!!! Thank you so much! My nightmares doing paginations are over!!!

[@adrianzawadzki1900]

Great guide, solved the problem in my project, thanks!

[@javadmohammadi3943]

oh thank God finally I find the best video about pagination

[@MrMiguelapb35]

straightforward and functional, perfect

[@TheAditya64]

Great work Brad.... As always loved the work.

[@ridl27]

Thank you Brad for another one useful video. Waiting for full-stack pagination! =)

[@JustAnotherGuyBloger]

Greetings from brazil! All that i needed, thanks!

[@Kagmajn]

wow, you just solved my problem for my current project, well i think i have to check the full tutorial for the react

[@matthiasmatanda4295]

I watched this in 2024, still a valid tutorial, thanks God for Brand Traversy Media

[@dermotsheerin5672]

Thanks a mill Brad that was excellent.....as always you explain all steps

[@natefr0st239]

I liked the video before I even watch it, because I know it's gonna be a good one as any other in that channel.

[@carlosg8716]

Great explanation. Thanks for all your work.

[@sunnydevtale3021]

Thank you, Brad! This tutorial was Awsome.!

[@jasonlee7227]

Thank you soo much, Brad! I really needed this. God bless you.

[@eugenemusebe4963]

I really needed this. Thanks brad

[@wingsaber629]

Thanks Brad! SUPER USEFUL. For the full-stack, put pagination it in your MERN stack course! I will be doing that. Thanks.

[@sudharshaniyengar1587]

Thanks Brad .. Love such cut short videos

[@amirsohail2630]

It was very helpful. Thank you Brad!

[@tarellmorris4621]

This saved my life. Thank you!

[@Szchmausser]

You are a BOSS! Thank you, very concise and helpful.

[@etekumoses3320]

This is an awesome video you saved me countless hours..

[@tatosalusu]

I love you so much, this one is so simple for newbie.

[@ashokk9289]

This is the Best and Easiest Pagination I've ever seen. Thank You Soo Much for this Wonderful video Brad. I'm Your new Subscriber

[@devendradeo5833]

Thanks buddy for the example, it is very simple and correctly explained.

[@yuliiafedorenko_]

Thanks a lot for such kind of content. It really helps!!

[@laurechapert8435]

Extremlely useful tutorial! thanks!!!

[@GustavoPozo]

very good way of pagination, it helped me a lot to set up my pagination system

[@yaoxiao6897]

Awesome, clear and simple to follow.

[@MiguelRochaOporto]

Excelent! Thank you very much. Now I go implement Search in table!

[@aniketa.raikwar1983]

Excellent Video, Thank you so much, without this tutorial i can able to implement pagination.

[@siddhantganesh]

Thanks for your effort . I really appreciate what u r doing ❤️

[@manuelcaceres8977]

Excellent!! Thank you so much. I'm a subscriber now

[@brucelee7782]

omg this dude saved me life!!

[@rebelmachine88]

Thank you for this one, Brad!

[@MistaT44]

Excellent video as always Brad! cheers

[@orkoren2006]

That's an excellent tutorial thank you for that!

[@maxwilsonpereira]

Thank you so much! Already implemented on my project! :-D

[@kiransurage]

Anyone else hits the Like button as they start watching, bcuz its Brad, and u just know it's going to be awesome?

[@asielvalle96]

Thank you for sharing this information. I appreciate it.

[@ShubhamRathod-jg9gt]

Keep post more on React.js related topics (: and congratulations for 777K subscribers

[@jesuscortessantacruz5757]

Amazing, still works today thank you

[@DylanBradRamsey]

Just the best Brad 👏thank you!

[@snehilgajera7057]

Thanks, I was looking for this kind of solution.

[@mekabeka23]

This was the simplest tutorial I've seen all day on pagination. Thank you. I understood 100% all while the simple way to use hooks. You're awesome.

[@Maratreason]

so do I :) Thank you man!

[@ridz4912]

I agree 100%

[@romimaximus]

Brad you are the Man !! Thank you so much !!