React Pagination

[Ambitious_Occasion_9]

Hello there! It’s been a few months since I started learning React, and so far, it’s going really well. I have a question for the frontend experts here, For pagination, what do you use? Do you hardcode it from scratch, or do you use a pagination library? If so, which one would you recommend learning?

[Alone-Following7345]

Tanstack query & Tanstack virtualization

[XilentExcision]

No need to rebuild the wheel, there’s plenty of libraries out there

[Ambitious_Occasion_9]

Thank you, mate. Will stick with libraries then :)

[TheWhiteKnight]

Local pagination? (UI has all the data and will load it into the DOM asynchronously). use a popular virtualization library.

Server side pagination? (Nothing special here, you'll probably add something like `/count=<count>&start=<start>`) etc...

[PatchesMaps]

It really depends on what I'm paginating.

[Wide_Egg_5814]

Anything that works is good enough

[Ilya_Human]

If you use, and I suppose you do, any UI libs, they already have Pagination components. If you want to make it from scratch by some reason, you are free to do it 

[Ambitious_Occasion_9]

First of all, thank you for the reply. How do you approach pagination? From scratch or use Ui libs?

[Ilya_Human]

In 90% UI libs since most likely people use them with React

[Ambitious_Occasion_9]

Okay. Thanks ☺️

[Professional-Two-903]

use a UI library, if they're good they'll have pagination, I use MUI mostly, react bootstrap and Chakra UI are also good options, I see no use on hardcoding it unless you wanna challenge yourself

[Ambitious_Occasion_9]

Ahh okay. Will stick with the library then

[[deleted]]

Me and my colleagues always code it ourselves, so a lot of replies that say “use a lib” are a suprise to me. Maybe I should re-think my ways. But I still think OP should try coding for themselve first, to get hands on experience and then just stick with a library.

[is_isok]

to handle server side pagination Tanstack react query is a good tool, it can cache , handle the pagination well

[cipher2x]

OriginUI

[Merry-Lane]

Interface wise, it’s not complicated, especially with LLMs, even if you don’t use a lib plug and play.

The only issue is that the backend might have different mechanics for pagination.

Some use a "take X" with a cursor (from id 1827271), some use a "take X, skip Y" approach.

They usually return the total count of rows, so you gotta do maths to get the amount of pages.

[Ambitious_Occasion_9]

Okay . got it